@beforesemicolon/builder 1.8.24 → 2.0.0

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

@@ -1,51 +0,0 @@
-import {
-    groupedSectionHeader,
-    icon,
-    option,
-    partByName,
-} from './_layout-utils.js'
-
-const tone = (value) =>
-    ({
-        orange: 'primary',
-        cyan: 'accent',
-    })[value] ||
-    value ||
-    'primary'
-
-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-${tone(option(card.options.color, 'primary'))}">
-                                <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

@@ -1,25 +0,0 @@
-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

@@ -1,89 +0,0 @@
-import { renderCodeBlock } from './_code-snippet.js'
-import {
-    codeFromPart,
-    escapeAttribute,
-    icon,
-    option,
-    partByName,
-    siteConfig,
-    statContent,
-    withFirstParagraphClass,
-} from './_layout-utils.js'
-
-export default ({ parts, options }, context = {}) => {
-    const site = siteConfig(context)
-    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,
-        site.landingHeroSecondaryLabel ||
-            (site.packageName ? `npm i ${site.packageName}` : 'Install')
-    )
-    const versionHref =
-        option(options.versionHref) ||
-        site.landingHeroVersionHref ||
-        site.repositoryUrl
-
-    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="${escapeAttribute(versionHref || '#')}"${versionHref ? ' 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

@@ -1,116 +0,0 @@
-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

@@ -1,133 +0,0 @@
-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>'
-
-const tone = (value) =>
-    ({
-        orange: 'primary',
-        cyan: 'accent',
-    })[value] ||
-    value ||
-    'accent'
-
-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-${tone(option(example.options.color, 'accent'))}">${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>
-    `
-}

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

@@ -1,29 +0,0 @@
-import meta from './_head-meta.js'
-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)}
-        ${props.headScripts?.join('') || ''}
-        <link rel="stylesheet" href="/stylesheets/landing.css${cacheKey}">
-        ${
-            props.themeStylesheet
-                ? `<link rel="stylesheet" href="${props.themeStylesheet}">`
-                : ''
-        }
-    </head>
-    <body>
-        ${header(props)}
-        ${props.content}
-        ${footer(props)}
-        ${props.scripts?.join('') || ''}
-    </body>
-</html>
-`
-}