fix: serve og image, sitemap and icon as static assets

apps/web/.gitignore

@@ -37,3 +37,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# generated at build time by scripts/generate-og.tsx
+/public/og.png

apps/web/app/layout.tsx

@@ -33,15 +33,16 @@ export const metadata: Metadata = {
     siteName: "Kyora",
     title,
     description,
-    images: [{ url: "/og", width: 1200, height: 630, alt: title }],
+    images: [{ url: "/og.png", width: 1200, height: 630, alt: title }],
   },
   twitter: {
     card: "summary_large_image",
     title,
     description,
     creator: "@eliahilse",
-    images: ["/og"],
+    images: ["/og.png"],
   },
+  icons: { icon: "/icon.svg" },
   robots: {
     index: true,
     follow: true,

apps/web/package.json

@@ -5,12 +5,12 @@
   "private": true,
   "scripts": {
     "dev": "next dev --port 3000",
-    "build": "next build",
+    "build": "bun scripts/generate-og.tsx && next build",
     "start": "next start",
     "lint": "eslint --max-warnings 0",
     "check-types": "next typegen && tsc --noEmit",
-    "preview": "opennextjs-cloudflare build && opennextjs-cloudflare preview",
-    "deploy": "opennextjs-cloudflare build && opennextjs-cloudflare deploy",
+    "preview": "bun scripts/generate-og.tsx && opennextjs-cloudflare build && opennextjs-cloudflare preview",
+    "deploy": "bun scripts/generate-og.tsx && opennextjs-cloudflare build && opennextjs-cloudflare deploy",
     "cf-typegen": "wrangler types --env-interface CloudflareEnv cloudflare-env.d.ts"
   },
   "dependencies": {

apps/web/public/sitemap.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://kyora.sh/</loc>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+</urlset>

apps/web/app/og/route.tsx → apps/web/scripts/generate-og.tsx

@@ -2,8 +2,6 @@ import { existsSync, readFileSync } from "node:fs";
 import { join } from "node:path";
 import { ImageResponse } from "@takumi-rs/image-response";
 
-export const dynamic = "force-static";
-export const revalidate = false;
 
 const GLYPHS = " .·:-=+*ox#%@";
 const COLS = 50;
@@ -62,6 +60,7 @@ function fieldAt(col: number, row: number): number {
 }
 
 const FONT_PATH = "geist/dist/fonts/geist-pixel/GeistPixel-Square.woff2";
+const OUT = join(import.meta.dir, "..", "public", "og.png");
 
 /** geist's exports map blocks deep paths under Node, so read the file directly. */
 function pixelFont(): Uint8Array | null {
@@ -72,7 +71,7 @@ function pixelFont(): Uint8Array | null {
   return null;
 }
 
-export function GET() {
+function card() {
   const cells = [];
   for (let row = 0; row < ROWS; row++) {
     for (let col = 0; col < COLS; col++) {
@@ -161,3 +160,10 @@ export function GET() {
     },
   );
 }
+
+const response = card();
+const bytes = new Uint8Array(await response.arrayBuffer());
+if (bytes.length < 1000) throw new Error(`og render produced ${bytes.length} bytes`);
+if (!pixelFont()) throw new Error("pixel font not found — og would render in a fallback face");
+await Bun.write(OUT, bytes);
+console.log(`wrote ${OUT} (${bytes.length} bytes)`);

apps/web/tsconfig.json

@@ -14,7 +14,7 @@
     "next.config.js",
     ".next/types/**/*.ts"
   ],
-  "exclude": [
+  "exclude": ["scripts", 
     "node_modules"
   ]
 }