fix(docs): add canonical URLs to prevent SEO duplicate content (#107)

Author: uhyo

packages/docs/src/App.tsx

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

packages/docs/src/build.ts

@@ -3,8 +3,7 @@ import path from "node:path";
 import type { BuildEntryFunction } from "@funstack/static/server";
 import type { RouteDefinition } from "@funstack/router/server";
 import { routes } from "./App";
-
-const siteUrl = "https://static.funstack.work";
+import { siteUrl } from "./constants";
 
 function collectPaths(routes: RouteDefinition[]): string[] {
   const paths: string[] = [];

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

@@ -1,5 +1,6 @@
 import type React from "react";
 import { Suspense } from "react";
+import { siteUrl } from "../../constants";
 import { Header } from "../Header/Header";
 import { MobileMenu } from "../MobileMenu/MobileMenu";
 import { Sidebar } from "../Sidebar/Sidebar";
@@ -12,23 +13,28 @@ interface LayoutProps {
   children: React.ReactNode;
   variant?: LayoutVariant;
   title?: string;
+  path: string;
 }
 
 export const Layout: React.FC<LayoutProps> = ({
   children,
   variant = "docs",
   title,
+  path,
 }) => {
   const layoutClass =
     variant === "home" ? styles.homeLayout : styles.docsLayout;
   const fullTitle = title
     ? `${title} | FUNSTACK Static`
     : "FUNSTACK Static - docs";
+  const canonicalUrl = path === "/" ? `${siteUrl}/` : `${siteUrl}${path}`;
 
   return (
     <div className={`${styles.layout} ${layoutClass}`}>
       <title>{fullTitle}</title>
+      <link rel="canonical" href={canonicalUrl} />
       <meta property="og:title" content={fullTitle} />
+      <meta property="og:url" content={canonicalUrl} />
       <meta name="twitter:title" content={fullTitle} />
       <Header menuSlot={<MobileMenu />} />
       <div className={styles.main}>

packages/docs/src/constants.ts

@@ -0,0 +1 @@
+export const siteUrl = "https://static.funstack.work";