@t8/docsgen 0.1.0

package/src/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/src/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/src/types/BinConfig.ts

@@ -0,0 +1,6 @@
+import type { EntryConfig } from "./EntryConfig";
+
+export type BinConfig = EntryConfig & {
+  targetId?: string;
+  entries?: EntryConfig[];
+};

package/src/types/Context.ts

@@ -0,0 +1,4 @@
+import type { BinConfig } from "./BinConfig";
+import type { EntryConfig } from "./EntryConfig";
+
+export type Context = Omit<BinConfig, "entries"> & EntryConfig;

package/src/types/EntryConfig.ts

@@ -0,0 +1,57 @@
+import type { Theme } from "./Theme";
+
+export type EntryConfig = {
+  id?: string;
+  source?: string;
+  dir?: string;
+  colorScheme?: string;
+  theme?: Theme;
+  name?: string;
+  title?: string;
+  description?: string;
+  version?: string;
+  repo?: string;
+  npm?: string;
+  /**
+   * Target branch.
+   * @example "gh-pages"
+   */
+  targetBranch?: string;
+  /**
+   * @defaultValue "main"
+   */
+  mainBranch?: string;
+  /**
+   * Main page root path.
+   * @defaultValue "/"
+   */
+  root?: string;
+  /**
+   * Generated section content directory.
+   * @defaultValue "x"
+   */
+  contentDir?: string;
+  /** Whether to show all sections on a single page. */
+  singlePage?: boolean;
+  /** Backstory link URL to be added to the front page. */
+  backstory?: string;
+  /** URL of an HTML file inserted into the navigation bar. */
+  nav?: string;
+  /** Scope URL */
+  scope?: string;
+  /** Redirection URL */
+  redirect?: string;
+  /** Whether to remove the GitHub Pages branch and quit. */
+  remove?: boolean;
+  /** Content of the './CNAME' file. */
+  cname?: string;
+  /**
+   * As a boolean, it means whether to add the
+   * '<package_name>.js.org' domain to the './CNAME' file.
+   *
+   * As a string, it sets the '<jsorg_value>.js.org' domain
+   * to the './CNAME' file.
+   */
+  jsorg?: boolean | string;
+  ymid?: number | string;
+};

package/src/types/NavItem.ts

@@ -0,0 +1,8 @@
+export type NavItem = {
+  id: string;
+  title: string;
+  items: {
+    id: string;
+    title: string;
+  }[];
+};

package/src/types/PackageMetadata.ts

@@ -0,0 +1,11 @@
+export type PackageMetadata = {
+  name?: string;
+  version?: string;
+  description?: string;
+  repository?:
+    | string
+    | {
+        type?: string;
+        url?: string;
+      };
+};

package/src/types/Theme.ts

@@ -0,0 +1 @@
+export type Theme = string | undefined;

package/src/utils/escapeHTML.ts

@@ -0,0 +1,17 @@
+const htmlEntityMap: [string, string][] = [
+  ["&", "&"],
+  ["<", "&lt;"],
+  [">", "&gt;"],
+  ['"', "&quot;"],
+];
+
+export function escapeHTML(x: unknown): string {
+  let s = String(x);
+
+  if (!x) return "";
+
+  for (let [character, htmlEntity] of htmlEntityMap)
+    s = s.replaceAll(character, htmlEntity);
+
+  return s;
+}

package/src/utils/escapeRegExp.ts

@@ -0,0 +1,4 @@
+/** @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#escaping */
+export function escapeRegExp(s: string): string {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}

package/src/utils/getIcon.ts

@@ -0,0 +1,16 @@
+export function getIcon(baseColor = "gray") {
+  return `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+        <style>.b{fill:${baseColor};}.c0{fill:oklch(from ${baseColor} calc(100*(.78 - l)) 0 0 / .5);}.c1{fill:oklch(from ${baseColor} calc(100*(.78 - l)) 0 0 / .3);}.c2{fill:none;}</style>
+        <g stroke="none">
+            <path d="M0,15 L50,0 L100,15 L100,78 L50,100 L0,81z" stroke="none" class="b"/>
+            <path d="M0,15 L50,30 L100,15 L50,0z" stroke="none" class="c1"/>
+            <path d="M0,15 L50,30 L50,100 L0,81z" stroke="none" class="c0"/>
+            <path d="M50,30 L100,15 L100,78 L50,100z" stroke="none" class="c2"/>
+        </g>
+        </svg>
+    `
+    .trim()
+    .replace(/\s+/g, " ")
+    .replace(/> </g, "><");
+}

package/src/utils/getSVGDataURL.ts

@@ -0,0 +1,9 @@
+export function getSVGDataURL(svg: string) {
+  let base64SVG = "";
+
+  if (typeof window !== "undefined") base64SVG = window.btoa(svg);
+  else if (typeof Buffer !== "undefined")
+    base64SVG = Buffer.from(svg).toString("base64");
+
+  return `data:image/svg+xml;base64,${base64SVG}`;
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "include": ["src/**/*"],
+  "compilerOptions": {
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "target": "ESNext",
+    "outDir": "dist",
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "strict": true,
+    "allowSyntheticDefaultImports": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true
+  }
+}