.eleventy.js

const syntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
const markdownIt = require("markdown-it");
const markdownItAnchor = require("markdown-it-anchor");
const fs = require("fs");
const crypto = require("crypto");
const path = require("path");
const Prism = require("prismjs");

// Prism ships no grammar for these component-file formats, and without one the
// syntax-highlight plugin passes the fence body through *unescaped* — the sample
// markup then parses as real HTML (tags vanish, `<a href>` becomes a live link).
// They are all markup supersets, so alias them onto Prism's markup grammar.
for (const lang of ["svelte", "vue", "astro"]) {
  Prism.languages[lang] = Prism.languages.markup;
}

module.exports = function (eleventyConfig) {
  // Plugins
  eleventyConfig.addPlugin(syntaxHighlight);

  // Markdown configuration
  const md = markdownIt({
    html: true,
    linkify: true,
    typographer: true,
  }).use(markdownItAnchor, {
    permalink: markdownItAnchor.permalink.headerLink(),
    slugify: (s) =>
      s
        .toLowerCase()
        .replace(/[^\w\s-]/g, "")
        .replace(/\s+/g, "-")
        .replace(/-+/g, "-")
        .trim(),
  });
  // Wrap every table in a horizontally-scrollable container so wide tables
  // never force the page to overflow on narrow (mobile) viewports.
  md.renderer.rules.table_open = () => '<div class="table-wrap">\n<table>\n';
  md.renderer.rules.table_close = () => '</table>\n</div>\n';
  eleventyConfig.setLibrary("md", md);

  // Passthrough copies
  eleventyConfig.addPassthroughCopy("assets");
  eleventyConfig.addPassthroughCopy("manifest.json");
  eleventyConfig.addPassthroughCopy("sw.js");
  eleventyConfig.addPassthroughCopy("favicon.ico");
  eleventyConfig.addPassthroughCopy("robots.txt");
  eleventyConfig.addPassthroughCopy("_headers");
  eleventyConfig.addPassthroughCopy("526c8500ed2fb949afa6b936dff3880d.txt");

  // Collections — one per topic area
  eleventyConfig.addCollection("topic_core", (collection) =>
    collection
      .getFilteredByGlob(
        "content/core-browser-loading-mechanics-priority-queues/**/*.md"
      )
      .sort((a, b) => a.url.localeCompare(b.url))
  );

  eleventyConfig.addCollection("topic_hints", (collection) =>
    collection
      .getFilteredByGlob(
        "content/resource-hint-implementation-preloading-strategies/**/*.md"
      )
      .sort((a, b) => a.url.localeCompare(b.url))
  );

  eleventyConfig.addCollection("topic_http", (collection) =>
    collection
      .getFilteredByGlob(
        "content/http2-http3-multiplexing-connection-optimization/**/*.md"
      )
      .sort((a, b) => a.url.localeCompare(b.url))
  );

  eleventyConfig.addCollection("topic_frameworks", (collection) =>
    collection
      .getFilteredByGlob(
        "content/framework-specific-loading-strategies/**/*.md"
      )
      .sort((a, b) => a.url.localeCompare(b.url))
  );

  eleventyConfig.addCollection("allContent", (collection) =>
    collection
      .getFilteredByGlob("content/**/*.md")
      .sort((a, b) => a.url.localeCompare(b.url))
  );

  // Asset hash filter — appends ?v=<8-char md5> so immutable-cached assets
  // are busted automatically whenever the file content changes.
  eleventyConfig.addFilter("assetHash", (url) => {
    try {
      const filePath = path.join(__dirname, url.replace(/^\//, "").split("?")[0]);
      const hash = crypto.createHash("md5").update(fs.readFileSync(filePath)).digest("hex").slice(0, 8);
      return `${url}?v=${hash}`;
    } catch {
      return url;
    }
  });

  // Filters
  eleventyConfig.addFilter("slugify", (str) =>
    str
      .toLowerCase()
      .replace(/[^\w\s-]/g, "")
      .replace(/\s+/g, "-")
      .replace(/-+/g, "-")
      .trim()
  );

  eleventyConfig.addFilter("absoluteUrl", (url, base) => {
    try {
      return new URL(url, base).toString();
    } catch {
      return url;
    }
  });

  // Truncate filter for meta descriptions
  eleventyConfig.addFilter("truncate", (str, len = 160) => {
    if (!str) return "";
    const plain = str.replace(/<[^>]+>/g, "").replace(/\s+/g, " ").trim();
    return plain.length > len ? plain.slice(0, len - 1) + "…" : plain;
  });

  // Build year filter
  eleventyConfig.addFilter("year", () => new Date().getFullYear());

  // ISO date filter for JSON-LD / sitemap
  eleventyConfig.addFilter("isoDate", (date) => {
    if (!date) return new Date().toISOString().split("T")[0];
    return new Date(date).toISOString().split("T")[0];
  });

  // URL depth (number of path segments)
  eleventyConfig.addFilter("urlDepth", (url) => {
    return url.split("/").filter(Boolean).length;
  });

  // Parent URL (one level up)
  eleventyConfig.addFilter("urlParent", (url) => {
    const parts = url.split("/").filter(Boolean);
    if (parts.length <= 1) return "/";
    parts.pop();
    return "/" + parts.join("/") + "/";
  });

  // Check if URL starts with another URL
  eleventyConfig.addFilter("urlStartsWith", (url, prefix) => {
    return url.startsWith(prefix);
  });

  // Breadcrumb filter — derives crumbs from a URL
  eleventyConfig.addFilter("breadcrumbs", (url) => {
    const parts = url.split("/").filter(Boolean);
    const crumbs = [{ label: "Home", url: "/" }];
    let current = "";
    const labels = {
      "core-browser-loading-mechanics-priority-queues":
        "Core Browser Loading Mechanics",
      "resource-hint-implementation-preloading-strategies":
        "Resource Hint Implementation",
      "http2-http3-multiplexing-connection-optimization":
        "HTTP/2 & HTTP/3 Multiplexing",
      "understanding-browser-resource-priority-queues":
        "Understanding Priority Queues",
      "cache-interaction-stale-while-revalidate":
        "Cache & Stale-While-Revalidate",
      "network-waterfall-anatomy-timing-metrics":
        "Network Waterfall Anatomy",
      "render-blocking-resource-identification":
        "Render-Blocking Resources",
      "mastering-link-rel-preload-prefetch": "Mastering Preload & Prefetch",
      "strategic-preconnect-dns-prefetch-usage":
        "Strategic Preconnect & DNS-Prefetch",
      "font-loading-optimization-fout-prevention":
        "Font Loading & FOUT Prevention",
      "dynamic-hint-injection-via-javascript":
        "Dynamic Hint Injection via JS",
      "http2-stream-prioritization-weighting":
        "HTTP/2 Stream Prioritization",
      "mitigating-head-of-line-blocking": "Mitigating Head-of-Line Blocking",
      "connection-coalescing-domain-sharding":
        "Connection Coalescing & Domain Sharding",
      "cdn-edge-tuning-for-quic-http3": "CDN Edge Tuning for QUIC/HTTP3",
      "how-browser-fetch-priority-affects-lcp":
        "How Fetch Priority Affects LCP",
      "cache-control-headers-vs-resource-hints":
        "Cache-Control vs Resource Hints",
      "decoding-chrome-devtools-network-waterfall":
        "Decoding Chrome DevTools Waterfall",
      "fixing-low-priority-critical-css-requests":
        "Fixing Low-Priority Critical CSS",
      "preloading-critical-above-the-fold-assets":
        "Preloading Above-the-Fold Assets",
      "when-to-use-preload-vs-prefetch-for-images":
        "Preload vs Prefetch for Images",
      "automating-preconnect-for-third-party-apis":
        "Automating Preconnect for APIs",
      "reducing-font-swap-with-font-display-swap":
        "Reducing Font Swap (font-display)",
      "fixing-http2-priority-inversion-issues":
        "Fixing HTTP/2 Priority Inversion",
      "does-http3-eliminate-head-of-line-blocking":
        "Does HTTP/3 Eliminate HOL Blocking?",
      "framework-specific-loading-strategies":
        "Framework Loading Strategies",
      "nextjs-resource-loading-optimization":
        "Next.js Loading Optimization",
      "fixing-nextjs-lcp-image-priority":
        "Fixing Next.js LCP Image Priority",
      "choosing-nextjs-script-strategy":
        "Choosing a next/script Strategy",
      "nuxt-resource-loading-optimization":
        "Nuxt Loading Optimization",
      "tuning-nuxt-link-prefetch-behavior":
        "Tuning NuxtLink Prefetch",
      "astro-islands-loading-optimization":
        "Astro Islands Loading",
      "sequencing-astro-client-directives":
        "Sequencing Astro Client Directives",
      "fetchpriority-attribute-priority-hints":
        "fetchpriority & Priority Hints",
      "fetchpriority-high-not-working-on-lcp-image":
        "fetchpriority=high Not Working",
      "deprioritizing-below-the-fold-images":
        "Deprioritizing Below-Fold Images",
      "third-party-resource-impact-mapping":
        "Third-Party Impact Mapping",
      "measuring-tag-manager-blocking-time":
        "Measuring Tag Manager Blocking",
      "replacing-third-party-embeds-with-facades":
        "Replacing Embeds with Facades",
      "stale-while-revalidate-vs-service-worker-cache":
        "SWR vs Service Worker Cache",
      "early-hints-103-implementation": "103 Early Hints",
      "http2-server-push-vs-103-early-hints":
        "Server Push vs 103 Early Hints",
      "enabling-early-hints-on-cdn-and-origin":
        "Enabling Early Hints on CDN & Origin",
      "quic-0rtt-session-resumption-gotchas":
        "QUIC 0-RTT Resumption Gotchas",
      "rolling-out-alt-svc-headers-safely":
        "Rolling Out Alt-Svc Safely",
      "dismantling-domain-sharding-for-http3":
        "Dismantling Domain Sharding",
      "modulepreload-es-module-loading":
        "modulepreload & ES Modules",
      "fixing-dynamic-import-request-waterfalls":
        "Fixing Dynamic Import Waterfalls",
      "preload-vs-prefetch-vs-modulepreload-decision-matrix":
        "Preload vs Prefetch vs modulepreload",
      "speculation-rules-prefetch-prerender":
        "Speculation Rules: Prefetch & Prerender",
      "migrating-from-quicklink-to-speculation-rules":
        "Migrating from Quicklink",
      "fixing-preload-scanner-misses-in-spas":
        "Preload Scanner Misses in SPAs",
      "preventing-foit-with-font-loading-api":
        "Preventing FOIT (Font Loading API)",
      "script-loading-async-defer-execution-order":
        "Script Loading: async & defer",
      "fixing-async-script-race-conditions":
        "Fixing async Script Race Conditions",
      "deferring-third-party-scripts-without-breaking-analytics":
        "Deferring Third-Party Scripts",
      "lazy-loading-and-viewport-driven-fetching":
        "Lazy Loading & Viewport Fetching",
      "choosing-loading-lazy-vs-intersectionobserver":
        'loading="lazy" vs IntersectionObserver',
      "fixing-lazy-loaded-lcp-image-regressions":
        "Fixing Lazy-Loaded LCP Regressions",
      "using-content-visibility-to-skip-offscreen-rendering":
        "Using content-visibility",
      "chrome-vs-safari-vs-firefox-priority-differences":
        "Chrome vs Safari vs Firefox",
      "diagnosing-request-queueing-and-stalled-time":
        "Request Queueing & Stalled Time",
      "eliminating-render-blocking-css-with-media-queries":
        "Render-Blocking CSS & Media Queries",
      "auditing-render-blocking-with-lighthouse-treemap":
        "Auditing with the Lighthouse Treemap",
      "setting-a-third-party-request-budget":
        "Third-Party Request Budget",
      "preloading-video-and-media-streams":
        "Preloading Video & Media",
      "preloading-hls-and-dash-manifest-segments":
        "Preloading HLS & DASH Segments",
      "choosing-video-preload-metadata-vs-auto":
        'video preload="metadata" vs "auto"',
      "debugging-unused-preload-console-warnings":
        "Debugging Unused Preload Warnings",
      "preconnect-vs-dns-prefetch-decision-matrix":
        "preconnect vs dns-prefetch",
      "mapping-vite-chunk-graphs-to-modulepreload":
        "Vite Chunk Graphs to modulepreload",
      "injecting-hints-from-a-service-worker":
        "Hints from a Service Worker",
      "tuning-speculation-rules-eagerness-settings":
        "Tuning Eagerness Settings",
      "subsetting-and-preloading-variable-fonts":
        "Subsetting Variable Fonts",
      "measuring-protocol-performance-in-the-field":
        "Measuring Protocol Performance",
      "reading-server-timing-headers-for-protocol-stalls":
        "Reading Server-Timing Headers",
      "collecting-nexthopprotocol-with-resource-timing":
        "Collecting nextHopProtocol",
      "http2-priority-vs-http3-priority-header":
        "Priority Trees vs Priority Header",
      "tcp-vs-quic-loss-recovery-under-packet-loss":
        "TCP vs QUIC Loss Recovery",
      "verifying-connection-coalescing-with-devtools":
        "Verifying Coalescing in DevTools",
      "avoiding-early-hints-cache-poisoning":
        "Avoiding Early Hints Cache Poisoning",
      "sveltekit-resource-loading-optimization":
        "SvelteKit Loading Optimization",
      "tuning-sveltekit-data-preload-directives":
        "Tuning SvelteKit Preload Directives",
      "fixing-sveltekit-hydration-waterfalls":
        "Fixing SvelteKit Hydration Waterfalls",
      "optimizing-astro-view-transitions-prefetch":
        "Astro View Transitions Prefetch",
      "controlling-nuxt-payload-and-island-hydration":
        "Nuxt Payload & Island Hydration",
    };
    for (const part of parts) {
      current += "/" + part;
      crumbs.push({ label: labels[part] || part, url: current + "/" });
    }
    return crumbs;
  });

  // Dirs
  return {
    dir: {
      input: ".",
      includes: "_includes",
      output: "_site",
    },
    markdownTemplateEngine: "njk",
    htmlTemplateEngine: "njk",
  };
};