npm - @taciturnaxolotl/traverse - Versions diffs - 0.1.3 → 0.1.5 - Mend

@taciturnaxolotl/traverse 0.1.3 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/fonts/inter-latin-400-normal.woff +0 -0
package/fonts/inter-latin-700-normal.woff +0 -0
package/package.json +2 -2
package/src/index.ts +33 -5
package/src/og.ts +128 -2

package/fonts/inter-latin-400-normal.woff ADDED Viewed

Binary file

package/fonts/inter-latin-700-normal.woff ADDED Viewed

Binary file

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@taciturnaxolotl/traverse",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "Interactive code walkthrough diagrams via MCP",
   "module": "src/index.ts",
   "type": "module",
@@ -10,6 +10,7 @@
   "files": [
     "src",
     "bin",
+    "fonts",
     "icon.svg"
   ],
   "scripts": {
@@ -23,7 +24,6 @@
     "typescript": "^5"
   },
   "dependencies": {
-    "@fontsource/inter": "^5.2.8",
     "@modelcontextprotocol/sdk": "^1.26.0",
     "@resvg/resvg-wasm": "^2.6.2",
     "satori": "^0.19.1"

package/src/index.ts CHANGED Viewed

@@ -4,7 +4,7 @@ import { z } from "zod/v4";
 import { generateViewerHTML } from "./template.ts";
 import type { WalkthroughDiagram } from "./types.ts";
 import { initDb, loadAllDiagrams, saveDiagram, deleteDiagramFromDb, generateId, getSharedUrl, saveSharedUrl } from "./storage.ts";
-import { generateOgImage } from "./og.ts";
+import { generateOgImage, generateIndexOgImage } from "./og.ts";
 import { loadConfig } from "./config.ts";
 const config = loadConfig();
@@ -153,11 +153,22 @@ try {
         });
       }
+      // Index OG image
+      if (url.pathname === "/og.png") {
+        const png = await generateIndexOgImage(MODE, diagrams.size);
+        return new Response(png, {
+          headers: {
+            "Content-Type": "image/png",
+            "Cache-Control": "public, max-age=3600",
+          },
+        });
+      }
       // List available diagrams
       if (url.pathname === "/") {
         const html = MODE === "server"
-          ? generateServerIndexHTML(diagrams.size, VERSION)
-          : generateLocalIndexHTML(diagrams, VERSION);
+          ? generateServerIndexHTML(diagrams.size, VERSION, url.origin)
+          : generateLocalIndexHTML(diagrams, VERSION, url.origin);
         return new Response(html, {
           headers: { "Content-Type": "text/html; charset=utf-8" },
         });
@@ -305,7 +316,7 @@ function generate404HTML(title: string, message: string): string {
 </html>`;
 }
-function generateLocalIndexHTML(diagrams: Map<string, WalkthroughDiagram>, gitHash: string): string {
+function generateLocalIndexHTML(diagrams: Map<string, WalkthroughDiagram>, gitHash: string, baseUrl: string): string {
   const items = [...diagrams.entries()]
     .map(
       ([id, d]) => {
@@ -346,6 +357,7 @@ function generateLocalIndexHTML(diagrams: Map<string, WalkthroughDiagram>, gitHa
       </div>`
     : `<div class="diagram-list">${items}</div>`;
+  const diagramCount = diagrams.size;
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -353,6 +365,14 @@ function generateLocalIndexHTML(diagrams: Map<string, WalkthroughDiagram>, gitHa
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Traverse</title>
   <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Traverse" />
+  <meta property="og:description" content="Interactive code walkthrough diagrams. ${diagramCount} diagram${diagramCount !== 1 ? "s" : ""}." />
+  <meta property="og:image" content="${escapeHTML(baseUrl)}/og.png" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Traverse" />
+  <meta name="twitter:description" content="Interactive code walkthrough diagrams." />
+  <meta name="twitter:image" content="${escapeHTML(baseUrl)}/og.png" />
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
@@ -511,7 +531,7 @@ function generateLocalIndexHTML(diagrams: Map<string, WalkthroughDiagram>, gitHa
 </html>`;
 }
-function generateServerIndexHTML(diagramCount: number, gitHash: string): string {
+function generateServerIndexHTML(diagramCount: number, gitHash: string, baseUrl: string): string {
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -519,6 +539,14 @@ function generateServerIndexHTML(diagramCount: number, gitHash: string): string
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Traverse</title>
   <link rel="icon" href="/icon.svg" type="image/svg+xml" />
+  <meta property="og:type" content="website" />
+  <meta property="og:title" content="Traverse" />
+  <meta property="og:description" content="Interactive code walkthrough diagrams, shareable with anyone. ${diagramCount} diagram${diagramCount !== 1 ? "s" : ""} shared." />
+  <meta property="og:image" content="${escapeHTML(baseUrl)}/og.png" />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content="Traverse" />
+  <meta name="twitter:description" content="Interactive code walkthrough diagrams, shareable with anyone." />
+  <meta name="twitter:image" content="${escapeHTML(baseUrl)}/og.png" />
   <style>
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {

package/src/og.ts CHANGED Viewed

@@ -3,19 +3,145 @@ import { initWasm, Resvg } from "@resvg/resvg-wasm";
 import { join } from "path";
 // Load Inter font files (woff, not woff2 — satori doesn't support woff2)
-const fontsDir = join(import.meta.dir, "../node_modules/@fontsource/inter/files");
+const fontsDir = join(import.meta.dir, "../fonts");
 const [interRegular, interBold] = await Promise.all([
   Bun.file(join(fontsDir, "inter-latin-400-normal.woff")).arrayBuffer(),
   Bun.file(join(fontsDir, "inter-latin-700-normal.woff")).arrayBuffer(),
 ]);
 // Initialize resvg-wasm
-const wasmPath = join(import.meta.dir, "../node_modules/@resvg/resvg-wasm/index_bg.wasm");
+// In development: ../node_modules/@resvg/resvg-wasm/
+// When installed: ../../@resvg/resvg-wasm/
+const possiblePaths = [
+  join(import.meta.dir, "../node_modules/@resvg/resvg-wasm/index_bg.wasm"),
+  join(import.meta.dir, "../../@resvg/resvg-wasm/index_bg.wasm"),
+];
+let wasmPath: string | undefined;
+for (const path of possiblePaths) {
+  if (await Bun.file(path).exists()) {
+    wasmPath = path;
+    break;
+  }
+}
+if (!wasmPath) {
+  throw new Error("Could not find @resvg/resvg-wasm WASM file");
+}
 await initWasm(Bun.file(wasmPath).arrayBuffer());
 // Cache generated images by diagram ID
 const cache = new Map<string, Buffer>();
+export async function generateIndexOgImage(
+  mode: "local" | "server",
+  diagramCount: number,
+): Promise<Buffer> {
+  const cacheKey = `__index_${mode}_${diagramCount}`;
+  const cached = cache.get(cacheKey);
+  if (cached) return cached;
+  const subtitle = mode === "server"
+    ? `${diagramCount} diagram${diagramCount !== 1 ? "s" : ""} shared`
+    : `${diagramCount} diagram${diagramCount !== 1 ? "s" : ""}`;
+  const tagline = mode === "server"
+    ? "Interactive code walkthrough diagrams, shareable with anyone."
+    : "Interactive code walkthrough diagrams";
+  const svg = await satori(
+    {
+      type: "div",
+      props: {
+        style: {
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          alignItems: "center",
+          padding: "60px",
+          backgroundColor: "#0a0a0a",
+          color: "#e5e5e5",
+          fontFamily: "Inter",
+        },
+        children: [
+          {
+            type: "div",
+            props: {
+              style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                gap: "20px",
+              },
+              children: [
+                {
+                  type: "div",
+                  props: {
+                    style: {
+                      fontSize: "80px",
+                      fontWeight: 700,
+                      color: "#e5e5e5",
+                    },
+                    children: "Traverse",
+                  },
+                },
+                {
+                  type: "div",
+                  props: {
+                    style: {
+                      fontSize: "32px",
+                      color: "#a3a3a3",
+                      textAlign: "center",
+                    },
+                    children: tagline,
+                  },
+                },
+                {
+                  type: "div",
+                  props: {
+                    style: {
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "8px",
+                      marginTop: "16px",
+                      fontSize: "24px",
+                      color: "#a3a3a3",
+                      backgroundColor: "#1c1c1e",
+                      padding: "10px 24px",
+                      borderRadius: "8px",
+                      border: "1px solid #262626",
+                    },
+                    children: subtitle,
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+    {
+      width: 1200,
+      height: 630,
+      fonts: [
+        { name: "Inter", data: interRegular, weight: 400, style: "normal" as const },
+        { name: "Inter", data: interBold, weight: 700, style: "normal" as const },
+      ],
+    },
+  );
+  const resvg = new Resvg(svg, {
+    fitTo: { mode: "width", value: 1200 },
+  });
+  const png = Buffer.from(resvg.render().asPng());
+  cache.set(cacheKey, png);
+  return png;
+}
 export async function generateOgImage(
   id: string,
   summary: string,