@nu-appdev/northwestern-starlight-theme 1.4.0 → 1.5.1

package/src/og/endpoint.ts

@@ -1,9 +1,10 @@
 import { getCollection } from "astro:content";
 import config from "virtual:northwestern-theme/config";
-import { OGImageRoute } from "astro-og-canvas";
+import { renderOGImage } from "./render";
 
 const siteTitle = config.ogImage.siteTitle;
 const logoPath = config.ogImage.logoPath;
+const resvgWasmPath = config.ogImage.resvgWasmPath;
 const docs = await getCollection("docs");
 let changelogs: typeof docs = [];
 try {
@@ -11,43 +12,52 @@ try {
 } catch {}
 const pages = Object.fromEntries([...docs, ...changelogs].map((entry) => [entry.id, entry]));
 
-export const { getStaticPaths, GET } = await OGImageRoute({
-    param: "slug",
-    pages,
-    getImageOptions: (path, page) => {
-        const isIndex = path === "index";
-        const isChangelogVersion = path.startsWith("changelog/version/");
-        const title = isIndex ? siteTitle : isChangelogVersion ? `Changelog\n${page.data.title}` : page.data.title;
-        return {
-            title,
-            description: page.data.description,
-            logo: { path: logoPath, size: [60] },
-            bgGradient: [[64, 31, 104]],
-            padding: 120,
-            border: {
-                color: [164, 149, 195],
-                width: 12,
-                side: "inline-start",
+function getImageOptions(path: string, page: (typeof docs)[number]) {
+    const isIndex = path === "index";
+    const isChangelogVersion = path.startsWith("changelog/version/");
+    const title = isIndex ? siteTitle : isChangelogVersion ? `Changelog\n${page.data.title}` : page.data.title;
+    return {
+        resvgWasmPath,
+        title,
+        description: page.data.description,
+        logo: { path: logoPath, size: [80] as [number] },
+        bgGradient: [[64, 31, 104]] as [number, number, number][],
+        padding: [60, 220] as [number, number],
+        border: {
+            color: [164, 149, 195] as [number, number, number],
+            width: 12,
+        },
+        font: {
+            title: {
+                families: ["Poppins"],
+                weight: "Bold" as const,
+                size: isChangelogVersion ? 64 : 56,
+                lineHeight: 1.3,
+                color: [255, 255, 255] as [number, number, number],
             },
-            font: {
-                title: {
-                    families: ["Poppins"],
-                    weight: "Bold",
-                    size: isChangelogVersion ? 56 : 48,
-                    lineHeight: 1.3,
-                    color: [255, 255, 255],
-                },
-                description: {
-                    families: ["Akkurat Pro"],
-                    size: 28,
-                    lineHeight: 1.5,
-                    color: [182, 172, 209],
-                },
+            description: {
+                families: ["Akkurat Pro"],
+                size: 32,
+                lineHeight: 1.5,
+                color: [182, 172, 209] as [number, number, number],
             },
-            fonts: [
-                "https://common.northwestern.edu/v8/css/fonts/Poppins-Bold.woff",
-                "https://common.northwestern.edu/v8/css/fonts/AkkuratProRegular.woff",
-            ],
-        };
-    },
-});
+        },
+        fonts: [
+            "https://common.northwestern.edu/v8/css/fonts/Poppins-Bold.woff",
+            "https://common.northwestern.edu/v8/css/fonts/AkkuratProRegular.woff",
+        ],
+    };
+}
+
+export function getStaticPaths() {
+    return Object.entries(pages).map(([pagePath, page]) => ({
+        params: { slug: `${pagePath}.png` },
+        props: { imageOptions: getImageOptions(pagePath, page) },
+    }));
+}
+
+export async function GET({ props }: { props: { imageOptions: ReturnType<typeof getImageOptions> } }) {
+    return new Response(await renderOGImage(props.imageOptions), {
+        headers: { "Content-Type": "image/png" },
+    });
+}

package/src/og/render.ts

@@ -0,0 +1,260 @@
+import fs from "node:fs/promises";
+import { initWasm, Resvg } from "@resvg/resvg-wasm";
+import satori from "satori";
+
+type RGBColor = [r: number, g: number, b: number];
+type FontWeight = string;
+
+interface FontConfig {
+    color?: RGBColor;
+    size?: number;
+    weight?: FontWeight;
+    lineHeight?: number;
+    families?: string[];
+}
+
+interface OGImageOptions {
+    resvgWasmPath: string;
+    title: string;
+    description?: string;
+    logo?: {
+        path: string;
+        size?: [width?: number, height?: number];
+    };
+    bgGradient?: RGBColor[];
+    border?: {
+        color?: RGBColor;
+        width?: number;
+    };
+    padding?: number | [vertical: number, horizontal: number];
+    font?: {
+        title?: FontConfig;
+        description?: FontConfig;
+    };
+    fonts?: string[];
+}
+
+const [width, height] = [1200, 630];
+
+let wasmInitialized = false;
+async function ensureWasm(wasmPath: string) {
+    if (wasmInitialized) return;
+    await initWasm(fs.readFile(wasmPath));
+    wasmInitialized = true;
+}
+
+const fontWeightMap: Record<string, number> = {
+    Normal: 400,
+    Bold: 700,
+    ExtraBold: 800,
+};
+
+function toFontWeight(weight: string): number {
+    return fontWeightMap[weight] ?? 400;
+}
+
+function decodeText(text: string) {
+    return text
+        .replaceAll("&amp;", "&")
+        .replaceAll("&lt;", "<")
+        .replaceAll("&gt;", ">")
+        .replaceAll("&quot;", '"')
+        .replaceAll("&#39;", "'");
+}
+
+function rgbToCSS(rgb: RGBColor): string {
+    return `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
+}
+
+const fontCache = new Map<string, ArrayBuffer>();
+
+/**
+ * Load a font from disk or a remote URL for OG image rendering.
+ *
+ * @internal
+ */
+export async function loadFont(url: string): Promise<ArrayBuffer> {
+    const cached = fontCache.get(url);
+    if (cached) return cached;
+    let buffer: ArrayBuffer;
+    if (/^https?:\/\//.test(url)) {
+        let response: Response;
+        try {
+            response = await fetch(url);
+        } catch (error) {
+            const message = error instanceof Error ? error.message : String(error);
+            throw new Error(`[northwestern-starlight-theme] Failed to fetch OG font from ${url}: ${message}`, {
+                cause: error,
+            });
+        }
+
+        if (!response.ok) {
+            const statusText = response.statusText ? ` ${response.statusText}` : "";
+            throw new Error(
+                `[northwestern-starlight-theme] Failed to fetch OG font from ${url}: HTTP ${response.status}${statusText}`,
+            );
+        }
+
+        buffer = await response.arrayBuffer();
+    } else {
+        const file = await fs.readFile(url);
+        buffer = file.buffer.slice(file.byteOffset, file.byteOffset + file.byteLength);
+    }
+    fontCache.set(url, buffer);
+    return buffer;
+}
+
+const logoCache = new Map<string, string>();
+
+async function loadLogoDataURL(filePath: string): Promise<string> {
+    const cached = logoCache.get(filePath);
+    if (cached) return cached;
+    const buffer = await fs.readFile(filePath);
+    const ext = filePath.split(".").pop()?.toLowerCase() ?? "png";
+    const mime = ext === "svg" ? "image/svg+xml" : `image/${ext}`;
+    const dataURL = `data:${mime};base64,${buffer.toString("base64")}`;
+    logoCache.set(filePath, dataURL);
+    return dataURL;
+}
+
+export async function renderOGImage({
+    resvgWasmPath,
+    title,
+    description = "",
+    bgGradient = [[0, 0, 0]],
+    border: borderConfig = {},
+    padding: rawPadding = 80,
+    logo,
+    font: fontConfig = {},
+    fonts: fontUrls = ["https://api.fontsource.org/v1/fonts/noto-sans/latin-400-normal.ttf"],
+}: OGImageOptions) {
+    const decodedTitle = decodeText(title);
+    const decodedDescription = description ? decodeText(description) : "";
+
+    const [vPad, hPad] = Array.isArray(rawPadding) ? rawPadding : [rawPadding, rawPadding];
+    const borderColor = borderConfig.color ?? [255, 255, 255];
+    const borderWidth = borderConfig.width ?? 0;
+
+    const titleFont = {
+        families: fontConfig.title?.families ?? ["Noto Sans"],
+        size: fontConfig.title?.size ?? 70,
+        weight: fontConfig.title?.weight ?? "Normal",
+        lineHeight: fontConfig.title?.lineHeight ?? 1,
+        color: fontConfig.title?.color ?? ([255, 255, 255] as RGBColor),
+    };
+    const descFont = {
+        families: fontConfig.description?.families ?? ["Noto Sans"],
+        size: fontConfig.description?.size ?? 40,
+        weight: fontConfig.description?.weight ?? "Normal",
+        lineHeight: fontConfig.description?.lineHeight ?? 1.3,
+        color: fontConfig.description?.color ?? ([255, 255, 255] as RGBColor),
+    };
+
+    const fontData = await Promise.all(fontUrls.map(loadFont));
+    const satoriFont = fontUrls.map((url, i) => {
+        const name = url.includes("Poppins") ? "Poppins" : url.includes("Akkurat") ? "Akkurat Pro" : "Noto Sans";
+        return { name, data: fontData[i], weight: 400 as const };
+    });
+
+    const logoDataURL = logo ? await loadLogoDataURL(logo.path) : undefined;
+    const logoW = logo?.size?.[0] ?? 60;
+    const logoH = logo?.size?.[1] ?? logoW;
+
+    const bgStart = rgbToCSS(bgGradient[0]);
+    const bgEnd = bgGradient.length > 1 ? rgbToCSS(bgGradient[bgGradient.length - 1]) : bgStart;
+
+    const element = {
+        type: "div",
+        props: {
+            style: {
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                width: "100%",
+                height: "100%",
+                background: `linear-gradient(to bottom, ${bgStart}, ${bgEnd})`,
+                padding: `${vPad}px ${hPad}px`,
+                paddingLeft: `${hPad + borderWidth}px`,
+                borderLeft: borderWidth ? `${borderWidth}px solid ${rgbToCSS(borderColor)}` : undefined,
+            },
+            children: [
+                ...(logoDataURL
+                    ? [
+                          {
+                              type: "img",
+                              props: {
+                                  src: logoDataURL,
+                                  width: logoW,
+                                  height: logoH,
+                                  style: { marginBottom: "32px" },
+                              },
+                          },
+                      ]
+                    : []),
+                {
+                    type: "div",
+                    props: {
+                        style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            textAlign: "center",
+                            width: "100%",
+                        },
+                        children: [
+                            {
+                                type: "div",
+                                props: {
+                                    style: {
+                                        fontFamily: titleFont.families[0],
+                                        fontSize: `${titleFont.size}px`,
+                                        fontWeight: toFontWeight(titleFont.weight),
+                                        lineHeight: titleFont.lineHeight,
+                                        color: rgbToCSS(titleFont.color),
+                                        whiteSpace: "pre-wrap",
+                                        textAlign: "center",
+                                    },
+                                    children: decodedTitle,
+                                },
+                            },
+                            ...(decodedDescription
+                                ? [
+                                      {
+                                          type: "div",
+                                          props: {
+                                              style: {
+                                                  fontFamily: descFont.families[0],
+                                                  fontSize: `${descFont.size}px`,
+                                                  fontWeight: toFontWeight(descFont.weight),
+                                                  lineHeight: descFont.lineHeight,
+                                                  color: rgbToCSS(descFont.color),
+                                                  marginTop: "24px",
+                                                  textAlign: "center",
+                                                  maxWidth: "560px",
+                                              },
+                                              children: decodedDescription,
+                                          },
+                                      },
+                                  ]
+                                : []),
+                        ],
+                    },
+                },
+            ],
+        },
+    };
+
+    const svg = await satori(element as any, {
+        width,
+        height,
+        fonts: satoriFont,
+    });
+    await ensureWasm(resvgWasmPath);
+    const resvg = new Resvg(svg, {
+        fitTo: { mode: "width", value: width },
+    });
+
+    return Buffer.from(resvg.render().asPng());
+}

package/src/rehype-table-scroll.ts

@@ -7,6 +7,11 @@
  */
 import type { Element, Nodes, Root } from "hast";
 
+function isScrollWrapper(node: Element): boolean {
+    const classes = node.properties?.className;
+    return Array.isArray(classes) && classes.includes("nu-table-scroll");
+}
+
 function walk(node: Nodes) {
     if (!("children" in node)) return;
     for (let i = 0; i < node.children.length; i++) {
@@ -24,6 +29,8 @@ function walk(node: Nodes) {
                 children: [child as Element],
             };
             node.children[i] = wrapper;
+        } else if (child.type === "element" && isScrollWrapper(child as Element)) {
+            // Already wrapped — skip to avoid double-wrapping
         } else {
             walk(child as Nodes);
         }

package/src/styles/content.css

@@ -178,7 +178,8 @@
 
     .starlight-aside {
         padding: 1rem 1.25rem;
-        border: 1px solid var(--sl-color-asides-border) !important;
+        border: none !important;
+        border-inline-start: 3px solid var(--sl-color-asides-border) !important;
     }
 
     .starlight-aside__title {
@@ -195,50 +196,50 @@
 
     .starlight-aside--note {
         --sl-color-asides-text-accent: color-mix(in srgb, var(--nu-blue), black 30%);
-        --sl-color-asides-border: rgb(80 145 205 / 30%);
-        background-color: rgb(80 145 205 / 6%) !important;
+        --sl-color-asides-border: #5091cd;
+        background-color: rgb(80 145 205 / 8%) !important;
     }
 
     .starlight-aside--tip {
         --sl-color-asides-text-accent: color-mix(in srgb, var(--nu-dark-green), black 18%);
-        --sl-color-asides-border: rgb(0 134 86 / 30%);
-        background-color: rgb(0 134 86 / 6%) !important;
+        --sl-color-asides-border: #008656;
+        background-color: rgb(0 134 86 / 8%) !important;
     }
 
     .starlight-aside--caution {
         --sl-color-asides-text-accent: color-mix(in srgb, var(--nu-dark-gold), black 24%);
-        --sl-color-asides-border: rgb(255 197 32 / 35%);
-        background-color: rgb(255 197 32 / 8%) !important;
+        --sl-color-asides-border: #ffc520;
+        background-color: rgb(255 197 32 / 10%) !important;
     }
 
     .starlight-aside--danger {
         --sl-color-asides-text-accent: color-mix(in srgb, var(--nu-dark-orange), black 18%);
-        --sl-color-asides-border: rgb(239 85 63 / 30%);
-        background-color: rgb(239 85 63 / 6%) !important;
+        --sl-color-asides-border: #ef553f;
+        background-color: rgb(239 85 63 / 8%) !important;
     }
 
     :root:not([data-theme="light"]) .starlight-aside--note {
         --sl-color-asides-text-accent: #93c5fd;
-        --sl-color-asides-border: rgb(80 145 205 / 25%);
-        background-color: rgb(80 145 205 / 8%) !important;
+        --sl-color-asides-border: #93c5fd;
+        background-color: rgb(80 145 205 / 10%) !important;
     }
 
     :root:not([data-theme="light"]) .starlight-aside--tip {
         --sl-color-asides-text-accent: #6ee7b7;
-        --sl-color-asides-border: rgb(0 134 86 / 25%);
-        background-color: rgb(0 134 86 / 8%) !important;
+        --sl-color-asides-border: #6ee7b7;
+        background-color: rgb(0 134 86 / 10%) !important;
     }
 
     :root:not([data-theme="light"]) .starlight-aside--caution {
         --sl-color-asides-text-accent: #fde68a;
-        --sl-color-asides-border: rgb(255 197 32 / 30%);
-        background-color: rgb(255 197 32 / 10%) !important;
+        --sl-color-asides-border: #fde68a;
+        background-color: rgb(255 197 32 / 12%) !important;
     }
 
     :root:not([data-theme="light"]) .starlight-aside--danger {
         --sl-color-asides-text-accent: #fca5a5;
-        --sl-color-asides-border: rgb(239 85 63 / 25%);
-        background-color: rgb(239 85 63 / 8%) !important;
+        --sl-color-asides-border: #fca5a5;
+        background-color: rgb(239 85 63 / 10%) !important;
     }
 
     .sl-link-button {

package/src/styles/typography.css

@@ -156,11 +156,11 @@
         --sl-font-system-mono: ui-monospace, sfmono-regular, "SF Mono", menlo, consolas, "Liberation Mono", monospace;
     }
 
-    h1,
-    h2 {
+    h1 {
         font-family: var(--nu-font-display);
     }
 
+    h2,
     h3,
     h4,
     h5,

package/src/virtual.d.ts

@@ -18,6 +18,7 @@ declare module "virtual:northwestern-theme/config" {
             enabled: boolean;
             siteTitle: string;
             logoPath: string;
+            resvgWasmPath: string;
         };
     };
     export default config;

package/expressive-code.mjs

@@ -1,18 +0,0 @@
-import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
-
-/**
- * @param {import("@astrojs/starlight/expressive-code").StarlightExpressiveCodeOptions} [config]
- * @returns {import("@astrojs/starlight/expressive-code").StarlightExpressiveCodeOptions}
- */
-export function northwesternExpressiveCode(config = {}) {
-    const { defaultProps, plugins, ...rest } = config;
-
-    return {
-        ...rest,
-        plugins: [pluginLineNumbers(), ...(plugins ?? [])],
-        defaultProps: {
-            showLineNumbers: false,
-            ...(defaultProps ?? {}),
-        },
-    };
-}