@fifthbell/brokaw 0.1.39

package/src/templates/partials/components/search/main.hbs

@@ -0,0 +1,420 @@
+<main class='flex-1 container mx-auto px-4'>
+  <div class='mx-auto max-w-5xl py-10'>
+    <header class='mb-8'>
+      <p class='text-xs font-bold uppercase tracking-[0.2em] text-[#b21100]'>Search</p>
+      <h1 class='mt-3 text-4xl md:text-5xl font-bold text-slate-900 dark:text-slate-100 font-encode'>
+        Find Stories Fast
+      </h1>
+      <p class='mt-3 text-lg text-slate-600 dark:text-slate-400 font-serif'>
+        Search titles and excerpts across current-language coverage.
+      </p>
+    </header>
+
+    <section class='rounded-2xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 p-5 md:p-6'>
+      <form id='search-page-form' class='flex flex-col md:flex-row gap-3' role='search' method='get'>
+        <input
+          id='search-page-input'
+          name='q'
+          type='search'
+          autocomplete='off'
+          spellcheck='false'
+          placeholder='Search stories...'
+          class='w-full rounded-xl border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-950 px-4 py-3 text-base text-slate-900 dark:text-slate-100 placeholder:text-slate-400 dark:placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-[#b21100]/40'
+        />
+        <button
+          type='submit'
+          class='rounded-xl bg-[#b21100] hover:bg-[#8f0d00] text-white px-6 py-3 font-bold uppercase tracking-wide text-sm transition-colors'
+        >
+          Search
+        </button>
+      </form>
+      <p id='search-results-meta' class='mt-4 text-sm text-slate-500 dark:text-slate-400'></p>
+    </section>
+
+    <section id='search-results-list' class='mt-8 grid grid-cols-1 md:grid-cols-2 gap-6'></section>
+
+    <nav id='search-results-pagination' class='mt-8 flex flex-wrap items-center gap-2'></nav>
+  </div>
+</main>
+
+<script>
+  (function () {
+    const PAGE_SIZE = 20;
+    const CDN_BASE = 'https://cdn.fifthbell.com/content';
+    const cache = window.__fifthbellSearchCache || (window.__fifthbellSearchCache = new Map());
+
+    const form = document.getElementById('search-page-form');
+    const input = document.getElementById('search-page-input');
+    const meta = document.getElementById('search-results-meta');
+    const list = document.getElementById('search-results-list');
+    const pagination = document.getElementById('search-results-pagination');
+    if (!form || !input || !meta || !list || !pagination) return;
+
+    function getLanguage() {
+      const path = window.location.pathname || '/';
+      if (path.startsWith('/es')) return 'es';
+      if (path.startsWith('/it')) return 'it';
+      return 'en';
+    }
+
+    function normalizePath(path) {
+      if (typeof path !== 'string') return '/';
+      const stripped = (path.split('?')[0] || '/').trim();
+      if (!stripped) return '/';
+      const normalized = `/${stripped.replace(/^\/+/, '')}`.replace(/\/{2,}/g, '/');
+      if (normalized !== '/' && normalized.endsWith('/')) {
+        return normalized.slice(0, -1);
+      }
+      return normalized;
+    }
+
+    function repairMojibake(value) {
+      if (typeof value !== 'string' || !value) return '';
+      if (!/[ÃÂâ€]/.test(value)) return value;
+      try {
+        const bytes = new Uint8Array(Array.from(value, (char) => char.charCodeAt(0) & 0xff));
+        const decoded = new TextDecoder('utf-8', { fatal: false }).decode(bytes);
+        if (decoded && decoded !== value) return decoded;
+      } catch {
+        // Keep original text when repair fails.
+      }
+      return value;
+    }
+
+    function foldForSearch(value) {
+      const repaired = repairMojibake(String(value || ''));
+      return repaired
+        .normalize('NFD')
+        .replace(/[\u0300-\u036f]/g, '')
+        .toLowerCase()
+        .trim();
+    }
+
+    function escapeHtml(value) {
+      return String(value || '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+    }
+
+    function getSearchBasePath(language) {
+      return language === 'en' ? '/search' : `/${language}/search`;
+    }
+
+    function isStorybookPreview() {
+      const url = new URL(window.location.href);
+      return url.pathname.endsWith('/iframe.html') && url.searchParams.has('id');
+    }
+
+    function isOnSearchPage(language) {
+      const searchBasePath = getSearchBasePath(language);
+      const currentPath = normalizePath(window.location.pathname);
+      if (currentPath === searchBasePath) return true;
+
+      // In Storybook, pages render inside /iframe.html while still representing search-page context.
+      if (isStorybookPreview()) return true;
+
+      return false;
+    }
+
+    function parseQueryState() {
+      const url = new URL(window.location.href);
+      const q = (url.searchParams.get('q') || '').trim();
+      const pageRaw = Number.parseInt(url.searchParams.get('page') || '1', 10);
+      const page = Number.isFinite(pageRaw) && pageRaw > 0 ? pageRaw : 1;
+      return { q, page };
+    }
+
+    function toHref(language, query, page) {
+      const base = getSearchBasePath(language);
+      const params = new URLSearchParams();
+      params.set('q', query);
+      if (page > 1) params.set('page', String(page));
+      return `${base}?${params.toString()}`;
+    }
+
+    function navigateToSearchUrl(url, options = { replace: false }) {
+      const language = getLanguage();
+      if (!isOnSearchPage(language)) {
+        window.location.href = url;
+        return;
+      }
+
+      const currentUrl = new URL(window.location.href);
+      const targetUrl = new URL(url, window.location.origin);
+      const nextQ = (targetUrl.searchParams.get('q') || '').trim();
+      const nextPage = (targetUrl.searchParams.get('page') || '').trim();
+
+      if (nextQ) {
+        currentUrl.searchParams.set('q', nextQ);
+      } else {
+        currentUrl.searchParams.delete('q');
+      }
+
+      if (nextPage) {
+        currentUrl.searchParams.set('page', nextPage);
+      } else {
+        currentUrl.searchParams.delete('page');
+      }
+
+      const nextRelative = `${currentUrl.pathname}?${currentUrl.searchParams.toString()}${currentUrl.hash}`;
+      const method = options.replace ? 'replaceState' : 'pushState';
+      window.history[method](null, '', nextRelative);
+      runSearch();
+    }
+
+    async function fetchJson(url) {
+      const response = await fetch(url, {
+        cache: 'no-store',
+        headers: { 'Content-Type': 'application/json' }
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to fetch ${url}: ${response.status}`);
+      }
+      return response.json();
+    }
+
+    async function loadIndex(language) {
+      const cacheKey = `index:${language}`;
+      if (cache.has(cacheKey)) return cache.get(cacheKey);
+
+      const manifest = await fetchJson(`${CDN_BASE}/search-manifest-${language}.json?v=${Date.now()}`);
+      const fileList = [];
+      if (manifest?.files?.currentMonth) fileList.push(manifest.files.currentMonth);
+      if (Array.isArray(manifest?.files?.yearly)) {
+        for (const file of manifest.files.yearly) {
+          if (typeof file === 'string') fileList.push(file);
+        }
+      }
+
+      const uniqueFiles = [...new Set(fileList)];
+      const payloads = await Promise.all(
+        uniqueFiles.map(async (file) => {
+          try {
+            return await fetchJson(`${CDN_BASE}/${file}?v=${Date.now()}`);
+          } catch {
+            return null;
+          }
+        })
+      );
+
+      const combined = [];
+      let position = 0;
+      for (const payload of payloads) {
+        const articles = Array.isArray(payload?.articles) ? payload.articles : [];
+        for (const article of articles) {
+          combined.push({
+            title: repairMojibake(typeof article?.title === 'string' ? article.title : ''),
+            slug: normalizePath(typeof article?.slug === 'string' ? article.slug : '/'),
+            excerpt: repairMojibake(typeof article?.excerpt === 'string' ? article.excerpt : ''),
+            photoUrl: typeof article?.photoUrl === 'string' ? article.photoUrl : '',
+            publishedAt: typeof article?.publishedAt === 'string' ? article.publishedAt : '',
+            position
+          });
+          position += 1;
+        }
+      }
+
+      const deduped = [];
+      const seen = new Set();
+      for (const article of combined) {
+        const key = `${article.slug}::${article.title}`;
+        if (seen.has(key)) continue;
+        seen.add(key);
+        deduped.push(article);
+      }
+
+      cache.set(cacheKey, deduped);
+      return deduped;
+    }
+
+    function formatPublishedAt(value, language) {
+      if (typeof value !== 'string' || !value) return '';
+      const date = new Date(value);
+      if (Number.isNaN(date.getTime())) return '';
+      const locale = language === 'es' ? 'es-ES' : language === 'it' ? 'it-IT' : 'en-US';
+      return date.toLocaleDateString(locale, {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric'
+      });
+    }
+
+    function scoreArticle(article, tokens, fullQuery) {
+      const title = foldForSearch(article.title || '');
+      const excerpt = foldForSearch(article.excerpt || '');
+      const haystack = `${title} ${excerpt}`;
+      let score = 0;
+
+      if (fullQuery && title.includes(fullQuery)) {
+        score += 60;
+      }
+
+      for (const token of tokens) {
+        if (!haystack.includes(token)) {
+          return -1;
+        }
+        if (title.includes(token)) score += 15;
+        if (excerpt.includes(token)) score += 5;
+      }
+
+      if (title.startsWith(tokens[0] || '')) {
+        score += 20;
+      }
+
+      return score;
+    }
+
+    function searchArticles(articles, query) {
+      const normalizedQuery = foldForSearch(query);
+      if (!normalizedQuery) return [];
+      const tokens = normalizedQuery.split(/\s+/g).filter(Boolean);
+      if (tokens.length === 0) return [];
+
+      return articles
+        .map((article) => {
+          const score = scoreArticle(article, tokens, normalizedQuery);
+          if (score < 0) return null;
+          return { ...article, score };
+        })
+        .filter(Boolean)
+        .sort((a, b) => {
+          const aPublished = Number.isNaN(Date.parse(a.publishedAt || '')) ? 0 : Date.parse(a.publishedAt || '');
+          const bPublished = Number.isNaN(Date.parse(b.publishedAt || '')) ? 0 : Date.parse(b.publishedAt || '');
+          if (bPublished !== aPublished) return bPublished - aPublished;
+          if (b.score !== a.score) return b.score - a.score;
+          return a.position - b.position;
+        });
+    }
+
+    function renderEmptyState(message) {
+      list.innerHTML = `<div class="col-span-full rounded-xl border border-dashed border-slate-300 dark:border-slate-700 p-8 text-center text-slate-500 dark:text-slate-400">${escapeHtml(message)}</div>`;
+      pagination.innerHTML = '';
+    }
+
+    function renderResults(language, query, page, results) {
+      const total = results.length;
+      if (!query) {
+        meta.textContent = 'Start typing to search in this language.';
+        renderEmptyState('No query yet.');
+        return;
+      }
+
+      if (total === 0) {
+        meta.textContent = `No matches for "${query}".`;
+        renderEmptyState('Try a different keyword.');
+        return;
+      }
+
+      const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+      const currentPage = Math.min(Math.max(page, 1), totalPages);
+      const start = (currentPage - 1) * PAGE_SIZE;
+      const end = Math.min(start + PAGE_SIZE, total);
+      const visible = results.slice(start, end);
+
+      meta.textContent = `${total} result${total === 1 ? '' : 's'} for "${query}" • Page ${currentPage} of ${totalPages}`;
+
+      list.innerHTML = visible
+        .map((article) => {
+          const href = normalizePath(article.slug || '/');
+          const publishedAt = formatPublishedAt(article.publishedAt, language);
+          return `
+            <article class="group rounded-xl border border-slate-200 dark:border-slate-800 overflow-hidden bg-white dark:bg-slate-900">
+              <a href="${escapeHtml(href)}" class="block aspect-[16/10] bg-slate-100 dark:bg-slate-800">
+                <img src="${escapeHtml(article.photoUrl)}" alt="${escapeHtml(article.title)}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
+              </a>
+              <div class="p-4">
+                ${publishedAt ? `<p class="text-xs uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-2">${escapeHtml(publishedAt)}</p>` : ''}
+                <h2 class="text-xl font-bold leading-tight text-slate-900 dark:text-slate-100 font-encode">
+                  <a href="${escapeHtml(href)}" class="hover:text-[#b21100] dark:hover:text-[#ff2e1a] transition-colors">${escapeHtml(article.title)}</a>
+                </h2>
+                <p class="mt-2 text-slate-600 dark:text-slate-400 font-serif line-clamp-3">${escapeHtml(article.excerpt)}</p>
+              </div>
+            </article>
+          `;
+        })
+        .join('');
+
+      const pageLinks = [];
+      if (currentPage > 1) {
+        pageLinks.push(
+          `<a class="rounded-lg border border-slate-300 dark:border-slate-700 px-3 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" href="${escapeHtml(toHref(language, query, currentPage - 1))}">Previous</a>`
+        );
+      }
+
+      const rangeStart = Math.max(1, currentPage - 2);
+      const rangeEnd = Math.min(totalPages, currentPage + 2);
+      for (let i = rangeStart; i <= rangeEnd; i += 1) {
+        if (i === currentPage) {
+          pageLinks.push(
+            `<span class="rounded-lg bg-[#b21100] text-white px-3 py-2 text-sm font-bold">${i}</span>`
+          );
+        } else {
+          pageLinks.push(
+            `<a class="rounded-lg border border-slate-300 dark:border-slate-700 px-3 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" href="${escapeHtml(toHref(language, query, i))}">${i}</a>`
+          );
+        }
+      }
+
+      if (currentPage < totalPages) {
+        pageLinks.push(
+          `<a class="rounded-lg border border-slate-300 dark:border-slate-700 px-3 py-2 text-sm hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors" href="${escapeHtml(toHref(language, query, currentPage + 1))}">Next</a>`
+        );
+      }
+
+      pagination.innerHTML = pageLinks.join('');
+    }
+
+    async function runSearch() {
+      const language = getLanguage();
+      const state = parseQueryState();
+      input.value = state.q;
+
+      if (!state.q) {
+        renderResults(language, '', 1, []);
+        return;
+      }
+
+      meta.textContent = 'Searching...';
+      list.innerHTML = '';
+      pagination.innerHTML = '';
+
+      try {
+        const articles = await loadIndex(language);
+        const results = searchArticles(articles, state.q);
+        renderResults(language, state.q, state.page, results);
+      } catch (error) {
+        meta.textContent = 'Search is temporarily unavailable.';
+        renderEmptyState('We could not load the search index right now.');
+      }
+    }
+
+    form.addEventListener('submit', (event) => {
+      event.preventDefault();
+      const language = getLanguage();
+      const query = (input.value || '').trim();
+      if (!query) {
+        navigateToSearchUrl(getSearchBasePath(language), { replace: false });
+        return;
+      }
+      navigateToSearchUrl(toHref(language, query, 1), { replace: false });
+    });
+
+    pagination.addEventListener('click', (event) => {
+      const target = event.target;
+      if (!(target instanceof Element)) return;
+      const anchor = target.closest('a[href]');
+      if (!(anchor instanceof HTMLAnchorElement)) return;
+      event.preventDefault();
+      navigateToSearchUrl(anchor.getAttribute('href') || '/', { replace: false });
+    });
+
+    window.addEventListener('popstate', () => {
+      runSearch();
+    });
+
+    runSearch();
+  })();
+</script>

package/src/templates/partials/components/snack.hbs

@@ -0,0 +1,92 @@
+{{#*inline 'snackMetaImageRow'}}
+  {{#if category}}
+    <div class='w-full flex items-center justify-between {{#if metaTextSize}}{{metaTextSize}}{{else}}text-xs{{/if}} mb-2'>
+      <span class='text-[#b21100] dark:text-[#ff2e1a] uppercase font-bold tracking-wider'>{{category}}</span>
+      {{#if readTime}}
+        <span class='article-time text-slate-500 dark:text-slate-400'>{{readTime}}</span>
+      {{/if}}
+    </div>
+  {{else if (lookup categories 0)}}
+    {{#with (lookup categories 0)}}
+      <div class='w-full flex items-center justify-between {{#if ../metaTextSize}}{{../metaTextSize}}{{else}}text-xs{{/if}} mb-2'>
+        <span class='text-[#b21100] dark:text-[#ff2e1a] uppercase font-bold tracking-wider'>{{name}}</span>
+        {{#if ../readTime}}
+          <span class='article-time text-slate-500 dark:text-slate-400'>{{../readTime}}</span>
+        {{/if}}
+      </div>
+    {{/with}}
+  {{else if readTime}}
+    <div class='w-full flex items-center justify-end {{#if metaTextSize}}{{metaTextSize}}{{else}}text-xs{{/if}} mb-2'>
+      <span class='article-time text-slate-500 dark:text-slate-400'>{{readTime}}</span>
+    </div>
+  {{/if}}
+{{/inline}}
+
+{{#*inline 'snackMetaInline'}}
+  {{#if category}}
+    <div class='flex items-center {{#if metaTextSize}}{{metaTextSize}}{{else}}text-xs{{/if}} mb-2'>
+      <span class='text-[#b21100] dark:text-[#ff2e1a] uppercase font-bold tracking-wider'>{{category}}</span>
+      {{#if readTime}}
+          <span class='mx-2 text-slate-400 dark:text-slate-500'>•</span>
+          <span class='article-time text-slate-500 dark:text-slate-400'>{{readTime}}</span>
+      {{/if}}
+    </div>
+  {{else if (lookup categories 0)}}
+    {{#with (lookup categories 0)}}
+      <div class='flex items-center {{#if ../metaTextSize}}{{../metaTextSize}}{{else}}text-xs{{/if}} mb-2'>
+        <span class='text-[#b21100] dark:text-[#ff2e1a] uppercase font-bold tracking-wider'>{{name}}</span>
+        {{#if ../readTime}}
+          <span class='mx-2 text-slate-400 dark:text-slate-500'>•</span>
+          <span class='article-time text-slate-500 dark:text-slate-400'>{{../readTime}}</span>
+        {{/if}}
+      </div>
+    {{/with}}
+  {{else if readTime}}
+    <div class='flex items-center {{#if metaTextSize}}{{metaTextSize}}{{else}}text-xs{{/if}} mb-2'>
+      <span class='article-time text-slate-500 dark:text-slate-400'>{{readTime}}</span>
+    </div>
+  {{/if}}
+{{/inline}}
+
+<article class='{{#if className}}flex flex-col h-full {{className}} items-stretch{{else}}flex flex-col h-full py-4 border-t border-slate-100 dark:border-slate-800 items-stretch{{/if}}'>
+  {{#unless (eq showImage false)}}
+    {{#if image}}
+      {{> snackMetaImageRow}}
+    {{else if featuredImage.url}}
+      {{> snackMetaImageRow}}
+    {{/if}}
+  {{/unless}}
+
+  <div class='{{#if (eq showImage false)}}flex flex-col h-full{{else if image}}flex items-start gap-4{{else if featuredImage.url}}flex items-start gap-4{{else}}flex flex-col h-full{{/if}}'>
+    <div class='flex-1'>
+      {{#if (eq showImage false)}}
+        {{> snackMetaInline}}
+      {{else if image}}
+      {{else if featuredImage.url}}
+      {{else}}
+        {{> snackMetaInline}}
+      {{/if}}
+
+      <h3 class='{{#if titleFontWeight}}{{titleFontWeight}}{{else}}font-bold{{/if}} {{#if titleTextSize}}{{titleTextSize}}{{else}}text-lg{{/if}} leading-snug text-slate-900 dark:text-slate-100 {{#if titleClasses}}{{titleClasses}}{{else}}font-encode{{/if}}'>
+        <a href='{{url}}' class='hover:text-[#b21100] dark:hover:text-[#ff2e1a] transition-colors'>{{title}}</a>
+      </h3>
+      {{#unless (eq showExcerpt false)}}
+        {{#if excerpt}}
+          <p class='text-slate-500 dark:text-slate-400 {{#if excerptTextSize}}{{excerptTextSize}}{{else}}text-lg{{/if}} {{#if excerptClasses}}{{excerptClasses}}{{else}}font-serif leading-relaxed line-clamp-3{{/if}}'>{{excerpt}}</p>
+        {{/if}}
+      {{/unless}}
+    </div>
+
+    {{#unless (eq showImage false)}}
+      {{#if image}}
+        <a href='{{url}}' class='{{#if imageSize}}{{imageSize}}{{else}}w-32 h-24{{/if}} flex-shrink-0 block'>
+          <img src='{{image}}' alt='{{alt}}' class='w-full h-full object-cover rounded {{#if imageClasses}}{{imageClasses}}{{/if}}' />
+        </a>
+      {{else if featuredImage.url}}
+        <a href='{{url}}' class='{{#if imageSize}}{{imageSize}}{{else}}w-32 h-24{{/if}} flex-shrink-0 block'>
+          <img src='{{featuredImage.url}}' alt='{{featuredImage.alt}}' class='w-full h-full object-cover rounded {{#if imageClasses}}{{imageClasses}}{{/if}}' />
+        </a>
+      {{/if}}
+    {{/unless}}
+  </div>
+</article>

package/src/templates/partials/components/spotlight-hero.hbs

@@ -0,0 +1,59 @@
+<section class='spotlight-hero relative w-full min-h-[800px] md:min-h-[900px] bg-[#0C0C0C] overflow-hidden' data-carousel='spotlight'>
+  <div class='carousel-background absolute inset-0 w-full h-full'>
+    {{#if slides}}
+      {{#each slides}}
+        <div class='carousel-slide {{#if @first}}active opacity-100{{else}}hidden opacity-0{{/if}} absolute inset-0 bg-cover bg-center transition-opacity duration-700' style='background-image: radial-gradient(71.75% 69.5% at 50% 47.39%, rgba(0, 0, 0, 0) 0%, #000000 100%), url({{image}});'></div>
+      {{/each}}
+    {{else if hero.url}}
+      <div class='carousel-slide active opacity-100 absolute inset-0 bg-cover bg-center transition-opacity duration-700' style='background-image: radial-gradient(71.75% 69.5% at 50% 47.39%, rgba(0, 0, 0, 0) 0%, #000000 100%), url({{hero.url}});'></div>
+    {{else}}
+      <div class='carousel-slide active opacity-100 absolute inset-0 bg-cover bg-center transition-opacity duration-700' style='background-image: radial-gradient(71.75% 69.5% at 50% 47.39%, rgba(0, 0, 0, 0) 0%, #000000 100%), url(https://images.unsplash.com/photo-1586348943529-beaae6c28db9?w=1440&h=882&fit=crop);'></div>
+    {{/if}}
+  </div>
+
+  <div class='absolute bottom-0 left-0 right-0 h-[200px] pointer-events-none' style='background: linear-gradient(180deg, rgba(3, 7, 18, 0) 0%, var(--color-slate-950) 46.88%);'></div>
+
+  <div class='container mx-auto relative py-12 md:py-20 px-4 flex flex-col justify-end min-h-[800px] md:min-h-[900px]'>
+    <div class='absolute right-0 top-20 flex items-center gap-4'>
+      {{#if slides}}
+        {{#each slides}}
+          <button class='carousel-dot w-3 h-3 rounded-full {{#if @first}}active{{/if}}' data-slide='{{@index}}'></button>
+        {{/each}}
+      {{else}}
+        <button class='carousel-dot w-3 h-3 rounded-full active' data-slide='0'></button>
+      {{/if}}
+      <button class='carousel-next w-10 h-10 flex items-center justify-center'>
+        <svg width='15' height='27' viewBox='0 0 15 27' fill='none'>
+          <path d='M1.5 1.5L13.5 13.5L1.5 25.5' stroke='#FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path>
+        </svg>
+      </button>
+    </div>
+
+    <div class='w-full max-w-[592px] border-l border-white pl-4 md:pl-10 flex flex-col gap-4 md:gap-6 mb-8 md:mb-12'>
+      <h1 class='text-3xl md:text-[44px] leading-tight md:leading-[56px] font-normal text-white font-sans'>
+        <a href='{{articleUrl slug=slug categories=categories language=@root.language}}' class='hover:text-slate-300 transition-colors'>{{title}}</a>
+      </h1>
+      <p class='text-xl md:text-2xl leading-7 md:leading-8 text-white self-stretch font-serif'>{{excerpt}}</p>
+      <a href='{{articleUrl slug=slug categories=categories language=@root.language}}' class='border border-[#717273] rounded-md px-4 py-[11px] h-11 flex items-center justify-center whitespace-nowrap self-start hover:bg-white/10 transition-colors'>
+        <span class='text-white text-base font-medium leading-[22px] font-sans'>Read More</span>
+      </a>
+    </div>
+
+    <div class='w-full flex flex-col gap-6'>
+      <div class='grid grid-cols-2 lg:grid-cols-4 gap-4 lg:gap-6'>
+        {{#each (slice related 0 4)}}
+          {{> components/headline
+            url=url
+            title=title
+            time=(formatDate (coalesce updatedAt publishedAt))
+            timestamp=(coalesce updatedAt publishedAt)
+            image=image
+            featuredImage=featuredImage
+            titleClass='text-sm lg:text-base leading-tight lg:leading-[22px] font-medium text-[#F9FAFB] font-sans'
+            imageFallbackBgClass='bg-slate-700'
+          }}
+        {{/each}}
+      </div>
+    </div>
+  </div>
+</section>

package/src/templates/partials/components/trending.hbs

@@ -0,0 +1,14 @@
+<div class='container mx-auto px-4 flex justify-around'>
+  <section class='inline-flex mx-auto my-6 gap-15 overflow-x-auto whitespace-nowrap scrollbar-thin scrollbar-thumb-slate-300 scrollbar-track-transparent'>
+    <article class='gap-1 flex items-center flex-none'>
+      <div class='flex flex-row items-center'>
+        <span class='h-2 w-2 rounded-full bg-[#b21100] mr-2'></span>
+        <span class='text-[#b21100] font-medium mr-1'>En vivo</span>
+      </div>
+      <span class='text-[#121212]'>Clásico Universitario</span>
+    </article>
+    <article class='gap-2 flex font-normal items-center flex-none'>Trending Up: Apagón en España</article>
+    <article class='gap-2 flex font-normal items-center flex-none'>Trending Up: Copa Libertadores</article>
+    <article class='gap-2 flex font-normal items-center flex-none'>Trending Up: Terremoto en Magallanes</article>
+  </section>
+</div>

package/src/templates/partials/components/ui/accordion.hbs

@@ -0,0 +1,30 @@
+<div class='border border-slate-200 dark:border-slate-800 {{#if className}}{{className}}{{/if}}'>
+  {{#each items}}
+    <details class='group border-b border-slate-200 dark:border-slate-800 last:border-b-0' {{#if open}}open{{/if}}>
+      <summary class='flex cursor-pointer list-none items-start justify-between gap-6 px-6 py-5 marker:hidden [&::-webkit-details-marker]:hidden hover:bg-slate-50 dark:hover:bg-slate-900/50'>
+        <span class='flex min-w-0 flex-col'>
+          <span class='text-base font-semibold text-slate-900 dark:text-slate-100'>{{title}}</span>
+          {{#if subtitle}}
+            <span class='mt-1.5 text-sm text-slate-500 dark:text-slate-400'>{{subtitle}}</span>
+          {{/if}}
+        </span>
+        <span class='mt-1 shrink-0 text-slate-400 transition-transform duration-200 group-open:rotate-180 group-open:text-[#b21100] dark:group-open:text-[#ff2e1a]' aria-hidden='true'>
+          <svg viewBox='0 0 20 20' fill='currentColor' class='h-5 w-5'>
+            <path fill-rule='evenodd' d='M5.23 7.21a.75.75 0 0 1 1.06.02L10 11.17l3.71-3.94a.75.75 0 1 1 1.08 1.04l-4.25 4.5a.75.75 0 0 1-1.08 0l-4.25-4.5a.75.75 0 0 1 .02-1.06Z' clip-rule='evenodd'></path>
+          </svg>
+        </span>
+      </summary>
+      <div class='grid grid-rows-[0fr] transition-[grid-template-rows] duration-200 group-open:grid-rows-[1fr]'>
+        <div class='overflow-hidden'>
+          <div class='border-l-2 border-[#b21100] dark:border-[#ff2e1a] mx-6 mb-6 mt-1 pl-5 pb-1 text-sm leading-relaxed text-slate-700 dark:text-slate-300'>
+            {{#if html}}
+              {{{html}}}
+            {{else}}
+              {{{content}}}
+            {{/if}}
+          </div>
+        </div>
+      </div>
+    </details>
+  {{/each}}
+</div>

package/src/templates/partials/components/ui/breadcrumb.hbs

@@ -0,0 +1,16 @@
+<nav aria-label='Breadcrumb' class='{{#if className}}{{className}}{{/if}}'>
+  <ol class='inline-flex flex-wrap items-center text-sm py-1'>
+    {{#each items}}
+      <li class='inline-flex items-center'>
+        {{#if @last}}
+          <span aria-current='page' class='font-semibold text-slate-900 dark:text-slate-100 px-1.5'>{{label}}</span>
+        {{else}}
+          <a href='{{coalesce url href}}' class='px-1.5 text-slate-500 transition-colors hover:text-[#b21100] dark:text-slate-400 dark:hover:text-[#ff2e1a]'>
+            {{label}}
+          </a>
+          <span class='text-slate-300 dark:text-slate-600 select-none font-light' aria-hidden='true'>/</span>
+        {{/if}}
+      </li>
+    {{/each}}
+  </ol>
+</nav>

package/src/templates/partials/components/ui/icon-button.hbs

@@ -0,0 +1,19 @@
+{{#if href}}
+  <a
+    href='{{href}}'
+    class='inline-flex items-center justify-center rounded-full w-9 h-9 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 transition-colors hover:border-[#b21100] hover:text-[#b21100] dark:hover:border-[#ff2e1a] dark:hover:text-[#ff2e1a] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#b21100] {{#if className}}{{className}}{{/if}}'
+    {{#if title}}title='{{title}}'{{/if}}
+    {{#if ariaLabel}}aria-label='{{ariaLabel}}'{{/if}}
+  >
+    {{{icon}}}
+  </a>
+{{else}}
+  <button
+    type='{{coalesce type "button"}}'
+    class='inline-flex items-center justify-center rounded-full w-9 h-9 border border-slate-200 dark:border-slate-700 bg-white dark:bg-slate-900 text-slate-600 dark:text-slate-300 transition-colors hover:border-[#b21100] hover:text-[#b21100] dark:hover:border-[#ff2e1a] dark:hover:text-[#ff2e1a] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[#b21100] {{#if className}}{{className}}{{/if}}'
+    {{#if title}}title='{{title}}'{{/if}}
+    {{#if ariaLabel}}aria-label='{{ariaLabel}}'{{/if}}
+  >
+    {{{icon}}}
+  </button>
+{{/if}}