feat: site 404 page app router

next-env.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

public/locales/zh/site.json

@@ -14,5 +14,6 @@
   "View on Crossbell Scan": "在 Crossbell Scan 上查看",
   "Subscribe to JSON Feed": "订阅 JSON Feed",
   "Subscribe to RSS": "订阅 RSS",
-  "Search on this site": "在本站搜索"
+  "Search on this site": "在本站搜索",
+  "404 - Whoops, this page is gone.": "404 - 哎呀，这个页面不见了。"
 }

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

@@ -1,3 +1,5 @@
+import { notFound } from "next/navigation"
+
 import { Hydrate, dehydrate } from "@tanstack/react-query"
 
 import { SitePage } from "~/components/site/SitePage"
@@ -27,6 +29,13 @@ export default async function SitePagePage({
     queryClient,
   )
 
+  if (
+    !page ||
+    new Date(page!.metadata?.content?.date_published || "") > new Date()
+  ) {
+    notFound()
+  }
+
   const dehydratedState = dehydrate(queryClient)
 
   const { t } = await useTranslation("site")

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

@@ -9,9 +9,7 @@ import { SiteFooter } from "~/components/site/SiteFooter"
 import { SiteHeader } from "~/components/site/SiteHeader"
 import { FABContainer } from "~/components/ui/FAB"
 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,
@@ -35,7 +33,7 @@ export default async function SiteLayout({
 
   let page
   if (site?.characterId) {
-    const result = await Promise.all([
+    await Promise.all([
       prefetchGetSiteSubscriptions(
         {
           characterId: site.characterId,
@@ -48,51 +46,7 @@ export default async function SiteLayout({
         },
         queryClient,
       ),
-      new Promise<ExpandedNote | null>(async (resolve, reject) => {
-        if (params.slug) {
-          try {
-            const page = await fetchGetPage(
-              {
-                characterId: site.characterId,
-                slug: params.slug,
-                useStat: true,
-              },
-              queryClient,
-            )
-
-            if (
-              !page ||
-              new Date(page!.metadata?.content?.date_published || "") >
-                new Date()
-            ) {
-              reject(notFound())
-            } else {
-              resolve(page)
-            }
-          } catch (error) {
-            reject(error)
-          }
-        } else {
-          // if (!options?.skipPages) {
-          //   await prefetchGetPagesBySite(
-          //     {
-          //       characterId: site.characterId,
-          //       ...(options?.limit && { limit: options.limit }),
-          //       type: "post",
-          //       visibility: PageVisibilityEnum.Published,
-          //       ...(params.tag && { tags: [params.tag] }),
-          //       ...(options?.useStat && {
-          //         useStat: true,
-          //       }),
-          //     },
-          //     queryClient,
-          //   )
-          // }
-          resolve(null)
-        }
-      }),
     ])
-    page = result[2]
   } else {
     notFound()
   }
@@ -136,8 +90,8 @@ export default async function SiteLayout({
         <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}`,
+            // page?.metadata?.content?.tags?.map((tag) => `xlog-post-tag-${tag}`),
           )}
         >
           {children}

src/app/site/[site]/not-found.tsx

@@ -0,0 +1,27 @@
+import { SitePage } from "~/components/site/SitePage"
+import { SITE_URL } from "~/lib/env"
+import { useTranslation } from "~/lib/i18n"
+
+export default async function NotFound() {
+  const { t } = await useTranslation("site")
+
+  return (
+    <SitePage
+      page={
+        {
+          metadata: {
+            content: {
+              title: t("404 - Whoops, this page is gone."),
+              content: `
+- [Back to Home](/)
+- [All posts](/archives)
+
+![image](${SITE_URL}/assets/404.svg)`,
+            },
+          },
+        } as any
+      }
+      t={t}
+    />
+  )
+}

src/components/site/PostLink.tsx

@@ -1,22 +0,0 @@
-// import { Link } from "react-scroll"
-
-// export const PostLink: React.FC<any> = ({ children, ...props }) => {
-//   if (props.href?.startsWith("#")) {
-//     return (
-//       <Link
-//         to={decodeURI(props.href.slice(1))}
-//         spy={true}
-//         smooth={true}
-//         duration={500}
-//         offset={-20}
-//         {...props}
-//       >
-//         {children}
-//       </Link>
-//     )
-//   } else {
-//     return <a {...props}>{children}</a>
-//   }
-// }
-
-export {}