♻️ Full front+backend migration from page router to app router.

Followed nextjs official docs and best practices, backed by Playwright behavior regression test passing. Upated unit tests to reflect the new framework.
wei · Dec 16, 2024 · 5b60e5b · 5b60e5b
1 parent 5970ad6
commit 5b60e5b
Show file tree

Hide file tree

Showing 20 changed files with 494 additions and 316 deletions.
diff --git a/app/[_owner]/[_name]/page.tsx b/app/[_owner]/[_name]/page.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import { JSX } from 'react'
+
+import MainRenderer from '@/src/components/mainRenderer'
+
+export default function PreviewConfigPage(): JSX.Element {
+  return <MainRenderer />
+}
diff --git a/styles/global.css → app/globals.css b/styles/global.css → app/globals.css
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,64 @@
+import { GoogleTagManager } from '@next/third-parties/google'
+import type { Metadata, Viewport } from 'next'
+import { Inter } from 'next/font/google'
+import { JSX, type ReactNode } from 'react'
+import { Toaster } from 'react-hot-toast'
+
+import './globals.css'
+import { version } from '@/common/helpers'
+import Footer from '@/src/components/footer/footer'
+import Header from '@/src/components/header/header'
+
+const inter = Inter({
+  subsets: ['latin'],
+})
+
+export const metadata: Metadata = {
+  title: 'GitHub Socialify',
+  description: '💞 Socialify your project. 🌐 Share with the world!',
+  manifest: '/manifest.json',
+  openGraph: {
+    images: [
+      {
+        url: 'https://socialify.git.ci/wei/socialify/png?description=1&font=Raleway&issues=1&language=1&pattern=Charlie%20Brown&pulls=1&stargazers=1&theme=Light',
+        width: 1280,
+        height: 640,
+        type: 'image/png',
+      },
+    ],
+  },
+}
+
+export const viewport: Viewport = {
+  themeColor: '#000000',
+  width: 'device-width',
+  // The following settings breaks mobile view, use with caution.
+  // initialScale: 1,
+  // maximumScale: 1,
+  // userScalable: false,
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{ children: ReactNode }>): JSX.Element {
+  return (
+    <html lang="en">
+      <head>
+        <meta name="viewport" content="minimal-ui" />
+        <meta property="x-socialify-version" content={version} />
+        <link rel="shortcut icon" href="/favicon.ico" />
+        <link rel="apple-touch-icon" href="/assets/logo192.png" />
+      </head>
+      <body
+        className={`${inter.className} flex flex-col min-h-screen socialify-bg`}
+      >
+        <Header />
+        <main className="flex-1 flex">{children}</main>
+        <Footer />
+        <Toaster />
+      </body>
+      {/* Google Tag Manager, env only relevant/accessible to owner, use '' for dev. */}
+      <GoogleTagManager gtmId={process.env.GTM_ID || ''} />
+    </html>
+  )
+}
diff --git a/pages/404.tsx → app/not-found.tsx b/pages/404.tsx → app/not-found.tsx
@@ -1,6 +1,8 @@
+import { JSX } from 'react'
+
 import ErrorContent from '@/src/components/error/error'
 
-const HomePage = () => {
+export default function NotFoundPage(): JSX.Element {
   return (
     <ErrorContent
       code="404"
@@ -9,5 +11,3 @@ const HomePage = () => {
     />
   )
 }
-
-export default HomePage
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,9 @@
+'use client'
+
+import { JSX } from 'react'
+
+import Repo from '@/src/components/repo/repo'
+
+export default function HomePage(): JSX.Element {
+  return <Repo />
+}
diff --git a/next-env.d.ts b/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/app/building-your-application/configuring/typescript for more information.
diff --git a/pages/[_owner]/[_name].tsx b/pages/[_owner]/[_name].tsx
diff --git a/pages/_app.tsx b/pages/_app.tsx
diff --git a/pages/index.tsx b/pages/index.tsx