@t8/docsgen 0.1.0

package/dist/css/index.css

@@ -0,0 +1,212 @@
+html[data-theme="t8"] {
+  background:
+    linear-gradient(to bottom right, #90eec6, #9a70ce) 50% 50% / cover no-repeat;
+}
+@media (max-width: 840px) {
+  html[data-theme="t8"] {
+    background:
+      linear-gradient(to bottom, #90eec6, #9a70ce) 50% 50% / cover no-repeat;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  html[data-theme="t8"] {
+    background:
+      linear-gradient(to bottom right, #14a482, #6649b5) 50% 50% / cover
+      no-repeat;
+  }
+}
+@media (max-width: 840px) and (prefers-color-scheme: dark) {
+  html[data-theme="t8"] {
+    background:
+      linear-gradient(to bottom, #14a482, #6649b5) 50% 50% / cover no-repeat;
+  }
+}
+body {
+  min-height: 100vh;
+}
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  min-height: 90vh;
+  align-items: center;
+  justify-content: center;
+}
+
+main {
+  --max-content-width: 32em;
+
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding: 0;
+  margin: 6vh 0;
+}
+@media (max-width: 840px) {
+  main {
+    --max-content-width: 100%;
+
+    display: block;
+    margin: 0;
+  }
+}
+
+h1 {
+  font-size: 2.5em;
+  font-weight: 900;
+  margin: 1.5rem 0;
+}
+@media (max-width: 840px) {
+  h1 {
+    font-size: 2.35em;
+  }
+}
+h1 a {
+  position: relative;
+}
+h1 a::before {
+  content: "";
+  background-color: color(from var(--b1) srgb r g b / 0.3);
+  transform: skew(-15deg, -10deg);
+  border-radius: 0.4em;
+  position: absolute;
+  inset: 0.3em -0.25em 0.25em;
+  transition: inset 0.3s;
+}
+h1 a:hover {
+  text-decoration: none;
+}
+h1 a:hover::before {
+  inset: 0.25em -0.25em 0.2em;
+}
+header {
+  display: block;
+  text-align: center;
+  padding: 0 var(--content-padding-x);
+}
+@media (max-width: 840px) {
+  .badges {
+    margin: 0 2em;
+  }
+}
+.description {
+  font-size: 1.1em;
+  margin: 0;
+}
+.description p {
+  margin-top: 0;
+}
+.actions {
+  --r: 1em;
+
+  font-size: 1.25em;
+  margin: 0.5em 0;
+}
+.actions a.button {
+  min-width: 32%;
+}
+@media (max-width: 840px) {
+  .actions {
+    font-size: 1.15em;
+  }
+}
+.actions .sep {
+  display: none;
+}
+.ref {
+  font-size: 0.9em;
+}
+
+section {
+  max-width: var(--max-content-width);
+  padding: 0 2.5em;
+  box-sizing: border-box;
+}
+section + section {
+  display: flex;
+  flex-direction: column;
+  align-self: stretch;
+  justify-content: center;
+  border-left: 0.1em solid var(--b1-medium);
+}
+section.intro-title {
+  text-align: center;
+  padding-top: 4em;
+  padding-bottom: 4em;
+}
+@media (max-width: 840px) {
+  section {
+    max-width: 100%;
+    padding: var(--content-padding-y) var(--content-padding-x);
+  }
+  section + section {
+    display: block;
+    border-left: none;
+  }
+  section.intro-title {
+    padding-top: 2em;
+    padding-bottom: 0;
+  }
+  section.intro {
+    padding-bottom: 2.5em;
+  }
+}
+.features {
+  --link-color: color(from var(--c0) srgb r g b / 0.55);
+  --link-decoration: underline;
+
+  margin: 2em 0;
+}
+@media (max-width: 840px) {
+  .features {
+    padding: 0;
+    margin: 0;
+  }
+}
+.features h2 {
+  font-size: 1.5em;
+  font-style: italic;
+  text-align: center;
+  border: none;
+  padding: 0.1em 0;
+  margin: 0.75em 0 0.5em;
+}
+.features > ul {
+  list-style: none;
+  padding: 0;
+  margin: 0.5em 0 0;
+}
+.features > ul > li {
+  background: var(--b1-light);
+  border-bottom: 0.25em solid var(--b1-medium);
+  border-radius: 0.5em;
+  padding: 0.9em 1.2em;
+  margin: 1em 0;
+  box-sizing: border-box;
+}
+@media (max-width: 840px) {
+  .features > ul > li {
+    width: 100%;
+    margin: 0.5em 0;
+  }
+}
+.features > ul > li > ul {
+  list-style: disc;
+}
+.note {
+  padding: 0 3.5em;
+  margin: 1.5em 0;
+}
+@media (max-width: 840px) {
+  .note {
+    padding: 0;
+  }
+}
+p.installation {
+  font-size: 1.25em;
+  text-align: center;
+  margin: 1em 0;
+}
+.installation code {
+  background: transparent;
+}

package/dist/css/section.css

@@ -0,0 +1,200 @@
+.body {
+  display: flex;
+  align-items: stretch;
+  padding: var(--content-padding-y) var(--content-padding-x);
+}
+.body > hr {
+  display: none;
+}
+@media (max-width: 840px) {
+  .body {
+    flex-direction: column;
+    padding: 0;
+  }
+}
+.body > nav {
+  width: 30%;
+  flex: none;
+  align-self: flex-start;
+  font-size: 0.9em;
+  background: var(--b1-light);
+  border-radius: var(--content-border-radius);
+  padding: 0.5rem var(--content-padding-x) 0.65rem;
+  margin: 0 0 0 var(--space-x);
+  box-sizing: border-box;
+}
+@media (max-width: 840px) {
+  .body > nav {
+    width: 100%;
+    font-size: inherit;
+    border-top: 0.35em solid var(--b1);
+    border-radius: 0;
+    padding: 0.25rem var(--content-padding-x) 0.35rem;
+    margin: 0;
+  }
+}
+.body > nav section {
+  padding: 1rem 0;
+}
+.body > nav section + section {
+  border-top: 0.05rem solid var(--b1);
+}
+.body > nav section.related {
+  border-top: 0.15rem double var(--b1);
+}
+.body > nav h2,
+.body > nav p.title {
+  font-size: 0.7rem;
+  font-weight: normal;
+  line-height: 1.2;
+  text-transform: uppercase;
+  color: color(from var(--c0) srgb r g b / 0.6);
+  margin: 1.1rem 0 0.75rem 0;
+}
+.body > nav h2:first-of-type,
+.body > nav p.title:first-of-type {
+  margin-top: 0;
+}
+.body > nav ul {
+  line-height: 1.2;
+  padding: 0;
+  padding-inline-start: 1em;
+  margin: 0;
+}
+.body > nav > ul + ul {
+  border-top: 0.05rem solid var(--b1);
+  padding-top: 1.2em;
+  margin-top: 1.5em;
+}
+.body > nav ul ul {
+  margin: 0.65em 0 0.5em;
+}
+.body > nav li {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.body > nav li + li {
+  margin-top: 0.5em;
+}
+@media (max-width: 840px) {
+  .body > nav li + li {
+    margin-top: 0.65em;
+  }
+}
+.body > nav > ul:last-child,
+.body > nav > ul:last-child > li:last-child {
+  margin-bottom: 0;
+}
+.body > nav a.active {
+  font-weight: bold;
+  text-decoration: none;
+  color: inherit;
+  pointer-events: none;
+}
+.body > nav a.anchorjs-link {
+  display: none;
+}
+
+main {
+  width: calc(70% - var(--space-x));
+  box-sizing: border-box;
+}
+@media (max-width: 840px) {
+  main {
+    width: 100%;
+    padding: var(--content-padding-y) var(--content-padding-x) 0;
+  }
+}
+.body.no-nav {
+  --max-content-width: 45em;
+}
+.body.no-nav > main {
+  width: auto;
+}
+main p.sep {
+  font-size: 1.5em;
+  text-align: center;
+  margin: 0.5em 0;
+}
+main hr {
+  background: none transparent;
+  border: none;
+  border-top: 0.075em solid;
+  margin: var(--block-margin-y) 0;
+}
+main h1 {
+  font-size: 0.8rem;
+  font-weight: normal;
+  line-height: 1.1;
+  color: color(from var(--c0) srgb r g b / 0.5);
+  margin: 0;
+}
+h1 .sep {
+  margin: 0 0.1em;
+}
+@media (max-width: 840px) {
+  main h1 {
+    margin-top: 0;
+  }
+}
+main h1 + h2 {
+  margin-top: 0.75rem;
+}
+main h2 {
+  border-bottom: var(--hr-border);
+  padding-bottom: 0.1em;
+}
+
+.pagenav {
+  --icon-width: 1.25em;
+
+  display: flex;
+  justify-content: space-between;
+  gap: 1em;
+  background: var(--b1-light);
+  border-top: var(--hr-border);
+  padding: 0.6em 0.75em 0.75em;
+  margin: 1.5em 0 0;
+}
+@media (max-width: 840px) {
+  .pagenav {
+    padding: 1em var(--content-padding-x) 1.1em;
+    margin: 2em calc(-1 * var(--content-padding-x)) 0;
+  }
+}
+.pagenav .prev,
+.pagenav .next {
+  display: inline-block;
+  line-height: 1.2;
+  position: relative;
+}
+.pagenav .icon {
+  display: inline-block;
+  width: var(--icon-width);
+  box-sizing: border-box;
+  position: absolute;
+  top: 0;
+}
+.pagenav .prev {
+  text-align: left;
+}
+.pagenav .prev .icon {
+  left: 0;
+}
+.pagenav .next {
+  text-align: right;
+}
+.pagenav .next .icon {
+  right: 0;
+}
+.pagenav .prev {
+  padding-left: var(--icon-width);
+}
+.pagenav .next {
+  padding-right: var(--icon-width);
+}
+.pagenav .sep,
+.pagenav .anchorjs-link,
+.pagenav hr {
+  display: none;
+}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@t8/docsgen",
+  "version": "0.1.0",
+  "description": "",
+  "main": "dist/bin.js",
+  "bin": {
+    "docsgen": "dist/bin.js"
+  },
+  "scripts": {
+    "build": "npx npm-run-all clean build-bin -s build-css",
+    "build-bin": "npx esbuild ./src/bin/run.ts --bundle --outfile=dist/bin.js --platform=node --external:jsdom --external:markdown-it",
+    "build-css": "node -e \"require('node:fs').cpSync('src/css', 'dist/css', { force: true, recursive: true });\"",
+    "clean": "node -e \"require('node:fs').rmSync('dist', { force: true, recursive: true });\"",
+    "prepublishOnly": "npm run build",
+    "preversion": "npx npm-run-all typecheck shape build",
+    "shape": "npx codeshape",
+    "typecheck": "tsc --noEmit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/t8js/docsgen.git"
+  },
+  "license": "ISC",
+  "author": "axtk",
+  "devDependencies": {
+    "@types/jsdom": "^27.0.0",
+    "@types/markdown-it": "^14.1.2",
+    "@types/node": "^24.7.0",
+    "typescript": "^5.9.3"
+  },
+  "dependencies": {
+    "args-json": "^1.2.4",
+    "jsdom": "^27.0.0",
+    "markdown-it": "^14.1.0"
+  }
+}

package/src/bin/cleanup.ts

@@ -0,0 +1,11 @@
+import { rm } from "node:fs/promises";
+import { join } from "node:path";
+import type { Context } from "../types/Context";
+
+export async function cleanup({ dir = "" }: Context) {
+  await Promise.all(
+    ["x", "index.html", "start.html"].map((path) => {
+      return rm(join(dir, path), { force: true, recursive: true });
+    }),
+  );
+}

package/src/bin/createFiles.ts

@@ -0,0 +1,8 @@
+import type { Context } from "../types/Context";
+import { setCName } from "./setCName";
+import { setContent } from "./setContent";
+import { setImages } from "./setImages";
+
+export async function createFiles(ctx: Context) {
+  await Promise.all([setCName(ctx), setContent(ctx), setImages(ctx)]);
+}

package/src/bin/fetchText.ts

@@ -0,0 +1,16 @@
+import { readFile } from "node:fs/promises";
+
+export async function fetchText(location: string | undefined) {
+  if (!location) return "";
+
+  if (/^https?:\/\//.test(location)) {
+    try {
+      return await (await fetch(location)).text();
+    } catch {
+      console.warn(`Failed to fetch content from '${location}'`);
+      return "";
+    }
+  }
+
+  return (await readFile(location)).toString();
+}

package/src/bin/getConfig.ts

@@ -0,0 +1,44 @@
+import { parseArgs } from "args-json";
+import type { BinConfig } from "../types/BinConfig";
+import type { PackageMetadata } from "../types/PackageMetadata";
+import { fetchText } from "./fetchText";
+import { toConfig } from "./toConfig";
+
+let config: BinConfig | null = null;
+
+export async function getConfig(): Promise<BinConfig> {
+  if (config) return config;
+
+  let metadata: PackageMetadata = {};
+
+  try {
+    metadata = JSON.parse(await fetchText("./package.json")) as PackageMetadata;
+  } catch {}
+
+  let localConfig: BinConfig = {};
+
+  try {
+    localConfig = JSON.parse(
+      await fetchText("./docsgen.config.json"),
+    ) as BinConfig;
+  } catch {}
+
+  let targetId: string | undefined;
+  let args = process.argv.slice(2);
+
+  if (!args[0].startsWith("--")) targetId = args.shift();
+
+  config = {
+    targetId,
+    mainBranch: "main",
+    root: "/",
+    contentDir: "x",
+    ...toConfig(metadata),
+    ...localConfig,
+    ...parseArgs<BinConfig>(args),
+  };
+
+  if (!config.root?.endsWith("/")) config.root = `${config.root ?? ""}/`;
+
+  return config;
+}

package/src/bin/getCounterContent.ts

@@ -0,0 +1,17 @@
+import type { Context } from "../types/Context";
+
+export function getCounterContent({ ymid }: Context) {
+  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();
+}

package/src/bin/getNav.ts

@@ -0,0 +1,64 @@
+import { JSDOM } from "jsdom";
+import type { Context } from "../types/Context";
+import type { NavItem } from "../types/NavItem";
+import { fetchText } from "./fetchText";
+import { getRepoLink } from "./getRepoLink";
+
+export async function getNav(ctx: Context, navItems: NavItem[]) {
+  let { name, root, contentDir, backstory, nav } = ctx;
+  let navContent = await fetchText(nav);
+  let s = "";
+
+  if (navContent) {
+    let navDom = new JSDOM(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;
+  }
+
+  if (navItems.length > 1) {
+    for (let { id, title, items } of navItems) {
+      s += `\n<li data-id="${id}"><a href="${root}${contentDir}/${id}">${title}</a></li>`;
+
+      if (items.length !== 0) {
+        s += "\n  <ul>";
+
+        for (let { title } of items) s += `\n    <li>${title}</li>`;
+
+        s += "\n  </ul>\n";
+      }
+
+      s += "</li>";
+    }
+  }
+
+  if (!s && !navContent) return "";
+
+  let repoLink = getRepoLink(ctx);
+
+  s = s.trim() ? `<section><ul>${s}\n</ul></section>` : "";
+  s = `${s}
+<section class="ref">
+  <ul>
+    <li>${repoLink}</li>
+    ${backstory ? `<li><a href="${backstory}">Backstory</a></li>` : ""}
+  </ul>
+</section>
+${navContent}`;
+
+  return `<nav>\n${s}\n</nav>`;
+}