feat: use app router for site page

next-env.d.ts

@@ -1,5 +1,6 @@
 /// <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.

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

@@ -0,0 +1,39 @@
+import { Hydrate, dehydrate } from "@tanstack/react-query"
+
+import { SitePage } from "~/components/site/SitePage"
+import { useTranslation } from "~/lib/i18n"
+import getQueryClient from "~/lib/query-client"
+import { fetchGetPage } from "~/queries/page.server"
+import { fetchGetSite } from "~/queries/site.server"
+
+export default async function SitePagePage({
+  params,
+}: {
+  params: {
+    site: string
+    slug: string
+  }
+}) {
+  const queryClient = getQueryClient()
+
+  const site = await fetchGetSite(params.site, queryClient)
+
+  const page = await fetchGetPage(
+    {
+      characterId: site?.characterId,
+      slug: params.slug,
+      useStat: true,
+    },
+    queryClient,
+  )
+
+  const dehydratedState = dehydrate(queryClient)
+
+  const { t } = await useTranslation("site")
+
+  return (
+    <Hydrate state={dehydratedState}>
+      <SitePage page={page || undefined} site={site || undefined} t={t} />
+    </Hydrate>
+  )
+}

src/components/common/CharacterList.tsx

@@ -1,8 +1,8 @@
-import { useTranslation } from "next-i18next"
 import React, { useCallback, useState } from "react"
 import { Virtuoso } from "react-virtuoso"
 
 import { Modal } from "~/components/ui/Modal"
+import { useTranslation } from "~/lib/i18n/client"
 import { ExpandedCharacter } from "~/lib/types"
 
 import { Button } from "../ui/Button"

src/components/common/Comment.tsx

@@ -1,8 +1,10 @@
-import { useTranslation } from "next-i18next"
+"use client"
+
 import { Virtuoso } from "react-virtuoso"
 
 import { CommentInput } from "~/components/common/CommentInput"
 import { CommentItem } from "~/components/common/CommentItem"
+import { useTranslation } from "~/lib/i18n/client"
 import { ExpandedNote } from "~/lib/types"
 import { cn } from "~/lib/utils"
 import { useGetComments } from "~/queries/page"

src/components/common/CommentInput.tsx

@@ -1,5 +1,4 @@
 import { CharacterEntity, NoteEntity } from "crossbell.js"
-import { useTranslation } from "next-i18next"
 import { useEffect } from "react"
 import { useForm } from "react-hook-form"
 
@@ -9,6 +8,7 @@ import { Popover } from "@headlessui/react"
 import { Avatar } from "~/components/ui/Avatar"
 import { Button } from "~/components/ui/Button"
 import { Input } from "~/components/ui/Input"
+import { useTranslation } from "~/lib/i18n/client"
 import { useCommentPage, useUpdateComment } from "~/queries/page"
 
 import { EmojiPicker } from "./EmojiPicker"
@@ -33,7 +33,7 @@ export const CommentInput: React.FC<{
   const account = useAccountState((s) => s.computed.account)
   const commentPage = useCommentPage()
   const updateComment = useUpdateComment()
-  const { t } = useTranslation(["common", "site"])
+  const { t } = useTranslation("site")
 
   const form = useForm({
     defaultValues: {
@@ -94,9 +94,7 @@ export const CommentInput: React.FC<{
             multiline
             maxLength={600}
             className="mb-2"
-            placeholder={
-              t("Write a comment on the blockchain", { ns: "site" }) || ""
-            }
+            placeholder={t("Write a comment on the blockchain") || ""}
             {...form.register("content", {})}
           />
         </div>

src/components/common/CommentItem.tsx

@@ -1,5 +1,6 @@
+"use client"
+
 import { CharacterEntity, NoteEntity } from "crossbell.js"
-import { useTranslation } from "next-i18next"
 import { useState } from "react"
 
 import { useAccountState } from "@crossbell/connect-kit"
@@ -16,6 +17,7 @@ import { UniLink } from "~/components/ui/UniLink"
 import { useDate } from "~/hooks/useDate"
 import { CSB_SCAN } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
+import { useTranslation } from "~/lib/i18n/client"
 import { cn } from "~/lib/utils"
 
 export const CommentItem: React.FC<{

src/components/common/PageContent.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { MutableRefObject, useEffect, useMemo } from "react"
 import { scroller } from "react-scroll"
 

src/components/common/ReactionLike.tsx

@@ -1,5 +1,6 @@
+"use client"
+
 import confetti from "canvas-confetti"
-import { Trans, useTranslation } from "next-i18next"
 import { useEffect, useMemo, useRef, useState } from "react"
 
 import { CharacterList } from "~/components/common/CharacterList"
@@ -7,6 +8,7 @@ import { Modal } from "~/components/ui/Modal"
 import { Tooltip } from "~/components/ui/Tooltip"
 import { UniLink } from "~/components/ui/UniLink"
 import { CSB_SCAN } from "~/lib/env"
+import { Trans, useTranslation } from "~/lib/i18n/client"
 import { cn } from "~/lib/utils"
 import {
   useCheckLike,
@@ -24,7 +26,7 @@ export const ReactionLike: React.FC<{
   noteId?: number
 }> = ({ size, characterId, noteId }) => {
   const toggleLikePage = useToggleLikePage()
-  const { t } = useTranslation("common")
+  const { t, i18n } = useTranslation("common")
 
   const [isLikeOpen, setIsLikeOpen] = useState(false)
   const [isLikeListOpen, setIsLikeListOpen] = useState(false)
@@ -149,7 +151,7 @@ export const ReactionLike: React.FC<{
         title={t("Like successfully") || ""}
       >
         <div className="p-5">
-          <Trans i18nKey="like stored">
+          <Trans i18nKey="like stored" i18n={i18n}>
             Your like has been stored on the blockchain, view it on{" "}
             <UniLink
               className="text-accent"
@@ -181,7 +183,7 @@ export const ReactionLike: React.FC<{
         title={t("Confirm to revert")}
       >
         <div className="p-5">
-          <Trans i18nKey="like revert">
+          <Trans i18nKey="like revert" i18n={i18n}>
             Do you really want to revert this like action?
           </Trans>
         </div>

src/components/common/ReactionMint.tsx

@@ -1,5 +1,6 @@
+"use client"
+
 import confetti from "canvas-confetti"
-import { Trans, useTranslation } from "next-i18next"
 import { useEffect, useMemo, useRef, useState } from "react"
 
 import { useAccountState } from "@crossbell/connect-kit"
@@ -10,6 +11,7 @@ import { Modal } from "~/components/ui/Modal"
 import { Tooltip } from "~/components/ui/Tooltip"
 import { UniLink } from "~/components/ui/UniLink"
 import { CSB_SCAN, CSB_XCHAR } from "~/lib/env"
+import { Trans, useTranslation } from "~/lib/i18n/client"
 import { noopArr } from "~/lib/noop"
 import { cn } from "~/lib/utils"
 import { useCheckMint, useGetMints, useMintPage } from "~/queries/page"
@@ -23,7 +25,7 @@ export const ReactionMint: React.FC<{
   characterId?: number
 }> = ({ size, noteId, characterId }) => {
   const mintPage = useMintPage()
-  const { t } = useTranslation("common")
+  const { t, i18n } = useTranslation("common")
 
   const account = useAccountState((s) => s.computed.account)
 
@@ -136,7 +138,7 @@ export const ReactionMint: React.FC<{
         title={t("Mint successfully") || ""}
       >
         <div className="p-5">
-          <Trans i18nKey="mint stored">
+          <Trans i18nKey="mint stored" i18n={i18n}>
             This post has been minted to NFT by you, view it on{" "}
             <UniLink
               className="text-accent"

src/components/common/ReactionTip.tsx

@@ -1,10 +1,12 @@
-import { useTranslation } from "next-i18next"
+"use client"
+
 import { useMemo, useRef, useState } from "react"
 
 import { useAccountState } from "@crossbell/connect-kit"
 
 import { PatronModal } from "~/components/common/PatronModal"
 import { Tooltip } from "~/components/ui/Tooltip"
+import { useTranslation } from "~/lib/i18n/client"
 import { noopArr } from "~/lib/noop"
 import { ExpandedCharacter, ExpandedNote } from "~/lib/types"
 import { useGetTips } from "~/queries/site"

src/components/site/PostMeta.tsx

@@ -1,4 +1,6 @@
-import { useTranslation } from "next-i18next"
+"use client"
+
+// TODO
 import { useEffect, useState } from "react"
 
 import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
@@ -6,6 +8,7 @@ import { UniLink } from "~/components/ui/UniLink"
 import { useDate } from "~/hooks/useDate"
 import { useUserRole } from "~/hooks/useUserRole"
 import { CSB_SCAN, SITE_URL } from "~/lib/env"
+import { useTranslation } from "~/lib/i18n/client"
 import { toCid } from "~/lib/ipfs-parser"
 import { ExpandedCharacter, ExpandedNote } from "~/lib/types"
 import { useGetSummary } from "~/queries/page"

src/components/site/SitePage.tsx

@@ -1,21 +1,24 @@
-import { useTranslation } from "next-i18next"
+import { TFunction } from "i18next"
 import Head from "next/head"
 import serialize from "serialize-javascript"
 
+import { PageContent } from "~/components/common/PageContent"
+import { PostFooter } from "~/components/site/PostFooter"
+import { PostMeta } from "~/components/site/PostMeta"
 import { getSiteLink } from "~/lib/helpers"
 import { ExpandedCharacter, ExpandedNote } from "~/lib/types"
 
-import { PageContent } from "../common/PageContent"
-import { PostFooter } from "./PostFooter"
-import { PostMeta } from "./PostMeta"
-
-export const SitePage: React.FC<{
+export function SitePage({
+  page,
+  site,
+  preview,
+  t,
+}: {
   page?: ExpandedNote
   site?: ExpandedCharacter
   preview?: boolean
-}> = ({ page, site, preview }) => {
-  const { t } = useTranslation("site")
-
+  t: TFunction
+}) {
   function addPageJsonLd() {
     return {
       __html: serialize({

src/lib/i18n/client.ts

@@ -6,6 +6,7 @@ import {
   initReactI18next,
   useTranslation as useTranslationOrg,
 } from "react-i18next"
+import { Trans as TransW } from "react-i18next/TransWithoutContext"
 
 import { useLang } from "~/hooks/useLang"
 
@@ -30,3 +31,5 @@ export function useTranslation(ns: string = defaultNS) {
   }
   return useTranslationOrg(ns)
 }
+
+export const Trans = TransW

src/markdown/index.ts

@@ -155,14 +155,15 @@ export const renderPageContent = (
               },
               children: [],
             },
-            {
-              type: "element",
-              tagName: "anchor",
-              properties: {
-                name: node.properties?.id,
-              },
-              children: [],
-            },
+            // {
+            //   type: "element",
+            //   tagName: "anchor",
+            //   properties: {
+            //     name: node.properties?.id,
+            //   },
+            //   children: [],
+            // },
+            // TODO
           ]
         },
       })

src/queries/page.server.ts

@@ -6,7 +6,7 @@ import { cacheGet } from "~/lib/redis.server"
 import * as pageModel from "~/models/page.model"
 
 export const fetchGetPage = async (
-  input: Parameters<typeof pageModel.getPage>[0],
+  input: Partial<Parameters<typeof pageModel.getPage>[0]>,
   queryClient: QueryClient,
 ) => {
   const key = ["getPage", input.characterId, input]
@@ -23,7 +23,14 @@ export const fetchGetPage = async (
     }
     return cacheGet({
       key,
-      getValueFun: () => pageModel.getPage(input),
+      getValueFun: () =>
+        pageModel.getPage({
+          slug: input.slug,
+          characterId: input.characterId!,
+          useStat: input.useStat,
+          noteId: input.noteId,
+          handle: input.handle,
+        }),
     }) as Promise<ReturnType<typeof pageModel.getPage>>
   })
 }