build.js

#!/usr/bin/env node

import fs from "fs/promises";
import pathLib from "path";
import $_ from "@codeenplace/sherry";
import { glob } from "glob";

function $(...args) {
  console.log(...args.flat());
  return $_(...args);
}

function gitModified(path) {
  return $_("git", ["log", "-1", "--format=%aI", "--", path]).then((x) => x.trim());
}

function typstEscape(s) {
  return s.replace(/[#\[\]\\]/g, (c) => "\\" + c);
}

async function writeFile(path, contents) {
  await fs.mkdir(pathLib.dirname(path), { recursive: true });
  await fs.writeFile(path, contents);
}

function parseCssVars(css) {
  const vars = {};
  for (const [, name, value] of css.matchAll(/--([\w-]+):\s*([^;]+)/g)) vars[name] = value.trim();
  return vars;
}

function cssOklchToTypst(s) {
  const m = s.match(/oklch\(([\d.]+%)\s+([\d.]+)\s+([\d.]+)\)/);
  if (!m) throw new Error(`can't parse oklch: ${s}`);
  return `oklch(${m[1]}, ${m[2]}, ${m[3]}deg)`;
}

(async function main() {
  const darkCss = await fs.readFile("./dark.color.css", "utf-8");
  const cssVars = parseCssVars(darkCss);
  const colBg = cssOklchToTypst(cssVars["col-bg"]);
  const colFg = cssOklchToTypst(cssVars["col-fg"]);
  const colBlue = cssOklchToTypst(cssVars["col-blue"]);
  const blogs = [];
  const blogMeta = [];
  for (const blogPostFile of await fs.readdir("./site")) {
    if (blogPostFile === "index.md") continue;
    if (blogPostFile === "posts.md") continue;
    const src = await fs.readFile(pathLib.join("./site", blogPostFile), "utf-8");
    const fm = src.match(/^---\n([\s\S]*?)\n---/);
    if (fm && /^hidden:\s*true$/m.test(fm[1])) continue;
    blogs.push(pathLib.join("./site", blogPostFile));

    const title = fm?.[1].match(/^title:\s*(.+)$/m)?.[1]?.trim() ?? blogPostFile;
    const subtitle = fm?.[1].match(/^subtitle:\s*(.+)$/m)?.[1]?.trim() ?? "";
    const published = fm?.[1].match(/^published:\s*(.+)$/m)?.[1]?.trim() ?? "";
    const body = src.replace(/^---\n[\s\S]*?\n---\n*/, "");
    const excerpt = body
      .split("\n")
      .filter((l) => l.trim() && !l.startsWith("#"))
      .slice(0, 3)
      .join(" ")
      .slice(0, 300);
    const slug = blogPostFile.replace(/\.md$/, "");

    blogMeta.push({ title, subtitle, published, excerpt, slug });
  }

  blogMeta.sort((a, b) => (b.published || "").localeCompare(a.published || ""));

  await writeFile(
    "./site/index.md",
    [
      "---",
      "title: Codé én Placé",
      "---",

      ...blogMeta.map((p) => `- ${p.published ? p.published + " " : ""}[${p.title}](/${p.slug})`),
    ].join("\n"),
  );

  const siteUrl = "https://codeenplace.dev";
  const siteTitle = "Codè èn Placè";
  const siteDescription = "Codè èn Placè";
  const now = new Date().toISOString();

  function xmlEscape(s) {
    return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
  }

  const rss = [
    `<?xml version="1.0" encoding="UTF-8"?>`,
    `<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">`,
    `<channel>`,
    `<title>${xmlEscape(siteTitle)}</title>`,
    `<link>${siteUrl}</link>`,
    `<description>${xmlEscape(siteDescription)}</description>`,
    `<language>en</language>`,
    `<lastBuildDate>${new Date().toUTCString()}</lastBuildDate>`,
    `<atom:link href="${siteUrl}/feed.xml" rel="self" type="application/rss+xml"/>`,
    ...blogMeta
      .filter((p) => p.published)
      .map((p) =>
        [
          `<item>`,
          `<title>${xmlEscape(p.title)}</title>`,
          `<link>${siteUrl}/${p.slug}</link>`,
          `<guid>${siteUrl}/${p.slug}</guid>`,
          `<pubDate>${new Date(p.published + "T00:00:00Z").toUTCString()}</pubDate>`,
          `<description>${xmlEscape(p.subtitle ? p.subtitle + " — " + p.excerpt : p.excerpt)}</description>`,
          `</item>`,
        ].join("\n"),
      ),
    `</channel>`,
    `</rss>`,
  ].join("\n");

  const atom = [
    `<?xml version="1.0" encoding="UTF-8"?>`,
    `<feed xmlns="http://www.w3.org/2005/Atom">`,
    `<title>${xmlEscape(siteTitle)}</title>`,
    `<subtitle>${xmlEscape(siteDescription)}</subtitle>`,
    `<link href="${siteUrl}" rel="alternate"/>`,
    `<link href="${siteUrl}/atom.xml" rel="self"/>`,
    `<id>${siteUrl}/</id>`,
    `<updated>${now}</updated>`,
    `<author><name>Freddie Ridell</name></author>`,
    ...blogMeta
      .filter((p) => p.published)
      .map((p) =>
        [
          `<entry>`,
          `<title>${xmlEscape(p.title)}</title>`,
          `<link href="${siteUrl}/${p.slug}"/>`,
          `<id>${siteUrl}/${p.slug}</id>`,
          `<published>${p.published}T00:00:00Z</published>`,
          `<updated>${p.published}T00:00:00Z</updated>`,
          `<summary>${xmlEscape(p.subtitle ? p.subtitle + " — " + p.excerpt : p.excerpt)}</summary>`,
          `</entry>`,
        ].join("\n"),
      ),
    `</feed>`,
  ].join("\n");

  await Promise.all([writeFile("target/feed.xml", rss), writeFile("target/atom.xml", atom)]);

  const pages = await glob("./site/**/*.md");

  await Promise.all(
    pages.map(async (pagePath) => {
      let dst = pathLib.join("target", pathLib.relative("site", pagePath));

      dst = dst.replace(pathLib.extname(dst), "");

      if (!dst.endsWith("index")) dst = pathLib.join(dst, "index.html");
      else dst = dst + ".html";

      await fs.mkdir(pathLib.join(dst, ".."), { recursive: true });

      const pageSlug = pathLib.relative("site", pagePath).replace(/\.md$/, "").replace(/\\/g, "/");
      const modified = await gitModified(pagePath);

      return $(
        "pandoc",
        "--number-sections",
        "--from",
        "markdown-markdown_in_html_blocks+raw_attribute",
        "--standalone",
        "--template=template.html",
        "--variable",
        `pageslug:${pageSlug}`,
        ...(modified ? ["--variable", `modified:${modified}`] : []),
        "-i",
        pagePath,
        "-o",
        dst,
      );
    }),
  );

  await Promise.all([
    ...["base", "sm.layout", "lg.layout", "light.color", "dark.color", "fonts"].map((name) =>
      fs.cp(`./${name}.css`, `target/${name}.css`),
    ),
    fs.cp("./assets/fonts", "target/fonts", { recursive: true }),
  ]);

  await Promise.all(
    pages.map(async (pagePath) => {
      const src = await fs.readFile(pagePath, "utf-8");
      const fm = src.match(/^---\n([\s\S]*?)\n---/);
      if (!fm) return;

      const title = fm[1].match(/^title:\s*(.+)$/m)?.[1]?.trim();
      if (!title) return;
      const subtitle = fm[1].match(/^subtitle:\s*(.+)$/m)?.[1]?.trim();
      const published = fm[1].match(/^published:\s*(.+)$/m)?.[1]?.trim();

      const slug = pathLib.relative("site", pagePath).replace(/\.md$/, "").replace(/\\/g, "/");
      const typstPath = `target/img/social/${slug}.typ`;
      const pngPath = `target/img/social/${slug}.png`;

      await fs.mkdir(pathLib.dirname(typstPath), { recursive: true });

      await writeFile(
        typstPath,
        [
          `#set page(width: 1200pt, height: 630pt, margin: 100pt, fill: ${colBg})`,
          `#let fg = ${colFg}`,
          `#let muted = fg.transparentize(25%)`,
          `#let link-col = ${colBlue}`,
          `#set text(fill: fg, font: "Nunito Sans")`,
          ``,
          `#grid(rows: (auto, 1fr, auto),`,
          `  text(size: 64pt, weight: "regular", font: "Daytripper Display")[${typstEscape(title)}],`,
          subtitle ? `  align(left + horizon)[#text(size: 40pt)[${typstEscape(subtitle)}]],` : `  [],`,
          `  grid(columns: (1fr, 1fr), align: (left, right), text(size: 32pt, fill: link-col)[#underline[CodèÈnPlacè.dev]], text(size: 32pt, fill: muted)[${published ? typstEscape(published) : ""}]),`,
          `)`,
        ]
          .filter(Boolean)
          .join("\n"),
      );

      return $("typst", "compile", "--font-path", "assets/fonts", "--format", "png", typstPath, pngPath);
    }),
  );

  const faviconSizes = [32, 180, 192, 512];
  await fs.mkdir("target/img/favicon", { recursive: true });

  await Promise.all(
    faviconSizes.map(async (size) => {
      const fontSize = Math.round(size * 0.45);
      const typstPath = `target/img/favicon/favicon-${size}.typ`;
      const pngPath = `target/img/favicon/favicon-${size}.png`;

      await writeFile(
        typstPath,
        [
          `#set page(width: ${size}pt, height: ${size}pt, margin: 0pt, fill: ${colBg})`,
          `#set text(fill: ${colFg}, font: "Daytripper Display")`,
          `#align(center + horizon)[#text(size: ${fontSize}pt, weight: "regular")[CèP]]`,
        ].join("\n"),
      );

      return $(
        "typst",
        "compile",
        "--font-path",
        "assets/fonts",
        "--ppi",
        "72",
        "--format",
        "png",
        typstPath,
        pngPath,
      );
    }),
  );
})();