@t8/docsgen 0.3.32 → 0.3.33

package/dist/bin.js

@@ -278,14 +278,26 @@ async function setCName({ dir = "", name, cname, jsorg }) {
 }
 
 // src/bin/setContent.ts
-import { exec as defaultExec } from "node:child_process";
-import { access, cp, mkdir, writeFile as writeFile2 } from "node:fs/promises";
-import { dirname, join as join3 } from "node:path";
-import { fileURLToPath } from "node:url";
-import { promisify } from "node:util";
+import { writeFile as writeFile2 } from "node:fs/promises";
+import { join as join5 } from "node:path";
 
-// src/const/packageName.ts
-var packageName = "@t8/docsgen";
+// src/bin/content/createDirs.ts
+import { access, mkdir } from "node:fs/promises";
+import { join as join3 } from "node:path";
+async function createDirs(ctx) {
+  let { dir = "", contentDir = "" } = ctx;
+  let dirs = [contentDir];
+  await Promise.all(
+    dirs.map(async (path) => {
+      let dirPath = join3(dir, path);
+      try {
+        await access(dirPath);
+      } catch {
+        await mkdir(dirPath);
+      }
+    })
+  );
+}
 
 // src/utils/escapeHTML.ts
 var htmlEntityMap = [
@@ -302,70 +314,6 @@ function escapeHTML(x) {
   return s;
 }
 
-// src/utils/escapeRegExp.ts
-function escapeRegExp(s) {
-  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-}
-
-// src/bin/getCounterContent.ts
-function getCounterContent({ ymid }) {
-  if (!ymid) return "";
-  return `
-<script>
-(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
-m[i].l=1*new Date();
-for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
-k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
-(window, document, "script", "https://mc.yandex.com/metrika/tag.js", "ym");
-ym(${ymid}, "init", {clickmap: true, trackLinks: true, accurateTrackBounce: true});
-</script>
-<noscript><div><img src="https://mc.yandex.com/watch/${ymid}" style="position:absolute;left:-9999px;" alt=""></div></noscript>
-        `.trim();
-}
-
-// src/bin/getIcon.ts
-var iconTypeMap = {
-  ico: "image/x-icon",
-  svg: "image/svg+xml",
-  png: "image/png",
-  gif: "image/gif",
-  jpg: "image/jpeg",
-  jpeg: "image/jpeg"
-};
-function getIcon({ favicon, faviconType }) {
-  let icon = {
-    url: favicon,
-    type: faviconType
-  };
-  if (icon.url && !icon.type) {
-    let ext = icon.url.split("/").at(-1)?.split(".").at(-1)?.toLowerCase();
-    if (ext) icon.type = iconTypeMap[ext];
-  }
-  return icon;
-}
-
-// src/bin/getInjectedContent.ts
-function getInjectedContent(ctx, page, target, mode) {
-  let injectedContent = ctx[mode]?.[target];
-  if (!injectedContent) return "";
-  return (Array.isArray(injectedContent) ? injectedContent : [injectedContent]).reduce((s, item) => {
-    if (item === void 0) return s;
-    if (typeof item === "string") return `${s}${s ? "\n" : ""}${item}`;
-    let { content, pages } = item;
-    if (!content || pages && !pages.includes(page)) return s;
-    return `${s}${s ? "\n" : ""}${content}`;
-  }, "");
-}
-
-// src/bin/getNav.ts
-import { JSDOM as JSDOM2 } from "jsdom";
-
-// src/bin/getNpmLink.ts
-function getNpmLink({ npm }, className) {
-  if (!npm) return "";
-  return `<a href="${npm}"${className ? ` class="${className}"` : ""} target="_blank">npm</a>`;
-}
-
 // src/bin/getRepoLink.ts
 function getRepoLink({ repo }, className) {
   if (!repo) return "";
@@ -373,82 +321,8 @@ function getRepoLink({ repo }, className) {
   return `<a href="${repo}"${className ? ` class="${className}"` : ""} target="_blank">${caption}</a>`;
 }
 
-// src/bin/getNav.ts
-async function getNav(ctx, navItems) {
-  let { name, root, contentDir, backstory, nav } = ctx;
-  let navContent = await fetchContent(nav);
-  let s = "";
-  if (navContent) {
-    let navDom = new JSDOM2(navContent).window.document.body;
-    for (let link of navDom.querySelectorAll("a")) {
-      if (link.dataset.name === name) {
-        let parent = link.parentElement;
-        link.remove();
-        while (parent && parent.innerHTML.trim() === "") {
-          let nextParent = parent.parentElement;
-          parent.remove();
-          parent = nextParent;
-        }
-      }
-    }
-    navContent = navDom.innerHTML;
-  }
-  let navItemCount = 0;
-  if (navItems.length === 1) {
-    let { id, items } = navItems[0];
-    let itemLink = `${root}${contentDir}/${encodeURIComponent(id)}`;
-    for (let { id: id2, title } of items) {
-      s += `
-<li><a href="${itemLink}#${encodeURIComponent(id2)}">${title}</a></li>`;
-      navItemCount++;
-    }
-  } else {
-    for (let { id, title, items } of navItems) {
-      let itemLink = `${root}${contentDir}/${encodeURIComponent(id)}`;
-      s += `
-<li data-id="${id}"><a href="${itemLink}">${title}</a>`;
-      if (items.length !== 0) {
-        s += "\n  <ul>";
-        for (let { id: id2, title: title2 } of items) {
-          s += `
-    <li><a href="${itemLink}#${encodeURIComponent(id2)}">${title2}</a></li>`;
-          navItemCount++;
-        }
-        s += "\n  </ul>\n";
-      }
-      s += "</li>";
-      navItemCount++;
-    }
-  }
-  if ((!s || navItemCount < 2) && !navContent) return "";
-  s = s.trim();
-  s = s ? `<p class="title">Contents</p>
-<ul>${s}
-</ul>
-` : "";
-  let repoLink = getRepoLink(ctx);
-  let npmLink = getNpmLink(ctx);
-  if (repoLink || npmLink || backstory)
-    s += `
-<p class="title">Resources</p>
-<ul>
-  ${repoLink ? `<li>${repoLink}</li>` : ""}
-  ${npmLink ? `<li>${npmLink}</li>` : ""}
-  ${backstory ? `<li><a href="${backstory}">Backstory</a></li>` : ""}
-</ul>
-`;
-  s = s.trim();
-  s = s ? `<section>
-${s}
-</section>` : "";
-  return `<nav class="aux">
-${s}
-${navContent}
-</nav>`;
-}
-
 // src/bin/parsing/getParsedContent.ts
-import { JSDOM as JSDOM3 } from "jsdom";
+import { JSDOM as JSDOM2 } from "jsdom";
 import Markdown from "markdown-it";
 
 // src/bin/getSlug.ts
@@ -576,13 +450,15 @@ function preprocessContent(s) {
 var md = new Markdown({
   html: true
 });
+var parsedContentCache = /* @__PURE__ */ new Map();
 async function getParsedContent(ctx) {
+  let contentLocation = getLocation(ctx, "README.md", ctx.source);
+  let parsedContent = parsedContentCache.get(contentLocation);
+  if (parsedContent) return parsedContent;
   let { singlePage, firstLineDescription, linkMap } = ctx;
-  let rawContent = await fetchContent(
-    getLocation(ctx, "README.md", ctx.source)
-  );
+  let rawContent = await fetchContent(contentLocation);
   let content = md.render(preprocessContent(rawContent));
-  let dom = new JSDOM3(content);
+  let dom = new JSDOM2(content);
   let { nav, linkMap: navLinkMap } = buildNav(ctx, dom);
   let badges = "";
   let title = "";
@@ -650,7 +526,7 @@ async function getParsedContent(ctx) {
       intro[i] = `<p><span class="li">${s}</span></p>`;
     }
   }
-  return {
+  parsedContent = {
     badges,
     // postprocessBadges(joinLines(badges)),
     title,
@@ -662,25 +538,63 @@ async function getParsedContent(ctx) {
     sections: sections.map(postprocess),
     nav
   };
+  parsedContentCache.set(contentLocation, parsedContent);
+  return parsedContent;
 }
 
-// src/bin/toFileContent.ts
-function toFileContent(x) {
-  let s = x.replace(
-    /\s+(\r?\n *<\/?(script|link|head|body|html|meta|title)[> ])/g,
-    "$1"
-  ).replace(
-    /\s+(\r?\n *<\/?(main|header|footer|nav|section|div|h\d|p|ul|ol|li|table)[> ])/g,
-    "$1"
-  ).trim();
-  return `${s}
-`;
+// src/bin/content/getCounterContent.ts
+function getCounterContent({ ymid }) {
+  if (!ymid) return "";
+  return `
+<script>
+(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
+m[i].l=1*new Date();
+for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
+k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
+(window, document, "script", "https://mc.yandex.com/metrika/tag.js", "ym");
+ym(${ymid}, "init", {clickmap: true, trackLinks: true, accurateTrackBounce: true});
+</script>
+<noscript><div><img src="https://mc.yandex.com/watch/${ymid}" style="position:absolute;left:-9999px;" alt=""></div></noscript>
+        `.trim();
 }
 
-// src/bin/setContent.ts
+// src/bin/content/getCSSRoot.ts
+import { exec as defaultExec } from "node:child_process";
+import { cp } from "node:fs/promises";
+import { dirname, join as join4 } from "node:path";
+import { fileURLToPath } from "node:url";
+import { promisify } from "node:util";
+
+// src/const/packageName.ts
+var packageName = "@t8/docsgen";
+
+// src/bin/content/getCSSRoot.ts
 var exec = promisify(defaultExec);
 var __filename = fileURLToPath(import.meta.url);
 var __dirname = dirname(__filename);
+async function getCSSRoot(ctx, type) {
+  let { dir = "", assetsDir } = ctx;
+  let cssRoot = {
+    index: "",
+    content: ""
+  };
+  if (assetsDir) {
+    cssRoot.index = assetsDir;
+    cssRoot.content = `../${assetsDir}`;
+    await cp(join4(__dirname, "css"), join4(dir, cssRoot.index), {
+      force: true,
+      recursive: true
+    });
+  } else {
+    let packageVersion = (await exec(`npm view ${packageName} version`)).stdout.trim().split(".").slice(0, 2).join(".");
+    let packageUrl = `https://unpkg.com/${packageName}@${packageVersion}`;
+    cssRoot.index = `${packageUrl}/dist/css`;
+    cssRoot.content = `${packageUrl}/dist/css`;
+  }
+  return cssRoot[type];
+}
+
+// src/bin/content/getDefaultCodeStyleContent.ts
 function getDefaultCodeStyleContent(cssRoot) {
   return `
 <link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/styles/stackoverflow-light.min.css" media="(prefers-color-scheme: light)">
@@ -688,72 +602,87 @@ function getDefaultCodeStyleContent(cssRoot) {
 <link rel="stylesheet" href="${cssRoot}/code.css">
 <script src="https://unpkg.com/@highlightjs/cdn-assets@11.11.1/highlight.min.js"></script>
 <script>hljs.highlightAll()</script>
-    `.trim();
+  `.trim();
 }
+
+// src/bin/content/getIcon.ts
+var iconTypeMap = {
+  ico: "image/x-icon",
+  svg: "image/svg+xml",
+  png: "image/png",
+  gif: "image/gif",
+  jpg: "image/jpeg",
+  jpeg: "image/jpeg"
+};
+function getIcon({ favicon, faviconType }) {
+  let icon = {
+    url: favicon,
+    type: faviconType
+  };
+  if (icon.url && !icon.type) {
+    let ext = icon.url.split("/").at(-1)?.split(".").at(-1)?.toLowerCase();
+    if (ext) icon.type = iconTypeMap[ext];
+  }
+  return icon;
+}
+
+// src/bin/content/getIconTag.ts
+function getIconTag(ctx) {
+  let { url, type } = getIcon(ctx);
+  return url ? `<link rel="icon"${type ? ` type="${type}"` : ""} href="${url}">` : "";
+}
+
+// src/bin/content/getInjectedContent.ts
+function getInjectedContent(ctx, page, target, mode) {
+  let injectedContent = ctx[mode]?.[target];
+  if (!injectedContent) return "";
+  return (Array.isArray(injectedContent) ? injectedContent : [injectedContent]).reduce((s, item) => {
+    if (item === void 0) return s;
+    if (typeof item === "string") return `${s}${s ? "\n" : ""}${item}`;
+    let { content, pages } = item;
+    if (!content || pages && !pages.includes(page)) return s;
+    return `${s}${s ? "\n" : ""}${content}`;
+  }, "");
+}
+
+// src/bin/content/getPlainTitle.ts
+async function getPlainTitle(ctx) {
+  let { name, title, htmlTitle } = ctx;
+  let { title: parsedTitle } = await getParsedContent(ctx);
+  return escapeHTML(title || stripHTML(htmlTitle || parsedTitle, true) || name);
+}
+
+// src/bin/content/toFileContent.ts
+function toFileContent(x) {
+  let s = x.replace(
+    /\s+(\r?\n *<\/?(script|link|head|body|html|meta|title)[> ])/g,
+    "$1"
+  ).replace(
+    /\s+(\r?\n *<\/?(main|header|footer|nav|section|div|h\d|p|ul|ol|li|table)[> ])/g,
+    "$1"
+  ).trim();
+  return `${s}
+`;
+}
+
+// src/bin/content/tweakTypography.ts
 function tweakTypography(s = "") {
   return s.replace(/\b(for|in|on|at|to|with|a|an|the|its)\s+/gi, "$1\xA0").replace(/\b(React)\s+(apps?)\b/gi, "$1\xA0$2");
 }
-async function setContent(ctx) {
+
+// src/bin/content/getIndexContent.ts
+async function getIndexContent(ctx) {
   let {
-    dir = "",
-    assetsDir,
     root,
     contentDir = "",
     name,
-    title,
     htmlTitle,
     description: packageDescription,
     isDevDep,
-    backstory,
-    redirect
+    backstory
   } = ctx;
   let counterContent = getCounterContent(ctx);
   let escapedPackageDescription = escapeHTML(packageDescription);
-  let cssRoot = {
-    index: "",
-    content: ""
-  };
-  if (assetsDir) {
-    cssRoot.index = assetsDir;
-    cssRoot.content = `../${assetsDir}`;
-    await cp(join3(__dirname, "css"), join3(dir, cssRoot.index), {
-      force: true,
-      recursive: true
-    });
-  } else {
-    let packageVersion = (await exec(`npm view ${packageName} version`)).stdout.trim().split(".").slice(0, 2).join(".");
-    let packageUrl = `https://unpkg.com/${packageName}@${packageVersion}`;
-    cssRoot.index = `${packageUrl}/dist/css`;
-    cssRoot.content = `${packageUrl}/dist/css`;
-  }
-  let icon = getIcon(ctx);
-  let iconTag = icon.url ? `<link rel="icon"${icon.type ? ` type="${icon.type}"` : ""} href="${icon.url}">` : "";
-  if (redirect) {
-    let escapedRedirect = escapeHTML(redirect);
-    await writeFile2(
-      join3(dir, "index.html"),
-      toFileContent(`
-<!DOCTYPE html>
-<html lang="en" data-layout="redirect" class="blank">
-<head>
-  ${getInjectedContent(ctx, "redirect", "head", "prepend")}
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width">
-  <meta http-equiv="refresh" content="0; URL=${escapedRedirect}">
-  ${iconTag}
-  ${getInjectedContent(ctx, "redirect", "head", "append")}
-</head>
-<body>
-${getInjectedContent(ctx, "redirect", "body", "prepend")}
-${counterContent}
-${getInjectedContent(ctx, "redirect", "body", "append")}
-<script>window.location.replace("${escapedRedirect}");</script>
-</body>
-</html>
-            `)
-    );
-    return;
-  }
   let {
     title: parsedTitle,
     description,
@@ -761,86 +690,15 @@ ${getInjectedContent(ctx, "redirect", "body", "append")}
     features,
     note,
     installation,
-    sections,
     nav
   } = await getParsedContent(ctx);
-  let plainTitle = escapeHTML(
-    title || stripHTML(htmlTitle || parsedTitle, true) || name
-  );
+  let plainTitle = await getPlainTitle(ctx);
   let coverTitle = htmlTitle || parsedTitle || plainTitle;
   let descriptionContent = tweakTypography(description) || (escapedPackageDescription ? `<p>${tweakTypography(escapedPackageDescription)}<p>` : "");
   if (!installation || isDevDep !== void 0)
     installation = `npm i${isDevDep ? " -D" : ""} ${name}`;
-  let navContent = await getNav(ctx, nav);
-  let dirs = [contentDir];
-  await Promise.all(
-    dirs.map(async (path) => {
-      let dirPath = join3(dir, path);
-      try {
-        await access(dirPath);
-      } catch {
-        await mkdir(dirPath);
-      }
-    })
-  );
-  await Promise.all([
-    ...sections.map(
-      async (content, i) => writeFile2(
-        join3(dir, contentDir, `${nav[i]?.id ?? `_untitled_${i}`}.html`),
-        toFileContent(`
-<!DOCTYPE html>
-<html lang="en" data-layout="section">
-<head>
-  ${getInjectedContent(ctx, "section", "head", "prepend")}
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="description" content="${plainTitle}: ${escapeHTML(stripHTML(nav[i]?.title, true))}">
-  <title>${escapeHTML(stripHTML(nav[i]?.title, true))} | ${plainTitle}</title>
-  <link rel="stylesheet" href="${cssRoot.content}/base.css">
-  <link rel="stylesheet" href="${cssRoot.content}/section.css">
-  ${iconTag}
-  ${nav[i + 1]?.id ? `<link rel="prefetch" href="${root}${contentDir}/${nav[i + 1]?.id}">` : ""}
-  ${nav[i - 1]?.id ? `<link rel="prefetch" href="${root}${contentDir}/${nav[i - 1]?.id}">` : ""}
-  ${getInjectedContent(ctx, "section", "head", "append")}
-</head>
-<body>
-${getInjectedContent(ctx, "section", "body", "prepend")}
-<div class="layout">
-<div class="${navContent ? "" : "no-nav "}body">
-<main>
-<h1><a href="${root}">${plainTitle}</a></h1>
-${content}
-
-<p class="pagenav">
-  <span class="prev">
-    <span class="icon">\u2190</span>
-    ${nav[i - 1]?.id ? `<a href="${root}${contentDir}/${nav[i - 1]?.id}">${nav[i - 1]?.title}</a>` : `<a href="${root}">Intro</a>`}
-  </span>
-  <span class="sep">|</span>
-  ${nav[i + 1]?.id ? `<span class="next"><a href="${root}${contentDir}/${nav[i + 1]?.id}">${nav[i + 1]?.title}</a> <span class="icon">\u2192</span></span>` : `<span class="repo">${getRepoLink(ctx)}</span>`}
-</p>
-</main>
-${navContent ? "<hr>" : ""}
-${navContent.replace(
-          new RegExp(
-            `(<li data-id="${escapeRegExp(nav[i]?.id)}">)<a href="[^"]+">([^<]+)</a>`
-          ),
-          "$1<strong>$2</strong>"
-        )}
-</div>
-</div>
-
-${content.includes("<pre><code ") ? getInjectedContent(ctx, "section", ":has-code", "append") || getDefaultCodeStyleContent(cssRoot.content) : ""}
-${counterContent}
-${getInjectedContent(ctx, "section", "body", "append")}
-</body>
-</html>
-        `)
-      )
-    ),
-    writeFile2(
-      join3(dir, "index.html"),
-      toFileContent(`
+  let cssRoot = await getCSSRoot(ctx, "index");
+  return toFileContent(`
 <!DOCTYPE html>
 <html lang="en" data-layout="index">
 <head>
@@ -849,9 +707,9 @@ ${getInjectedContent(ctx, "section", "body", "append")}
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="${plainTitle}${escapedPackageDescription ? `: ${escapedPackageDescription}` : ""}">
   <title>${plainTitle}${escapedPackageDescription ? ` | ${escapedPackageDescription}` : ""}</title>
-  <link rel="stylesheet" href="${cssRoot.index}/base.css">
-  <link rel="stylesheet" href="${cssRoot.index}/index.css">
-  ${iconTag}
+  <link rel="stylesheet" href="${cssRoot}/base.css">
+  <link rel="stylesheet" href="${cssRoot}/index.css">
+  ${getIconTag(ctx)}
   <link rel="prefetch" href="${root}start">
   ${nav[0] ? `<link rel="prefetch" href="${root}${contentDir}/${nav[0]?.id ?? ""}">` : ""}
   ${getInjectedContent(ctx, "index", "head", "append")}
@@ -892,16 +750,192 @@ ${intro || features || note ? `
 </main>
 </div>
 
-${[description, intro, features, note].some((s) => s.includes("<pre><code ")) ? getInjectedContent(ctx, "index", ":has-code", "append") || getDefaultCodeStyleContent(cssRoot.index) : ""}
+${[description, intro, features, note].some((s) => s.includes("<pre><code ")) ? getInjectedContent(ctx, "index", ":has-code", "append") || getDefaultCodeStyleContent(cssRoot) : ""}
 ${counterContent}
 ${getInjectedContent(ctx, "index", "body", "append")}
 </body>
 </html>
-            `)
+  `);
+}
+
+// src/bin/content/getRedirectContent.ts
+function getRedirectContent(ctx) {
+  let { redirect } = ctx;
+  let escapedRedirect = escapeHTML(redirect);
+  return toFileContent(`
+<!DOCTYPE html>
+<html lang="en" data-layout="redirect" class="blank">
+<head>
+  ${getInjectedContent(ctx, "redirect", "head", "prepend")}
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <meta http-equiv="refresh" content="0; URL=${escapedRedirect}">
+  ${getIconTag(ctx)}
+  ${getInjectedContent(ctx, "redirect", "head", "append")}
+</head>
+<body>
+${getInjectedContent(ctx, "redirect", "body", "prepend")}
+${getCounterContent(ctx)}
+${getInjectedContent(ctx, "redirect", "body", "append")}
+<script>window.location.replace("${escapedRedirect}");</script>
+</body>
+</html>
+  `);
+}
+
+// src/utils/escapeRegExp.ts
+function escapeRegExp(s) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+// src/bin/content/getNav.ts
+import { JSDOM as JSDOM3 } from "jsdom";
+
+// src/bin/getNpmLink.ts
+function getNpmLink({ npm }, className) {
+  if (!npm) return "";
+  return `<a href="${npm}"${className ? ` class="${className}"` : ""} target="_blank">npm</a>`;
+}
+
+// src/bin/content/getNav.ts
+async function getNav(ctx, navItems) {
+  let { name, root, contentDir, backstory, nav } = ctx;
+  let navContent = await fetchContent(nav);
+  let s = "";
+  if (navContent) {
+    let navDom = new JSDOM3(navContent).window.document.body;
+    for (let link of navDom.querySelectorAll("a")) {
+      if (link.dataset.name === name) {
+        let parent = link.parentElement;
+        link.remove();
+        while (parent && parent.innerHTML.trim() === "") {
+          let nextParent = parent.parentElement;
+          parent.remove();
+          parent = nextParent;
+        }
+      }
+    }
+    navContent = navDom.innerHTML;
+  }
+  let navItemCount = 0;
+  if (navItems.length === 1) {
+    let { id, items } = navItems[0];
+    let itemLink = `${root}${contentDir}/${encodeURIComponent(id)}`;
+    for (let { id: id2, title } of items) {
+      s += `
+<li><a href="${itemLink}#${encodeURIComponent(id2)}">${title}</a></li>`;
+      navItemCount++;
+    }
+  } else {
+    for (let { id, title, items } of navItems) {
+      let itemLink = `${root}${contentDir}/${encodeURIComponent(id)}`;
+      s += `
+<li data-id="${id}"><a href="${itemLink}">${title}</a>`;
+      if (items.length !== 0) {
+        s += "\n  <ul>";
+        for (let { id: id2, title: title2 } of items) {
+          s += `
+    <li><a href="${itemLink}#${encodeURIComponent(id2)}">${title2}</a></li>`;
+          navItemCount++;
+        }
+        s += "\n  </ul>\n";
+      }
+      s += "</li>";
+      navItemCount++;
+    }
+  }
+  if ((!s || navItemCount < 2) && !navContent) return "";
+  s = s.trim();
+  s = s ? `<p class="title">Contents</p>
+<ul>${s}
+</ul>
+` : "";
+  let repoLink = getRepoLink(ctx);
+  let npmLink = getNpmLink(ctx);
+  if (repoLink || npmLink || backstory)
+    s += `
+<p class="title">Resources</p>
+<ul>
+  ${repoLink ? `<li>${repoLink}</li>` : ""}
+  ${npmLink ? `<li>${npmLink}</li>` : ""}
+  ${backstory ? `<li><a href="${backstory}">Backstory</a></li>` : ""}
+</ul>
+`;
+  s = s.trim();
+  s = s ? `<section>
+${s}
+</section>` : "";
+  return `<nav class="aux">
+${s}
+${navContent}
+</nav>`;
+}
+
+// src/bin/content/getSectionContent.ts
+async function getSectionContent(ctx, index) {
+  let { root, contentDir = "" } = ctx;
+  let cssRoot = await getCSSRoot(ctx, "content");
+  let { sections, nav } = await getParsedContent(ctx);
+  let content = sections[index];
+  let navContent = await getNav(ctx, nav);
+  let plainTitle = await getPlainTitle(ctx);
+  return toFileContent(`
+  <!DOCTYPE html>
+  <html lang="en" data-layout="section">
+  <head>
+    ${getInjectedContent(ctx, "section", "head", "prepend")}
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="${plainTitle}: ${escapeHTML(stripHTML(nav[index]?.title, true))}">
+    <title>${escapeHTML(stripHTML(nav[index]?.title, true))} | ${plainTitle}</title>
+    <link rel="stylesheet" href="${cssRoot}/base.css">
+    <link rel="stylesheet" href="${cssRoot}/section.css">
+    ${getIconTag(ctx)}
+    ${nav[index + 1]?.id ? `<link rel="prefetch" href="${root}${contentDir}/${nav[index + 1]?.id}">` : ""}
+    ${nav[index - 1]?.id ? `<link rel="prefetch" href="${root}${contentDir}/${nav[index - 1]?.id}">` : ""}
+    ${getInjectedContent(ctx, "section", "head", "append")}
+  </head>
+  <body>
+  ${getInjectedContent(ctx, "section", "body", "prepend")}
+  <div class="layout">
+  <div class="${navContent ? "" : "no-nav "}body">
+  <main>
+  <h1><a href="${root}">${plainTitle}</a></h1>
+  ${content}
+  
+  <p class="pagenav">
+    <span class="prev">
+      <span class="icon">\u2190</span>
+      ${nav[index - 1]?.id ? `<a href="${root}${contentDir}/${nav[index - 1]?.id}">${nav[index - 1]?.title}</a>` : `<a href="${root}">Intro</a>`}
+    </span>
+    <span class="sep">|</span>
+    ${nav[index + 1]?.id ? `<span class="next"><a href="${root}${contentDir}/${nav[index + 1]?.id}">${nav[index + 1]?.title}</a> <span class="icon">\u2192</span></span>` : `<span class="repo">${getRepoLink(ctx)}</span>`}
+  </p>
+  </main>
+  ${navContent ? "<hr>" : ""}
+  ${navContent.replace(
+    new RegExp(
+      `(<li data-id="${escapeRegExp(nav[index]?.id)}">)<a href="[^"]+">([^<]+)</a>`
     ),
-    writeFile2(
-      join3(dir, "start.html"),
-      toFileContent(`
+    "$1<strong>$2</strong>"
+  )}
+  </div>
+  </div>
+  
+  ${content.includes("<pre><code ") ? getInjectedContent(ctx, "section", ":has-code", "append") || getDefaultCodeStyleContent(cssRoot) : ""}
+  ${getCounterContent(ctx)}
+  ${getInjectedContent(ctx, "section", "body", "append")}
+  </body>
+  </html>
+  `);
+}
+
+// src/bin/content/getStartContent.ts
+async function getStartContent(ctx) {
+  let { root, contentDir = "" } = ctx;
+  let { nav } = await getParsedContent(ctx);
+  let plainTitle = await getPlainTitle(ctx);
+  return toFileContent(`
 <!DOCTYPE html>
 <html lang="en" data-layout="start" class="blank">
 <head>
@@ -910,8 +944,8 @@ ${getInjectedContent(ctx, "index", "body", "append")}
   <meta name="viewport" content="width=device-width">
   <meta http-equiv="refresh" content="0; URL=${root}${contentDir}/${nav[0]?.id}">
   <title>${plainTitle}</title>
-  <link rel="stylesheet" href="${cssRoot.index}/base.css">
-  ${iconTag}
+  <link rel="stylesheet" href="${await getCSSRoot(ctx, "index")}/base.css">
+  ${getIconTag(ctx)}
   <script>window.location.replace("${root}${contentDir}/${nav[0]?.id}");</script>
   ${getInjectedContent(ctx, "start", "head", "append")}
 </head>
@@ -921,18 +955,37 @@ ${getInjectedContent(ctx, "start", "body", "prepend")}
   <h1>${plainTitle}</h1>
 </div>
 
-${counterContent}
+${getCounterContent(ctx)}
 ${getInjectedContent(ctx, "start", "body", "append")}
 </body>
 </html>
-            `)
-    )
+  `);
+}
+
+// src/bin/setContent.ts
+async function setContent(ctx) {
+  let { dir = "", contentDir = "", redirect } = ctx;
+  if (redirect) {
+    await writeFile2(join5(dir, "index.html"), getRedirectContent(ctx));
+    return;
+  }
+  let { sections, nav } = await getParsedContent(ctx);
+  await createDirs(ctx);
+  await Promise.all([
+    ...sections.map(
+      async (_, i) => writeFile2(
+        join5(dir, contentDir, `${nav[i]?.id ?? `_Section_${i + 1}`}.html`),
+        await getSectionContent(ctx, i)
+      )
+    ),
+    writeFile2(join5(dir, "index.html"), await getIndexContent(ctx)),
+    writeFile2(join5(dir, "start.html"), await getStartContent(ctx))
   ]);
 }
 
 // src/bin/setImages.ts
 import { writeFile as writeFile3 } from "node:fs/promises";
-import { join as join4 } from "node:path";
+import { join as join6 } from "node:path";
 
 // src/utils/getIconContent.ts
 function getIconContent(baseColor = "gray") {
@@ -952,7 +1005,7 @@ function getIconContent(baseColor = "gray") {
 // src/bin/setImages.ts
 async function setImages({ dir = "", favicon }) {
   if (favicon) return;
-  await writeFile3(join4(dir, "./favicon.svg"), `${getIconContent()}
+  await writeFile3(join6(dir, "./favicon.svg"), `${getIconContent()}
 `);
 }