feat: use base64 to load custom css

src/components/common/Style.tsx

@@ -0,0 +1,24 @@
+import { toGateway } from "~/lib/ipfs-parser"
+
+export const Style: React.FC<{
+  content?: string
+  children?: React.ReactNode[]
+}> = ({ content, children }) => {
+  let css = content
+  if (!css && typeof children?.[0] === "string") {
+    css = children[0].trim()
+  }
+  if (!css) {
+    return null
+  }
+
+  return (
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href={
+        "data:text/css;base64," + Buffer.from(toGateway(css)).toString("base64")
+      }
+    />
+  )
+}

src/components/site/SiteLayout.tsx

@@ -4,10 +4,10 @@ import React, { useEffect } from "react"
 import { useAccountState } from "@crossbell/connect-kit"
 
 import { BlockchainInfo } from "~/components/common/BlockchainInfo"
+import { Style } from "~/components/common/Style"
 import { useUserRole } from "~/hooks/useUserRole"
 import { IS_PROD } from "~/lib/constants"
 import { OUR_DOMAIN, SITE_URL } from "~/lib/env"
-import { toGateway } from "~/lib/ipfs-parser"
 import { getUserContentsUrl } from "~/lib/user-contents"
 import { cn } from "~/lib/utils"
 import { useCheckLike, useCheckMint, useGetPage } from "~/queries/page"
@@ -91,16 +91,7 @@ export const SiteLayout: React.FC<SiteLayoutProps> = ({
         icon={getUserContentsUrl(site.data?.avatars?.[0])}
         site={domainOrSubdomain}
       />
-      {site?.data?.css && (
-        <link
-          type="text/css"
-          rel="stylesheet"
-          href={
-            "data:text/css;base64," +
-            Buffer.from(toGateway(site.data.css)).toString("base64")
-          }
-        />
-      )}
+      <Style content={site.data?.css} />
       {site.data && <SiteHeader site={site.data} />}
       <div
         className={cn(

src/markdown/index.ts

@@ -24,6 +24,7 @@ import remarkParse from "remark-parse"
 import remarkRehype from "remark-rehype"
 import { unified } from "unified"
 
+import { Style } from "~/components/common/Style"
 import { APlayer } from "~/components/ui/APlayer"
 import { ZoomedImage } from "~/components/ui/Image"
 import { Mention } from "~/components/ui/Mention"
@@ -197,6 +198,7 @@ export const renderPageContent = (
           mention: Mention,
           mermaid: Mermaid,
           audio: APlayer,
+          style: Style,
         } as any,
       })
       .use(() => (tree) => {