feat: rewrite home page

packages/home/next.config.js

@@ -22,14 +22,18 @@ function getEnvs() {
 }
 
 function getNextConfig() {
-    return {
+    /** @type {import('next').NextConfig} */
+    const config = {
         // Next config
         productionBrowserSourceMaps: true,
         trailingSlash: false,
         devIndicators: {
             // https://nextjs.org/docs/api-reference/next.config.js/build-indicator
             buildActivityPosition: "bottom-left",
         },
+        experimental: {
+            appDir: true,
+        },
         webpack: (config, _options) => {
             config.module.rules.push({
                 test: /\.(jpe?g|png|webp)$/i,
@@ -54,6 +58,7 @@ function getNextConfig() {
         },
         env: getEnvs(),
     }
+    return config
 }
 
 const baseConfig = withBundleAnalyzer(getNextConfig())

packages/home/src/app/head.tsx

@@ -0,0 +1,60 @@
+import React from "react"
+
+const NextMeta: React.FC<{ host: string; hasManifest: boolean; description: string }> = ({ host, hasManifest, description }) => {
+    const image = `${host}/share/img/icons/android-chrome-512x512.png`
+    return (
+        <>
+            <meta name="description" content={description} />
+
+            {/* PWA */}
+            {hasManifest && <link rel="manifest" href="/manifest.json" />}
+            {/*
+            > Always specify the theme color using the meta tag. Even though it can also be declared in the web app manifest file:
+            > - Browsers only acknowledge the value from the web app manifest file once the user has added the page to their home screen.
+            > - The theme-color meta tag overwrites the value specified in the web app manifest file so it allows for better individual page level customization.
+            https://webhint.io/docs/user-guide/hints/hint-meta-theme-color/
+            */}
+            {/* This color is the default address bar color of Chrome */}
+            <meta name="theme-color" content="#e6eaed"></meta>
+
+            {/* Apple https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html */}
+            <link rel="apple-touch-icon" href="/share/img/icons/apple-touch-icon-192x192.png" sizes="192x192"></link>
+            <link rel="apple-touch-icon" href="/share/img/icons/apple-touch-icon-180x180.png" sizes="180x180"></link>
+            <link rel="apple-touch-icon" href="/share/img/icons/apple-touch-icon-152x152.png" sizes="152x152"></link>
+            <meta name="apple-mobile-web-app-capable" content="yes"></meta>
+
+            {/* Mircosoft */}
+            <meta name="msapplication-TileColor" content="#222222" />
+
+            {/* Twitter https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards */}
+            <meta name="twitter:card" content="summary" />
+            <meta name="twitter:url" content={host} />
+            <meta name="twitter:title" content="Rino" />
+            <meta name="twitter:description" content={description} />
+            <meta name="twitter:image" content={image} />
+            <meta name="twitter:creator" content="@xxxxxxx" />
+
+            {/* Open Graph protocol https://ogp.me/ */}
+            <meta property="og:type" content="website" />
+            <meta property="og:title" content="Rino" />
+            <meta property="og:site_name" content="Rino" />
+            <meta property="og:description" content={description} />
+            <meta property="og:url" content={host} />
+            <meta property="og:image" content={image} />
+        </>
+    )
+}
+
+export default function Head() {
+    const host = "https://www.rino.app"
+    const hasManifest = false
+    const description = "WYSIWYG Markdown Editor"
+
+    return (
+        <>
+            <meta name="viewport" content="initial-scale=1.0, width=device-width" />
+            <title>Rino</title>
+            <NextMeta hasManifest={hasManifest} host={host} description={description} />
+        </>
+    )
+}

packages/home/src/app/layout.tsx

@@ -0,0 +1,11 @@
+import React from "react"
+
+function RootLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang="en">
+            <body>{children}</body>
+        </html>
+    )
+}
+
+export default RootLayout

packages/home/src/app/page.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import { CssBaseline, ThemeProvider } from "@mui/material"
+import React from "react"
+import snapshot from "../assets/share/snapshot-mac.png"
+import { Homepage } from "../components/homepage"
+import { theme } from "../styles/theme"
+
+const IndexPage: React.FC = () => {
+    return (
+        <ThemeProvider theme={theme}>
+            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+            <CssBaseline />
+
+            <Homepage
+                hero={{
+                    imageProps: {
+                        src: snapshot.src,
+                        srcSet: snapshot.srcSet,
+                        width: snapshot.width,
+                        height: snapshot.height,
+                        loading: "lazy",
+                    },
+                }}
+            />
+        </ThemeProvider>
+    )
+}
+
+export default IndexPage

packages/home/tsconfig.json

@@ -2,7 +2,11 @@
 {
     "compilerOptions": {
         "target": "es6",
-        "lib": ["dom", "dom.iterable", "esnext"],
+        "lib": [
+            "dom",
+            "dom.iterable",
+            "esnext"
+        ],
         "allowJs": true,
         "skipLibCheck": true,
         "strict": true,
@@ -14,10 +18,20 @@
         "resolveJsonModule": true,
         "isolatedModules": true,
         "jsx": "preserve",
-        "incremental": true
+        "incremental": true,
+        "plugins": [
+            {
+                "name": "next"
+            }
+        ]
     },
     "include": [
-        "./*.d.ts" // We don't actually use this tsconfig.json. It's just for Next.js
+        // We don't actually use this tsconfig.json. It's just for Next.js
+        "./*.d.ts",
+        "./src/global.d.ts",
+        ".next/types/**/*.ts"
     ],
-    "exclude": ["node_modules"]
+    "exclude": [
+        "node_modules"
+    ]
 }