feat(builder)!: improve builder by using CSSStyleSheet(), add remai…

…ning variables and a custom build previewer (#31)
lowlighter · Jun 10, 2024 · 3accc03 · 3accc03
1 parent 0bbda0b
commit 3accc03
Show file tree

Hide file tree

Showing 9 changed files with 623 additions and 272 deletions.
diff --git a/app/build/html.ts b/app/build/html.ts
@@ -108,7 +108,7 @@ export async function html_builder() {
   const html = await Deno.readTextFile(new URL("app/mod.html", root))
   const document = new DOMParser().parseFromString(html, "text/html")!
   document.querySelector('header nav menu a[href="/build"]')?.parentElement?.remove()
-  for (const selection of ["body > aside", "body > script", " main > section:not(.matcha)", "section.matcha section"]) {
+  for (const selection of ["body > aside", " main > section:not(.matcha)", "section.matcha section"]) {
     document.querySelectorAll(selection).forEach((element) => (element as unknown as HTMLElement).remove())
   }
   // Include uncollapsed builder
@@ -125,3 +125,61 @@ export async function html_builder() {
   })
   return `<!DOCTYPE html>${document.documentElement!.outerHTML}`
 }
+
+/** Generate HTML for custom builder demo */
+export async function html_builder_demo() {
+  // Include mod.html files and clean it
+  let html = await Deno.readTextFile(new URL("app/mod.html", root))
+  for (const _ of [1, 2]) {
+    for (const match of html.matchAll(/<!--\/(?<path>[\s\S]+?\/.*\.html)-->/g)) {
+      const path = match.groups!.path.trim()
+      const content = await Deno.readTextFile(new URL(path, root))
+      html = html.replace(match[0], content)
+    }
+  }
+  const document = new DOMParser().parseFromString(html, "text/html")!
+  document.querySelector('header nav menu a[href="/build"]')?.parentElement?.remove()
+  document.querySelector('header nav menu a[href="/"]')?.parentElement?.remove()
+  document.querySelector('link[rel="stylesheet"][href="/matcha.css"]')?.remove()
+  for (
+    const selection of [
+      "body > aside",
+      "body > header",
+      "body > footer",
+      "body > script",
+      "section.matcha",
+      '[id="nav"] ~ p',
+      '[id="utilities"] ~ :is(p, div)',
+      '[id="utilities-colors"] ~ :is(p, div)',
+      '[id="syntax-highlighting"] ~ p',
+    ]
+  ) {
+    document.querySelectorAll(selection).forEach((element) => (element as unknown as HTMLElement).remove())
+  }
+  for (const id of ["html", "layouts", "utilities-classes", "utilities-synergies", "code-editor", "istanbul-coverage", "unstyled"]) {
+    document.querySelector(`[id="${id}"]`)?.parentElement?.remove()
+  }
+  document.querySelectorAll(".example").forEach((_element) => {
+    const element = _element as unknown as HTMLElement
+    Array.from(element.parentElement?.children ?? []).forEach((element) => {
+      if (element.classList.contains("example")) {
+        return
+      }
+      if (/^H[1-6]$/.test(element.tagName)) {
+        return
+      }
+      element.remove()
+    })
+  })
+  // Clean background image
+  const style = document.createElement("style")
+  style.innerText = `body { background-image: none; }`
+  document.head.append(style)
+  // Syntax highlighting
+  Array.from(document.querySelectorAll("[data-hl]")).forEach((_element) => {
+    const element = _element as unknown as HTMLElement
+    element.innerHTML = syntax.highlight(element.innerText, { language: element.getAttribute("data-hl")! }).value.trim()
+    element.removeAttribute("data-hl")
+  })
+  return `<!DOCTYPE html>${document.documentElement!.outerHTML}`
+}
diff --git a/app/build/ssg.ts b/app/build/ssg.ts
@@ -2,7 +2,7 @@
 import { copy, emptyDir, ensureDir, expandGlob } from "jsr:@std/[email protected]"
 import { dirname, fromFileUrl } from "jsr:@std/[email protected]"
 import { root } from "./root.ts"
-import { html, html_builder } from "./html.ts"
+import { html, html_builder, html_builder_demo } from "./html.ts"
 import { compatibility } from "jsr:@libs/bundle@5/css"
 
 /** Static site generation */
@@ -34,6 +34,9 @@ export async function ssg() {
   console.log("Created .pages/index.html")
   await Deno.writeTextFile(new URL(".pages/build.html", root), await html_builder())
   console.log("Created .pages/build.html")
+  await ensureDir(new URL(".pages/build", root))
+  await Deno.writeTextFile(new URL(".pages/build/demo.html", root), await html_builder_demo())
+  console.log("Created .pages/build/demo.html")
   // Copy styles
   await ensureDir(new URL(".pages/styles", root))
   console.log("Created .pages/styles")

diff --git a/app/mod.css b/app/mod.css
@@ -46,6 +46,15 @@ aside nav ul ul ul li :is(a, [class^="hljs-"], var) {
   color: var(--muted) !important;
 }
 
+:is(section) > :is(h1, h2, h3, h4, h5, h6)[id]::before, .hx[id]::before, #matcha::before {
+  content: "";
+  display: block;
+  height: calc(1rem + var(--ly-header-size));
+  margin-top: calc(-1 * (1rem + var(--ly-header-size)));
+  visibility: hidden;
+  pointer-events: none;
+}
+
 /* Matcha header and footer */
 body > header svg,
 body > footer svg {
@@ -92,19 +101,32 @@ details summary a {
 
 .matcha-build .variables input[name$="opacity"] {
   margin-left: .25rem;
-  max-width: 4rem;
+  width: 3rem;
+  text-align: center;
 }
 
 .matcha-build .variables td code:only-child {
   white-space: nowrap;
 }
 
+.matcha-build .variables input[type="color"] {
+  width: 3rem;
+}
+
 .matcha-build .styling {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
 }
 
+.matcha-build .styling label code {
+  white-space: nowrap;
+}
+
+.matcha-build .styling label small {
+  opacity: .75;
+}
+
 .matcha-build .styling > div {
   flex: 1 1 0;
 }
@@ -118,13 +140,8 @@ details summary a {
   word-break: keep-all;
 }
 
-:is(section) > :is(h1, h2, h3, h4, h5, h6)[id]::before, .hx[id]::before, #matcha::before {
-  content: "";
-  display: block;
-  height: calc(1rem + var(--ly-header-size));
-  margin-top: calc(-1 * (1rem + var(--ly-header-size)));
-  visibility: hidden;
-  pointer-events: none;
+.matcha-preview {
+  background: var(--bg-subtle);
 }
 
 /* CSS compatibility */

diff --git a/app/mod.html b/app/mod.html
@@ -129,8 +129,8 @@ <h3 id="a-la-carte"><a href="#a-la-carte">À la carte</a></h3>
             </div>
           </section>
           <!--/app/sections/preset-build.html-->
-          <!--/app/sections/preview-website.html-->
           <!--/app/sections/custom-build.html-->
+          <!--/app/sections/preview-website.html-->
           <!--/app/sections/supported-browsers.html-->
         </section>
       </section>
@@ -357,7 +357,10 @@ <h2 id="unstyled-scripting"><a href="#unstyled-scripting">Scripting</a></h2>
         document.querySelectorAll(".example-tabs li.color-scheme").forEach(element => {
           element.querySelector(`svg.${prefers}`).style.display = "inline-block"
           element.addEventListener("click", event => {
-            const example = element.parentNode.nextSibling
+            const example = element.parentNode.nextElementSibling
+            if (example.tagName === "IFRAME") {
+              example.contentWindow.document.documentElement.dataset.colorScheme = (example.contentWindow.document.documentElement.dataset.colorScheme ?? prefers) === 'light' ? 'dark' : 'light'
+            }
             example.dataset.colorScheme = (example.dataset.colorScheme ?? prefers) === 'light' ? 'dark' : 'light'
             element.querySelector("svg.light").style.display = example.dataset.colorScheme === 'light' ? "inline-block" : "none"
             element.querySelector("svg.dark").style.display = example.dataset.colorScheme === 'dark' ? "inline-block" : "none"

diff --git a/app/mod.ts b/app/mod.ts
@@ -1,7 +1,7 @@
 /// <reference lib="dom" />
 // Imports
 import { css } from "./build/css.ts"
-import { html, html_builder } from "./build/html.ts"
+import { html, html_builder, html_builder_demo } from "./build/html.ts"
 import { ssg } from "./build/ssg.ts"
 import { dist } from "./build/dist.ts"
 import { STATUS_CODE, STATUS_TEXT } from "jsr:@std/[email protected]"
@@ -22,6 +22,8 @@ switch (Deno.args[0]) {
             return new Response(await html_builder(), { headers: { "Content-Type": "text/html" } })
           case new URLPattern("/matcha.css", url.origin).test(url.href):
             return new Response(await css(), { headers: { "Content-Type": "text/css" } })
+          case new URLPattern("/build/demo{.html}?", url.origin).test(url.href):
+            return new Response(await html_builder_demo(), { headers: { "Content-Type": "text/html" } })
           case new URLPattern("/mod.css", url.origin).test(url.href):
             return new Response(await Deno.readFile(new URL("mod.css", import.meta.url)), { headers: { "Content-Type": "text/css" } })
           case new URLPattern("/mod.svg", url.origin).test(url.href):