import blockStyleVariations from '@launch/_data/block-style-variations.json'; import themeJSON from '@launch/_data/theme-processed.json'; import { usePreviewIframe } from '@launch/hooks/usePreviewIframe'; import { getFontOverrides } from '@launch/lib/preview-helpers'; import { hexTomatrixValues, lowerImageQuality } from '@launch/lib/util'; import { pageNames } from '@shared/lib/pages'; import { BlockPreview } from '@wordpress/block-editor'; import { rawHandler } from '@wordpress/blocks'; import { useCallback, useEffect, useMemo, useRef, useState, } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import classNames from 'classnames'; import { colord } from 'colord'; import { AnimatePresence, motion } from 'framer-motion'; export const SmallPreview = ({ style, onSelect, selected, siteTitle, showNav = true, }) => { const previewContainer = useRef(null); const blockRef = useRef(null); const observer = useRef(null); const [ready, setReady] = useState(false); const variation = style?.variation; const theme = variation?.settings?.color?.palette?.theme; const vibe = useMemo(() => style?.siteStyle?.vibe, [style?.siteStyle?.vibe]); const blockVariationCSS = useMemo(() => { if (vibe && blockStyleVariations[vibe]) { return blockStyleVariations[vibe]; } return blockStyleVariations['natural-1'] || ''; }, [vibe]); const onLoad = useCallback( (frame) => { // Run this 150 times at an interval of 100ms (15s) // This is a brute force check that the styles are there let lastRun = performance.now(); let counter = 0; const variationTitle = variation?.slug ?.split('-') .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) .join(' '); const variationStyles = themeJSON[variationTitle]; const { customFontLinks, fontOverrides } = getFontOverrides(variation); const checkOnStyles = () => { if (counter >= 150) return; const now = performance.now(); // Don't pass here until we've waited 100ms if (now - lastRun < 100) return requestAnimationFrame(checkOnStyles); lastRun = now; const content = frame?.contentDocument; if (content) { content.querySelector('[href*=load-styles]')?.remove(); const siteTitleElement = content.querySelector('[href*=site-title]'); if (siteTitleElement.textContent !== siteTitle) { siteTitleElement.textContent = siteTitle; } } const primaryColor = theme?.find( ({ slug }) => slug === 'primary', )?.color; const [r, g, b] = primaryColor ? hexTomatrixValues(primaryColor) : [0, 0, 0]; // Add custom font links if not already present if ( customFontLinks && !frame.contentDocument?.querySelector('[id^="ext-custom-font"]') ) { frame.contentDocument?.head?.insertAdjacentHTML( 'beforeend', customFontLinks, ); } if (!frame.contentDocument?.getElementById('ext-tj')) { frame.contentDocument?.body?.insertAdjacentHTML( 'beforeend', ``, ); } counter++; requestAnimationFrame(checkOnStyles); // recursive }; checkOnStyles(); }, [variation, theme, siteTitle, blockVariationCSS], ); const { loading, ready: show } = usePreviewIframe({ container: blockRef.current, ready, onLoad, // Additional time to wait after we think we are ready loadDelay: 750, }); const blocks = useMemo(() => { const links = [ pageNames.about.title, pageNames.blog.title, pageNames.contact.title, ]; const code = [ style?.headerCode, style?.patterns .flatMap(({ code }) => code) .slice(0, 3) .join('\n'), style?.footerCode, ] .filter(Boolean) .join('') .replace( // Replace natural-1 with dynamic vibe value /natural-1/g, vibe || 'natural-1', ) .replace( // //g, showNav ? `

${links.map((link) => `${link}`).join('')}

` : '', ) .replace( // //g, showNav ? `

${links.map((link) => `${link}`).join('')}

` : '', ) .replace( //gis, // dont replace if showNav is true (match) => (showNav ? match : ''), ) .replace( //g, '

', ); return rawHandler({ HTML: lowerImageQuality(code) }); }, [style?.headerCode, style?.patterns, style?.footerCode, vibe, showNav]); useEffect(() => { if (observer.current) return; observer.current = new IntersectionObserver((entries) => { entries[0].isIntersecting && setReady(true); }); observer.current.observe(blockRef.current); return () => observer.current.disconnect(); }, []); return ( // biome-ignore lint: keep the button role until a refactor is done

{ if (!['Enter', 'Space', ' '].includes(e.key)) return; onSelect?.({ ...style, variation }); }} onClick={() => onSelect?.({ ...style, variation })} > {ready ? ( ) : null} {show || ( slug === 'primary')?.color ?? '#ccc', ) .alpha(0.25) .toRgbString(), backgroundImage: 'linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%)', backgroundSize: '600% 600%', animation: 'extendify-loading-skeleton 10s ease-in-out infinite', }} /> )}

); };