radiant-docs 0.1.64 → 0.1.66

package/template/scripts/generate-og-images.mjs

@@ -1,667 +0,0 @@
-import fs from "node:fs";
-import { createRequire } from "node:module";
-import path from "node:path";
-import { Resvg } from "@resvg/resvg-js";
-import { create as createFont } from "fontkit";
-import wawoff2 from "wawoff2";
-import {
-  DEFAULT_TEXT_FONT_PRESET,
-  FONT_PRESET_OPTIONS,
-} from "radiant-docs-validator";
-
-const require = createRequire(import.meta.url);
-
-const CWD = process.cwd();
-const DIST_DIR = path.join(CWD, "dist");
-const MANIFEST_PATH = path.join(DIST_DIR, "_og/meta.json");
-const OUTPUT_DIR = path.join(DIST_DIR, "_og/images");
-
-const OG_WIDTH = 1200;
-const OG_HEIGHT = 630;
-const OG_BACKGROUND = "#171717";
-const OG_PRIMARY_COLOR = "#737373";
-const DEFAULT_OG_FONT_FAMILY = "DejaVu Sans, Arial, sans-serif";
-const FONT_PRESET_ID_SET = new Set(FONT_PRESET_OPTIONS);
-const OG_FONT_SUBSETS = ["latin", "latin-ext"];
-const baseFontCache = new Map();
-const weightedFontCache = new Map();
-
-const FONT_PRESETS = {
-  "google-sans": {
-    family: "Google Sans Variable, DejaVu Sans, Arial, sans-serif",
-    fontsource: {
-      packageName: "@fontsource-variable/google-sans",
-      fileId: "google-sans",
-    },
-  },
-  inter: {
-    family: "Inter Variable, DejaVu Sans, Arial, sans-serif",
-    fontsource: {
-      packageName: "@fontsource-variable/inter",
-      fileId: "inter",
-    },
-  },
-  "inter-tight": {
-    family: "Inter Tight Variable, DejaVu Sans, Arial, sans-serif",
-    fontsource: {
-      packageName: "@fontsource-variable/inter-tight",
-      fileId: "inter-tight",
-    },
-  },
-  geist: {
-    family: "Geist Variable, DejaVu Sans, Arial, sans-serif",
-    fontsource: {
-      packageName: "@fontsource-variable/geist",
-      fileId: "geist",
-    },
-  },
-  "source-sans-3": {
-    family: "Source Sans 3 Variable, DejaVu Sans, Arial, sans-serif",
-    fontsource: {
-      packageName: "@fontsource-variable/source-sans-3",
-      fileId: "source-sans-3",
-    },
-  },
-  "source-serif-4": {
-    family: "Source Serif 4 Variable, DejaVu Serif, Georgia, serif",
-    fontsource: {
-      packageName: "@fontsource-variable/source-serif-4",
-      fileId: "source-serif-4",
-    },
-  },
-  "public-sans": {
-    family: "Public Sans Variable, DejaVu Sans, Arial, sans-serif",
-    fontsource: {
-      packageName: "@fontsource-variable/public-sans",
-      fileId: "public-sans",
-    },
-  },
-  "geist-mono": {
-    family: "Geist Mono Variable, DejaVu Sans Mono, monospace",
-    fontsource: {
-      packageName: "@fontsource-variable/geist-mono",
-      fileId: "geist-mono",
-    },
-  },
-  "jetbrains-mono": {
-    family: "JetBrains Mono Variable, DejaVu Sans Mono, monospace",
-    fontsource: {
-      packageName: "@fontsource-variable/jetbrains-mono",
-      fileId: "jetbrains-mono",
-    },
-  },
-  "google-sans-code": {
-    family: "Google Sans Code Variable, DejaVu Sans Mono, monospace",
-    fontsource: {
-      packageName: "@fontsource-variable/google-sans-code",
-      fileId: "google-sans-code",
-    },
-  },
-  "system-sans": {
-    family: DEFAULT_OG_FONT_FAMILY,
-  },
-  "system-serif": {
-    family: "DejaVu Serif, Georgia, serif",
-  },
-  "system-mono": {
-    family: "DejaVu Sans Mono, monospace",
-  },
-};
-
-function trimToUndefined(value) {
-  return typeof value === "string" && value.trim().length > 0
-    ? value.trim()
-    : undefined;
-}
-
-function normalizeFontPresetId(value) {
-  if (typeof value !== "string") return undefined;
-  const normalized = value.trim().toLowerCase();
-  return FONT_PRESET_ID_SET.has(normalized) ? normalized : undefined;
-}
-
-function getFontPreset(presetId) {
-  return FONT_PRESETS[presetId] ?? FONT_PRESETS[DEFAULT_TEXT_FONT_PRESET];
-}
-
-async function getBaseFontsourceFont(fontsource, subset) {
-  const cacheKey = `${fontsource.packageName}:${subset}`;
-  const cachedFont = baseFontCache.get(cacheKey);
-  if (cachedFont) return cachedFont;
-
-  const fontPath = require.resolve(
-    `${fontsource.packageName}/files/${fontsource.fileId}-${subset}-wght-normal.woff2`,
-  );
-  const woff2Buffer = fs.readFileSync(fontPath);
-  const ttfBuffer = Buffer.from(await wawoff2.decompress(woff2Buffer));
-  const font = createFont(ttfBuffer);
-  baseFontCache.set(cacheKey, font);
-  return font;
-}
-
-function getWeightedFont(font, fontsource, subset, fontWeight) {
-  const cacheKey = `${fontsource.packageName}:${subset}:${fontWeight}`;
-  const cachedFont = weightedFontCache.get(cacheKey);
-  if (cachedFont) return cachedFont;
-
-  const weightAxis = font.variationAxes?.wght;
-  const weightedFont = weightAxis
-    ? font.getVariation({
-        wght: Math.max(weightAxis.min, Math.min(weightAxis.max, fontWeight)),
-      })
-    : font;
-
-  weightedFontCache.set(cacheKey, weightedFont);
-  return weightedFont;
-}
-
-async function getFontsourceFonts(fontsource, fontWeight) {
-  if (!fontsource) return [];
-
-  const fonts = [];
-  for (const subset of OG_FONT_SUBSETS) {
-    const font = await getBaseFontsourceFont(fontsource, subset);
-    fonts.push(getWeightedFont(font, fontsource, subset, fontWeight));
-  }
-
-  return fonts;
-}
-
-async function getFontRenderer(presetId, fontWeight) {
-  const fontPreset = getFontPreset(presetId);
-  return {
-    family: fontPreset.family,
-    fonts: await getFontsourceFonts(fontPreset.fontsource, fontWeight),
-  };
-}
-
-async function resolveOgFontConfig(fonts) {
-  const textFontId =
-    normalizeFontPresetId(fonts?.text) ?? DEFAULT_TEXT_FONT_PRESET;
-  const headingFontId = normalizeFontPresetId(fonts?.heading) ?? textFontId;
-
-  return {
-    titleFont: await getFontRenderer(headingFontId, 700),
-    descriptionFont: await getFontRenderer(textFontId, 400),
-  };
-}
-
-function decodeHtmlEntities(value) {
-  if (!value || typeof value !== "string") return "";
-
-  const named = {
-    amp: "&",
-    lt: "<",
-    gt: ">",
-    quot: '"',
-    apos: "'",
-    nbsp: " ",
-  };
-
-  return value
-    .replace(/&#(\d+);/g, (_, dec) => {
-      const code = Number.parseInt(dec, 10);
-      return Number.isFinite(code) ? String.fromCodePoint(code) : _;
-    })
-    .replace(/&#x([0-9a-fA-F]+);/g, (_, hex) => {
-      const code = Number.parseInt(hex, 16);
-      return Number.isFinite(code) ? String.fromCodePoint(code) : _;
-    })
-    .replace(/&([a-zA-Z]+);/g, (entity, name) => {
-      const decoded = named[name.toLowerCase()];
-      return decoded ?? entity;
-    });
-}
-
-function normalizeRoutePath(routePath) {
-  if (!routePath || routePath === "/") return "/";
-  if (!routePath.startsWith("/")) routePath = `/${routePath}`;
-  return routePath.endsWith("/") ? routePath : `${routePath}/`;
-}
-
-function truncateText(value, maxLength) {
-  const text = trimToUndefined(value);
-  if (!text) return "";
-  if (text.length <= maxLength) return text;
-  return `${text.slice(0, Math.max(0, maxLength - 1)).trimEnd()}…`;
-}
-
-function stripSiteSuffixFromTitle(title, siteName) {
-  const trimmedTitle = trimToUndefined(title);
-  const trimmedSiteName = trimToUndefined(siteName);
-  if (!trimmedTitle || !trimmedSiteName) return trimmedTitle ?? "";
-
-  const suffixes = [` | ${trimmedSiteName}`, ` - ${trimmedSiteName}`];
-  for (const suffix of suffixes) {
-    if (trimmedTitle.endsWith(suffix)) {
-      return trimmedTitle.slice(0, -suffix.length).trim();
-    }
-  }
-
-  return trimmedTitle;
-}
-
-function routeToImageRelativePath(routePath) {
-  const normalizedRoutePath = normalizeRoutePath(routePath);
-  if (normalizedRoutePath === "/") return "index.png";
-  return `${normalizedRoutePath.slice(1, -1)}.png`;
-}
-
-function escapeXml(value) {
-  return value
-    .replace(/&/g, "&amp;")
-    .replace(/</g, "&lt;")
-    .replace(/>/g, "&gt;")
-    .replace(/"/g, "&quot;")
-    .replace(/'/g, "&apos;");
-}
-
-function findGlyphFont(fonts, codePoint) {
-  for (const font of fonts) {
-    if (font.hasGlyphForCodePoint(codePoint)) {
-      return font;
-    }
-  }
-  return fonts[0];
-}
-
-function splitTextIntoFontRuns(line, fonts) {
-  const runs = [];
-  for (const character of Array.from(line)) {
-    const codePoint = character.codePointAt(0);
-    if (codePoint === undefined) continue;
-
-    const font = findGlyphFont(fonts, codePoint);
-    const previousRun = runs[runs.length - 1];
-    if (previousRun?.font === font) {
-      previousRun.text += character;
-    } else {
-      runs.push({ font, text: character });
-    }
-  }
-
-  return runs;
-}
-
-function renderPathTextLine({
-  line,
-  x,
-  top,
-  fontRenderer,
-  fontSize,
-  fill,
-  fillOpacity,
-  letterSpacingEm = 0,
-}) {
-  const fonts = fontRenderer.fonts ?? [];
-  const primaryFont = fonts[0];
-  if (!primaryFont) {
-    return "";
-  }
-
-  const primaryScale = fontSize / primaryFont.unitsPerEm;
-  const baselineY = top + primaryFont.ascent * primaryScale;
-  const letterSpacingPx = fontSize * letterSpacingEm;
-  const pathData = [];
-  let cursorX = x;
-
-  for (const run of splitTextIntoFontRuns(line, fonts)) {
-    const font = run.font;
-    const scale = fontSize / font.unitsPerEm;
-    const glyphRun = font.layout(run.text);
-
-    for (let index = 0; index < glyphRun.glyphs.length; index += 1) {
-      const glyph = glyphRun.glyphs[index];
-      const position = glyphRun.positions[index] ?? {};
-      const glyphPath = glyph.path;
-      const xOffset = (position.xOffset ?? 0) * scale;
-      const yOffset = (position.yOffset ?? 0) * scale;
-
-      if (glyphPath.commands.length > 0) {
-        pathData.push(
-          glyphPath
-            .transform(
-              scale,
-              0,
-              0,
-              -scale,
-              cursorX + xOffset,
-              baselineY - yOffset,
-            )
-            .toSVG(),
-        );
-      }
-
-      cursorX +=
-        ((position.xAdvance ?? glyph.advanceWidth ?? 0) * scale) +
-        letterSpacingPx;
-    }
-  }
-
-  if (pathData.length === 0) {
-    return "";
-  }
-
-  const opacityAttribute =
-    fillOpacity === undefined ? "" : ` fill-opacity="${fillOpacity}"`;
-
-  return `<path d="${pathData.join(" ")}" fill="${fill}"${opacityAttribute} />`;
-}
-
-function renderTextLine({
-  line,
-  x,
-  top,
-  fontRenderer,
-  fontSize,
-  fontWeight,
-  fill,
-  fillOpacity,
-  letterSpacingEm = 0,
-}) {
-  const pathText = renderPathTextLine({
-    line,
-    x,
-    top,
-    fontRenderer,
-    fontSize,
-    fill,
-    fillOpacity,
-    letterSpacingEm,
-  });
-  if (pathText) return pathText;
-
-  const opacityAttribute =
-    fillOpacity === undefined ? "" : ` fill-opacity="${fillOpacity}"`;
-  const letterSpacing = letterSpacingEm === 0 ? 0 : `${letterSpacingEm}em`;
-  return `<text x="${x}" y="${top}" fill="${fill}"${opacityAttribute} font-family="${escapeXml(
-    fontRenderer.family,
-  )}" font-size="${fontSize}" font-weight="${fontWeight}" letter-spacing="${letterSpacing}" dominant-baseline="hanging">${escapeXml(
-    line,
-  )}</text>`;
-}
-
-function wrapText(input, maxChars, maxLines) {
-  const text = trimToUndefined(input);
-  if (!text) return [];
-
-  const words = text.split(/\s+/).filter(Boolean);
-  const lines = [];
-  let current = "";
-  let index = 0;
-
-  while (index < words.length) {
-    const word = words[index];
-    const candidate = current ? `${current} ${word}` : word;
-
-    if (candidate.length <= maxChars) {
-      current = candidate;
-      index += 1;
-      continue;
-    }
-
-    if (!current) {
-      current = word.slice(0, maxChars);
-      index += 1;
-    }
-
-    lines.push(current);
-    current = "";
-
-    if (lines.length === maxLines) {
-      break;
-    }
-  }
-
-  if (lines.length < maxLines && current) {
-    lines.push(current);
-  }
-
-  const consumedAllWords = index >= words.length;
-  if (!consumedAllWords && lines.length > 0) {
-    lines[lines.length - 1] = truncateText(lines[lines.length - 1], maxChars);
-  }
-
-  return lines.slice(0, maxLines);
-}
-
-function mimeTypeFromFilePath(filePath) {
-  const extension = path.extname(filePath).toLowerCase();
-  if (extension === ".svg") return "image/svg+xml";
-  if (extension === ".png") return "image/png";
-  if (extension === ".jpg" || extension === ".jpeg") return "image/jpeg";
-  if (extension === ".webp") return "image/webp";
-  if (extension === ".gif") return "image/gif";
-  return undefined;
-}
-
-function safeDecodeURIComponent(value) {
-  try {
-    return decodeURIComponent(value);
-  } catch {
-    return value;
-  }
-}
-
-function resolveLocalLogoPath(logoPath) {
-  const stripped = logoPath.split("#")[0].split("?")[0];
-  const decoded = safeDecodeURIComponent(stripped);
-  const relativePath = decoded.startsWith("/") ? decoded.slice(1) : decoded;
-  const absolutePath = path.resolve(DIST_DIR, relativePath);
-  const distRoot = path.resolve(DIST_DIR) + path.sep;
-
-  if (!absolutePath.startsWith(distRoot) && absolutePath !== path.resolve(DIST_DIR)) {
-    return undefined;
-  }
-
-  return absolutePath;
-}
-
-function resolveLogoDataUri(logoPath) {
-  const resolvedLogoPath = trimToUndefined(logoPath);
-  if (!resolvedLogoPath) return undefined;
-  if (/^https?:\/\//i.test(resolvedLogoPath)) return undefined;
-
-  const localLogoPath = resolveLocalLogoPath(resolvedLogoPath);
-  if (!localLogoPath || !fs.existsSync(localLogoPath)) return undefined;
-
-  const stats = fs.statSync(localLogoPath);
-  if (!stats.isFile()) return undefined;
-
-  const mimeType = mimeTypeFromFilePath(localLogoPath);
-  if (!mimeType) return undefined;
-
-  const buffer = fs.readFileSync(localLogoPath);
-  return `data:${mimeType};base64,${buffer.toString("base64")}`;
-}
-
-function renderOgSvg({
-  title,
-  description,
-  siteName,
-  logoDataUri,
-  titleFont,
-  descriptionFont,
-}) {
-  const resolvedTitle = trimToUndefined(title) ?? siteName;
-  const titleLines = wrapText(resolvedTitle, 24, 2);
-  if (titleLines.length === 0) {
-    titleLines.push(siteName);
-  }
-
-  const resolvedDescription = trimToUndefined(description) ?? "";
-  const descriptionLines = wrapText(resolvedDescription, 58, 2);
-
-  const titleLineHeight = 76;
-  const descriptionLineHeight = 38;
-  const spaceBetweenTitleAndDescription = 30;
-  const bottomPadding = 56;
-  const titleBlockHeight =
-    titleLines.length * titleLineHeight +
-    spaceBetweenTitleAndDescription +
-    descriptionLines.length * descriptionLineHeight;
-  const titleBlockTop = OG_HEIGHT - bottomPadding - titleBlockHeight;
-
-  let currentY = titleBlockTop;
-  const titleSvg = titleLines
-    .map((line) => {
-      const element = renderTextLine({
-        line,
-        x: 56,
-        top: currentY,
-        fontRenderer: titleFont,
-        fontSize: 72,
-        fontWeight: 700,
-        fill: "#FFFFFF",
-        letterSpacingEm: -0.02,
-      });
-      currentY += titleLineHeight;
-      return element;
-    })
-    .join("");
-
-  currentY += spaceBetweenTitleAndDescription;
-  const descriptionSvg = descriptionLines
-    .map((line) => {
-      const element = renderTextLine({
-        line,
-        x: 56,
-        top: currentY,
-        fontRenderer: descriptionFont,
-        fontSize: 32,
-        fontWeight: 400,
-        fill: "#FFFFFF",
-        fillOpacity: 0.82,
-      });
-      currentY += descriptionLineHeight;
-      return element;
-    })
-    .join("");
-
-  const logoSvg = logoDataUri
-    ? `<image href="${escapeXml(logoDataUri)}" x="56" y="56" width="420" height="132" preserveAspectRatio="xMinYMid meet" />`
-    : renderTextLine({
-        line: siteName,
-        x: 56,
-        top: 74,
-        fontRenderer: titleFont,
-        fontSize: 64,
-        fontWeight: 700,
-        fill: "#FFFFFF",
-        letterSpacingEm: -0.02,
-      });
-
-  return `<?xml version="1.0" encoding="UTF-8"?>
-<svg width="${OG_WIDTH}" height="${OG_HEIGHT}" viewBox="0 0 ${OG_WIDTH} ${OG_HEIGHT}" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <radialGradient id="ogGlow" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(1540 -360) rotate(90) scale(1600)">
-      <stop offset="0" stop-color="${OG_PRIMARY_COLOR}" stop-opacity="0.56" />
-      <stop offset="0.74" stop-color="${OG_PRIMARY_COLOR}" stop-opacity="0" />
-      <stop offset="1" stop-color="${OG_PRIMARY_COLOR}" stop-opacity="0" />
-    </radialGradient>
-  </defs>
-  <rect width="${OG_WIDTH}" height="${OG_HEIGHT}" fill="${OG_BACKGROUND}" />
-  <rect width="${OG_WIDTH}" height="${OG_HEIGHT}" fill="url(#ogGlow)" />
-  ${logoSvg}
-  ${titleSvg}
-  ${descriptionSvg}
-</svg>`;
-}
-
-function writeImageForRoute({
-  routePath,
-  title,
-  description,
-  siteName,
-  logoDataUri,
-  ogFontConfig,
-}) {
-  const svg = renderOgSvg({
-    title,
-    description,
-    siteName,
-    logoDataUri,
-    titleFont: ogFontConfig.titleFont,
-    descriptionFont: ogFontConfig.descriptionFont,
-  });
-
-  const resvg = new Resvg(svg, {
-    font: {
-      loadSystemFonts: true,
-      defaultFontFamily: "DejaVu Sans",
-      sansSerifFamily: "DejaVu Sans",
-      serifFamily: "DejaVu Serif",
-      monospaceFamily: "DejaVu Sans Mono",
-    },
-  });
-
-  const pngData = resvg.render().asPng();
-  const outputRelativePath = routeToImageRelativePath(routePath);
-  const outputPath = path.join(OUTPUT_DIR, ...outputRelativePath.split("/"));
-  fs.mkdirSync(path.dirname(outputPath), { recursive: true });
-  fs.writeFileSync(outputPath, pngData);
-}
-
-async function main() {
-  if (!fs.existsSync(DIST_DIR)) {
-    console.warn("Skipping OG image generation: dist directory not found.");
-    return;
-  }
-
-  if (!fs.existsSync(MANIFEST_PATH)) {
-    console.warn("Skipping OG image generation: OG metadata manifest not found.");
-    return;
-  }
-
-  const rawManifest = fs.readFileSync(MANIFEST_PATH, "utf8");
-  const manifest = JSON.parse(rawManifest);
-
-  const defaults = manifest?.defaults ?? {};
-  const pages = manifest?.pages ?? {};
-  const siteName = trimToUndefined(decodeHtmlEntities(defaults.siteName)) ??
-    "Documentation";
-  const logoDataUri = resolveLogoDataUri(defaults.logoDark);
-  const ogFontConfig = await resolveOgFontConfig(defaults.fonts);
-
-  const routes = Object.keys(pages).sort();
-  if (routes.length === 0) {
-    console.warn("Skipping OG image generation: no pages found in metadata.");
-    return;
-  }
-
-  let generatedCount = 0;
-  for (const routePath of routes) {
-    const page = pages[routePath] ?? {};
-    const decodedTitle = decodeHtmlEntities(page.title);
-    const decodedDescription = decodeHtmlEntities(page.description);
-
-    const cleanedTitle = stripSiteSuffixFromTitle(decodedTitle, siteName);
-    const title = truncateText(cleanedTitle || siteName, 80);
-    const fallbackDescription = `Learn about ${title} in the ${siteName} documentation.`;
-    const description = truncateText(
-      decodedDescription || fallbackDescription,
-      150,
-    );
-
-    writeImageForRoute({
-      routePath,
-      title,
-      description,
-      siteName,
-      logoDataUri,
-      ogFontConfig,
-    });
-
-    generatedCount += 1;
-  }
-
-  console.log(
-    `✅ Generated ${generatedCount} OG image${generatedCount === 1 ? "" : "s"} in ${OUTPUT_DIR}`,
-  );
-}
-
-main().catch((error) => {
-  console.error("Failed to generate OG images.");
-  console.error(error);
-  process.exitCode = 1;
-});