@beforesemicolon/builder 1.8.1 → 1.8.13

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>
+    `
+}