refactor: prose component (#289)

zuplo · Dec 18, 2023 · f4629bc · f4629bc
1 parent c4cd9df
commit f4629bc
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 43 deletions.
diff --git a/src/components/Prose.tsx b/src/components/Prose.tsx
@@ -1,41 +1,20 @@
 import clsx from "classnames";
+import { ReactNode } from "react";
 
-export function Prose<T extends React.ElementType = "div">({
-  as,
-  className,
-  ...props
-}: React.ComponentPropsWithoutRef<T> & {
-  as?: T;
-}) {
-  let Component = as ?? "div";
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
 
+export const Prose: React.FC<Props> = ({ children, className }) => {
   return (
-    <Component
+    <div
       className={clsx(
         className,
-        "dark:white prose max-w-none leading-normal dark:prose-invert",
-        // headings
-        "prose-headings:mb-2.5 prose-headings:text-2xl prose-h2:mt-10",
-        // lead
-        "prose-lead:text-slate-500 dark:prose-lead:text-white",
-        // links
-        "prose-a:font-normal dark:prose-a:text-pink",
-        // link underline
-        "prose-a:font-normal prose-a:no-underline hover:prose-a:font-normal hover:prose-a:underline ",
-        // pre
-        "prose-pre:rounded-xl prose-pre:bg-slate-900 prose-pre:shadow-lg dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10",
-        // hr
-        "dark:prose-hr:border-slate-800",
-        //paragraph
-        "prose-p:my-2.5",
-        //list
-        "prose-ul:my-2.5 prose-li:my-0 prose-li:px-0",
-        //img
-        "prose-img:my-10",
-        //code
-        "prose-code:text-base prose-code:font-normal",
+        "dark:white prose max-w-none leading-normal dark:prose-invert prose-li:px-0",
       )}
-      {...props}
-    />
+    >
+      {children}
+    </div>
   );
-}
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -3,12 +3,14 @@ import { Config } from "tailwindcss";
 
 const plugin = require("tailwindcss/plugin");
 
-const typographyHeading = (overrides: any) => ({
+const typographyHeading = () => ({
   fontFamily: "ES Build",
   fontStyle: "normal",
   fontWeight: "bold",
   lineHeight: "120%",
-  ...overrides,
+  marginTop: "2.5rem",
+  marginBottom: "10px",
+  fontSize: "1.5rem",
 });
 
 export default {
@@ -109,17 +111,23 @@ export default {
           css: {
             a: {
               color: theme("colors.pink.DEFAULT"),
+              textDecorationLine: "none",
               "&:hover": {
-                color: theme("colors.pink.hover"),
-                fontWeight: "inherit",
+                textDecorationLine: "underline",
               },
-              fontWeight: "inherit",
+              fontWeight: "normal",
             },
-            h1: typographyHeading({ fontSize: "30px" }),
-            h2: typographyHeading({ fontSize: "26px" }),
-            h3: typographyHeading({ fontSize: "20px" }),
-            h4: typographyHeading({ fontSize: "18px" }),
-            h5: typographyHeading({ fontSize: "14px" }),
+            h1: typographyHeading(),
+            h2: typographyHeading(),
+            h3: typographyHeading(),
+            h4: typographyHeading(),
+            h5: typographyHeading(),
+            img: { marginBottom: theme("spacing.10") },
+            p: { margin: "10px 0" },
+            ul: { margin: "10px 0" },
+            li: { margin: "0" },
+            code: { fontWeight: theme("fontWeight.normal") },
+            '[class~="lead"]': { color: "colors.white" },
             "code::before": {
               content: null,
             },
@@ -142,6 +150,7 @@ export default {
             "--tw-prose-invert-counters": theme("colors.black"),
             "--tw-prose-quotes": theme("colors.white"),
             "--tw-prose-invert-quotes": theme("colors.black"),
+            "--tw-prose-hr": theme("colors.slate[800]"),
           },
         },
       }),