refactor(image): simplify image response handling

app/twitter-image.tsx

@@ -1,6 +1,5 @@
 import { readFileSync } from "node:fs";
 import { join } from "node:path";
-import { ImageResponse } from "next/og";
 
 export const alt = "ui.wiki - A Living Manual for Better Interfaces.";
 export const size = {
@@ -9,73 +8,15 @@ export const size = {
 };
 export const contentType = "image/png";
 
-export default async function Image() {
-  const inter = readFileSync(
-    join(process.cwd(), "public/fonts/inter/semi-bold.ttf"),
+export default function Image() {
+  const imageBuffer = readFileSync(
+    join(process.cwd(), "public/og/default.png"),
   );
 
-  return new ImageResponse(
-    <div
-      style={{
-        background: "#fcfcfc",
-        width: "100%",
-        height: "100%",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-        padding: 64,
-        fontFamily: "Inter",
-      }}
-    >
-      <div
-        style={{
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          gap: 48,
-        }}
-      >
-        <div
-          style={{
-            fontSize: 48,
-            fontWeight: 600,
-            color: "#202020",
-            letterSpacing: "-1.07px",
-            lineHeight: 1,
-          }}
-        >
-          ui.wiki
-        </div>
-        <div
-          style={{
-            width: 2,
-            height: 32,
-            background: "#bbb",
-          }}
-        />
-        <div
-          style={{
-            fontSize: 48,
-            fontWeight: 600,
-            color: "#202020",
-            letterSpacing: "-1.07px",
-            lineHeight: 1,
-          }}
-        >
-          A Living Manual for Better Interfaces.
-        </div>
-      </div>
-    </div>,
-    {
-      ...size,
-      fonts: [
-        {
-          name: "Inter",
-          data: inter,
-          style: "normal",
-          weight: 600,
-        },
-      ],
+  return new Response(imageBuffer, {
+    headers: {
+      "Content-Type": "image/png",
+      "Cache-Control": "public, max-age=31536000, immutable",
     },
-  );
+  });
 }

readme.md

@@ -1,8 +1,6 @@
 # A Living Manual for Better Interfaces
 
-Knowledge is best when shared. 
-
-This wiki is a collection of articles, patterns, and best practices for designing and building user interfaces. It's a wiki that evolves with the field, incorporating new insights and techniques as they emerge, all for free.
+Knowledge should be shared. This wiki is a collection of articles, patterns, and best practices for designing and building user interfaces. It's a wiki that evolves with the field, incorporating new insights and techniques as they emerge, all for free.
 
 ## Tech Stack