feat: add unstable page type classes

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

@@ -1,4 +1,5 @@
 import { Metadata } from "next"
+import { headers } from "next/headers"
 import { notFound } from "next/navigation"
 
 import { Hydrate, dehydrate } from "@tanstack/react-query"
@@ -11,7 +12,9 @@ import { SiteHeader } from "~/components/site/SiteHeader"
 import { FABContainer } from "~/components/ui/FAB"
 import { SITE_URL } from "~/lib/env"
 import getQueryClient from "~/lib/query-client"
+import { ExpandedNote } from "~/lib/types"
 import { cn } from "~/lib/utils"
+import { fetchGetPage } from "~/queries/page.server"
 import {
   fetchGetSite,
   prefetchGetSiteSubscriptions,
@@ -87,7 +90,32 @@ export default async function SiteLayout({
 
   const site = await fetchGetSite(params.site, queryClient)
 
-  let page
+  // https://github.com/vercel/next.js/issues/46618#issuecomment-1450416633
+  // Issue: The type will not be updated when the page is redirected.
+  const pathname = headers().get("x-pathname")
+  let type: string
+  switch (pathname) {
+    case "/":
+      type = "index"
+      break
+    case "/nft":
+      type = "nft"
+      break
+    case "/archive":
+      type = "archive"
+      break
+    case "/search":
+      type = "search"
+      break
+    default:
+      if (pathname?.startsWith("/tag/")) {
+        type = "tag"
+      } else {
+        type = "post"
+      }
+  }
+
+  let page: ExpandedNote | undefined | null
   if (site?.characterId) {
     await Promise.all([
       prefetchGetSiteSubscriptions(
@@ -102,6 +130,21 @@ export default async function SiteLayout({
         },
         queryClient,
       ),
+      new Promise<void>(async (resolve) => {
+        if (type === "post") {
+          page = await fetchGetPage(
+            {
+              characterId: site.characterId,
+              slug: pathname?.slice(1),
+              useStat: true,
+            },
+            queryClient,
+          )
+          resolve()
+        } else {
+          resolve()
+        }
+      }),
     ])
   } else {
     notFound()
@@ -111,29 +154,13 @@ export default async function SiteLayout({
 
   return (
     <Hydrate state={dehydratedState}>
-      <div
-        className={
-          cn()
-          // TODO
-          // {
-          //   "xlog-user": true,
-          //   "xlog-user-login": isConnected,
-          //   "xlog-user-site-owner": userRole?.data === "owner",
-          //   "xlog-user-site-operator": userRole?.data === "operator",
-          //   "xlog-user-site-follower": subscription?.data,
-          //   "xlog-user-post-liker": isLiked,
-          //   "xlog-user-post-minter": isMint?.data?.count,
-          // },
-          // `xlog-page-${type}`,
-        }
-      >
+      <div className={`xlog-user xlog-page-${type} xlog-deprecated-class`}>
         <Style content={site?.metadata?.content?.css} />
         {site && <SiteHeader handle={params.site} />}
         <div
           className={cn(
-            "max-w-screen-md mx-auto px-5 pt-12 relative",
-            // page && `xlog-post-id-${page.characterId}-${page.noteId}`,
-            // page?.metadata?.content?.tags?.map((tag) => `xlog-post-tag-${tag}`),
+            page && `xlog-post-id-${page.characterId}-${page.noteId}`,
+            "xlog-deprecated-class max-w-screen-md mx-auto px-5 pt-12 relative",
           )}
         >
           {children}

src/middleware.ts

@@ -78,15 +78,27 @@ export default async function middleware(req: NextRequest) {
     )
   }
 
+  // https://github.com/vercel/next.js/issues/46618#issuecomment-1450416633
+  const requestHeaders = new Headers(req.headers)
+  requestHeaders.set("x-pathname", req.nextUrl.pathname)
+
   if (tenant?.subdomain) {
     const url = req.nextUrl.clone()
     url.pathname = `/site/${tenant?.subdomain}${url.pathname}`
-    return NextResponse.rewrite(url)
+    return NextResponse.rewrite(url, {
+      request: {
+        headers: requestHeaders,
+      },
+    })
   }
 
   if (DISCORD_LINK && pathname === "/discord") {
     return NextResponse.redirect(DISCORD_LINK)
   }
 
-  return NextResponse.next()
+  return NextResponse.next({
+    request: {
+      headers: requestHeaders,
+    },
+  })
 }