@beforesemicolon/builder 1.8.0 → 1.8.11

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

@@ -0,0 +1,43 @@
+import {
+    groupedSectionHeader,
+    icon,
+    option,
+    partByName,
+} from './_layout-utils.js'
+
+export default ({ parts }) => {
+    const header = partByName(parts, 'header') || parts[0]
+    const cards = parts.filter((part) => part.name === 'product')
+
+    return `
+        <section class="products-section wrapper">
+            <div class="section-header">${groupedSectionHeader(header?.html || '')}</div>
+            <div class="products-grid">
+                ${cards
+                    .map(
+                        (card) => `
+                            <div class="product-card card-${option(card.options.color, 'orange')}">
+                                <div class="product-glow"></div>
+                                <a href="${option(card.options.href, '#')}" target="_blank" rel="noreferrer" class="product-head">
+                                    <div class="product-title-row">
+                                        <div class="icon-container">${icon(option(card.options.icon, 'webComponents'))}</div>
+                                        <div>
+                                            <h3>${option(card.options.title, card.name || '')}</h3>
+                                            <span class="package-name font-mono">${option(card.options.package, '')}</span>
+                                        </div>
+                                    </div>
+                                    <span class="product-arrow">${icon('arrowUpRight')}</span>
+                                </a>
+                                ${card.html}
+                                <a href="${option(card.options.href, '#')}" target="_blank" rel="noreferrer" class="product-link">
+                                    <span>Read the docs</span>
+                                    ${icon('arrowUpRight')}
+                                </a>
+                            </div>
+                        `
+                    )
+                    .join('')}
+            </div>
+        </section>
+    `
+}

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

@@ -0,0 +1,25 @@
+import { icon, option, partByName, sectionHeader } from './_layout-utils.js'
+
+export default ({ parts }) => {
+    const header = partByName(parts, 'header') || parts[0]
+    const features = parts.filter((part) => part.name === 'feature')
+
+    return `
+        <section id="features" class="features-section wrapper">
+            <div class="section-header">${sectionHeader(header?.html || '')}</div>
+            <div class="features-grid">
+                ${features
+                    .map(
+                        (feature) => `
+                            <div class="feature-card">
+                                <div class="feature-border"></div>
+                                <div class="icon-box">${icon(option(feature.options.icon, 'reactive'))}</div>
+                                ${feature.html}
+                            </div>
+                        `
+                    )
+                    .join('')}
+            </div>
+        </section>
+    `
+}

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

@@ -0,0 +1,81 @@
+import { renderCodeBlock } from './_code-snippet.js'
+import {
+    codeFromPart,
+    icon,
+    option,
+    partByName,
+    statContent,
+    withFirstParagraphClass,
+} from './_layout-utils.js'
+
+export default ({ parts, options }) => {
+    const copy = partByName(parts, 'copy') || parts[0]
+    const code = partByName(parts, 'code') || parts[1]
+    const stats = parts.filter((part) => part.name === 'stat')
+    const version = option(options.version)
+    const title = option(options.title, '')
+    const title2 = option(options.title2, '')
+    const primaryHref = option(
+        options.primaryHref,
+        '/documentation/get-started'
+    )
+    const primaryLabel = option(options.primaryLabel, 'Get Started')
+    const secondaryLabel = option(
+        options.secondaryLabel,
+        'npm i @beforesemicolon/markup'
+    )
+
+    return `
+        <section class="hero-section relative overflow-hidden">
+            <div class="absolute inset-0 bg-grid pointer-events-none"></div>
+            <div class="absolute inset-0 hero-glow pointer-events-none animate-pulse-glow"></div>
+            <div class="wrapper hero-container animate-float-up">
+                <div class="hero-content">
+                    ${
+                        version
+                            ? `<a href="https://github.com/beforesemicolon/markup" target="_blank" rel="noopener" class="version-badge">
+                                ${icon('sparkles')}
+                                <span>${version}</span>
+                                ${icon('arrowRight')}
+                            </a>`
+                            : ''
+                    }
+                    <h1 class="hero-title">
+                        <span class="text-gradient">${title}</span><br/>
+                        <span class="text-gradient-primary">${title2}</span>
+                    </h1>
+                    ${withFirstParagraphClass(copy?.html || '', 'hero-subtitle')}
+                    <div class="hero-actions">
+                        <a href="${primaryHref}" class="btn-primary">
+                            <span>${primaryLabel}</span>
+                            ${icon('arrowRight')}
+                        </a>
+                        <a href="#install" class="btn-secondary font-mono">${secondaryLabel}</a>
+                    </div>
+                    ${
+                        stats.length
+                            ? `<div class="hero-stats">${stats
+                                  .map(
+                                      (stat, index) => `
+                                        ${index ? '<div class="stat-divider"></div>' : ''}
+                                        <div class="stat-item">${statContent(stat.html)}</div>
+                                    `
+                                  )
+                                  .join('')}</div>`
+                            : ''
+                    }
+                </div>
+                ${
+                    code
+                        ? `<div class="hero-code-panel">
+                            <div class="glow-container">
+                                <div class="absolute inset-0 bg-gradient-to-br from-primary/20 to-accent/20 blur-3xl rounded-full"></div>
+                            </div>
+                            ${renderCodeBlock(option(code.options.filename, ''), codeFromPart(code), option(code.options.lang, 'javascript'))}
+                        </div>`
+                        : ''
+                }
+            </div>
+        </section>
+    `
+}

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

@@ -0,0 +1,116 @@
+import {
+    escapeHTML,
+    icon,
+    option,
+    optionText,
+    partByName,
+    sectionHeader,
+} from './_layout-utils.js'
+
+export const renderInstallScript = () => `
+<script type="application/javascript">
+    (() => {
+        if (window.__fadingCitrusInstallReady) return
+        window.__fadingCitrusInstallReady = true
+
+        document.querySelectorAll('[data-fading-citrus-install]').forEach((install) => {
+            const tabTriggers = install.querySelectorAll('.tab-trigger')
+            const tabContents = install.querySelectorAll('.tab-content')
+            const copyButtons = install.querySelectorAll('.install-copy-btn')
+
+            tabTriggers.forEach((trigger) => {
+                trigger.addEventListener('click', () => {
+                    const targetTab = trigger.getAttribute('data-tab')
+
+                    tabTriggers.forEach((tab) => {
+                        tab.classList.remove('active')
+                        tab.setAttribute('aria-selected', 'false')
+                    })
+                    tabContents.forEach((content) => content.classList.remove('active'))
+
+                    trigger.classList.add('active')
+                    trigger.setAttribute('aria-selected', 'true')
+
+                    const activeContent = install.querySelector('#tab-' + targetTab)
+                    if (activeContent) activeContent.classList.add('active')
+                })
+            })
+
+            copyButtons.forEach((button) => {
+                const originalLabel = button.getAttribute('aria-label') || ''
+
+                button.addEventListener('click', async () => {
+                    const row = button.closest('.install-code-row')
+                    const value = row ? row.getAttribute('data-code') : ''
+
+                    try {
+                        await navigator.clipboard.writeText(value)
+                        button.classList.add('copied')
+                        button.querySelector('span').textContent = 'Copied'
+                        button.setAttribute('aria-label', 'Command copied')
+                        setTimeout(() => {
+                            button.classList.remove('copied')
+                            button.querySelector('span').textContent = 'Copy'
+                            button.setAttribute('aria-label', originalLabel)
+                        }, 1500)
+                    } catch {}
+                })
+            })
+        })
+    })()
+</script>
+`
+
+export default ({ parts }) => {
+    const header = partByName(parts, 'header') || parts[0]
+    const tabs = parts.filter((part) => part.name === 'tab')
+
+    return `
+        <section id="install" class="install-section wrapper" data-fading-citrus-install>
+            <div class="install-container">
+                <div class="section-header center">${sectionHeader(header?.html || '')}</div>
+                <div class="tabs-container">
+                    <div class="tabs-list" role="tablist" aria-label="Installation package manager">
+                        ${tabs
+                            .map(
+                                (tab, index) => `
+                                    <button class="tab-trigger${index === 1 ? ' active' : ''}" role="tab" aria-selected="${index === 1}" aria-controls="tab-${option(tab.options.key, tab.options.label)}" id="tab-trigger-${option(tab.options.key, tab.options.label)}" data-tab="${option(tab.options.key, tab.options.label)}">${option(tab.options.label, tab.options.key)}</button>
+                                `
+                            )
+                            .join('')}
+                    </div>
+                    <div class="tabs-content-wrapper">
+                        ${tabs
+                            .map((tab, index) => {
+                                const key = option(
+                                    tab.options.key,
+                                    tab.options.label
+                                )
+                                const command = optionText(
+                                    tab.options.command,
+                                    tab.html.replace(/<[^>]+>/g, '').trim()
+                                )
+
+                                return `
+                                    <div class="tab-content${index === 1 ? ' active' : ''}" id="tab-${key}" role="tabpanel" tabindex="0" aria-labelledby="tab-trigger-${key}">
+                                        <div class="install-code-row" data-code="${escapeHTML(command)}">
+                                            <div class="install-command">
+                                                ${icon('terminal')}
+                                                <code class="font-mono">${escapeHTML(command)}</code>
+                                            </div>
+                                            <button class="install-copy-btn" aria-label="Copy ${option(tab.options.label, key)} install command">
+                                                <svg aria-hidden="true" class="copy-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+                                                <svg aria-hidden="true" class="check-icon" xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+                                                <span>Copy</span>
+                                            </button>
+                                        </div>
+                                    </div>
+                                `
+                            })
+                            .join('')}
+                    </div>
+                </div>
+            </div>
+        </section>
+    `
+}

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

@@ -0,0 +1,125 @@
+import { renderCodeBlock } from './_code-snippet.js'
+import {
+    codeFromPart,
+    icon,
+    option,
+    partByName,
+    sectionHeader,
+} from './_layout-utils.js'
+
+const previousIcon =
+    '<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>'
+
+export const renderShowcaseScript = () => `
+<script type="application/javascript">
+    (() => {
+        if (window.__fadingCitrusShowcaseReady) return
+        window.__fadingCitrusShowcaseReady = true
+
+        document.querySelectorAll('[data-fading-citrus-showcase]').forEach((showcase) => {
+            const track = showcase.querySelector('.slider-track')
+            const originalSlides = Array.from(showcase.querySelectorAll('.slider-slide'))
+            const dots = showcase.querySelectorAll('.slider-dot')
+            const btnPrev = showcase.querySelector('[data-slider-prev]')
+            const btnNext = showcase.querySelector('[data-slider-next]')
+            const slideCount = originalSlides.length
+            let currentIndex = 1
+
+            if (!track || !btnPrev || !btnNext || slideCount < 1) return
+
+            if (slideCount > 1) {
+                const firstClone = originalSlides[0].cloneNode(true)
+                const lastClone = originalSlides[slideCount - 1].cloneNode(true)
+                firstClone.setAttribute('aria-hidden', 'true')
+                lastClone.setAttribute('aria-hidden', 'true')
+                track.insertBefore(lastClone, originalSlides[0])
+                track.appendChild(firstClone)
+            }
+
+            const slides = Array.from(showcase.querySelectorAll('.slider-slide'))
+
+            const setTrack = (index, animate = true) => {
+                const slide = slides[index]
+                const offset = slide ? slide.offsetLeft : 0
+                track.style.transition = animate
+                    ? 'transform 0.5s cubic-bezier(0.22, 1, 0.36, 1)'
+                    : 'none'
+                track.style.transform = 'translateX(-' + offset + 'px)'
+            }
+
+            const updateDots = (index) => {
+                const logicalIndex = ((index % slideCount) + slideCount) % slideCount
+                dots.forEach((dot, idx) => dot.classList.toggle('active', idx === logicalIndex))
+            }
+
+            const updateSlider = (index, animate = true) => {
+                currentIndex = index
+                setTrack(currentIndex, animate)
+                updateDots(currentIndex - 1)
+            }
+
+            btnPrev.addEventListener('click', () => updateSlider(currentIndex - 1))
+            btnNext.addEventListener('click', () => updateSlider(currentIndex + 1))
+            track.addEventListener('transitionend', () => {
+                if (currentIndex === 0) {
+                    currentIndex = slideCount
+                    setTrack(currentIndex, false)
+                } else if (currentIndex === slideCount + 1) {
+                    currentIndex = 1
+                    setTrack(currentIndex, false)
+                }
+            })
+            dots.forEach((dot, idx) => dot.addEventListener('click', () => updateSlider(idx + 1)))
+
+            updateSlider(currentIndex, false)
+            window.addEventListener('resize', () => updateSlider(currentIndex, false))
+        })
+    })()
+</script>
+`
+
+export default ({ parts }) => {
+    const header = partByName(parts, 'header') || parts[0]
+    const examples = parts.filter((part) => part.name === 'example')
+
+    return `
+        <section id="code" class="showcase-section relative overflow-hidden" data-fading-citrus-showcase>
+            <div class="absolute inset-0 showcase-glow pointer-events-none"></div>
+            <div class="wrapper relative">
+                <div class="showcase-header">
+                    <div class="showcase-header-text">${sectionHeader(header?.html || '')}</div>
+                    <div class="slider-controls">
+                        <button id="slider-prev" data-slider-prev aria-label="Previous example" class="ctrl-btn btn-prev">${previousIcon}</button>
+                        <button id="slider-next" data-slider-next aria-label="Next example" class="ctrl-btn btn-next">${icon('arrowRight')}</button>
+                    </div>
+                </div>
+                <div class="slider-viewport">
+                    <div class="slider-track">
+                        ${examples
+                            .map(
+                                (example, index) => `
+                                    <div class="slider-slide">
+                                        <div class="slide-meta">
+                                            <span class="slide-num font-mono">EXAMPLE ${String(index + 1).padStart(2, '0')}</span>
+                                            <div class="slide-line"></div>
+                                            <span class="slide-label font-mono color-${option(example.options.color, index % 2 ? 'cyan' : 'orange')}">${option(example.options.label, '')}</span>
+                                        </div>
+                                        ${renderCodeBlock(option(example.options.filename, ''), codeFromPart(example), option(example.options.lang, 'javascript'))}
+                                    </div>
+                                `
+                            )
+                            .join('')}
+                    </div>
+                </div>
+                <div class="slider-dots-container">
+                    ${examples
+                        .map(
+                            (_, index) =>
+                                `<button class="slider-dot${index === 0 ? ' active' : ''}" aria-label="Go to slide ${index + 1}"></button>`
+                        )
+                        .join('')}
+                </div>
+            </div>
+        </section>
+    `
+}