From d37be4409f61f52d54c604171ade7b95e0df4825 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Mon, 21 Nov 2022 21:08:37 +0000
Subject: [PATCH] feat: support ipfs:// in custom css

---
 src/components/dashboard/DashboardLayout.tsx   |  5 ++---
 src/components/site/SiteLayout.tsx             |  3 ++-
 src/lib/ipfs-parser.ts                         | 18 +++++++-----------
 .../dashboard/[subdomain]/settings/css.tsx     |  3 +++
 4 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/components/dashboard/DashboardLayout.tsx b/src/components/dashboard/DashboardLayout.tsx
index 5898e02b..4a1dc517 100644
--- a/src/components/dashboard/DashboardLayout.tsx
+++ b/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")
           }
         />
       )}
diff --git a/src/components/site/SiteLayout.tsx b/src/components/site/SiteLayout.tsx
index c058a62b..ab48ceb9 100644
--- a/src/components/site/SiteLayout.tsx
+++ b/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")
           }
         />
       )}
diff --git a/src/lib/ipfs-parser.ts b/src/lib/ipfs-parser.ts
index de123b05..872ef476 100644
--- a/src/lib/ipfs-parser.ts
+++ b/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)
 }
diff --git a/src/pages/dashboard/[subdomain]/settings/css.tsx b/src/pages/dashboard/[subdomain]/settings/css.tsx
index 4eb5cbd9..134e8204 100644
--- a/src/pages/dashboard/[subdomain]/settings/css.tsx
+++ b/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>