@beforesemicolon/builder 1.8.11 → 1.8.18

package/dist/cjs/docs/templates/fading-citrus/assets/logo.dark.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 60" role="img" aria-label="Fading Citrus">
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="30" cy="30" r="23" fill="#f97316" />
+    <path d="M30 7a23 23 0 0 1 23 23H30z" fill="#22d3ee" opacity=".9" />
+    <path d="M30 7a23 23 0 0 0 0 46 23 23 0 0 1 0-46z" fill="#fff7ed" opacity=".35" />
+    <text x="68" y="37" fill="#f8fafc" font-family="Inter, Arial, sans-serif" font-size="22" font-weight="700">Docs</text>
+  </g>
+</svg>

package/dist/cjs/docs/templates/fading-citrus/assets/logo.light.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 60" role="img" aria-label="Fading Citrus">
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="30" cy="30" r="23" fill="#f97316" />
+    <path d="M30 7a23 23 0 0 1 23 23H30z" fill="#0891b2" opacity=".9" />
+    <path d="M30 7a23 23 0 0 0 0 46 23 23 0 0 1 0-46z" fill="#fff7ed" opacity=".35" />
+    <text x="68" y="37" fill="#111827" font-family="Inter, Arial, sans-serif" font-size="22" font-weight="700">Docs</text>
+  </g>
+</svg>

package/dist/cjs/docs/templates/fading-citrus/assets/logo.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 60" role="img" aria-label="Fading Citrus">
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="30" cy="30" r="23" fill="#f97316" />
+    <path d="M30 7a23 23 0 0 1 23 23H30z" fill="#22d3ee" opacity=".9" />
+    <path d="M30 7a23 23 0 0 0 0 46 23 23 0 0 1 0-46z" fill="#fff7ed" opacity=".35" />
+    <text x="68" y="37" fill="#f8fafc" font-family="Inter, Arial, sans-serif" font-size="22" font-weight="700">Docs</text>
+  </g>
+</svg>

package/dist/cjs/docs/templates/fading-citrus/layouts/_footer.js

@@ -1,5 +1,3 @@
-import logo from './_logo.js'
-
 const social = [
     {
         link: 'https://medium.com/before-semicolon',
@@ -33,11 +31,20 @@ const social = [
     },
 ]
 
-export default () => `
+export default (props = {}) => {
+    const siteName =
+        props.projectMeta?.name || props.name || props.title || 'Documentation'
+    const logo = `
+            <span class="site-logo-pair">
+                <img class="site-logo site-logo-dark" src="/assets/logo.dark.svg" alt="${siteName} logo" width="100" height="30" />
+                <img class="site-logo site-logo-light" src="/assets/logo.light.svg" alt="" width="100" height="30" aria-hidden="true" />
+            </span>`
+
+    return `
 <footer class="site-footer">
     <div class="footer-inner wrapper">
         <div class="footer-brand">
-            ${logo({ fill: 'currentColor', width: '100px' })}
+            ${logo}
             <p>A reactive HTML templating system for building dynamic UIs with pure JavaScript. No build step. No virtual DOM.</p>
         </div>
         <ul class="footer-links">
@@ -57,16 +64,16 @@ export default () => `
                 .map(
                     (s) => `
                     <a href="${s.link}" rel="noopener" target="_blank" aria-label="${s.name}">
-                        <img src="/${s.icon}" alt="" aria-hidden="true" width="16" height="16" />
+                        <span class="footer-social-icon" style="--icon: url('/${s.icon}')" aria-hidden="true"></span>
                     </a>
                 `
                 )
                 .join('')}
         </div>
         <div class="footer-credit">
-            <img width="20" height="20" src="/assets/before-semicolon-logo.png" alt="Before Semicolon logo" />
             <span>Copyright &copy; ${new Date().getFullYear()} Before Semicolon. All rights reserved.</span>
         </div>
     </div>
 </footer>
 `
+}

package/dist/cjs/docs/templates/fading-citrus/layouts/_head-meta.js

@@ -131,7 +131,7 @@ const pageJson = ({ title, description, path, name }) => {
                 url: 'https://beforesemicolon.com',
                 logo: {
                     '@type': 'ImageObject',
-                    url: `${siteUrl}/assets/before-semicolon-logo.png`,
+                    url: `${siteUrl}/assets/logo.svg`,
                 },
             },
             mainEntityOfPage: url,
@@ -164,6 +164,7 @@ export default (props = {}) => {
     const url = absoluteUrl(props.path)
     const canonical = escapeHTML(url)
     const image = props.image || defaultImage
+    const cacheKey = props.cacheKey ? `?v=${escapeHTML(props.cacheKey)}` : ''
     const type = canonicalPath(props.path).startsWith('/documentation')
         ? 'article'
         : 'website'
@@ -211,7 +212,7 @@ export default (props = {}) => {
 <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png" />
 <link rel="manifest" href="/assets/favicon/site.webmanifest" />
 <link rel="icon" type="image/x-icon" href="/assets/favicon/favicon.ico" />
-<link rel="stylesheet" href="/stylesheets/github-dark.hightlighter.css">
+<link rel="stylesheet" href="/stylesheets/github-dark.hightlighter.css${cacheKey}">
 ${jsonScript(pageJson({ ...props, title, description }))}
 ${jsonScript(breadcrumbJson({ title, path: props.path }))}
 ${

package/dist/cjs/docs/templates/fading-citrus/layouts/_header.js

@@ -1,14 +1,19 @@
-import logo from './_logo.js'
-
 export default (props = {}) => {
     const isDocs = props.path?.startsWith('/documentation')
+    const siteName =
+        props.projectMeta?.name || props.name || props.title || 'Documentation'
+    const logo = `
+                <span class="site-logo-pair">
+                    <img class="site-logo site-logo-dark" src="/assets/logo.dark.svg" alt="${siteName} logo" width="90" height="27" />
+                    <img class="site-logo site-logo-light" src="/assets/logo.light.svg" alt="" width="90" height="27" aria-hidden="true" />
+                </span>`
 
     return `
 <header class="site-header">
     <div class="header-inner wrapper">
         <h1>
-            <a href="/" aria-label="Markup home">
-                ${logo({ fill: 'currentColor', width: '90px' })}
+            <a href="/" aria-label="${siteName} home">
+                ${logo}
             </a>
         </h1>
         ${

package/dist/cjs/docs/templates/fading-citrus/layouts/document.js

@@ -26,6 +26,7 @@ const navCategoryToHTML = (docs, currentPath) =>
 export default (props) => {
     const docs = props.siteMap.get('documentation')
     const isDocsIndex = props.path === '/documentation/index.html'
+    const cacheKey = props.cacheKey ? `?v=${props.cacheKey}` : ''
     const docsMenu = `<ul>${navCategoryToHTML(docs, props.path)}</ul>`
     const pages = [...docs.values()].flatMap((page) =>
         page instanceof Map ? [...page.values()] : [page]
@@ -45,7 +46,7 @@ export default (props) => {
 <html lang="en">
     <head>
         ${meta(props)}
-        <link rel="stylesheet" href="/stylesheets/documentation.css?v=20260621exact">
+        <link rel="stylesheet" href="/stylesheets/documentation.css${cacheKey}">
         ${
             props.themeStylesheet
                 ? `<link rel="stylesheet" href="${props.themeStylesheet}">`
@@ -86,7 +87,7 @@ export default (props) => {
             </aside>
         </main>
         
-        ${footer()}
+        ${footer(props)}
         ${props.scripts?.join('') || ''}
         
     </body>

package/dist/cjs/docs/templates/fading-citrus/layouts/landing.js

@@ -3,12 +3,14 @@ import header from './_header.js'
 import footer from './_footer.js'
 
 export default (props) => {
+    const cacheKey = props.cacheKey ? `?v=${props.cacheKey}` : ''
+
     return `
 <!doctype html>
 <html lang="en">
     <head>
         ${meta(props)}
-        <link rel="stylesheet" href="/stylesheets/landing.css?v=20260621exact">
+        <link rel="stylesheet" href="/stylesheets/landing.css${cacheKey}">
         ${
             props.themeStylesheet
                 ? `<link rel="stylesheet" href="${props.themeStylesheet}">`
@@ -18,7 +20,7 @@ export default (props) => {
     <body>
         ${header(props)}
         ${props.content}
-        ${footer()}
+        ${footer(props)}
         ${props.scripts?.join('') || ''}
     </body>
 </html>

package/dist/cjs/docs/templates/fading-citrus/stylesheets/common.css

@@ -4,23 +4,60 @@
 :root {
     --background: oklch(0.18 0.015 250);
     --foreground: oklch(0.96 0.005 250);
+    --heading: var(--foreground);
     --card: oklch(0.22 0.018 250);
     --primary: oklch(0.74 0.18 45);
     --primary-glow: oklch(0.78 0.19 50);
     --primary-foreground: oklch(0.18 0.02 250);
+    --primary-soft: color-mix(in oklch, var(--primary) 12%, transparent);
+    --primary-softer: color-mix(in oklch, var(--primary) 6%, transparent);
+    --primary-border: color-mix(in oklch, var(--primary) 45%, transparent);
     --secondary: oklch(0.27 0.02 250);
     --muted: oklch(0.25 0.018 250);
     --muted-foreground: oklch(0.68 0.02 250);
     --accent: oklch(0.7 0.16 200);
+    --accent-soft: color-mix(in oklch, var(--accent) 12%, transparent);
+    --accent-softer: color-mix(in oklch, var(--accent) 6%, transparent);
+    --accent-border: color-mix(in oklch, var(--accent) 35%, transparent);
     --border: oklch(0.3 0.02 250);
     --ring: oklch(0.74 0.18 45);
     --radius: 0.75rem;
+    --surface: color-mix(in oklch, var(--card) 40%, transparent);
+    --surface-muted: color-mix(in oklch, var(--card) 60%, transparent);
+    --surface-hover: color-mix(in oklch, var(--card) 70%, transparent);
+    --surface-border: color-mix(in oklch, var(--border) 65%, transparent);
+    --surface-border-strong: color-mix(
+        in oklch,
+        var(--foreground) 20%,
+        transparent
+    );
+    --header-bg: color-mix(in oklch, var(--background) 60%, transparent);
+    --footer-bg: color-mix(in oklch, var(--background) 88%, black 12%);
+    --grid-line: color-mix(in oklch, var(--foreground) 5%, transparent);
+    --inline-code-bg: color-mix(
+        in oklch,
+        var(--background) 82%,
+        var(--foreground) 8%
+    );
     --code-bg: oklch(0.16 0.015 250);
+    --code-header-bg: color-mix(in oklch, var(--card) 60%, transparent);
+    --code-border: var(--surface-border);
+    --code-line-number: color-mix(
+        in oklch,
+        var(--muted-foreground) 65%,
+        transparent
+    );
+    --success: oklch(0.78 0.15 145);
+    --success-soft: color-mix(in oklch, var(--success) 14%, transparent);
+    --warning: oklch(0.78 0.14 90);
+    --warning-soft: color-mix(in oklch, var(--warning) 14%, transparent);
+    --danger: oklch(0.62 0.22 25);
+    --danger-soft: color-mix(in oklch, var(--danger) 14%, transparent);
     --syntax-comment: oklch(0.55 0.02 250);
-    --syntax-keyword: oklch(0.78 0.19 50);
-    --syntax-string: oklch(0.78 0.15 145);
-    --syntax-tag: oklch(0.72 0.16 200);
-    --syntax-attr: oklch(0.82 0.14 90);
+    --syntax-keyword: var(--primary);
+    --syntax-string: var(--success);
+    --syntax-tag: var(--accent);
+    --syntax-attr: var(--warning);
 
     --font-sans:
         ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
@@ -32,7 +69,7 @@
 
     --gradient-hero: radial-gradient(
         ellipse at top,
-        oklch(0.28 0.08 45 / 0.35),
+        color-mix(in oklch, var(--primary) 26%, transparent),
         transparent 60%
     );
     --gradient-primary: linear-gradient(
@@ -47,10 +84,11 @@
     );
     --gradient-border: linear-gradient(
         135deg,
-        oklch(0.74 0.18 45 / 0.5),
-        oklch(0.7 0.16 200 / 0.3)
+        color-mix(in oklch, var(--primary) 50%, transparent),
+        color-mix(in oklch, var(--accent) 30%, transparent)
     );
-    --shadow-glow: 0 0 60px -15px oklch(0.74 0.18 45 / 0.5);
+    --shadow-glow: 0 0 60px -15px
+        color-mix(in oklch, var(--primary) 50%, transparent);
     --shadow-card:
         0 1px 0 0 oklch(1 0 0 / 0.05) inset,
         0 20px 40px -20px oklch(0 0 0 / 0.5);
@@ -111,7 +149,7 @@ h4,
 h5,
 h6 {
     font-family: var(--font-title);
-    color: oklch(1 0 0);
+    color: var(--heading);
     font-weight: 800;
 }
 
@@ -194,8 +232,8 @@ ul {
 .bg-grid {
     background-size: 48px 48px;
     background-image:
-        linear-gradient(to right, oklch(1 0 0 / 0.04) 1px, transparent 1px),
-        linear-gradient(to bottom, oklch(1 0 0 / 0.04) 1px, transparent 1px);
+        linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
+        linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
     mask-image: radial-gradient(
         ellipse 80% 60% at 50% 0%,
         black 30%,
@@ -246,8 +284,8 @@ ul {
 header {
     height: 4rem;
     max-width: 1280px;
-    border-bottom: 1px solid oklch(0.3 0.02 250 / 0.5);
-    background-color: oklch(0.18 0.015 250 / 0.6);
+    border-bottom: 1px solid var(--surface-border);
+    background-color: var(--header-bg);
     backdrop-filter: blur(16px);
     -webkit-backdrop-filter: blur(16px);
     display: flex;
@@ -315,18 +353,18 @@ header nav a.github-link {
     height: 36px;
     display: inline-grid;
     place-items: center;
-    border: 1px solid oklch(0.3 0.02 250 / 0.7);
+    border: 1px solid var(--surface-border);
     border-radius: 8px;
 }
 
 header nav a.github-link:hover {
-    border-color: oklch(0.74 0.18 45 / 0.45);
+    border-color: var(--primary-border);
     color: var(--primary);
 }
 
 /* footer ------------------- */
 footer {
-    background: oklch(0.14 0.012 250);
+    background: var(--footer-bg);
     color: var(--muted-foreground);
     border-top: 1px solid var(--border);
     padding-top: 60px;
@@ -341,9 +379,8 @@ footer .footer-brand {
     min-width: 280px;
 }
 
-footer .footer-brand svg {
+footer .footer-brand .site-logo-pair {
     margin-bottom: 16px;
-    display: block;
 }
 
 footer .footer-brand p {
@@ -398,7 +435,7 @@ footer address a {
     height: 32px;
     border-radius: 6px;
     border: 1px solid var(--border);
-    background: oklch(1 1 1 / 0.02);
+    background: var(--surface);
     transition: all 0.2s ease;
 }
 
@@ -410,7 +447,7 @@ footer address a img {
 
 footer address a:hover {
     border-color: var(--primary);
-    background: oklch(0.74 0.18 45 / 0.05);
+    background: var(--primary-softer);
 }
 
 footer address a:hover img {
@@ -419,7 +456,7 @@ footer address a:hover img {
 
 footer .copyright-section {
     width: 100%;
-    border-top: 1px solid oklch(1 1 1 / 0.05);
+    border-top: 1px solid var(--surface-border);
     padding-top: 24px;
     margin-top: 20px;
     display: flex;
@@ -445,7 +482,7 @@ footer .copyright-section .brand-logo-container img {
 .code-snippet {
     background: var(--code-bg);
     border-radius: 0.75rem;
-    border: 1px solid oklch(0.3 0.02 250 / 0.6);
+    border: 1px solid var(--code-border);
     margin: 16px 0;
     width: 100%;
     max-width: 100%;
@@ -464,8 +501,8 @@ footer .copyright-section .brand-logo-container img {
     align-items: center;
     gap: 12px;
     padding: 0 10px 0 16px;
-    background: oklch(0.22 0.018 250 / 0.6);
-    border-bottom: 1px solid oklch(0.3 0.02 250 / 0.6);
+    background: var(--code-header-bg);
+    border-bottom: 1px solid var(--code-border);
 }
 
 .code-snippet .mac-dots {
@@ -481,15 +518,15 @@ footer .copyright-section .brand-logo-container img {
 }
 
 .code-snippet .mac-dots .dot-red {
-    background-color: oklch(0.62 0.22 25 / 0.7);
+    background-color: color-mix(in oklch, var(--danger) 70%, transparent);
 }
 
 .code-snippet .mac-dots .dot-yellow {
-    background-color: oklch(0.78 0.14 90 / 0.7);
+    background-color: color-mix(in oklch, var(--warning) 70%, transparent);
 }
 
 .code-snippet .mac-dots .dot-green {
-    background-color: oklch(0.78 0.15 145 / 0.7);
+    background-color: color-mix(in oklch, var(--success) 70%, transparent);
 }
 
 .code-snippet .filename {
@@ -571,7 +608,7 @@ footer .copyright-section .brand-logo-container img {
     padding-right: 16px;
     flex-shrink: 0;
     text-align: right;
-    color: oklch(0.68 0.02 250 / 0.5);
+    color: var(--code-line-number);
 }
 
 .code-snippet .line-code {
@@ -614,16 +651,16 @@ footer .copyright-section .brand-logo-container img {
 .code-snippet .code-copy-btn::after {
     top: 7px;
     left: 12px;
-    background: oklch(0.22 0.018 250);
+    background: var(--code-header-bg);
 }
 
 .code-snippet .code-copy-btn:hover {
     color: var(--foreground);
-    background: oklch(0.25 0.018 250 / 0.6);
+    background: var(--surface-muted);
 }
 
 .code-snippet .code-copy-btn.copied {
-    color: oklch(0.78 0.15 145);
+    color: var(--success);
 }
 
 @media screen and (max-width: 768px) {
@@ -663,8 +700,52 @@ header.site-header .header-inner {
     justify-content: space-between;
 }
 
-header.site-header h1 a svg {
+.site-logo-pair {
+    display: inline-grid;
+    align-items: center;
+}
+
+.site-logo-pair .site-logo {
+    grid-area: 1 / 1;
+}
+
+.site-logo-light {
+    display: block;
+}
+
+.site-logo-dark {
+    display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+    .site-logo-light {
+        display: none;
+    }
+
+    .site-logo-dark {
+        display: block;
+    }
+}
+
+[data-theme='light'] .site-logo-light {
+    display: block;
+}
+
+[data-theme='light'] .site-logo-dark {
+    display: none;
+}
+
+[data-theme='dark'] .site-logo-light {
+    display: none;
+}
+
+[data-theme='dark'] .site-logo-dark {
+    display: block;
+}
+
+header.site-header h1 a .site-logo {
     height: 28px;
+    width: auto;
 }
 
 header.site-header nav a {
@@ -689,7 +770,7 @@ header.site-header nav a.docs-github-link {
 }
 
 .site-footer {
-    border-top: 1px solid oklch(0.3 0.02 250 / 0.5);
+    border-top: 1px solid var(--surface-border);
     background: transparent;
     padding: 56px 0 36px;
 }
@@ -704,10 +785,9 @@ header.site-header nav a.docs-github-link {
     gap: 40px;
 }
 
-.site-footer .footer-brand svg {
+.site-footer .footer-brand .site-logo {
     height: 28px;
     width: auto;
-    color: var(--foreground);
 }
 
 .site-footer .footer-brand p {
@@ -747,11 +827,12 @@ header.site-header nav a.docs-github-link {
 
 .footer-credit {
     grid-column: 1 / -1;
-    border-top: 1px solid oklch(0.3 0.02 250 / 0.5);
+    border-top: 1px solid var(--surface-border);
     padding-top: 24px;
     display: flex;
     align-items: center;
-    gap: 12px;
+    justify-content: center;
+    text-align: center;
     font-size: 0.8125rem;
 }
 
@@ -769,25 +850,33 @@ header.site-header nav a.docs-github-link {
     display: grid;
     place-items: center;
     border-radius: 6px;
-    border: 1px solid oklch(0.3 0.02 250 / 0.6);
+    border: 1px solid var(--surface-border);
     color: var(--muted-foreground);
-    background: oklch(0.22 0.018 250 / 0.25);
+    background: var(--surface);
     transition: all 0.2s ease;
 }
 
-.footer-social img {
-    filter: invert(1);
-    opacity: 0.62;
-    transition: opacity 0.2s ease;
+.footer-social-icon {
+    width: 16px;
+    height: 16px;
+    display: block;
+    background-color: var(--muted-foreground);
+    opacity: 0.72;
+    mask: var(--icon) center / contain no-repeat;
+    -webkit-mask: var(--icon) center / contain no-repeat;
+    transition:
+        background-color 0.2s ease,
+        opacity 0.2s ease;
 }
 
 .footer-social a:hover {
     color: var(--primary);
-    border-color: oklch(0.74 0.18 45 / 0.5);
-    background: oklch(0.74 0.18 45 / 0.06);
+    border-color: var(--primary-border);
+    background: var(--primary-softer);
 }
 
-.footer-social a:hover img {
+.footer-social a:hover .footer-social-icon {
+    background-color: var(--primary);
     opacity: 1;
 }
 
@@ -808,8 +897,4 @@ header.site-header nav a.docs-github-link {
     .footer-social {
         justify-content: flex-start;
     }
-
-    .footer-credit {
-        align-items: flex-start;
-    }
 }