feat(docs): add unique per-page titles for SEO (#106)

Author: uhyo

packages/docs/src/App.tsx

@@ -37,109 +37,125 @@ export const routes: RouteDefinition[] = [
       route({
         path: "/getting-started",
         component: (
-          <Layout>
+          <Layout title="Getting Started">
             {defer(<GettingStarted />, { name: "GettingStarted" })}
           </Layout>
         ),
       }),
       route({
         path: "/getting-started/migrating-from-vite-spa",
         component: (
-          <Layout>
+          <Layout title="Migrating from Vite SPA">
             {defer(<MigratingFromViteSPA />, { name: "MigratingFromViteSPA" })}
           </Layout>
         ),
       }),
       route({
         path: "/faq",
-        component: <Layout>{defer(<FAQ />, { name: "FAQ" })}</Layout>,
+        component: (
+          <Layout title="FAQ">{defer(<FAQ />, { name: "FAQ" })}</Layout>
+        ),
       }),
       route({
         path: "/api/funstack-static",
         component: (
-          <Layout>
+          <Layout title="funstackStatic()">
             {defer(<FunstackStaticApi />, { name: "FunstackStaticApi" })}
           </Layout>
         ),
       }),
       route({
         path: "/api/defer",
-        component: <Layout>{defer(<DeferApi />, { name: "DeferApi" })}</Layout>,
+        component: (
+          <Layout title="defer()">
+            {defer(<DeferApi />, { name: "DeferApi" })}
+          </Layout>
+        ),
       }),
       route({
         path: "/api/build-entry",
         component: (
-          <Layout>{defer(<BuildEntryApi />, { name: "BuildEntryApi" })}</Layout>
+          <Layout title="BuildEntryFunction">
+            {defer(<BuildEntryApi />, { name: "BuildEntryApi" })}
+          </Layout>
         ),
       }),
       route({
         path: "/api/entry-definition",
         component: (
-          <Layout>
+          <Layout title="EntryDefinition">
             {defer(<EntryDefinitionApi />, { name: "EntryDefinitionApi" })}
           </Layout>
         ),
       }),
       route({
         path: "/learn/how-it-works",
         component: (
-          <Layout>{defer(<HowItWorks />, { name: "HowItWorks" })}</Layout>
+          <Layout title="How It Works">
+            {defer(<HowItWorks />, { name: "HowItWorks" })}
+          </Layout>
         ),
       }),
       route({
         path: "/learn/rsc",
         component: (
-          <Layout>{defer(<RSCConcept />, { name: "RSCConcept" })}</Layout>
+          <Layout title="React Server Components">
+            {defer(<RSCConcept />, { name: "RSCConcept" })}
+          </Layout>
         ),
       }),
       route({
         path: "/learn/optimizing-payloads",
         component: (
-          <Layout>
+          <Layout title="Optimizing RSC Payloads">
             {defer(<OptimizingPayloads />, { name: "OptimizingPayloads" })}
           </Layout>
         ),
       }),
       route({
         path: "/learn/lazy-server-components",
         component: (
-          <Layout>
+          <Layout title="Using lazy() in Server Components">
             {defer(<LazyServerComponents />, { name: "LazyServerComponents" })}
           </Layout>
         ),
       }),
       route({
         path: "/learn/defer-and-activity",
         component: (
-          <Layout>
+          <Layout title="Prefetching with defer() and Activity">
             {defer(<DeferAndActivity />, { name: "DeferAndActivity" })}
           </Layout>
         ),
       }),
       route({
         path: "/learn/file-system-routing",
         component: (
-          <Layout>
+          <Layout title="File-System Routing">
             {defer(<FileSystemRouting />, { name: "FileSystemRouting" })}
           </Layout>
         ),
       }),
       route({
         path: "/advanced/multiple-entrypoints",
         component: (
-          <Layout>
+          <Layout title="Multiple Entrypoints (SSG)">
             {defer(<MultipleEntrypoints />, { name: "MultipleEntrypoints" })}
           </Layout>
         ),
       }),
       route({
         path: "/advanced/ssr",
-        component: <Layout>{defer(<SSR />, { name: "SSR" })}</Layout>,
+        component: (
+          <Layout title="Server-Side Rendering">
+            {defer(<SSR />, { name: "SSR" })}
+          </Layout>
+        ),
       }),
       route({
         path: "*",
         component: (
-          <Layout>
+          <Layout title="Not Found">
             <NotFound />
           </Layout>
         ),

packages/docs/src/components/Layout/Layout.tsx

@@ -11,17 +11,25 @@ type LayoutVariant = "home" | "docs";
 interface LayoutProps {
   children: React.ReactNode;
   variant?: LayoutVariant;
+  title?: string;
 }
 
 export const Layout: React.FC<LayoutProps> = ({
   children,
   variant = "docs",
+  title,
 }) => {
   const layoutClass =
     variant === "home" ? styles.homeLayout : styles.docsLayout;
+  const fullTitle = title
+    ? `${title} | FUNSTACK Static`
+    : "FUNSTACK Static - docs";
 
   return (
     <div className={`${styles.layout} ${layoutClass}`}>
+      <title>{fullTitle}</title>
+      <meta property="og:title" content={fullTitle} />
+      <meta name="twitter:title" content={fullTitle} />
       <Header menuSlot={<MobileMenu />} />
       <div className={styles.main}>
         {variant === "docs" && <Sidebar />}

packages/docs/src/root.tsx

@@ -7,14 +7,12 @@ export default function Root({ children }: { children: React.ReactNode }) {
       <head>
         <meta charSet="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>FUNSTACK Static - docs</title>
         <meta
           name="description"
           content="FUNSTACK Static - A React framework without servers"
         />
         {/* Open Graph / Facebook */}
         <meta property="og:type" content="website" />
-        <meta property="og:title" content="FUNSTACK Static - docs" />
         <meta
           property="og:description"
           content="FUNSTACK Static - A React framework without servers"
@@ -25,7 +23,6 @@ export default function Root({ children }: { children: React.ReactNode }) {
         />
         {/* Twitter */}
         <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content="FUNSTACK Static - docs" />
         <meta
           name="twitter:description"
           content="FUNSTACK Static - A React framework without servers"