@t8/docsgen 0.4.19 → 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 = "";
@@ -802,7 +827,7 @@ function escapeRegExp(s) {
 }
 
 // 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) {
@@ -816,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;

package/dist/css/section.css

@@ -250,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.19",
+  "version": "0.4.20",
   "description": "",
   "main": "dist/bin.js",
   "type": "module",

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

@@ -250,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;