website

import { readFileSync, rmSync, writeFileSync } from "node:fs";
import path from "node:path";
import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
import pluginRss from "@11ty/eleventy-plugin-rss";
import { fileIcon, folderIcon, iconSpriteDefs } from "./src/_helpers/fileIcons.js";
import { discoverLocalRepos, findReadmeImagePaths } from "./src/_helpers/gitRepos.js";

// theme-switcher (src/components/theme-switcher.js) used to be a Web
// Component (via @elenajs/core + an @elenajs/ssr build-time transform
// that expanded it on every generated page). A stateless click-to-toggle
// button doesn't need a component framework for that: its markup is now
// static HTML baked directly into site-header.njk, and theme-switcher.js
// is a plain script (loaded with `defer` below) that just wires up the
// click handler by id once the DOM is parsed.
//
// Every page used to pick and choose its own subset of these via `css`/
// `extraCss` frontmatter (e.g. repo pages loading repos.css + markdown.css
// + diff2html.min.css, the homepage loading just home.css). Now that
// everything below is @scope'd (see shared.css/repos.css/markdown.css/
// workers/home.css), there's no naming-collision reason to keep them
// apart, so they're concatenated into one cacheable stylesheet every page
// loads — fewer render-blocking requests than 2-4 separate <link>s.
//
// issues-detail.css/issues-index.css/posts-index.css/only-bible-app*.css
// are deliberately left out — none of them are unscoped-safe. The
// issues-* pair is leftover from a page that never made it into this
// rewrite. The other three are fully superseded by inline styles on their
// own pages now (posts.njk, only-bible-app/*.njk have zero matching
// classes left) — merging them site-wide used to be harmless because
// each was the only stylesheet on its own page, but their unscoped bare-
// tag selectors (a plain `a {...}`, `h1 {...}`, etc., not `.some-class
// a`) would otherwise leak onto every other page's matching tags once
// bundled together, which is exactly what broke tools/interests links on
// the homepage — inherited from posts-index.css's `ul li a` rule matching
// any list of links, not just the post list it was meant for.
const CSS_FILES_TO_MERGE = [
  "assets/css/shared.css",
  "assets/css/repos.css",
  "assets/css/markdown.css",
  "assets/css/diff2html.min.css",
  "assets/css/workers/home.css",
  "assets/css/workers/cv.css",
];

export default function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy({ assets: "assets" });
  eleventyConfig.addPassthroughCopy({
    "node_modules/diff2html/bundles/css/diff2html.min.css": "assets/css/diff2html.min.css",
  });

  // htmx powers no-full-page-reload tab switching on repo pages (Readme/
  // Commits/Files, Contents/History/Blame) — hx-select pulls #repo-content
  // or #file-content out of the fetched static page and swaps it in place.
  // Vendored locally rather than a CDN <script> so the build has no
  // runtime network dependency.
  eleventyConfig.addPassthroughCopy({
    "node_modules/htmx.org/dist/htmx.min.js": "assets/vendor/htmx.min.js",
  });

  // README images referenced by a repo-relative path (e.g. `shots/shot1.png`)
  // only render on GitHub because GitHub serves the file itself. Copying
  // just the handful of files each README actually references to a `raw/`
  // route keeps them real, loadable URLs without inlining every screenshot
  // as base64 into the README's HTML (see resolveReadmeImages in
  // gitRepos.js, which points <img> at these same paths).
  for (const repo of discoverLocalRepos()) {
    for (const relPath of findReadmeImagePaths(repo.readme, repo.dir)) {
      eleventyConfig.addPassthroughCopy({
        [path.join(repo.dir, relPath)]: `repos/${repo.id}/raw/${relPath}`,
      });
    }
  }

  eleventyConfig.addPlugin(syntaxHighlight);
  eleventyConfig.addPlugin(pluginRss);

  eleventyConfig.addFilter("readableDate", (value) =>
    new Date(value).toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }),
  );
  eleventyConfig.addFilter("fileIcon", fileIcon);
  eleventyConfig.addFilter("folderIcon", folderIcon);
  // Nunjucks' built-in `selectattr` only checks truthiness of the named
  // attribute — it has no Jinja2-style `equalto` test, so a third argument
  // is silently ignored. These do the actual equality filtering in JS.
  eleventyConfig.addFilter("filterByRepo", (entries, repoId) => entries.filter((e) => e.repoId === repoId));
  eleventyConfig.addFilter("defaultFileEntry", (entries) => {
    if (!entries.length) return null;
    return entries.find((e) => e.file.path.toLowerCase() === "readme.md") ?? entries[entries.length - 1];
  });
  // A folder should start open only when the active file lives inside it —
  // otherwise every directory in the tree defaults to expanded, which on a
  // repo of any size is just a wall of open folders with nothing collapsed.
  eleventyConfig.addFilter(
    "isAncestorDir",
    (dirPath, activePath) => !!activePath && (activePath === dirPath || activePath.startsWith(`${dirPath}/`)),
  );
  eleventyConfig.addFilter("formatBytes", (bytes) => {
    if (!bytes) return "0B";
    const units = ["B", "KB", "MB", "GB"];
    const i = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
    const value = bytes / 1024 ** i;
    return `${i === 0 ? value : value.toFixed(1)}${units[i]}`;
  });
  // Runs after passthrough copy has placed every file in CSS_FILES_TO_MERGE
  // under dist/, so it reads the already-copied output rather than the
  // assets/ source tree (that's also where diff2html.min.css lands, copied
  // from node_modules above — there's no separate "source" copy of it).
  eleventyConfig.on("eleventy.after", ({ dir }) => {
    const outputDir = dir.output;
    const merged = CSS_FILES_TO_MERGE.map((file) => readFileSync(path.join(outputDir, file), "utf8")).join("\n");
    writeFileSync(path.join(outputDir, "assets/css/bundle.css"), merged);
    for (const file of CSS_FILES_TO_MERGE) rmSync(path.join(outputDir, file));

    // Written once here rather than inlined per page (see fileIcons.js) —
    // every repo page's fileIcon()/folderIcon() <use> just points at this
    // one shared file instead of shipping the ~30-icon sprite body again.
    writeFileSync(path.join(outputDir, "assets/icons/sprite.svg"), iconSpriteDefs());
  });

  return {
    markdownTemplateEngine: false,
    dir: {
      input: "src",
      output: "dist",
    },
  };
}