feat: show shorts in site home

src/app/site/[site]/page.tsx

@@ -1,9 +1,13 @@
 import { Hydrate, dehydrate } from "@tanstack/react-query"
 
+import ShortPreviewList from "~/components/site/ShortPreviewList"
 import SiteHome from "~/components/site/SiteHome"
 import getQueryClient from "~/lib/query-client"
 import { PageVisibilityEnum } from "~/lib/types"
-import { prefetchGetPagesBySite } from "~/queries/page.server"
+import {
+  fetchGetPagesBySite,
+  prefetchGetPagesBySite,
+} from "~/queries/page.server"
 import { fetchGetSite } from "~/queries/site.server"
 
 async function SiteIndexPage({
@@ -26,13 +30,26 @@ async function SiteIndexPage({
     },
     queryClient,
   )
+  const shorts = await fetchGetPagesBySite(
+    {
+      characterId: site?.characterId,
+      type: "short",
+      visibility: PageVisibilityEnum.Published,
+      useStat: true,
+      limit: 8,
+    },
+    queryClient,
+  )
 
   const dehydratedState = dehydrate(queryClient)
 
   return (
-    <Hydrate state={dehydratedState}>
-      <SiteHome handle={params.site} />
-    </Hydrate>
+    <div className="space-y-12">
+      {!!shorts?.count && <ShortPreviewList shorts={shorts} />}
+      <Hydrate state={dehydratedState}>
+        <SiteHome handle={params.site} />
+      </Hydrate>
+    </div>
   )
 }
 

src/components/site/ShortPreviewList.tsx

@@ -0,0 +1,66 @@
+import Link from "next/link"
+
+import { Image } from "~/components/ui/Image"
+import { Tooltip } from "~/components/ui/Tooltip"
+import { ExpandedNote } from "~/lib/types"
+import { cn } from "~/lib/utils"
+
+export default function ShortList({
+  shorts,
+}: {
+  shorts: {
+    list: ExpandedNote[]
+    count: number
+    cursor: string | null
+  }
+}) {
+  if (!shorts) return null
+
+  return (
+    <>
+      <div
+        className={cn(
+          "xlog-shorts-preview grid gap-3 grid-cols-4 sm:grid-cols-8 relative",
+        )}
+      >
+        {shorts.list.map((post) => (
+          <Tooltip
+            key={post.noteId}
+            label={
+              post.metadata?.content?.title ||
+              post.metadata?.content?.summary ||
+              ""
+            }
+            className="max-w-lg truncate"
+            childrenClassName="aspect-square"
+          >
+            <Link
+              href={`/${post.metadata?.content?.slug}`}
+              className="inline-block w-full h-full"
+            >
+              <Image
+                className="object-cover w-full h-full sm:group-hover:scale-105 sm:transition-transform sm:duration-400 sm:ease-in-out rounded-full"
+                alt="cover"
+                src={post.metadata?.content.images?.[0] || ""}
+                width={170}
+                height={170}
+                priority
+              ></Image>
+            </Link>
+          </Tooltip>
+        ))}
+        <Tooltip
+          label="More Shorts"
+          childrenClassName="absolute top-1/2 -translate-y-1/2 right-2"
+        >
+          <Link
+            href="/shorts"
+            className="bg-white rounded-full z-[1] w-8 h-8 flex items-center justify-center"
+          >
+            <i className="icon-[mingcute--right-fill]" />
+          </Link>
+        </Tooltip>
+      </div>
+    </>
+  )
+}