@beforesemicolon/builder 1.8.0 → 1.8.11

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

@@ -115,7 +115,6 @@ h6 {
     font-weight: 800;
 }
 
-h1 a,
 h2 a,
 h3 a,
 h4 a,
@@ -126,7 +125,6 @@ h6 a {
     color: inherit;
 }
 
-h1 a::before,
 h2 a::before,
 h3 a::before,
 h4 a::before,
@@ -138,12 +136,15 @@ h6 a::before {
     position: absolute;
     top: 50%;
     left: 0;
-    transform: translate(calc(-100% - 8px), -50%);
+    transform: translate(calc(-100% - 4px), -50%);
     color: var(--primary);
     transition: opacity 0.2s ease;
 }
 
-h1 a:hover::before,
+h2 a::before {
+    font-size: 50%;
+}
+
 h2 a:hover::before,
 h3 a:hover::before,
 h4 a:hover::before,

package/dist/esm/docs/templates/fading-citrus/stylesheets/documentation.css

@@ -155,13 +155,17 @@ body {
 }
 
 #documentation article h2 {
-    font-size: 2.75rem;
+    font-size: 2rem;
     font-weight: 850;
     letter-spacing: -0.03rem;
     margin-bottom: 24px;
     line-height: 1.15;
 }
 
+#documentation article h2:first-of-type {
+    font-size: 3rem;
+}
+
 #documentation article h3 {
     font-weight: 700;
     font-size: 1.75rem;
@@ -377,64 +381,6 @@ body {
     display: none;
 }
 
-#documentation.docs-index article h2:first-child::before {
-    content: '// documentation';
-    display: block;
-    font-family: var(--font-mono);
-    font-size: 0.85rem;
-    font-weight: 500;
-    color: var(--primary);
-    text-transform: uppercase;
-    letter-spacing: 0.15rem;
-    margin-bottom: 18px;
-}
-
-#documentation.docs-index article h2:first-child {
-    font-size: clamp(3.2rem, 5vw, 4.2rem);
-    margin-bottom: 22px;
-}
-
-#documentation.docs-index article h2:first-child + p {
-    font-size: 1.15rem;
-    max-width: 900px;
-    color: oklch(0.76 0.012 250);
-}
-
-#documentation.docs-index article h2:first-child + p + p {
-    display: none;
-}
-
-#documentation.docs-index article h2:first-child + p + p + ul {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 16px;
-    padding: 0;
-    margin: 34px 0 64px;
-    list-style: none;
-}
-
-#documentation.docs-index article h2:first-child + p + p + ul li {
-    margin: 0;
-    padding: 24px;
-    min-height: 140px;
-    border: 1px solid oklch(0.3 0.02 250 / 0.7);
-    border-radius: 12px;
-    background: oklch(0.22 0.018 250 / 0.36);
-    color: var(--muted-foreground);
-    line-height: 1.6;
-}
-
-#documentation.docs-index article h2:first-child + p + p + ul code {
-    display: block;
-    width: fit-content;
-    margin-bottom: 14px;
-    border: 0;
-    background: transparent;
-    padding: 0;
-    color: var(--primary);
-    font-size: 1.05rem;
-}
-
 #documentation.docs-index article h3 {
     border-bottom: 0;
     padding-bottom: 0;
@@ -583,21 +529,9 @@ body {
     }
 }
 
-@media screen and (max-width: 860px) {
-    #documentation.docs-index article h2:first-child + p + p + ul {
-        grid-template-columns: 1fr;
-    }
-}
-
 @media screen and (max-width: 640px) {
     #documentation {
         padding-left: 20px;
         padding-right: 20px;
     }
-
-    #documentation article h2,
-    #documentation.docs-index article h2:first-child {
-        font-size: 2.25rem;
-        line-height: 2.5rem;
-    }
 }

package/dist/esm/docs/templates/fading-citrus/stylesheets/landing.css

@@ -163,7 +163,6 @@
 
 .hero-stats {
     display: flex;
-    align-items: center;
     gap: 32px;
 }
 
@@ -1485,6 +1484,10 @@
 }
 
 @media screen and (max-width: 768px) {
+    .install-command code {
+        font-size: 0.9rem;
+    }
+
     .hero-section {
         padding: 112px 0 80px;
     }

package/dist/esm/docs/templates/fading-citrus/template.config.js

@@ -1,14 +1,113 @@
-import { renderCodeBlock } from './layouts/_code-snippet.js'
+import {
+    renderCodeBlock,
+    renderCodeCopyScript,
+} from './layouts/_code-snippet.js'
+import landingHero from './layouts/landing-hero.js'
+import landingEcosystem from './layouts/landing-ecosystem.js'
+import landingFeatures from './layouts/landing-features.js'
+import landingShowcase, {
+    renderShowcaseScript,
+} from './layouts/landing-showcase.js'
+import landingInstall, {
+    renderInstallScript,
+} from './layouts/landing-install.js'
+import landingCta from './layouts/landing-cta.js'
 
 export default {
+    markdownLayouts: {
+        'landing-hero': landingHero,
+        'landing-ecosystem': landingEcosystem,
+        'landing-features': landingFeatures,
+        'landing-showcase': landingShowcase,
+        'landing-install': landingInstall,
+        'landing-cta': landingCta,
+    },
     markedOptions: {
         renderer: {
             code({ lang, raw }) {
                 const rawCode = raw
                     .replace(/^\s*```[^\n]*\n/, '')
                     .replace(/\n\s*```\s*$/, '')
-                return renderCodeBlock('snippet', rawCode, lang)
+                return renderCodeBlock('', rawCode, lang)
             },
         },
     },
+    scripts: {
+        'code-copy': {
+            match: 'code-copy-btn',
+            render: renderCodeCopyScript,
+        },
+        showcase: {
+            match: 'data-fading-citrus-showcase',
+            render: renderShowcaseScript,
+        },
+        install: {
+            match: 'data-fading-citrus-install',
+            render: renderInstallScript,
+        },
+    },
+    theme: {
+        light: {
+            '--background': 'oklch(0.98 0.006 250)',
+            '--foreground': 'oklch(0.18 0.015 250)',
+            '--card': 'oklch(1 0 0)',
+            '--primary': 'oklch(0.66 0.18 45)',
+            '--primary-glow': 'oklch(0.72 0.19 50)',
+            '--primary-foreground': 'oklch(0.98 0.006 250)',
+            '--secondary': 'oklch(0.93 0.01 250)',
+            '--muted': 'oklch(0.94 0.01 250)',
+            '--muted-foreground': 'oklch(0.42 0.02 250)',
+            '--accent': 'oklch(0.58 0.16 200)',
+            '--border': 'oklch(0.86 0.018 250)',
+            '--ring': 'oklch(0.66 0.18 45)',
+            '--code-bg': 'oklch(0.16 0.015 250)',
+            '--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)',
+            '--gradient-hero':
+                'radial-gradient(ellipse at top, oklch(0.86 0.08 45 / 0.35), transparent 60%)',
+            '--gradient-primary':
+                'linear-gradient(135deg, var(--primary), var(--primary-glow))',
+            '--gradient-text':
+                'linear-gradient(135deg, oklch(0.18 0.015 250), oklch(0.35 0.03 250))',
+            '--gradient-border':
+                'linear-gradient(135deg, oklch(0.66 0.18 45 / 0.45), oklch(0.58 0.16 200 / 0.25))',
+            '--shadow-glow': '0 0 60px -15px oklch(0.66 0.18 45 / 0.35)',
+            '--shadow-card':
+                '0 1px 0 0 oklch(1 0 0 / 0.75) inset, 0 20px 40px -20px oklch(0.18 0.015 250 / 0.18)',
+        },
+        dark: {
+            '--background': 'oklch(0.18 0.015 250)',
+            '--foreground': 'oklch(0.96 0.005 250)',
+            '--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)',
+            '--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)',
+            '--border': 'oklch(0.3 0.02 250)',
+            '--ring': 'oklch(0.74 0.18 45)',
+            '--code-bg': 'oklch(0.16 0.015 250)',
+            '--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)',
+            '--gradient-hero':
+                'radial-gradient(ellipse at top, oklch(0.28 0.08 45 / 0.35), transparent 60%)',
+            '--gradient-primary':
+                'linear-gradient(135deg, var(--primary), var(--primary-glow))',
+            '--gradient-text':
+                'linear-gradient(135deg, oklch(0.98 0.005 250), oklch(0.78 0.05 250))',
+            '--gradient-border':
+                'linear-gradient(135deg, oklch(0.74 0.18 45 / 0.5), oklch(0.7 0.16 200 / 0.3))',
+            '--shadow-glow': '0 0 60px -15px oklch(0.74 0.18 45 / 0.5)',
+            '--shadow-card':
+                '0 1px 0 0 oklch(1 0 0 / 0.05) inset, 0 20px 40px -20px oklch(0 0 0 / 0.5)',
+        },
+    },
 }

package/dist/types/docs/markdown-layout/index.d.ts

@@ -0,0 +1,4 @@
+export * from './marked-extension.ts';
+export * from './parser.ts';
+export * from './renderer.ts';
+export * from './types.ts';

package/dist/types/docs/markdown-layout/marked-extension.d.ts

@@ -0,0 +1,8 @@
+import { Marked, MarkedExtension } from 'marked';
+import { MarkdownLayoutHandler } from './types.ts';
+export interface MarkdownLayoutExtensionOptions {
+    marked: Marked;
+    handlers?: Record<string, MarkdownLayoutHandler>;
+    renderMarkdown?: (markdown: string) => string;
+}
+export declare const createMarkdownLayoutExtension: ({ marked, handlers, renderMarkdown, }: MarkdownLayoutExtensionOptions) => MarkedExtension;

package/dist/types/docs/markdown-layout/parser.d.ts

@@ -0,0 +1,12 @@
+import { MarkdownLayoutNode, MarkdownLayoutOptions } from './types.ts';
+export declare const parseOptions: (input?: string) => MarkdownLayoutOptions;
+export declare const parseLayoutHeader: (line: string) => {
+    layoutType: string;
+    options: MarkdownLayoutOptions;
+};
+export declare const parseItemHeader: (line: string) => {
+    name: string | null;
+    options: MarkdownLayoutOptions;
+};
+export declare const parseLayoutBlock: (block: string) => MarkdownLayoutNode;
+export declare const readLayoutBlock: (src: string) => string | null;

package/dist/types/docs/markdown-layout/renderer.d.ts

@@ -0,0 +1,3 @@
+import { MarkdownLayoutHandler, MarkdownLayoutNode, MarkdownLayoutRenderContext } from './types.ts';
+export declare const renderDefaultMarkdownLayout: (node: MarkdownLayoutNode, context: MarkdownLayoutRenderContext) => string;
+export declare const renderMarkdownLayout: (node: MarkdownLayoutNode, context: MarkdownLayoutRenderContext, handlers?: Record<string, MarkdownLayoutHandler>) => string;

package/dist/types/docs/markdown-layout/types.d.ts

@@ -0,0 +1,35 @@
+import { Marked } from 'marked';
+export type MarkdownLayoutOptionValue = string | number | boolean;
+export interface MarkdownLayoutOptions {
+    [key: string]: MarkdownLayoutOptionValue;
+}
+export interface MarkdownLayoutItemNode {
+    name: string | null;
+    options: MarkdownLayoutOptions;
+    body: string;
+}
+export interface MarkdownLayoutNode {
+    layoutType: string;
+    options: MarkdownLayoutOptions;
+    items: MarkdownLayoutItemNode[];
+    raw: string;
+}
+export interface MarkdownLayoutToken extends MarkdownLayoutNode {
+    type: 'markdownLayout';
+}
+export interface MarkdownLayoutRenderContext {
+    marked: Marked;
+    renderMarkdown(markdown: string): string;
+    renderDefault(node: MarkdownLayoutNode): string;
+    renderParts(node: MarkdownLayoutNode): MarkdownLayoutRenderedPart[];
+}
+export type MarkdownLayoutHandler = (layout: MarkdownLayoutHandlerInput, context: MarkdownLayoutRenderContext) => string;
+export interface MarkdownLayoutRenderedPart extends MarkdownLayoutItemNode {
+    html: string;
+}
+export interface MarkdownLayoutHandlerInput {
+    type: string;
+    options: MarkdownLayoutOptions;
+    parts: MarkdownLayoutRenderedPart[];
+    raw: string;
+}

package/dist/types/docs/run.d.ts

@@ -1,8 +1,19 @@
 import { MarkedExtension } from 'marked';
+type GeneratedFilesConfig = {
+    sitemap: boolean;
+    robots: boolean;
+    llms: boolean;
+    llmsFull: boolean;
+    netlify: boolean;
+};
+type GeneratedFilesOptions = boolean | Partial<GeneratedFilesConfig>;
 export interface BuildDocsOptions {
     publicDir?: string;
     srcDir?: string;
     markedOptions?: MarkedExtension;
     template?: string;
+    siteUrl?: string;
+    generatedFiles?: GeneratedFilesOptions;
 }
-export declare const buildDocs: ({ srcDir, publicDir, markedOptions, template, }?: BuildDocsOptions) => Promise<void>;
+export declare const buildDocs: ({ srcDir, publicDir, markedOptions, template, siteUrl, generatedFiles, }?: BuildDocsOptions) => Promise<void>;
+export {};

package/dist/types/docs/types.d.ts

@@ -1,3 +1,16 @@
+import { MarkedExtension } from 'marked';
+import { MarkdownLayoutHandler } from './markdown-layout/types.ts';
+export type DocsThemeMode = Record<string, string | number>;
+export interface DocsTheme {
+    light?: DocsThemeMode;
+    dark?: DocsThemeMode;
+}
+export type DocsScriptMatcher = string | string[] | RegExp | ((html: string) => boolean);
+export interface DocsScriptDefinition {
+    match?: DocsScriptMatcher;
+    render: () => string;
+}
+export type DocsScriptRegistry = Record<string, false | DocsScriptDefinition | (() => string)>;
 export interface PageProps {
     name?: string;
     path?: string;
@@ -16,6 +29,9 @@ export interface PageProps {
         version: string;
         [key: string]: unknown;
     };
+    renderMarkdown?: (markdown: string) => string;
+    scripts?: string[];
+    themeStylesheet?: string;
 }
 export interface CustomOptions {
     name?: string;
@@ -37,3 +53,9 @@ export interface CustomOptions {
     [key: string]: unknown;
 }
 export type SiteMap = Map<string, CustomOptions | SiteMap>;
+export interface DocsTemplateConfig {
+    markedOptions?: MarkedExtension;
+    markdownLayouts?: Record<string, MarkdownLayoutHandler>;
+    scripts?: DocsScriptRegistry;
+    theme?: DocsTheme;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@beforesemicolon/builder",
-    "version": "1.8.0",
+    "version": "1.8.11",
     "description": "Utilities to build npm packages and documentation website",
     "engines": {
         "node": ">=18.16.0"
@@ -21,7 +21,8 @@
     "scripts": {
         "build": "rm -rf dist && tsc --emitDeclarationOnly && tsx ./build.ts",
         "lint": "eslint ./src && prettier --check .",
-        "format": "eslint ./src --fix && prettier --write ."
+        "format": "eslint ./src --fix && prettier --write .",
+        "test": "tsx src/docs/markdown-layout/markdown-layout.spec.ts"
     },
     "author": "Elson Correia",
     "license": "BSD-3-Clause",

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

@@ -1,50 +0,0 @@
-export default () => `
-<script type="application/javascript">
-    // handle all possible copy snippet code button on the page
-    // this implementation is in sync with CodeSnippet partial
-    document.querySelectorAll('.code-copy-btn').forEach((copyBtn) => {
-        const snippet = copyBtn.closest('.code-snippet')
-        const hasCode = snippet?.dataset.code || snippet?.querySelector('code') || snippet?.querySelector('.content')
-        if (hasCode) {
-            copyBtn.style.visibility = 'visible'
-        }
-    })
-
-    document.addEventListener('click', (e) => {
-        const copyBtn = e.target.closest('.code-copy-btn')
-        if (!copyBtn) return
-
-        const snippet = copyBtn.closest('.code-snippet')
-        if (!snippet) return
-
-        let code = snippet.dataset.code ?? ''
-
-        if (!code) {
-            const codeEl = snippet.querySelector('code')
-            if (codeEl) {
-                const clone = codeEl.cloneNode(true)
-                clone.querySelectorAll('.line-number').forEach(el => el.remove())
-                code = clone.textContent ?? ''
-            }
-        }
-
-        if (!code) {
-            code = snippet.querySelector('.content')?.textContent ?? ''
-        }
-
-        // no code, no copy button
-        if (code.trim().length) {
-            clearTimeout(copyBtn._timer)
-            navigator.clipboard.writeText(code.trim())
-            copyBtn.textContent = 'copied'
-            copyBtn.setAttribute('aria-label', 'Code copied')
-            copyBtn.classList.add('copied')
-            copyBtn._timer = setTimeout(() => {
-                copyBtn.textContent = 'copy'
-                copyBtn.setAttribute('aria-label', 'Copy code')
-                copyBtn.classList.remove('copied')
-            }, 1000)
-        }
-    })
-</script>
-`

package/dist/esm/docs/templates/fading-citrus/layouts/_copy-code.js

@@ -1,50 +0,0 @@
-export default () => `
-<script type="application/javascript">
-    // handle all possible copy snippet code button on the page
-    // this implementation is in sync with CodeSnippet partial
-    document.querySelectorAll('.code-copy-btn').forEach((copyBtn) => {
-        const snippet = copyBtn.closest('.code-snippet')
-        const hasCode = snippet?.dataset.code || snippet?.querySelector('code') || snippet?.querySelector('.content')
-        if (hasCode) {
-            copyBtn.style.visibility = 'visible'
-        }
-    })
-
-    document.addEventListener('click', (e) => {
-        const copyBtn = e.target.closest('.code-copy-btn')
-        if (!copyBtn) return
-
-        const snippet = copyBtn.closest('.code-snippet')
-        if (!snippet) return
-
-        let code = snippet.dataset.code ?? ''
-
-        if (!code) {
-            const codeEl = snippet.querySelector('code')
-            if (codeEl) {
-                const clone = codeEl.cloneNode(true)
-                clone.querySelectorAll('.line-number').forEach(el => el.remove())
-                code = clone.textContent ?? ''
-            }
-        }
-
-        if (!code) {
-            code = snippet.querySelector('.content')?.textContent ?? ''
-        }
-
-        // no code, no copy button
-        if (code.trim().length) {
-            clearTimeout(copyBtn._timer)
-            navigator.clipboard.writeText(code.trim())
-            copyBtn.textContent = 'copied'
-            copyBtn.setAttribute('aria-label', 'Code copied')
-            copyBtn.classList.add('copied')
-            copyBtn._timer = setTimeout(() => {
-                copyBtn.textContent = 'copy'
-                copyBtn.setAttribute('aria-label', 'Copy code')
-                copyBtn.classList.remove('copied')
-            }, 1000)
-        }
-    })
-</script>
-`