feat(docs-site): add the site-wide footer, shared with the marketing site

Pull the same footer from the shared unom CMS global (cms.unom.io) and render it globally under both the home and docs layouts. Read-only typed fetch in a server-side root loader (falls back to null on a CMS hiccup). Root-relative links target the marketing site, so they're resolved against its origin (the docs don't host /legal/* etc.); themed with Fumadocs tokens for light/dark. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-20 15:42:39 +02:00
parent 40109056e9
commit 72ca0419db
3 changed files with 101 additions and 1 deletions
@@ -1,11 +1,30 @@
 /// <reference types="vite/client" />
 import { createRootRoute, HeadContent, Outlet, Scripts } from '@tanstack/react-router'
+import { createServerFn } from '@tanstack/react-start'
 import * as React from 'react'
 import { RootProvider } from 'fumadocs-ui/provider/tanstack'
 import '@fontsource-variable/geist'
+import Footer from '@/components/Footer'
+import { type Footer as FooterData, findFooter } from '@/lib/cms'
 import appCss from '@/styles/app.css?url'

+// The footer is global and shared with the marketing site (one CMS global).
+// Fetch it once at the root, server-side, falling back to null so a CMS hiccup
+// never breaks the page.
+const getFooter = createServerFn({ method: 'GET' }).handler(
+  async (): Promise<FooterData | null> => {
+    try {
+      return await findFooter()
+    } catch {
+      return null
+    }
+  },
+)
+
 export const Route = createRootRoute({
+  loader: async (): Promise<{ footer: FooterData | null }> => ({
+    footer: await getFooter(),
+  }),
  head: () => ({
    meta: [
      { charSet: 'utf-8' },
@@ -36,7 +55,10 @@ function RootDocument({ children }: { children: React.ReactNode }) {
        <HeadContent />
      </head>
      <body className="flex flex-col min-h-screen">
-        <RootProvider>{children}</RootProvider>
+        <RootProvider>
+          {children}
+          <Footer />
+        </RootProvider>
        <Scripts />
      </body>
    </html>