feat: app router (#492)

src/app/(home)/components/Header.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import { usePathname } from "next/navigation"
+import { useTranslation } from "react-i18next"
+
+import { ConnectButton } from "~/components/common/ConnectButton"
+import { Logo } from "~/components/common/Logo"
+import { Image } from "~/components/ui/Image"
+import { UniLink } from "~/components/ui/UniLink"
+import { GITHUB_LINK } from "~/lib/env"
+import { cn } from "~/lib/utils"
+
+const tabs = [
+  {
+    name: "Home",
+    link: "/",
+  },
+  {
+    name: "Activities",
+    link: "/activities",
+  },
+  {
+    name: (
+      <Image
+        className="no-optimization w-24"
+        alt="github stars"
+        src="https://img.shields.io/github/stars/Crossbell-Box/xLog?color=white&label=Stars&logo=github&style=social"
+      />
+    ),
+    link: GITHUB_LINK,
+  },
+]
+
+export function Header() {
+  const { t } = useTranslation("index")
+  const pathname = usePathname()
+  return (
+    <header className="py-5 fixed w-full top-0 bg-white z-10">
+      <div className="max-w-screen-lg px-5 mx-auto flex justify-between items-center">
+        <UniLink href="/" className="text-2xl font-extrabold flex items-center">
+          <div className="inline-block w-9 h-9 mr-3">
+            <Logo type="lottie" width={36} height={36} autoplay={false} />
+          </div>
+          xLog
+        </UniLink>
+        <div className="space-x-14 text-zinc-500 flex">
+          {tabs?.map((tab, index) => (
+            <UniLink
+              className={cn(
+                "cursor-pointer items-center hidden sm:flex hover:text-accent text-lg",
+                {
+                  "text-accent": pathname === tab.link,
+                },
+              )}
+              key={tab.link}
+              href={tab.link}
+            >
+              {typeof tab.name === "string" ? t(tab.name) : tab.name}
+            </UniLink>
+          ))}
+          <ConnectButton size="base" variantColor="black" />
+        </div>
+      </div>
+    </header>
+  )
+}

src/app/(home)/layout.tsx

@@ -1,72 +1,18 @@
-import { useTranslation } from "next-i18next"
-import { usePathname } from "next/navigation"
-
-import { ConnectButton } from "~/components/common/ConnectButton"
 import { DarkModeSwitch } from "~/components/common/DarkModeSwitch"
-import { Logo } from "~/components/common/Logo"
-import { Image } from "~/components/ui/Image"
 import { UniLink } from "~/components/ui/UniLink"
 import { APP_NAME, DISCORD_LINK, GITHUB_LINK, TWITTER_LINK } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
-import { cn } from "~/lib/utils"
 
-const tabs = [
-  {
-    name: "Home",
-    link: "/",
-  },
-  {
-    name: "Activities",
-    link: "/activities",
-  },
-  {
-    name: (
-      <Image
-        className="no-optimization w-24"
-        alt="github stars"
-        src="https://img.shields.io/github/stars/Crossbell-Box/xLog?color=white&label=Stars&logo=github&style=social"
-      />
-    ),
-    link: GITHUB_LINK,
-  },
-]
-
-export function HomeLayout({ children }: { children?: React.ReactNode }) {
-  const { t } = useTranslation("index")
-  const pathname = usePathname()
+import { Header } from "./components/Header"
 
+export default async function HomeLayout({
+  children,
+}: {
+  children?: React.ReactNode
+}) {
   return (
     <>
-      <header className="py-5 fixed w-full top-0 bg-white z-10">
-        <div className="max-w-screen-lg px-5 mx-auto flex justify-between items-center">
-          <UniLink
-            href="/"
-            className="text-2xl font-extrabold flex items-center"
-          >
-            <div className="inline-block w-9 h-9 mr-3">
-              <Logo type="lottie" width={36} height={36} autoplay={false} />
-            </div>
-            xLog
-          </UniLink>
-          <div className="space-x-14 text-zinc-500 flex">
-            {tabs?.map((tab, index) => (
-              <UniLink
-                className={cn(
-                  "cursor-pointer items-center hidden sm:flex hover:text-accent text-lg",
-                  {
-                    "text-accent": pathname === tab.link,
-                  },
-                )}
-                key={tab.link}
-                href={tab.link}
-              >
-                {typeof tab.name === "string" ? t(tab.name) : tab.name}
-              </UniLink>
-            ))}
-            <ConnectButton size="base" variantColor="black" />
-          </div>
-        </div>
-      </header>
+      <Header />
       {children}
       <footer className="mt-10 font-medium border-t">
         <div className="max-w-screen-lg px-5 py-14 mx-auto flex justify-between">

src/app/(home)/page.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { Trans, useTranslation } from "next-i18next"
 import { useRouter } from "next/navigation"
 import { Element, Link } from "react-scroll"
@@ -17,17 +19,12 @@ import { Button } from "~/components/ui/Button"
 import { Image } from "~/components/ui/Image"
 import { Tooltip } from "~/components/ui/Tooltip"
 import { UniLink } from "~/components/ui/UniLink"
-import { APP_DESCRIPTION, APP_NAME, CSB_SCAN, GITHUB_LINK } from "~/lib/env"
+import { CSB_SCAN, GITHUB_LINK } from "~/lib/env"
 import { getSiteLink } from "~/lib/helpers"
 import { useGetShowcase } from "~/queries/home"
 
-import EntranceButton from "./EntranceButton"
 import ShowcaseList from "./ShowcaseList"
-
-export const metadata = {
-  title: APP_NAME,
-  description: APP_DESCRIPTION,
-}
+import EntranceButton from "./components/EntranceButton"
 
 function Home() {
   const router = useRouter()
@@ -255,6 +252,7 @@ function Home() {
         </div>
         <div className="text-center absolute bottom-4 sm:bottom-14 w-full flex items-center justify-center flex-col">
           <span className="mb-1 sm:mb-3">{t("Explore the xLog way")}</span>
+          {/* @ts-expect-error: TODO fix or replace this lib */}
           <Link
             to="Features"
             spy={true}
@@ -265,6 +263,7 @@ function Home() {
         </div>
       </div>
       <div>
+        {/* @ts-expect-error: TODO fix or replace this lib */}
         <Element name="Features">
           {features.map((feature, index) => (
             <div className="text-center mt-28" key={feature.title}>
@@ -391,6 +390,7 @@ function Home() {
             </div>
           ))}
         </Element>
+        {/* @ts-expect-error: TODO fix or replace this lib */}
         <Element name="Showcase" className="text-center">
           <div className="pt-32 text-5xl sm:text-6xl font-bold">
             {t("Showcase")}
@@ -415,6 +415,7 @@ function Home() {
             <ShowcaseList sites={showcaseSites.data} />
           </div>
         </Element>
+        {/* @ts-expect-error: TODO fix or replace this lib */}
         <Element name="Integration" className="text-center">
           <div className="pt-32 text-5xl sm:text-6xl font-bold">
             {t("Integration")}

src/app/layout.tsx

@@ -1,14 +1,26 @@
 import { dir } from "i18next"
+import { Metadata } from "next"
 import { headers } from "next/headers"
-import { useRouter } from "next/router"
 
 import "~/css/main.css"
+import { APP_DESCRIPTION, APP_NAME, SITE_URL } from "~/lib/env"
+import { fallbackLng } from "~/lib/i18n/settings"
 
-import { languages } from "./i18n/settings"
 import Providers from "./providers"
 
-export async function generateStaticParams() {
-  return languages.map((lng) => ({ lng }))
+// default site meta
+export const metadata: Metadata = {
+  title: APP_NAME,
+  description: APP_DESCRIPTION,
+  icons: `${SITE_URL}/assets/logo.svg`, // default site icon
+  openGraph: {
+    siteName: APP_NAME,
+    description: "", // modify by pages
+  },
+  twitter: {
+    title: undefined,
+    description: undefined,
+  },
 }
 
 export default function RootLayout({
@@ -16,21 +28,16 @@ export default function RootLayout({
 }: {
   children: React.ReactNode
 }) {
-  let lng = "en"
-  const router = useRouter()
-  const queryLang = router.query.lang as string
-  if (!queryLang) {
-    let acceptLang = headers().get("accept-language")?.split(",")[0]
-    if (acceptLang === "zh-HK" || acceptLang === "zh-TW") {
-      acceptLang = "zh-TW"
-    } else {
-      acceptLang = acceptLang?.split("-")[0]
-    }
-    if (acceptLang) {
-      lng = acceptLang
-    }
+  let lng = fallbackLng
+
+  let acceptLang = headers().get("accept-language")?.split(",")[0]
+  if (acceptLang === "zh-HK" || acceptLang === "zh-TW") {
+    acceptLang = "zh-TW"
   } else {
-    lng = queryLang
+    acceptLang = acceptLang?.split("-")[0]
+  }
+  if (acceptLang) {
+    lng = acceptLang
   }
 
   return (

src/app/providers.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import "aplayer-react/dist/index.css"
 import NextNProgress from "nextjs-progressbar"
 import { useState } from "react"

src/components/common/ConnectButton.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { useTranslation } from "next-i18next"
 import React, { useEffect, useState } from "react"
 

src/components/common/DarkModeSwitch.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { Switch } from "@headlessui/react"
 
 import { useDarkModeSwitch, useIsDark } from "~/hooks/useDarkMode"

src/components/common/Logo.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import Lottie, { type LottieRefCurrentProps } from "lottie-react"
 import React, { useRef } from "react"
 

src/components/ui/Image.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { ImageProps, default as NextImage } from "next/image"
 import React, { useEffect } from "react"
 

src/components/ui/UniLink.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import Link from "next/link"
 
 export type UniLinkProps = {