@beforesemicolon/builder 1.8.1 → 1.8.11

package/dist/cjs/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/cjs/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>
+    `
+}