feat: support ipfs:// in custom css

src/components/dashboard/DashboardLayout.tsx

@@ -5,15 +5,14 @@ import React, { useState, useEffect } from "react"
 import { APP_NAME } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
 import { SEOHead } from "../common/SEOHead"
-import { DashboardIcon } from "../icons/DashboardIcon"
 import { UniLink } from "../ui/UniLink"
 import { DashboardSidebar } from "./DashboardSidebar"
-import { SiteSwitcher } from "./SiteSwitcher"
 import { useGetUserSites } from "~/queries/site"
 import { useAccount } from "wagmi"
 import { ConnectButton } from "~/components/common/ConnectButton"
 import { useGetNotifications, useGetSite } from "~/queries/site"
 import { getStorage } from "~/lib/storage"
+import { toGateway } from "~/lib/ipfs-parser"
 
 export function DashboardLayout({
   children,
@@ -110,7 +109,7 @@ export function DashboardLayout({
           rel="stylesheet"
           href={
             "data:text/css;base64," +
-            Buffer.from(site?.data?.css).toString("base64")
+            Buffer.from(toGateway(site.data.css)).toString("base64")
           }
         />
       )}

src/components/site/SiteLayout.tsx

@@ -9,6 +9,7 @@ import { useGetSite } from "~/queries/site"
 import { useGetPage } from "~/queries/page"
 import { OUR_DOMAIN, SITE_URL } from "~/lib/env"
 import { IS_PROD } from "~/lib/constants"
+import { toGateway } from "~/lib/ipfs-parser"
 
 export type SiteLayoutProps = {
   children: React.ReactNode
@@ -63,7 +64,7 @@ export const SiteLayout: React.FC<SiteLayoutProps> = ({
           rel="stylesheet"
           href={
             "data:text/css;base64," +
-            Buffer.from(site?.data?.css).toString("base64")
+            Buffer.from(toGateway(site.data.css)).toString("base64")
           }
         />
       )}

src/lib/ipfs-parser.ts

@@ -10,19 +10,15 @@ export type ToGatewayConfig = {
 export const toGateway = (url: string) => {
   const ipfsUrl = toIPFS(url)
 
-  if (ipfsUrl.startsWith(IPFS_PREFIX)) {
-    return url.replace(IPFS_PREFIX, IPFS_GATEWAY)
-  } else {
-    return url
-  }
+  return ipfsUrl.replaceAll(IPFS_PREFIX, IPFS_GATEWAY)
 }
 
 export const toIPFS = (url: string) => {
   return url
-    ?.replace(IPFS_GATEWAY, IPFS_PREFIX)
-    .replace("https://gateway.ipfs.io/ipfs/", IPFS_PREFIX)
-    .replace("https://ipfs.io/ipfs/", IPFS_PREFIX)
-    .replace("https://cf-ipfs.com/ipfs/", IPFS_PREFIX)
-    .replace("https://ipfs.4everland.xyz/ipfs/", IPFS_PREFIX)
-    .replace("https://rss3.mypinata.cloud/ipfs/", IPFS_PREFIX)
+    ?.replaceAll(IPFS_GATEWAY, IPFS_PREFIX)
+    .replaceAll("https://gateway.ipfs.io/ipfs/", IPFS_PREFIX)
+    .replaceAll("https://ipfs.io/ipfs/", IPFS_PREFIX)
+    .replaceAll("https://cf-ipfs.com/ipfs/", IPFS_PREFIX)
+    .replaceAll("https://ipfs.4everland.xyz/ipfs/", IPFS_PREFIX)
+    .replaceAll("https://rss3.mypinata.cloud/ipfs/", IPFS_PREFIX)
 }

src/pages/dashboard/[subdomain]/settings/css.tsx

@@ -55,6 +55,9 @@ export default function SettingsDomainsPage() {
                 These styles will be applied to your entire blog, including this
                 dashboard.
               </p>
+              <p>
+                Support <code>ipfs://</code>
+              </p>
               <p className="text-zinc-800 text-sm font-bold">
                 Tips: you can override the built-in CSS variables
               </p>