Sync branding assets and use new site logo

Replaces the text-based header brand with a reusable `SiteLogo` component that switches light/dark logo variants. Updates metadata to use `og-default.png` and adds organization logo URLs in structured data for richer SEO output. The content prep script now syncs logo assets from `docs/images/logo` into `public/brand`, app icons, and default OG image, with generated brand/icon files ignored in git.

Author: ProgrammerNomad

.gitignore

@@ -22,6 +22,11 @@
 /content/docs
 /.source
 /lib/navigation-data.ts
+/public/brand/
+/public/og-default.png
+/app/favicon.ico
+/app/icon.png
+/app/apple-icon.png
 
 # Misc
 .DS_Store

app/favicon.ico

@@ -3,6 +3,7 @@
 import Link from "next/link";
 import { ThemeSwitch } from "fumadocs-ui/layouts/shared/slots/theme-switch";
 import { GitHubIcon } from "@/components/github-icon";
+import { SiteLogo } from "@/components/site-logo";
 import { buttonVariants } from "@/components/ui/button";
 import { siteConfig } from "@/content/homepage";
 import { siteHeaderNav } from "@/lib/navigation";
@@ -14,9 +15,10 @@ export function SiteHeader() {
       <div className="mx-auto flex h-14 max-w-6xl items-center justify-between gap-4 px-4 sm:px-6">
         <Link
           href="/"
-          className="text-lg font-semibold tracking-tight text-foreground"
+          className="flex items-center"
+          aria-label={siteConfig.name}
         >
-          {siteConfig.name}
+          <SiteLogo />
         </Link>
         <nav className="hidden items-center gap-6 md:flex">
           {siteHeaderNav.map((item) => (

components/site-header.tsx

@@ -0,0 +1,27 @@
+import { siteConfig } from "@/content/homepage";
+import { cn } from "@/lib/utils";
+
+type SiteLogoProps = {
+  className?: string;
+};
+
+export function SiteLogo({ className }: SiteLogoProps) {
+  return (
+    <>
+      <img
+        src="/brand/logo.svg"
+        alt={siteConfig.name}
+        width={32}
+        height={32}
+        className={cn("h-8 w-8 dark:hidden", className)}
+      />
+      <img
+        src="/brand/logo-dark.svg"
+        alt={siteConfig.name}
+        width={32}
+        height={32}
+        className={cn("hidden h-8 w-8 dark:block", className)}
+      />
+    </>
+  );
+}

components/site-logo.tsx

@@ -1,7 +1,7 @@
 import type { Metadata } from "next";
 import { siteConfig } from "@/content/homepage";
 
-export const DEFAULT_OG_IMAGE = "/og-default.svg";
+export const DEFAULT_OG_IMAGE = "/og-default.png";
 
 export function pageUrl(path: string): string {
   const normalized = path.startsWith("/") ? path : `/${path}`;

lib/page-metadata.ts

@@ -1,6 +1,8 @@
 import { siteConfig } from "@/content/homepage";
 import { pageUrl } from "@/lib/page-metadata";
 
+export const ORGANIZATION_LOGO = `${siteConfig.url}/brand/icon-512.png`;
+
 type Breadcrumb = { label: string; href?: string };
 
 const FAQ_ENTRIES = [
@@ -47,6 +49,7 @@ export function websiteSchemas() {
       name: siteConfig.name,
       url: siteConfig.url,
       email: siteConfig.email,
+      logo: ORGANIZATION_LOGO,
       sameAs: [siteConfig.githubUrl],
     },
     {
@@ -87,6 +90,7 @@ export function docArticleSchema({
       "@type": "Organization",
       name: siteConfig.name,
       url: siteConfig.url,
+      logo: ORGANIZATION_LOGO,
     },
     ...(modifiedTime ? { dateModified: modifiedTime } : {}),
   };

lib/structured-data.ts

@@ -63,3 +63,48 @@ if (fs.existsSync(imagesSrc)) {
 } else {
   fs.mkdirSync(imagesDest, { recursive: true });
 }
+
+const logoSrc = path.join(imagesSrc, "logo");
+const brandDest = path.join(websiteRoot, "public", "brand");
+const appDir = path.join(websiteRoot, "app");
+
+function syncLogoAssets() {
+  if (!fs.existsSync(logoSrc)) {
+    console.warn("Logo folder not found at:", logoSrc);
+    return;
+  }
+
+  fs.rmSync(brandDest, { recursive: true, force: true });
+  fs.mkdirSync(brandDest, { recursive: true });
+
+  for (const file of fs.readdirSync(logoSrc)) {
+    const srcPath = path.join(logoSrc, file);
+    if (!fs.statSync(srcPath).isFile()) continue;
+    if (!/\.(svg|png|jpe?g|webp|ico)$/i.test(file)) continue;
+    fs.copyFileSync(srcPath, path.join(brandDest, file));
+  }
+
+  const faviconSrc = path.join(logoSrc, "favicon.ico");
+  if (fs.existsSync(faviconSrc)) {
+    fs.copyFileSync(faviconSrc, path.join(appDir, "favicon.ico"));
+  }
+
+  const icon512Src = path.join(logoSrc, "icon-512.png");
+  if (fs.existsSync(icon512Src)) {
+    fs.copyFileSync(icon512Src, path.join(appDir, "icon.png"));
+  }
+
+  const appleIconSrc = path.join(logoSrc, "apple-icon.png");
+  if (fs.existsSync(appleIconSrc)) {
+    fs.copyFileSync(appleIconSrc, path.join(appDir, "apple-icon.png"));
+  }
+
+  const ogSrc = path.join(logoSrc, "og-default.png");
+  if (fs.existsSync(ogSrc)) {
+    fs.copyFileSync(ogSrc, path.join(websiteRoot, "public", "og-default.png"));
+  }
+
+  console.log("Synced docs/images/logo → public/brand + app icons");
+}
+
+syncLogoAssets();