perf: serve header logo from hashed, CDN-cached static assets

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)}`;

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="/"

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
 			/>
 		</>
 	);