feat: generate default post cover

package.json

@@ -149,6 +149,7 @@
     "tailwind-scrollbar-hide": "1.1.7",
     "tailwindcss-animate": "1.0.6",
     "unified": "10.1.2",
+    "uniqolor": "^1.1.0",
     "unist-builder": "4.0.0",
     "unist-util-visit": "5.0.0",
     "use-onclickoutside": "0.4.1",

pnpm-lock.yaml

@@ -362,6 +362,9 @@ dependencies:
   unified:
     specifier: 10.1.2
     version: 10.1.2
+  uniqolor:
+    specifier: ^1.1.0
+    version: 1.1.0
   unist-builder:
     specifier: 4.0.0
     version: 4.0.0
@@ -12891,6 +12894,10 @@ packages:
       vfile: 5.3.7
     dev: false
 
+  /uniqolor@1.1.0:
+    resolution: {integrity: sha512-j2XyokF24fsj+L5u6fbu4rM3RQc6VWJuAngYM2k0ZdG3yiVxt0smLkps2GmQIYqK8VkELGdM9vFU/HfOkK/zoQ==}
+    dev: false
+
   /unique-string@2.0.0:
     resolution: {integrity: sha512-uNaeirEPvpZWSgzwsPGtU2zVSTrn/8L5q/IexZmH0eH6SA73CmAA5U4GwORTxQAZs95TAXLNqeLoPPNO5gZfWg==}
     engines: {node: '>=8'}

src/components/home/HomeFeed.tsx

@@ -20,7 +20,6 @@ import { Tabs } from "~/components/ui/Tabs"
 import { Tooltip } from "~/components/ui/Tooltip"
 import { useDate } from "~/hooks/useDate"
 import { useIsMobileLayout } from "~/hooks/useMobileLayout"
-import { DEFAULT_AVATAR } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
 import { useTranslation } from "~/lib/i18n/client"
 import { getStorage, setStorage } from "~/lib/storage"
@@ -62,11 +61,8 @@ const PostCard = ({
       )}
     >
       <PostCover
-        cover={
-          post.metadata?.content.cover ||
-          character?.metadata?.content?.avatars?.[0] ||
-          DEFAULT_AVATAR
-        }
+        cover={post.metadata?.content.cover}
+        title={post.metadata?.content?.title}
       />
       <div className="p-3 pt-2 sm:p-5 sm:pt-4 w-full min-w-0 h-[168px] sm:h-[204px] flex flex-col">
         <div className="flex items-center space-x-1 sm:space-x-2 mb-2 sm:mb-4 text-xs sm:text-sm overflow-hidden">

src/components/home/PostCover.tsx

@@ -1,13 +1,37 @@
+import uniqolor from "uniqolor"
+
 import { Image } from "~/components/ui/Image"
 
 export default function PostCover({
   cover,
   priority,
+  title,
 }: {
   cover?: string
   priority?: boolean
+  title?: string
 }) {
-  if (!cover) return null
+  if (!cover) {
+    if (title) {
+      return (
+        <>
+          <div
+            className="xlog-post-cover rounded-t-2xl overflow-hidden flex items-center justify-center text-center relative w-full aspect-video border-b p-2"
+            style={{
+              background: uniqolor(title, {
+                saturation: [30, 35],
+                lightness: [60, 70],
+              }).color,
+            }}
+          >
+            <div className="text-white text-xl font-bold">{title}</div>
+          </div>
+        </>
+      )
+    } else {
+      return null
+    }
+  }
 
   return (
     <>