From ce80d7a272209acbebb76f9235fe52855fdfcad7 Mon Sep 17 00:00:00 2001
From: Marc LeBlanc <7050295+marcleblanc2@users.noreply.github.com>
Date: Thu, 17 Sep 2026 04:20:27 -0600
Subject: [PATCH] perf: serve header logo from hashed static assets

Import the two logo SVGs instead of serving them from public/, so
they ship from /_next/static/media/ with a content hash and a
one-year immutable Cache-Control header, and Cloudflare caches them
like the rest of the static bundle. public/ files are served with
max-age=0 and BYPASS the Cloudflare cache, costing two origin
round-trips on every page load.

The OG image route now reads the dark logo from src/images/.

Amp-Thread-ID: https://ampcode.com/threads/T-01a0ac9d-704f-73fe-8211-1b3e5840969f
Co-authored-by: Amp <amp@ampcode.com>
---
 src/app/api/og/[...path]/route.tsx          |  2 +-
 src/components/Layout.tsx                   |  2 +-
 src/components/Logo.tsx                     | 21 +++++++++++++--------
 {public => src/images}/logo-theme-dark.svg  |  0
 {public => src/images}/logo-theme-light.svg |  0
 5 files changed, 15 insertions(+), 10 deletions(-)
 rename {public => src/images}/logo-theme-dark.svg (100%)
 rename {public => src/images}/logo-theme-light.svg (100%)

diff --git a/src/app/api/og/[...path]/route.tsx b/src/app/api/og/[...path]/route.tsx
index 6f4e5172d..baed7c958 100644
--- a/src/app/api/og/[...path]/route.tsx
+++ b/src/app/api/og/[...path]/route.tsx
@@ -39,7 +39,7 @@ export async function GET(
 
 	const [polySansFont, logoSvg] = await Promise.all([
 		readFile(join(process.cwd(), 'src/fonts/PolySans-Neutral.woff')),
-		readFile(join(process.cwd(), 'public/logo-theme-dark.svg'), 'utf-8')
+		readFile(join(process.cwd(), 'src/images/logo-theme-dark.svg'), 'utf-8')
 	]);
 
 	const logoDataUrl = `data:image/svg+xml,${encodeURIComponent(logoSvg)}`;
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index ee035ba5a..0a93fa47c 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -60,7 +60,7 @@ function Header() {
 							aria-label="Home page"
 							className="relative z-10 hidden md:block"
 						>
-							<Logo className="h-9 w-auto" />
+							<Logo />
 						</Link>
 						<Link
 							href="/"
diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx
index 2acb056e7..a81951215 100644
--- a/src/components/Logo.tsx
+++ b/src/components/Logo.tsx
@@ -1,19 +1,24 @@
-export function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
-	const basePath = process.env.NEXT_PUBLIC_DOCS_BASE_PATH || '';
+import Image from 'next/image';
 
+// Imported, not served from `public/`, so the files get content-hashed
+// `/_next/static/media/` URLs that the CDN caches immutably.
+import logoDark from '@/images/logo-theme-dark.svg';
+import logoLight from '@/images/logo-theme-light.svg';
+
+export function Logo() {
 	return (
 		<>
-			{/* eslint-disable-next-line @next/next/no-img-element -- SVG logos do not need image optimization. */}
-			<img
+			<Image
 				className="hidden h-[23px] w-[190px] dark:block"
-				src={`${basePath}/logo-theme-dark.svg`}
+				src={logoDark}
 				alt="Sourcegraph Docs"
+				priority
 			/>
-			{/* eslint-disable-next-line @next/next/no-img-element -- SVG logos do not need image optimization. */}
-			<img
+			<Image
 				className="block h-[23px] w-[190px] dark:hidden"
-				src={`${basePath}/logo-theme-light.svg`}
+				src={logoLight}
 				alt="Sourcegraph Docs"
+				priority
 			/>
 		</>
 	);
diff --git a/public/logo-theme-dark.svg b/src/images/logo-theme-dark.svg
similarity index 100%
rename from public/logo-theme-dark.svg
rename to src/images/logo-theme-dark.svg
diff --git a/public/logo-theme-light.svg b/src/images/logo-theme-light.svg
similarity index 100%
rename from public/logo-theme-light.svg
rename to src/images/logo-theme-light.svg