From 07c4f1d2fa35e5fc47c274036f3f3f0bd264934e Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Thu, 8 Jun 2023 18:46:09 +0100
Subject: [PATCH] fix: average color fetch error

---
 src/app/site/[site]/layout.tsx |   2 +-
 src/lib/ipfs-parser.ts         |   6 +-
 src/queries/site.server.ts     | 101 ++++++++++++++++++++-------------
 3 files changed, 65 insertions(+), 44 deletions(-)

diff --git a/src/app/site/[site]/layout.tsx b/src/app/site/[site]/layout.tsx
index 5792e879..8c5e5687 100644
--- a/src/app/site/[site]/layout.tsx
+++ b/src/app/site/[site]/layout.tsx
@@ -165,7 +165,7 @@ export default async function SiteLayout({
         className={`xlog-page xlog-page-${type} xlog-user xlog-deprecated-class`}
       >
         <Style content={site?.metadata?.content?.css} />
-        {colors?.light.averageColor && (
+        {colors?.light && colors?.dark && (
           <style>
             {`.light {
               --auto-hover-color: ${colors.light.autoHoverColor};
diff --git a/src/lib/ipfs-parser.ts b/src/lib/ipfs-parser.ts
index b43d096b..a991d495 100644
--- a/src/lib/ipfs-parser.ts
+++ b/src/lib/ipfs-parser.ts
@@ -7,7 +7,7 @@ export type ToGatewayConfig = {
   forceFallback?: boolean
 }
 
-export const toGateway = (url: string | URL) => {
+export const toGateway = (url: string | URL, customGateway?: string) => {
   let ipfsUrl
   if (typeof url === "string") {
     ipfsUrl = toIPFS(url)
@@ -15,7 +15,7 @@ export const toGateway = (url: string | URL) => {
     ipfsUrl = toIPFS(url.toString())
   }
 
-  return ipfsUrl?.replaceAll(IPFS_PREFIX, IPFS_GATEWAY)
+  return ipfsUrl?.replaceAll(IPFS_PREFIX, customGateway || IPFS_GATEWAY)
 }
 
 export const toIPFS = (url: string) => {
@@ -26,6 +26,7 @@ export const toIPFS = (url: string) => {
     .replaceAll("https://cf-ipfs.com/ipfs/", IPFS_PREFIX)
     .replaceAll("https://ipfs.4everland.xyz/ipfs/", IPFS_PREFIX)
     .replaceAll("https://rss3.mypinata.cloud/ipfs/", IPFS_PREFIX)
+    .replaceAll("https://cloudflare-ipfs.com/ipfs/", IPFS_PREFIX)
 }
 
 export const toCid = (url: string) => {
@@ -36,5 +37,6 @@ export const toCid = (url: string) => {
     .replaceAll("https://cf-ipfs.com/ipfs/", "")
     .replaceAll("https://ipfs.4everland.xyz/ipfs/", "")
     .replaceAll("https://rss3.mypinata.cloud/ipfs/", "")
+    .replaceAll("https://cloudflare-ipfs.com/ipfs/", "")
     .replaceAll(IPFS_PREFIX, "")
 }
diff --git a/src/queries/site.server.ts b/src/queries/site.server.ts
index 71dc5991..08fa1a11 100644
--- a/src/queries/site.server.ts
+++ b/src/queries/site.server.ts
@@ -5,6 +5,7 @@ import { Asset } from "unidata.js"
 import { QueryClient } from "@tanstack/react-query"
 
 import { IPFS_GATEWAY } from "~/lib/env"
+import { toGateway } from "~/lib/ipfs-parser"
 import { cacheGet, getRedis } from "~/lib/redis.server"
 import { ExpandedCharacter } from "~/lib/types"
 import * as siteModel from "~/models/site.model"
@@ -165,57 +166,75 @@ export const getCharacterColors = async (character?: ExpandedCharacter) => {
   return cacheGet({
     key,
     getValueFun: async () => {
-      let colors = {
-        dark: {},
-        light: {},
-      }
+      let colors = {}
 
-      if (
-        character.metadata?.content?.banners?.[0]?.mime_type?.split("/")[0] ===
-        "image"
-      ) {
-        const color = await getAverageColor(
-          character.metadata.content.banners[0].address,
-        )
-        colors = {
-          dark: {
-            averageColor: chroma(color.hex).luminance(0.007).hex(),
-            autoHoverColor: chroma(color.hex).luminance(0.02).hex(),
-            autoThemeColor: chroma(color.hex).saturate(3).luminance(0.3).hex(),
-          },
-          light: {
-            averageColor: chroma(color.hex).hex(),
-            autoHoverColor: chroma(color.hex).luminance(0.8).hex(),
-            autoThemeColor: chroma(color.hex).saturate(3).luminance(0.3).hex(),
-          },
+      try {
+        if (
+          character.metadata?.content?.banners?.[0]?.mime_type?.split(
+            "/",
+          )[0] === "image"
+        ) {
+          const color = await getAverageColor(
+            toGateway(
+              character.metadata.content.banners[0].address,
+              "https://cloudflare-ipfs.com/ipfs/",
+            ),
+          )
+          colors = {
+            dark: {
+              averageColor: chroma(color.hex).luminance(0.007).hex(),
+              autoHoverColor: chroma(color.hex).luminance(0.02).hex(),
+              autoThemeColor: chroma(color.hex)
+                .saturate(3)
+                .luminance(0.3)
+                .hex(),
+            },
+            light: {
+              averageColor: chroma(color.hex).hex(),
+              autoHoverColor: chroma(color.hex).luminance(0.8).hex(),
+              autoThemeColor: chroma(color.hex)
+                .saturate(3)
+                .luminance(0.3)
+                .hex(),
+            },
+          }
+        } else if (character.metadata?.content?.avatars?.[0]) {
+          const color = await getAverageColor(
+            toGateway(
+              character.metadata.content.avatars[0],
+              "https://cloudflare-ipfs.com/ipfs/",
+            ),
+          )
+          colors = {
+            dark: {
+              averageColor: chroma(color.hex).luminance(0.007).hex(),
+              autoHoverColor: chroma(color.hex).luminance(0.02).hex(),
+              autoThemeColor: chroma(color.hex)
+                .saturate(3)
+                .luminance(0.3)
+                .hex(),
+            },
+            light: {
+              averageColor: chroma(color.hex).luminance(0.95).hex(),
+              autoHoverColor: chroma(color.hex).luminance(0.8).hex(),
+              autoThemeColor: chroma(color.hex)
+                .saturate(3)
+                .luminance(0.3)
+                .hex(),
+            },
+          }
         }
-      } else if (character.metadata?.content?.avatars?.[0]) {
-        const color = await getAverageColor(
-          character.metadata.content.avatars[0],
-        )
-        colors = {
-          dark: {
-            averageColor: chroma(color.hex).luminance(0.007).hex(),
-            autoHoverColor: chroma(color.hex).luminance(0.02).hex(),
-            autoThemeColor: chroma(color.hex).saturate(3).luminance(0.3).hex(),
-          },
-          light: {
-            averageColor: chroma(color.hex).luminance(0.95).hex(),
-            autoHoverColor: chroma(color.hex).luminance(0.8).hex(),
-            autoThemeColor: chroma(color.hex).saturate(3).luminance(0.3).hex(),
-          },
-        }
-      }
+      } catch (error) {}
 
       return colors
     },
   }) as Promise<{
-    dark: {
+    dark?: {
       averageColor?: string
       autoHoverColor?: string
       autoThemeColor?: string
     }
-    light: {
+    light?: {
       averageColor?: string
       autoHoverColor?: string
       autoThemeColor?: string