fix: eliminate FOUC and switch og:image to PNG

Replace `import appCss from '#/styles.css?url'` + `head.links` stylesheet
entry with a side-effect import. The two-pass Vite build (SSR + client)
was hashing the same CSS to different bytes; the SSR HTML referenced one
hash while only the other lived on disk, so the browser 404'd on the
stylesheet and painted unstyled until React 19 swapped in the working
one at hydration. Side-effect import routes both passes through the
unified asset pipeline so the URL matches.

Switch og:image from SVG to a 1200x630 PNG rendered from the SVG source
(Twitter/Facebook/LinkedIn don't render SVG previews reliably) and add
og:image:width/height/type/alt + twitter:image:alt so crawlers can lay
out the card before the image fetch resolves.

Author: gdarko

public/og-image.png

@@ -19,7 +19,7 @@ export interface HeadPayload {
 }
 
 const SITE_NAME = 'Packyard Documentation'
-const DEFAULT_OG_IMAGE = '/og-image.svg'
+const DEFAULT_OG_IMAGE = '/og-image.png'
 
 export function buildPageHead(input: SeoInput): HeadPayload {
   const origin = stripTrailing(input.baseUrl)
@@ -34,9 +34,14 @@ export function buildPageHead(input: SeoInput): HeadPayload {
     { property: 'og:title', content: input.title },
     { property: 'og:url', content: canonical },
     { property: 'og:image', content: image },
+    { property: 'og:image:width', content: '1200' },
+    { property: 'og:image:height', content: '630' },
+    { property: 'og:image:type', content: 'image/png' },
+    { property: 'og:image:alt', content: input.title },
     { name: 'twitter:card', content: 'summary_large_image' },
     { name: 'twitter:title', content: input.title },
     { name: 'twitter:image', content: image },
+    { name: 'twitter:image:alt', content: input.title },
   ]
 
   if (input.description) {

src/lib/seo.ts

@@ -9,7 +9,7 @@ import Footer from '#/components/Footer'
 import Header from '#/components/Header'
 import { getDocsConfig } from '#/lib/docs.server'
 
-import appCss from '#/styles.css?url'
+import '#/styles.css'
 
 const getRootData = createServerFn({ method: 'GET' }).handler(async () => {
   const config = getDocsConfig()
@@ -40,7 +40,6 @@ export const Route = createRootRoute({
       },
     ],
     links: [
-      { rel: 'stylesheet', href: appCss },
       { rel: 'icon', type: 'image/svg+xml', href: '/favicon.svg' },
     ],
   }),