/* global React */ /* 85runtime - Blog Listing Page */ const { useState, useEffect } = React; // ── Language helpers (used by both blog.jsx and blog-article.jsx) ──────────── const getLang = () => window.location.pathname.startsWith('/en/') ? 'en' : 'sk'; const getBlogBase = (lang) => lang === 'en' ? '/en/blog' : '/blog'; const getBlogArticleUrl = (slug, lang) => lang === 'en' ? `/en/blog/${slug}` : `/blog/${slug}`; // ── Logo (same as app.jsx) const BlogLogo = () => ( 85 / runtime ); // ── Nav (Blog link is .active, language-aware) const BlogNav = ({ lang: langProp, translationSlug } = {}) => { const lang = langProp !== undefined ? langProp : getLang(); const [scrolled, setScrolled] = useState(false); useEffect(() => { const fn = () => setScrolled(window.scrollY > 16); window.addEventListener('scroll', fn); return () => window.removeEventListener('scroll', fn); }, []); // Language toggle: swap between SK and EN. On article page, jump to translation if known. const skHref = translationSlug !== undefined ? (lang === 'en' ? `/blog/${translationSlug}` : window.location.pathname) : '/blog'; const enHref = translationSlug !== undefined ? (lang === 'sk' ? `/en/blog/${translationSlug}` : window.location.pathname) : '/en/blog'; return ( ); }; // ── Footer const BlogFooter = () => { function openCookies(e) { e.preventDefault(); document.dispatchEvent(new CustomEvent('85rt:open-cookie-settings')); } return ( ); }; // ── Date formatter (Slovak short form for cards) const formatDateSk = (isoDate) => { if (!isoDate) return ''; const d = new Date(isoDate); const months = ['JAN','FEB','MAR','APR','MÁJ','JÚN','JÚL','AUG','SEP','OKT','NOV','DEC']; return `${d.getDate()}. ${months[d.getMonth()]} ${d.getFullYear()}`; }; // ── Media URL helpers (shared scope; used by blog.jsx + blog-article.jsx) // // Payload returns coverImage.url either as an absolute URL (when R2 storage // is configured) or as a path relative to the CMS host (default Payload // disk storage). Prepend the CMS base for the relative case so the browser // fetches from cms.85runtime.sk, not from www.85runtime.sk. const CMS_BASE = 'https://cms.85runtime.sk'; const resolveMediaUrl = (url) => { if (!url) return ''; if (/^https?:\/\//i.test(url)) return url; return `${CMS_BASE}${url.startsWith('/') ? '' : '/'}${url}`; }; // Pick the best available image variant from a Payload coverImage upload. // For SVGs (vector) we always use the original URL. Payload's Sharp // rasterizes them into PNGs when generating imageSizes variants, which // would lose the crispness we're paying for. For raster formats we // honor the requested size order (e.g. ['hero','card'] on the article // page, ['card','thumbnail'] on the listing). // Returns null when no image can be resolved. Callers must handle // this and render the geometric fallback. const pickCoverImage = (coverImage, sizeOrder = ['card', 'thumbnail']) => { if (!coverImage || typeof coverImage !== 'object') return null; if (coverImage.mimeType === 'image/svg+xml' && coverImage.url) { return { url: resolveMediaUrl(coverImage.url), alt: coverImage.alt || '' }; } const sizes = coverImage.sizes || {}; for (const s of sizeOrder) { if (sizes[s] && sizes[s].url) { return { url: resolveMediaUrl(sizes[s].url), alt: coverImage.alt || '' }; } } if (coverImage.url) { return { url: resolveMediaUrl(coverImage.url), alt: coverImage.alt || '' }; } return null; }; // ── Mini Thumb SVGs ────────────────────────────────────────────── // Thumb1: Network activation, dots grid with connecting lines const Thumb1 = () => ( ); // Thumb2: Decision matrix, 4 quadrants with check and X const Thumb2 = () => ( ); // Thumb3: Three groups, assistant, workflow, agent const Thumb3 = () => ( ); // Thumb4: Content engine, three boxes with arrows const Thumb4 = () => ( ); // Thumb5: 6 numbered squares in 3×2 grid const Thumb5 = () => ( ); // Thumb6: Network with broken/dashed connections and X marks on some nodes const Thumb6 = () => ( ); const THUMBS = [Thumb1, Thumb2, Thumb3, Thumb4, Thumb5, Thumb6]; // Reveal hook, re-runs when posts load const useBlogReveal = (deps) => { useEffect(() => { const els = document.querySelectorAll('.reveal'); const io = new IntersectionObserver((entries) => { entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { threshold: 0.10 }); els.forEach(el => io.observe(el)); return () => io.disconnect(); }, deps); }; // ── Blog Card const BlogCard = ({ post, index, lang }) => { const cardLang = lang || getLang(); const variant = post.coverVariant || ((index % 6) + 1); const image = pickCoverImage(post.coverImage, ['card', 'thumbnail']); const ThumbComponent = THUMBS[(variant - 1) % 6]; const catName = post.category && typeof post.category === 'object' ? post.category.name : ''; const meta = [formatDateSk(post.publishedAt), post.readTime].filter(Boolean).join(' · '); return (
{image ? {image.alt} : }
{catName}

{post.title}

{post.excerpt}

{meta} {cardLang === 'en' ? 'Read article →' : 'Čítať článok →'}
); }; // ── Skeleton card shown while loading const SkeletonCard = ({ index }) => (
); // ── Blog Listing Page const BlogListingPage = () => { const lang = getLang(); const [posts, setPosts] = useState(null); const [error, setError] = useState(false); useEffect(() => { fetch(`/api/blog?lang=${lang}`) .then(r => { if (!r.ok) throw new Error(r.status); return r.json(); }) .then(data => setPosts(data.docs || [])) .catch(() => setError(true)); }, [lang]); useBlogReveal([posts]); const count = posts ? (lang === 'en' ? `${String(posts.length).padStart(2, '0')} articles` : `${String(posts.length).padStart(2, '0')} článkov`) : null; const headerLabel = lang === 'en' ? '85runtime · Insights from practice' : '85runtime · Poznatky z praxe'; const headerDesc = lang === 'en' ? 'We write about how AI, software and automation translate into real business practice. No generic AI hype. We focus on what has value for people who want to use technology thoughtfully.' : 'Píšeme o tom, ako sa AI, softvér a automatizácia premietajú do firemnej praxe. Žiadne genericky prerozprávané AI hype. Zameriavame sa na to, čo má hodnotu pre ľudí, ktorí chcú technológie používať s rozmyslom.'; const errorMsg = lang === 'en' ? '// Failed to load articles. Try again later.' : '// Nepodarilo sa načítať články. Skúste neskôr.'; return (
{headerLabel}

Blog

{count &&
{count}
}

{headerDesc}

{!posts && !error && (
{[...Array(6)].map((_, i) => )}
)} {error && (
{errorMsg}
)} {posts && posts.length > 0 && (
{posts.map((post, index) => ( ))}
)} {posts && posts.length === 0 && (
{lang === 'en' ? '// No articles yet.' : '// Zatiaľ žiadne články.'}
)}
{lang === 'en' ? '// The 85runtime website runs on a custom content engine with AI workflows.' : '// Web 85runtime beží na vlastnom obsahovom engine s AI workflowmi.'}
); }; // Only render when on the listing page. blog-article.html also loads this file for // shared components (BlogNav, BlogFooter, Thumbs), so we must not double-render. const _path = window.location.pathname; if (_path === '/blog' || _path === '/blog/' || _path === '/en/blog' || _path === '/en/blog/') { ReactDOM.createRoot(document.getElementById('root')).render( ); }