From 62d201f0888120aff53c344fcc6f5f3225e14876 Mon Sep 17 00:00:00 2001
From: enpitsulin <enpitsulin@gmail.com>
Date: Sat, 6 May 2023 21:57:27 +0800
Subject: [PATCH] feat: app router (#492)

---
 .../{ => components}/EntranceButton.tsx       |  0
 src/app/(home)/components/Header.tsx          | 66 ++++++++++++++++++
 src/app/(home)/layout.tsx                     | 68 ++-----------------
 src/app/(home)/page.tsx                       | 15 ++--
 src/app/layout.tsx                            | 43 +++++++-----
 src/app/providers.tsx                         |  2 +
 src/components/common/ConnectButton.tsx       |  2 +
 src/components/common/DarkModeSwitch.tsx      |  2 +
 src/components/common/Logo.tsx                |  2 +
 src/components/ui/Image.tsx                   |  2 +
 src/components/ui/UniLink.tsx                 |  2 +
 src/{app => lib}/i18n/index.ts                |  0
 src/{app => lib}/i18n/locales/en/common.json  |  0
 .../i18n/locales/en/dashboard.json            |  0
 src/{app => lib}/i18n/locales/en/index.json   |  0
 src/{app => lib}/i18n/locales/en/site.json    |  0
 src/{app => lib}/i18n/locales/ja/common.json  |  0
 .../i18n/locales/ja/dashboard.json            |  0
 src/{app => lib}/i18n/locales/ja/index.json   |  0
 src/{app => lib}/i18n/locales/ja/site.json    |  0
 .../i18n/locales/zh-TW/common.json            |  0
 .../i18n/locales/zh-TW/dashboard.json         |  0
 .../i18n/locales/zh-TW/index.json             |  0
 src/{app => lib}/i18n/locales/zh-TW/site.json |  0
 src/{app => lib}/i18n/locales/zh/common.json  |  0
 .../i18n/locales/zh/dashboard.json            |  0
 src/{app => lib}/i18n/locales/zh/index.json   |  0
 src/{app => lib}/i18n/locales/zh/site.json    |  0
 src/{app => lib}/i18n/settings.ts             |  0
 29 files changed, 118 insertions(+), 86 deletions(-)
 rename src/app/(home)/{ => components}/EntranceButton.tsx (100%)
 create mode 100644 src/app/(home)/components/Header.tsx
 rename src/{app => lib}/i18n/index.ts (100%)
 rename src/{app => lib}/i18n/locales/en/common.json (100%)
 rename src/{app => lib}/i18n/locales/en/dashboard.json (100%)
 rename src/{app => lib}/i18n/locales/en/index.json (100%)
 rename src/{app => lib}/i18n/locales/en/site.json (100%)
 rename src/{app => lib}/i18n/locales/ja/common.json (100%)
 rename src/{app => lib}/i18n/locales/ja/dashboard.json (100%)
 rename src/{app => lib}/i18n/locales/ja/index.json (100%)
 rename src/{app => lib}/i18n/locales/ja/site.json (100%)
 rename src/{app => lib}/i18n/locales/zh-TW/common.json (100%)
 rename src/{app => lib}/i18n/locales/zh-TW/dashboard.json (100%)
 rename src/{app => lib}/i18n/locales/zh-TW/index.json (100%)
 rename src/{app => lib}/i18n/locales/zh-TW/site.json (100%)
 rename src/{app => lib}/i18n/locales/zh/common.json (100%)
 rename src/{app => lib}/i18n/locales/zh/dashboard.json (100%)
 rename src/{app => lib}/i18n/locales/zh/index.json (100%)
 rename src/{app => lib}/i18n/locales/zh/site.json (100%)
 rename src/{app => lib}/i18n/settings.ts (100%)

diff --git a/src/app/(home)/EntranceButton.tsx b/src/app/(home)/components/EntranceButton.tsx
similarity index 100%
rename from src/app/(home)/EntranceButton.tsx
rename to src/app/(home)/components/EntranceButton.tsx
diff --git a/src/app/(home)/components/Header.tsx b/src/app/(home)/components/Header.tsx
new file mode 100644
index 00000000..62687764
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/src/app/(home)/layout.tsx b/src/app/(home)/layout.tsx
index ec790ddb..e47e26af 100644
--- a/src/app/(home)/layout.tsx
+++ b/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">
diff --git a/src/app/(home)/page.tsx b/src/app/(home)/page.tsx
index 9953ee36..3758ef1e 100644
--- a/src/app/(home)/page.tsx
+++ b/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")}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 53b601a8..37e53b1d 100644
--- a/src/app/layout.tsx
+++ b/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 (
diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index 46503dd7..0509d148 100644
--- a/src/app/providers.tsx
+++ b/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"
diff --git a/src/components/common/ConnectButton.tsx b/src/components/common/ConnectButton.tsx
index c062171b..77fae61b 100644
--- a/src/components/common/ConnectButton.tsx
+++ b/src/components/common/ConnectButton.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { useTranslation } from "next-i18next"
 import React, { useEffect, useState } from "react"
 
diff --git a/src/components/common/DarkModeSwitch.tsx b/src/components/common/DarkModeSwitch.tsx
index 42365463..988dce9c 100644
--- a/src/components/common/DarkModeSwitch.tsx
+++ b/src/components/common/DarkModeSwitch.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { Switch } from "@headlessui/react"
 
 import { useDarkModeSwitch, useIsDark } from "~/hooks/useDarkMode"
diff --git a/src/components/common/Logo.tsx b/src/components/common/Logo.tsx
index 5771a165..6f22aeb7 100644
--- a/src/components/common/Logo.tsx
+++ b/src/components/common/Logo.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import Lottie, { type LottieRefCurrentProps } from "lottie-react"
 import React, { useRef } from "react"
 
diff --git a/src/components/ui/Image.tsx b/src/components/ui/Image.tsx
index 4ec7e3d1..8252d31d 100644
--- a/src/components/ui/Image.tsx
+++ b/src/components/ui/Image.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import { ImageProps, default as NextImage } from "next/image"
 import React, { useEffect } from "react"
 
diff --git a/src/components/ui/UniLink.tsx b/src/components/ui/UniLink.tsx
index 4d2e1a3a..4a7d0f55 100644
--- a/src/components/ui/UniLink.tsx
+++ b/src/components/ui/UniLink.tsx
@@ -1,3 +1,5 @@
+"use client"
+
 import Link from "next/link"
 
 export type UniLinkProps = {
diff --git a/src/app/i18n/index.ts b/src/lib/i18n/index.ts
similarity index 100%
rename from src/app/i18n/index.ts
rename to src/lib/i18n/index.ts
diff --git a/src/app/i18n/locales/en/common.json b/src/lib/i18n/locales/en/common.json
similarity index 100%
rename from src/app/i18n/locales/en/common.json
rename to src/lib/i18n/locales/en/common.json
diff --git a/src/app/i18n/locales/en/dashboard.json b/src/lib/i18n/locales/en/dashboard.json
similarity index 100%
rename from src/app/i18n/locales/en/dashboard.json
rename to src/lib/i18n/locales/en/dashboard.json
diff --git a/src/app/i18n/locales/en/index.json b/src/lib/i18n/locales/en/index.json
similarity index 100%
rename from src/app/i18n/locales/en/index.json
rename to src/lib/i18n/locales/en/index.json
diff --git a/src/app/i18n/locales/en/site.json b/src/lib/i18n/locales/en/site.json
similarity index 100%
rename from src/app/i18n/locales/en/site.json
rename to src/lib/i18n/locales/en/site.json
diff --git a/src/app/i18n/locales/ja/common.json b/src/lib/i18n/locales/ja/common.json
similarity index 100%
rename from src/app/i18n/locales/ja/common.json
rename to src/lib/i18n/locales/ja/common.json
diff --git a/src/app/i18n/locales/ja/dashboard.json b/src/lib/i18n/locales/ja/dashboard.json
similarity index 100%
rename from src/app/i18n/locales/ja/dashboard.json
rename to src/lib/i18n/locales/ja/dashboard.json
diff --git a/src/app/i18n/locales/ja/index.json b/src/lib/i18n/locales/ja/index.json
similarity index 100%
rename from src/app/i18n/locales/ja/index.json
rename to src/lib/i18n/locales/ja/index.json
diff --git a/src/app/i18n/locales/ja/site.json b/src/lib/i18n/locales/ja/site.json
similarity index 100%
rename from src/app/i18n/locales/ja/site.json
rename to src/lib/i18n/locales/ja/site.json
diff --git a/src/app/i18n/locales/zh-TW/common.json b/src/lib/i18n/locales/zh-TW/common.json
similarity index 100%
rename from src/app/i18n/locales/zh-TW/common.json
rename to src/lib/i18n/locales/zh-TW/common.json
diff --git a/src/app/i18n/locales/zh-TW/dashboard.json b/src/lib/i18n/locales/zh-TW/dashboard.json
similarity index 100%
rename from src/app/i18n/locales/zh-TW/dashboard.json
rename to src/lib/i18n/locales/zh-TW/dashboard.json
diff --git a/src/app/i18n/locales/zh-TW/index.json b/src/lib/i18n/locales/zh-TW/index.json
similarity index 100%
rename from src/app/i18n/locales/zh-TW/index.json
rename to src/lib/i18n/locales/zh-TW/index.json
diff --git a/src/app/i18n/locales/zh-TW/site.json b/src/lib/i18n/locales/zh-TW/site.json
similarity index 100%
rename from src/app/i18n/locales/zh-TW/site.json
rename to src/lib/i18n/locales/zh-TW/site.json
diff --git a/src/app/i18n/locales/zh/common.json b/src/lib/i18n/locales/zh/common.json
similarity index 100%
rename from src/app/i18n/locales/zh/common.json
rename to src/lib/i18n/locales/zh/common.json
diff --git a/src/app/i18n/locales/zh/dashboard.json b/src/lib/i18n/locales/zh/dashboard.json
similarity index 100%
rename from src/app/i18n/locales/zh/dashboard.json
rename to src/lib/i18n/locales/zh/dashboard.json
diff --git a/src/app/i18n/locales/zh/index.json b/src/lib/i18n/locales/zh/index.json
similarity index 100%
rename from src/app/i18n/locales/zh/index.json
rename to src/lib/i18n/locales/zh/index.json
diff --git a/src/app/i18n/locales/zh/site.json b/src/lib/i18n/locales/zh/site.json
similarity index 100%
rename from src/app/i18n/locales/zh/site.json
rename to src/lib/i18n/locales/zh/site.json
diff --git a/src/app/i18n/settings.ts b/src/lib/i18n/settings.ts
similarity index 100%
rename from src/app/i18n/settings.ts
rename to src/lib/i18n/settings.ts