@t8/docsgen 0.4.18 → 0.4.20

package/dist/bin.js

@@ -349,7 +349,7 @@ async function getRepoMetadata({
 }
 
 // src/bin/parsing/getParsedContent.ts
-import { JSDOM as JSDOM2 } from "jsdom";
+import { JSDOM as JSDOM3 } from "jsdom";
 import Markdown from "markdown-it";
 
 // src/bin/getSlug.ts
@@ -424,15 +424,40 @@ function getInstallationCode(element) {
 }
 
 // src/bin/parsing/getSectionPostprocess.ts
+import { JSDOM as JSDOM2 } from "jsdom";
+function isPreviewURL(url) {
+  return url.startsWith("https://codesandbox.io/p/sandbox/");
+}
+function getPreviewContent(url, title) {
+  let { pathname, searchParams } = new URL(url);
+  let sandboxId = pathname.split("/").at(-1);
+  let file = searchParams.get("file");
+  let previewURL = new URL(`https://codesandbox.io/embed/${sandboxId}`);
+  let previewContent = title ? `<legend>${title}</legend>` : "";
+  previewURL.searchParams.set("view", "preview");
+  if (file) previewURL.searchParams.set("module", file);
+  previewContent += `<iframe src="${previewURL.href}"${title ? ` title="${title}"` : ""} sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" loading="lazy"></iframe>`;
+  return previewContent;
+}
 function getSectionPostprocess(linkMap) {
   return (content) => {
-    let s = content;
-    s = s.replace(/<a href="([^"]+)">/g, (_, url) => {
-      let nextURL = linkMap[url] ?? url;
-      let attrs = /^(https?:)?\/\//.test(nextURL) ? ' target="_blank"' : "";
-      return `<a href="${nextURL}"${attrs}>`;
-    });
-    return s;
+    let { document } = new JSDOM2(content).window;
+    for (let a of document.querySelectorAll("a")) {
+      let href = a.getAttribute("href");
+      if (href === null) continue;
+      if (isPreviewURL(href) && a.parentElement) {
+        let preview = document.createElement("fieldset");
+        preview.innerHTML = getPreviewContent(href, a.innerHTML);
+        a.parentElement.insertBefore(preview, a);
+        a.remove();
+      } else {
+        let nextHref = linkMap[href] ?? href;
+        a.setAttribute("href", nextHref);
+        if (/^(https?:)?\/\//.test(nextHref))
+          a.setAttribute("target", "_blank");
+      }
+    }
+    return document.body.innerHTML;
   };
 }
 
@@ -485,7 +510,7 @@ async function getParsedContent(ctx) {
   let { singlePage, firstLineDescription, linkMap } = ctx;
   let rawContent = await fetchContent(contentLocation);
   let content = md.render(preprocessContent(rawContent));
-  let dom = new JSDOM2(content);
+  let dom = new JSDOM3(content);
   let { nav, linkMap: navLinkMap } = buildNav(ctx, dom);
   let badges = "";
   let title = "";
@@ -801,17 +826,8 @@ function escapeRegExp(s) {
   return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
-// src/bin/content/getInstallationContent.ts
-async function getInstallationContent(ctx) {
-  let { name, isDevDep } = ctx;
-  let { installation } = await getParsedContent(ctx);
-  if (!installation || isDevDep !== void 0)
-    installation = `npm i${isDevDep ? " -D" : ""} ${name}`;
-  return `<code>${escapeHTML(installation)}</code>`;
-}
-
 // src/bin/content/getNav.ts
-import { JSDOM as JSDOM3 } from "jsdom";
+import { JSDOM as JSDOM4 } from "jsdom";
 
 // src/bin/getNpmLink.ts
 function getNpmLink({ npm }, className) {
@@ -825,7 +841,7 @@ async function getNav(ctx, navItems) {
   let navContent = await fetchContent(nav);
   let s = "";
   if (navContent) {
-    let navDom = new JSDOM3(navContent).window.document.body;
+    let navDom = new JSDOM4(navContent).window.document.body;
     for (let link of navDom.querySelectorAll("a")) {
       if (link.dataset.name === name) {
         let parent = link.parentElement;
@@ -896,12 +912,10 @@ ${navContent}
 // src/bin/content/getSectionContent.ts
 async function getSectionContent(ctx, index) {
   let { root, contentDir = "" } = ctx;
-  let descriptionContent = escapeHTML(tweakTypography(ctx.description));
-  let cssRoot = await getCSSRoot(ctx, "content");
   let { sections, nav } = await getParsedContent(ctx);
+  let cssRoot = await getCSSRoot(ctx, "content");
   let content = sections[index];
   let navContent = await getNav(ctx, nav);
-  let mainTitle = await getMainTitle(ctx);
   let plainTitle = await getPlainTitle(ctx);
   return toFileContent(`
 <!DOCTYPE html>
@@ -922,11 +936,9 @@ async function getSectionContent(ctx, index) {
 <body>
 ${getInjectedContent(ctx, "section", "body", "prepend")}
 <div class="layout">
-<header class="compact">
-  <h1><a href="${root}">${plainTitle}</a></h1>
-</header>
 <div class="${navContent ? "" : "no-nav "}body">
 <main>
+<h1><a href="${root}">${plainTitle}</a></h1>
 ${content}
 
 <p class="pagenav">
@@ -935,22 +947,15 @@ ${content}
   ${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>
-<hr>
+${navContent && `<hr>
 <aside class="aux">
-  <div class="header" hidden>
-    <h1>${mainTitle}</h1>
-    <div class="description">
-      <p>${descriptionContent}</p>
-      <p class="installation">${await getInstallationContent(ctx)}</p>
-    </div>
-  </div>
 ${navContent.replace(
     new RegExp(
       `(<li data-id="${escapeRegExp(nav[index]?.id)}">)<a href="[^"]+">([^<]+)</a>`
     ),
     "$1<strong>$2</strong>"
   )}
-</aside>
+</aside>`}
 </div>
 </div>
 

package/dist/css/section.css

@@ -80,29 +80,10 @@ aside {
     var(--aux-background-end)
   );
   border-right: 0.05em solid var(--aux-border-color);
-  padding: var(--content-padding-y) var(--content-padding-x);
+  padding: 0 var(--content-padding-x);
   margin: 0;
   box-sizing: border-box;
 }
-aside > .header {
-  display: block;
-  margin: 0.5rem 0 0.25rem;
-}
-aside > .header .description p:not(.installation) {
-  font-size: 0.9em;
-  margin: 0.35em 0 0;
-}
-aside > .header .description p.installation {
-  margin: 1em 0 0;
-}
-aside > .header .installation code {
-  display: inline-block;
-  background: transparent;
-  border: 0.05em solid;
-  border-radius: 0.5em;
-  padding: 0.35em 0.75em;
-  margin: 0;
-}
 aside h1 {
   font-size: 1.3rem;
   margin: 0;
@@ -113,7 +94,7 @@ aside nav {
 aside section {
   width: 100%;
   max-width: 16em;
-  padding: 1rem 0;
+  padding: var(--content-padding-y) 0;
   box-sizing: border-box;
 }
 aside section + section {
@@ -179,9 +160,6 @@ aside li > strong {
     padding: 0.25rem var(--content-padding-x) 0.35rem;
     margin: 0;
   }
-  aside > .header {
-    display: none;
-  }
   aside nav {
     font-size: inherit;
   }
@@ -246,6 +224,13 @@ main h1 {
   color: var(--secondary-color);
   margin: 0;
 }
+main h1 a,
+main h1 a:link,
+main h1 a:visited,
+main h1 a:hover,
+main h1 a:active {
+  --color: var(--secondary-color);
+}
 h1 .sep {
   margin: 0 0.1em;
 }
@@ -265,6 +250,20 @@ main h2 {
 main h2:first-child {
   margin-top: 0;
 }
+main fieldset {
+  border: 0.05em solid var(--secondary-color);
+}
+main fieldset legend {
+  font-size: 0.8em;
+  color: var(--secondary-color);
+}
+main fieldset iframe {
+  width: 100%;
+  height: 360px;
+  background: var(--code-block-background);
+  border: none;
+  overflow: hidden;
+}
 
 .pagenav {
   --icon-width: 1.25em;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t8/docsgen",
-  "version": "0.4.18",
+  "version": "0.4.20",
   "description": "",
   "main": "dist/bin.js",
   "type": "module",

package/src/bin/content/getSectionContent.ts

@@ -9,24 +9,17 @@ import { getCSSRoot } from "./getCSSRoot.ts";
 import { getDefaultCodeStyleContent } from "./getDefaultCodeStyleContent.ts";
 import { getIconTag } from "./getIconTag.ts";
 import { getInjectedContent } from "./getInjectedContent.ts";
-import { getInstallationContent } from "./getInstallationContent.ts";
-import { getMainTitle } from "./getMainTitle.ts";
 import { getNav } from "./getNav.ts";
 import { getPlainTitle } from "./getPlainTitle.ts";
 import { toFileContent } from "./toFileContent.ts";
-import { tweakTypography } from "./tweakTypography.ts";
 
 export async function getSectionContent(ctx: Context, index: number) {
   let { root, contentDir = "" } = ctx;
-  let descriptionContent = escapeHTML(tweakTypography(ctx.description));
-
-  let cssRoot = await getCSSRoot(ctx, "content");
   let { sections, nav } = await getParsedContent(ctx);
+  let cssRoot = await getCSSRoot(ctx, "content");
 
   let content = sections[index];
   let navContent = await getNav(ctx, nav);
-
-  let mainTitle = await getMainTitle(ctx);
   let plainTitle = await getPlainTitle(ctx);
 
   return toFileContent(`
@@ -48,11 +41,9 @@ export async function getSectionContent(ctx: Context, index: number) {
 <body>
 ${getInjectedContent(ctx, "section", "body", "prepend")}
 <div class="layout">
-<header class="compact">
-  <h1><a href="${root}">${plainTitle}</a></h1>
-</header>
 <div class="${navContent ? "" : "no-nav "}body">
 <main>
+<h1><a href="${root}">${plainTitle}</a></h1>
 ${content}
 
 <p class="pagenav">
@@ -60,22 +51,18 @@ ${content}
   ${nav[index + 1]?.id ? `<span class="next"><a href="${root}${contentDir}/${nav[index + 1]?.id}">${nav[index + 1]?.title}</a> <span class="icon">→</span></span>` : `<span class="repo">${getRepoLink(ctx)}</span>`}
 </p>
 </main>
-<hr>
+${
+  navContent &&
+  `<hr>
 <aside class="aux">
-  <div class="header" hidden>
-    <h1>${mainTitle}</h1>
-    <div class="description">
-      <p>${descriptionContent}</p>
-      <p class="installation">${await getInstallationContent(ctx)}</p>
-    </div>
-  </div>
 ${navContent.replace(
   new RegExp(
     `(<li data-id="${escapeRegExp(nav[index]?.id)}">)<a href="[^"]+">([^<]+)</a>`,
   ),
   "$1<strong>$2</strong>",
 )}
-</aside>
+</aside>`
+}
 </div>
 </div>
 

package/src/bin/parsing/getSectionPostprocess.ts

@@ -1,16 +1,53 @@
+import { JSDOM } from "jsdom";
+
+function isPreviewURL(url: string) {
+  return url.startsWith("https://codesandbox.io/p/sandbox/");
+}
+
+function getPreviewContent(url: string, title?: string) {
+  let { pathname, searchParams } = new URL(url);
+  let sandboxId = pathname.split("/").at(-1);
+  let file = searchParams.get("file");
+
+  let previewURL = new URL(`https://codesandbox.io/embed/${sandboxId}`);
+  let previewContent = title ? `<legend>${title}</legend>` : "";
+
+  previewURL.searchParams.set("view", "preview");
+
+  if (file) previewURL.searchParams.set("module", file);
+
+  previewContent += `<iframe src="${previewURL.href}"${title ? ` title="${title}"` : ""} sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" loading="lazy"></iframe>`;
+
+  return previewContent;
+}
+
 export function getSectionPostprocess(
   linkMap: Record<string, string | undefined>,
 ) {
   return (content: string) => {
-    let s = content;
+    let { document } = new JSDOM(content).window;
+
+    for (let a of document.querySelectorAll("a")) {
+      let href = a.getAttribute("href");
+
+      if (href === null) continue;
+
+      if (isPreviewURL(href) && a.parentElement) {
+        let preview = document.createElement("fieldset");
+
+        preview.innerHTML = getPreviewContent(href, a.innerHTML);
 
-    s = s.replace(/<a href="([^"]+)">/g, (_, url) => {
-      let nextURL = linkMap[url] ?? url;
-      let attrs = /^(https?:)?\/\//.test(nextURL) ? ' target="_blank"' : "";
+        a.parentElement.insertBefore(preview, a);
+        a.remove();
+      } else {
+        let nextHref = linkMap[href] ?? href;
 
-      return `<a href="${nextURL}"${attrs}>`;
-    });
+        a.setAttribute("href", nextHref);
+        if (/^(https?:)?\/\//.test(nextHref))
+          a.setAttribute("target", "_blank");
+      }
+    }
 
-    return s;
+    return document.body.innerHTML;
   };
 }

package/src/css/section.css

@@ -80,29 +80,10 @@ aside {
     var(--aux-background-end)
   );
   border-right: 0.05em solid var(--aux-border-color);
-  padding: var(--content-padding-y) var(--content-padding-x);
+  padding: 0 var(--content-padding-x);
   margin: 0;
   box-sizing: border-box;
 }
-aside > .header {
-  display: block;
-  margin: 0.5rem 0 0.25rem;
-}
-aside > .header .description p:not(.installation) {
-  font-size: 0.9em;
-  margin: 0.35em 0 0;
-}
-aside > .header .description p.installation {
-  margin: 1em 0 0;
-}
-aside > .header .installation code {
-  display: inline-block;
-  background: transparent;
-  border: 0.05em solid;
-  border-radius: 0.5em;
-  padding: 0.35em 0.75em;
-  margin: 0;
-}
 aside h1 {
   font-size: 1.3rem;
   margin: 0;
@@ -113,7 +94,7 @@ aside nav {
 aside section {
   width: 100%;
   max-width: 16em;
-  padding: 1rem 0;
+  padding: var(--content-padding-y) 0;
   box-sizing: border-box;
 }
 aside section + section {
@@ -179,9 +160,6 @@ aside li > strong {
     padding: 0.25rem var(--content-padding-x) 0.35rem;
     margin: 0;
   }
-  aside > .header {
-    display: none;
-  }
   aside nav {
     font-size: inherit;
   }
@@ -246,6 +224,13 @@ main h1 {
   color: var(--secondary-color);
   margin: 0;
 }
+main h1 a,
+main h1 a:link,
+main h1 a:visited,
+main h1 a:hover,
+main h1 a:active {
+  --color: var(--secondary-color);
+}
 h1 .sep {
   margin: 0 0.1em;
 }
@@ -265,6 +250,20 @@ main h2 {
 main h2:first-child {
   margin-top: 0;
 }
+main fieldset {
+  border: 0.05em solid var(--secondary-color);
+}
+main fieldset legend {
+  font-size: 0.8em;
+  color: var(--secondary-color);
+}
+main fieldset iframe {
+  width: 100%;
+  height: 360px;
+  background: var(--code-block-background);
+  border: none;
+  overflow: hidden;
+}
 
 .pagenav {
   --icon-width: 1.25em;