@beforesemicolon/builder 1.7.0 → 1.8.0

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

@@ -0,0 +1,231 @@
+/* global process */
+const isDev = process.env.NODE_ENV === 'development'
+
+const siteUrl = 'https://markup.beforesemicolon.com'
+const siteName = 'Markup'
+const defaultTitle = 'Markup by Before Semicolon'
+const defaultDescription =
+    'Markup is a tiny reactive HTML templating system for building JavaScript user interfaces with web standards, no JSX, and no build step.'
+const defaultImage = `${siteUrl}/assets/markup-banner.jpg`
+const baseKeywords = [
+    'Markup',
+    '@beforesemicolon/markup',
+    'reactive HTML',
+    'JavaScript templating',
+    'template literals',
+    'web components',
+    'state management',
+    'no build step',
+    'vanilla JavaScript',
+]
+
+const escapeHTML = (value = '') =>
+    String(value)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;')
+
+const canonicalPath = (path = '/') => {
+    const cleanPath = path.split('?')[0].split('#')[0] || '/'
+
+    if (cleanPath === '/index.html') return '/'
+    if (cleanPath.endsWith('/index.html')) {
+        return cleanPath.replace(/index\.html$/, '')
+    }
+
+    return cleanPath.replace(/\.html$/, '')
+}
+
+const absoluteUrl = (path = '/') => `${siteUrl}${canonicalPath(path)}`
+
+const compactDescription = (description) =>
+    (description || defaultDescription).replace(/\s+/g, ' ').trim()
+
+const pageKeywords = ({ title, name, keywords } = {}) => {
+    const values = [
+        ...baseKeywords,
+        title?.replace(/ - Markup by Before Semicolon$/, ''),
+        name,
+        ...(Array.isArray(keywords)
+            ? keywords
+            : String(keywords || '').split(',')),
+    ]
+
+    return [...new Set(values.map((value) => value?.trim()).filter(Boolean))]
+        .slice(0, 18)
+        .join(', ')
+}
+
+const jsonScript = (data) =>
+    `<script type="application/ld+json">${JSON.stringify(data)
+        .replace(/</g, '\\u003c')
+        .replace(/>/g, '\\u003e')
+        .replace(/&/g, '\\u0026')}</script>`
+
+const breadcrumbJson = ({ title, path }) => {
+    const cleanPath = canonicalPath(path)
+    const parts = cleanPath.split('/').filter(Boolean)
+    const items = [
+        {
+            '@type': 'ListItem',
+            position: 1,
+            name: 'Home',
+            item: siteUrl,
+        },
+    ]
+
+    let current = ''
+    parts.forEach((part, index) => {
+        current += `/${part}`
+        items.push({
+            '@type': 'ListItem',
+            position: index + 2,
+            name:
+                index === parts.length - 1
+                    ? title.replace(/ - Markup by Before Semicolon$/, '')
+                    : part
+                          .split('-')
+                          .map((word) => word[0]?.toUpperCase() + word.slice(1))
+                          .join(' '),
+            item: `${siteUrl}${current}`,
+        })
+    })
+
+    return {
+        '@context': 'https://schema.org',
+        '@type': 'BreadcrumbList',
+        itemListElement: items,
+    }
+}
+
+const pageJson = ({ title, description, path, name }) => {
+    const isDocsPage = canonicalPath(path).startsWith('/documentation')
+    const url = absoluteUrl(path)
+
+    if (isDocsPage) {
+        return {
+            '@context': 'https://schema.org',
+            '@type': 'TechArticle',
+            headline: title,
+            name: name || title,
+            description,
+            url,
+            image: defaultImage,
+            inLanguage: 'en-US',
+            isPartOf: {
+                '@type': 'TechArticle',
+                name: 'Markup Documentation',
+                url: `${siteUrl}/documentation`,
+            },
+            about: [
+                'Reactive HTML templating',
+                'JavaScript template literals',
+                'Markup state and effect APIs',
+                'Web Components',
+            ],
+            publisher: {
+                '@type': 'Organization',
+                name: 'Before Semicolon',
+                url: 'https://beforesemicolon.com',
+                logo: {
+                    '@type': 'ImageObject',
+                    url: `${siteUrl}/assets/before-semicolon-logo.png`,
+                },
+            },
+            mainEntityOfPage: url,
+        }
+    }
+
+    return {
+        '@context': 'https://schema.org',
+        '@type': 'SoftwareSourceCode',
+        name: 'Markup',
+        alternateName: '@beforesemicolon/markup',
+        description,
+        url,
+        image: defaultImage,
+        codeRepository: 'https://github.com/beforesemicolon/markup',
+        programmingLanguage: 'JavaScript',
+        runtimePlatform: 'Browser and Node.js',
+        license: 'https://github.com/beforesemicolon/markup/blob/main/LICENSE',
+        publisher: {
+            '@type': 'Organization',
+            name: 'Before Semicolon',
+            url: 'https://beforesemicolon.com',
+        },
+    }
+}
+
+export default (props = {}) => {
+    const title = props.title || defaultTitle
+    const description = compactDescription(props.description)
+    const url = absoluteUrl(props.path)
+    const canonical = escapeHTML(url)
+    const image = props.image || defaultImage
+    const type = canonicalPath(props.path).startsWith('/documentation')
+        ? 'article'
+        : 'website'
+
+    return `
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+<title>${escapeHTML(title)}</title>
+<meta name="description" content="${escapeHTML(description)}" />
+<meta name="keywords" content="${escapeHTML(pageKeywords(props))}" />
+<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
+<meta name="googlebot" content="index, follow" />
+<meta name="author" content="Before Semicolon" />
+<meta name="publisher" content="Before Semicolon" />
+<meta name="application-name" content="${siteName}" />
+<meta name="generator" content="@beforesemicolon/builder" />
+<meta name="theme-color" content="#080d12" />
+<meta name="color-scheme" content="dark light" />
+<link rel="canonical" href="${canonical}" />
+<link rel="home" href="${siteUrl}/" />
+<link rel="sitemap" type="application/xml" href="/sitemap.xml" />
+<link rel="alternate" type="text/plain" title="LLMs guide" href="/llms.txt" />
+<link rel="alternate" type="text/plain" title="Full LLM documentation export" href="/llms-full.txt" />
+<meta property="og:title" content="${escapeHTML(title)}" />
+<meta property="og:type" content="${type}" />
+<meta property="og:description" content="${escapeHTML(description)}" />
+<meta property="og:image" content="${escapeHTML(image)}" />
+<meta property="og:image:secure_url" content="${escapeHTML(image)}" />
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
+<meta property="og:image:alt" content="${escapeHTML(title)}" />
+<meta property="og:url" content="${canonical}" />
+<meta property="og:site_name" content="${siteName}" />
+<meta property="og:locale" content="en_US" />
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:site" content="@BeforeSemicolon" />
+<meta name="twitter:creator" content="@BeforeSemicolon" />
+<meta name="twitter:title" content="${escapeHTML(title)}" />
+<meta name="twitter:image" content="${escapeHTML(image)}" />
+<meta name="twitter:description" content="${escapeHTML(description)}" />
+<meta name="twitter:image:alt" content="${escapeHTML(title)}" />
+<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png" />
+<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon/favicon-32x32.png" />
+<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">
+${jsonScript(pageJson({ ...props, title, description }))}
+${jsonScript(breadcrumbJson({ title, path: props.path }))}
+${
+    isDev
+        ? ''
+        : `<!-- Google tag (gtag.js) -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=G-N3MXGDP5PS"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag('js', new Date());
+
+  gtag('config', 'G-N3MXGDP5PS');
+</script>`
+}
+`
+}

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

@@ -0,0 +1,41 @@
+import logo from './_logo.js'
+
+export default (props = {}) => {
+    const isDocs = props.path?.startsWith('/documentation')
+
+    return `
+<header class="site-header">
+    <div class="header-inner wrapper">
+        <h1>
+            <a href="/" aria-label="Markup home">
+                ${logo({ fill: 'currentColor', width: '90px' })}
+            </a>
+        </h1>
+        ${
+            isDocs
+                ? `
+        <nav class="nav-actions docs-actions">
+            <a href="https://github.com/beforesemicolon/markup" target="_blank" rel="noopener" aria-label="Markup GitHub repository" class="github-link docs-github-link">
+                <span>v${props.projectMeta?.version || ''}</span>
+                <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+            </a>
+        </nav>
+        `
+                : `
+        <nav class="nav-links">
+            <a href="/#features">Features</a>
+            <a href="/#code">Code</a>
+            <a href="/#install">Install</a>
+        </nav>
+        <nav class="nav-actions">
+            <a href="https://github.com/beforesemicolon/markup" target="_blank" rel="noopener" aria-label="GitHub" class="github-link">
+                <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path></svg>
+            </a>
+            <a href="/documentation" class="btn-primary">Documentation</a>
+        </nav>
+        `
+        }
+    </div>
+</header>
+`
+}

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

@@ -0,0 +1,31 @@
+export default ({ fill = '#D2ECFF', width = '80px' } = {}) => `
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 207.25 61.99"
+    width="207.25"
+    height="61.99"
+    aria-hidden="true"
+    style="width: ${width}; height: auto"
+>
+    <g fill="${fill}">
+        <path
+            d="m47.74.19c-.93-.39-2.01-.17-2.72.54l-20.38,20.38L4.27.73C3.55.02,2.48-.2,1.54.19.61.58,0,1.49,0,2.5v46.81h5V8.54l16.11,16.11-9.19,9.19,3.54,3.54,9.19-9.19,9.19,9.19,3.54-3.54-9.19-9.19,16.11-16.11v40.77h5V2.5c0-1.01-.61-1.92-1.54-2.31Z"
+        />
+        <path
+            d="m84.81,19.78v29.53h-4.7v-5.34c-.86,1.84-2.16,3.26-3.9,4.26-1.74,1-3.77,1.5-6.08,1.5-2.62,0-4.92-.63-6.9-1.88-1.98-1.25-3.5-3.02-4.58-5.31-1.08-2.29-1.61-4.96-1.61-8.01s.55-5.74,1.64-8.07c1.1-2.33,2.63-4.14,4.61-5.43,1.98-1.29,4.26-1.94,6.84-1.94,2.31,0,4.32.51,6.05,1.53,1.72,1.02,3.03,2.45,3.93,4.29v-5.11h4.7Zm-7.04,23.04c1.56-1.98,2.35-4.78,2.35-8.42s-.78-6.44-2.35-8.39c-1.57-1.96-3.8-2.94-6.69-2.94s-5.16,1.01-6.78,3.02c-1.62,2.02-2.44,4.82-2.44,8.42s.8,6.38,2.41,8.33c1.6,1.96,3.87,2.94,6.81,2.94s5.13-.99,6.69-2.96Z"
+        />
+        <path
+            d="m110.46,19.43l-.12,4.34c-.9-.31-1.94-.47-3.11-.47-2.86,0-4.98.89-6.37,2.67-1.39,1.78-2.08,3.94-2.08,6.49v16.85h-4.75v-21.25c0-3.05-.16-5.81-.47-8.28h4.52l.47,5.46c.74-2,1.94-3.52,3.58-4.58,1.64-1.06,3.52-1.58,5.63-1.58.98,0,1.88.12,2.7.35Z"
+        />
+        <path
+            d="m135.17,49.31l-15.14-14.21v14.21h-4.75V6.11h4.75v27.24l13.91-13.5h6.05l-14.79,14.15,16.2,15.32h-6.22Z"
+        />
+        <path
+            d="m170.22,19.78v29.53h-4.64v-5.11c-.94,1.8-2.25,3.17-3.93,4.11-1.68.94-3.58,1.41-5.69,1.41-3.48,0-6.12-.98-7.92-2.94-1.8-1.96-2.7-4.85-2.7-8.69v-18.31h4.75v18.2c0,2.66.55,4.62,1.64,5.87,1.09,1.25,2.76,1.88,4.99,1.88,2.62,0,4.73-.85,6.34-2.55,1.6-1.7,2.41-3.94,2.41-6.72v-16.67h4.75Z"
+        />
+        <path
+            d="m200.97,21.02c2,1.29,3.54,3.1,4.64,5.43,1.1,2.33,1.64,5.02,1.64,8.07s-.55,5.72-1.64,8.01c-1.1,2.29-2.63,4.06-4.61,5.31-1.98,1.25-4.28,1.88-6.9,1.88-2.31,0-4.32-.51-6.05-1.53-1.72-1.02-3.03-2.47-3.93-4.34v18.14h-4.75V28.06c0-3.05-.16-5.81-.47-8.28h4.52l.47,5.69c.82-2.03,2.12-3.61,3.9-4.73,1.78-1.12,3.88-1.67,6.31-1.67,2.58,0,4.87.65,6.87,1.94Zm-1.03,21.84c1.58-1.96,2.38-4.73,2.38-8.33s-.8-6.41-2.41-8.42c-1.61-2.02-3.84-3.02-6.69-3.02s-5.19.98-6.75,2.94c-1.57,1.96-2.35,4.75-2.35,8.39s.78,6.45,2.35,8.42c1.57,1.98,3.82,2.96,6.75,2.96s5.14-.98,6.72-2.94Z"
+        />
+    </g>
+</svg>
+`

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

@@ -0,0 +1,92 @@
+import meta from './_head-meta.js'
+import header from './_header.js'
+import footer from './_footer.js'
+import copyCode from './_copy-code.js'
+
+const githubDocsPath =
+    'https://github.com/beforesemicolon/markup/tree/main/docs'
+
+const navCategoryToHTML = (docs, currentPath) =>
+    Array.from(docs.entries())
+        .map(([k, v]) => {
+            if (k.endsWith('.html')) {
+                const href = v.path.replace(/(index)?\.html/, '')
+
+                return `<li ${
+                    currentPath === v.path ? 'class="active"' : ''
+                }><a href="${href}">${v.name}</a></li>`
+            }
+
+            return `<ol><span>${k}</span>${navCategoryToHTML(
+                v,
+                currentPath
+            )}</ol>`
+        })
+        .join('')
+
+export default (props) => {
+    const docs = props.siteMap.get('documentation')
+    const isDocsIndex = props.path === '/documentation/index.html'
+    const docsMenu = `<ul>${navCategoryToHTML(docs, props.path)}</ul>`
+    const pages = [...docs.values()].flatMap((page) =>
+        page instanceof Map ? [...page.values()] : [page]
+    )
+
+    let nextPage, previousPage
+
+    for (let i = 0; i < pages.length; i++) {
+        if (pages[i].path === props.path) {
+            nextPage = pages[i + 1]
+            previousPage = pages[i - 1]
+        }
+    }
+
+    return `
+<!doctype html>
+<html lang="en">
+    <head>
+        ${meta(props)}
+        <link rel="stylesheet" href="/stylesheets/documentation.css?v=20260621exact">
+    </head>
+    <body>
+        ${header(props)}
+        
+        <div id="mobile-menu-toggle">
+            <a href="#docs-nav" role="button" aria-label="toggle mobile menu open"></a>
+        </div>
+        
+        <main id="documentation" class="wrapper${isDocsIndex ? ' docs-index' : ''}">
+            <nav id="docs-nav">
+                ${docsMenu}
+                <a href="${props.path}" class="close-mobile-menu" role="button" aria-label="toggle mobile menu close"></a>
+            </nav>
+            <article>
+                ${props.content}
+                
+                <div id="page-navigation">
+                    ${previousPage ? `<a href="${previousPage.path.replace('.html', '')}" id="prev-doc"><span aria-hidden="true">&lt;&lt;</span> ${previousPage.name}</a>` : ''}
+                    ${nextPage ? `<a href="${nextPage.path.replace('.html', '')}" id="next-doc">${nextPage.name} <span aria-hidden="true">&gt;&gt;</span></a>` : ''}
+                </div>
+                
+                <a href="${`${githubDocsPath}${props.path.replace('.html', '')}.md`}" id="edit-doc">edit this doc</a>
+            </article>
+            <aside id="table-of-content">
+                <h4>Content</h4>
+                <ul>
+                    ${props.tableOfContent
+                        .map(
+                            (c) => `<li><a href="${c.path}">${c.label}</a></li>`
+                        )
+                        .join('')}
+                </ul>
+            </aside>
+        </main>
+        
+        ${footer()}
+        
+        ${copyCode()}
+        
+    </body>
+</html>
+`
+}