docs: remove build lint warnings

Amp-Thread-ID: https://ampcode.com/threads/T-01a08e2d-682f-75dd-a050-cb9bf8888dac
Co-authored-by: Amp <amp@ampcode.com>

Author: marcleblanc2

pnpm-lock.yaml

@@ -42,7 +42,8 @@ export async function GET(
 			}}
 		>
 			{/* Sourcegraph logo */}
-			<img src={logoDataUrl} width={246} height={35} />
+			{/* eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text -- Satori requires a native image, and alt text is not rendered. */}
+			<img src={logoDataUrl} width={246} height={35} alt="" />
 
 			{/* Title */}
 			<div

src/app/api/og/[...path]/route.tsx

@@ -15,11 +15,6 @@ export function ContentTabs({ children, name }) {
   const [postContent, setPostContent] = useState(null);
 
   useEffect(() => {
-    updateTabFromURL();
-  }, []);
-
-  const updateTabFromURL = () => {
-
     const path = `/${params.slug.join('/')}`;
     const allPaths = children.map(child => child.props.href)
 
@@ -38,7 +33,7 @@ export function ContentTabs({ children, name }) {
         console.log('allPaths__', allPaths[0])
       }
     } else setSelectedTab(path)
-  };
+  }, [children, name, params.slug]);
 
   if (!onTab) return <div>{postContent}</div>
 

src/components/ContentTabs.jsx

@@ -3,11 +3,13 @@ export function Logo(props: React.ComponentPropsWithoutRef<'svg'>) {
 
 	return (
 		<>
+			{/* eslint-disable-next-line @next/next/no-img-element -- SVG logos do not need image optimization. */}
 			<img
 				className="hidden h-[23px] w-[190px] dark:block"
 				src={`${basePath}/logo-theme-dark.svg`}
 				alt="Sourcegraph Docs"
 			/>
+			{/* eslint-disable-next-line @next/next/no-img-element -- SVG logos do not need image optimization. */}
 			<img
 				className="block h-[23px] w-[190px] dark:hidden"
 				src={`${basePath}/logo-theme-light.svg`}

src/components/Logo.tsx

@@ -31,6 +31,7 @@ export function LinkCard({
 		<div className="not-prose group relative rounded-xl border border-light-border-2 dark:border-dark-border">
 			<div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 transition-opacity [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.light-bg)),var(--quick-links-hover-bg,theme(colors.light-bg-1)))_padding-box,linear-gradient(144deg,#F34E3F,#A96AF3)_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.dark-bg)]" />
 			<div className="relative flex items-center gap-4 overflow-hidden rounded-xl p-4 sm:gap-6">
+				{/* eslint-disable-next-line @next/next/no-img-element -- Small MDX icons do not need image optimization. */}
 				<img className="not-prose h-8 w-8" alt={imgAlt} src={imgSrc} />
 				<div className="flex flex-col items-start gap-1">
 					<h3 className="slate-900 font-display text-xl dark:text-white">

src/components/mdx/LinkCards.tsx

@@ -28,6 +28,7 @@ export function ProductCard({
 		<div className="group relative rounded-xl border border-light-border-2 dark:border-dark-border">
 			<div className="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 transition-opacity [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.light-bg)),var(--quick-links-hover-bg,theme(colors.light-bg-1)))_padding-box,linear-gradient(144deg,#F34E3F,#A96AF3)_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.dark-bg)]" />
 			<div className="relative flex flex-col items-start gap-y-4 overflow-hidden rounded-xl p-6">
+				{/* eslint-disable-next-line @next/next/no-img-element -- Small MDX icons do not need image optimization. */}
 				<img className="not-prose h-8 w-8" alt={imgAlt} src={imgSrc} />
 				<div>
 					<h2 className="font-display text-base text-slate-900 dark:text-white">

src/components/mdx/ProductCards.tsx

@@ -28,6 +28,7 @@ export function ZoomableImage({className, alt, ...props}: ZoomableImageProps) {
 
 	return (
 		<>
+			{/* eslint-disable-next-line @next/next/no-img-element -- MDX image dimensions are unknown. */}
 			<img
 				className={`cursor-zoom-in rounded-xl ${className ?? ''}`}
 				alt={alt}
@@ -63,6 +64,7 @@ export function ZoomableImage({className, alt, ...props}: ZoomableImageProps) {
 							<line x1="6" y1="6" x2="18" y2="18" />
 						</svg>
 					</button>
+					{/* eslint-disable-next-line @next/next/no-img-element -- MDX image dimensions are unknown. */}
 					<img
 						className="max-h-[90vh] max-w-[90vw] cursor-zoom-out rounded-lg object-contain"
 						alt={alt}