@gaulatti/giorgia 0.1.57

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

@@ -0,0 +1,220 @@
+<main id='main-content' class='flex-1 bg-slate-50 dark:bg-slate-950' data-media-page>
+  <section class='mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8'>
+    <div class='mb-6 flex flex-col gap-3 border-b border-slate-200 pb-5 dark:border-slate-800 md:flex-row md:items-end md:justify-between'>
+      <div>
+        <p class='text-xs font-semibold uppercase tracking-widest text-red-700 dark:text-red-400'>Assignment Media</p>
+        <h1 id='media-title' class='mt-2 font-serif text-4xl font-bold leading-tight text-slate-950 dark:text-white md:text-5xl'>Photos</h1>
+        <p id='media-meta' class='mt-2 max-w-2xl text-sm text-slate-600 dark:text-slate-400'>Loading assignment photos.</p>
+      </div>
+      <a id='media-refresh' href='' class='inline-flex items-center justify-center border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-800 transition hover:border-slate-950 hover:text-slate-950 dark:border-slate-700 dark:text-slate-200 dark:hover:border-white dark:hover:text-white'>Refresh</a>
+    </div>
+    <div id='media-status' class='border border-slate-200 bg-white p-6 text-sm text-slate-600 dark:border-slate-800 dark:bg-slate-900 dark:text-slate-300'>Loading photos.</div>
+    <div id='media-grid' class='hidden grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'></div>
+    <nav id='media-pagination' aria-label='Pagination' class='mt-8 hidden items-center justify-center gap-6'></nav>
+  </section>
+</main>
+<script>
+  (function () {
+    var PAGE_SIZE = 48;
+    var page = document.querySelector('[data-media-page]');
+    if (!page) return;
+
+    var title = document.getElementById('media-title');
+    var meta = document.getElementById('media-meta');
+    var status = document.getElementById('media-status');
+    var grid = document.getElementById('media-grid');
+    var pagination = document.getElementById('media-pagination');
+    var refresh = document.getElementById('media-refresh');
+    var loadedData = null;
+
+    function text(value, fallback) {
+      if (typeof value !== 'string') return fallback || '';
+      var trimmed = value.trim();
+      return trimmed || fallback || '';
+    }
+
+    function escapeHtml(value) {
+      return String(value || '')
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+    }
+
+    function assignmentIdFromPath() {
+      var match = window.location.pathname.match(/^\/media\/([^/]+)\/?$/);
+      return match ? decodeURIComponent(match[1]) : '';
+    }
+
+    function formatDate(value) {
+      if (!value) return '';
+      var date = new Date(value);
+      if (Number.isNaN(date.getTime())) return '';
+      return date.toLocaleString(undefined, {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: '2-digit'
+      });
+    }
+
+    function setStatus(message) {
+      status.textContent = message;
+      status.classList.remove('hidden');
+      grid.classList.add('hidden');
+      pagination.classList.add('hidden');
+      pagination.classList.remove('flex');
+    }
+
+    function imageUrl(item) {
+      return text(item && (item.url || item.jpgUrl || item.originalUrl), '');
+    }
+
+    function currentPageFromUrl() {
+      var value = new URL(window.location.href).searchParams.get('page') || '1';
+      var pageNumber = parseInt(value, 10);
+      return Number.isFinite(pageNumber) && pageNumber > 0 ? pageNumber : 1;
+    }
+
+    function pageHref(pageNumber) {
+      var url = new URL(window.location.href);
+      if (pageNumber <= 1) {
+        url.searchParams.delete('page');
+      } else {
+        url.searchParams.set('page', String(pageNumber));
+      }
+      return url.pathname + url.search + url.hash;
+    }
+
+    function paginationPages(currentPage, totalPages) {
+      var pages = [];
+      var lastAdded = 0;
+
+      function addPage(pageNumber) {
+        if (pageNumber < 1 || pageNumber > totalPages || pageNumber === lastAdded) return;
+        if (lastAdded && pageNumber > lastAdded + 1) pages.push({ ellipsis: true });
+        pages.push({ label: pageNumber, page: pageNumber, current: pageNumber === currentPage });
+        lastAdded = pageNumber;
+      }
+
+      addPage(1);
+      for (var pageNumber = currentPage - 2; pageNumber <= currentPage + 2; pageNumber += 1) {
+        addPage(pageNumber);
+      }
+      addPage(totalPages);
+
+      return pages;
+    }
+
+    function renderPagination(currentPage, totalPages) {
+      if (totalPages <= 1) {
+        pagination.innerHTML = '';
+        pagination.classList.add('hidden');
+        pagination.classList.remove('flex');
+        return;
+      }
+
+      var prev = currentPage > 1
+        ? '<a href="' + escapeHtml(pageHref(currentPage - 1)) + '" class="inline-flex items-center gap-1 text-sm font-medium text-slate-500 transition-colors hover:text-[#8f0d00] dark:text-slate-400 dark:hover:text-[#ff2e1a]" aria-label="Previous page"><svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/></svg>Prev</a>'
+        : '<span class="inline-flex items-center gap-1 text-sm font-medium text-slate-300 dark:text-slate-700" aria-disabled="true"><svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd"/></svg>Prev</span>';
+
+      var items = paginationPages(currentPage, totalPages)
+        .map(function (item) {
+          if (item.ellipsis) {
+            return '<li><span class="inline-flex h-9 w-9 items-center justify-center text-sm text-slate-400 dark:text-slate-500">...</span></li>';
+          }
+          if (item.current) {
+            return '<li><span aria-current="page" class="inline-flex h-9 w-9 items-center justify-center border-b-2 border-[#b21100] text-sm font-bold text-[#8f0d00] dark:border-[#ff2e1a] dark:text-[#ff2e1a]">' + item.label + '</span></li>';
+          }
+          return '<li><a href="' + escapeHtml(pageHref(item.page)) + '" class="inline-flex h-9 w-9 items-center justify-center text-sm font-medium text-slate-600 transition-colors hover:text-[#8f0d00] dark:text-slate-300 dark:hover:text-[#ff2e1a]">' + item.label + '</a></li>';
+        })
+        .join('');
+
+      var next = currentPage < totalPages
+        ? '<a href="' + escapeHtml(pageHref(currentPage + 1)) + '" class="inline-flex items-center gap-1 text-sm font-medium text-slate-500 transition-colors hover:text-[#8f0d00] dark:text-slate-400 dark:hover:text-[#ff2e1a]" aria-label="Next page">Next<svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg></a>'
+        : '<span class="inline-flex items-center gap-1 text-sm font-medium text-slate-300 dark:text-slate-700" aria-disabled="true">Next<svg viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4" aria-hidden="true"><path fill-rule="evenodd" d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 1 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg></span>';
+
+      pagination.innerHTML = prev + '<ol class="flex items-center gap-0.5">' + items + '</ol>' + next;
+      pagination.classList.remove('hidden');
+      pagination.classList.add('flex');
+    }
+
+    function render(data) {
+      loadedData = data;
+      var assignment = data.assignment || data;
+      var photos = Array.isArray(data.photos) ? data.photos : Array.isArray(data.media) ? data.media : [];
+      var name = text(assignment.name, 'Assignment photos');
+      var generatedAt = formatDate(data.generatedAt);
+      var totalPages = Math.max(1, Math.ceil(photos.length / PAGE_SIZE));
+      var currentPage = Math.min(currentPageFromUrl(), totalPages);
+      var start = (currentPage - 1) * PAGE_SIZE;
+      var visiblePhotos = photos.slice(start, start + PAGE_SIZE);
+
+      title.textContent = name;
+      meta.textContent = photos.length + ' photo' + (photos.length === 1 ? '' : 's') + (totalPages > 1 ? ' - Page ' + currentPage + ' of ' + totalPages : '') + (generatedAt ? ' updated ' + generatedAt : '');
+      refresh.href = window.location.href;
+
+      if (!photos.length) {
+        setStatus('No photos have been published for this assignment yet.');
+        return;
+      }
+
+      grid.innerHTML = visiblePhotos
+        .map(function (item) {
+          var url = imageUrl(item);
+          var alt = text(item.alt || item.caption || item.originalFilename || item.filename, 'Assignment photo');
+          var caption = text(item.caption || item.originalFilename || item.filename, '');
+          if (!url) return '';
+          return (
+            '<figure class="group overflow-hidden border border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900">' +
+              '<a href="' + escapeHtml(url) + '" target="_blank" rel="noopener noreferrer" class="block bg-slate-200 dark:bg-slate-800">' +
+                '<img src="' + escapeHtml(url) + '" alt="' + escapeHtml(alt) + '" loading="lazy" class="aspect-[4/3] h-full w-full object-cover transition duration-200 group-hover:scale-[1.02]" />' +
+              '</a>' +
+              (caption ? '<figcaption class="px-3 py-2 text-xs leading-snug text-slate-600 dark:text-slate-400">' + escapeHtml(caption) + '</figcaption>' : '') +
+            '</figure>'
+          );
+        })
+        .join('');
+
+      status.classList.add('hidden');
+      grid.classList.remove('hidden');
+      grid.classList.add('grid');
+      renderPagination(currentPage, totalPages);
+    }
+
+    var assignmentId = assignmentIdFromPath();
+    if (!assignmentId) {
+      setStatus('Missing assignment id.');
+      return;
+    }
+
+    refresh.href = window.location.href;
+    pagination.addEventListener('click', function (event) {
+      var target = event.target;
+      if (!(target instanceof Element)) return;
+      var anchor = target.closest('a[href]');
+      if (!(anchor instanceof HTMLAnchorElement)) return;
+      event.preventDefault();
+      window.history.pushState({}, '', anchor.getAttribute('href') || window.location.href);
+      render(loadedData);
+    });
+
+    window.addEventListener('popstate', function () {
+      if (loadedData) render(loadedData);
+    });
+
+    fetch('https://cdn.fifthbell.com/contents/assignments/' + encodeURIComponent(assignmentId) + '.json', {
+      cache: 'no-store'
+    })
+      .then(function (response) {
+        if (!response.ok) throw new Error(String(response.status));
+        return response.json();
+      })
+      .then(render)
+      .catch(function () {
+        setStatus('We could not load this assignment right now.');
+      });
+  })();
+</script>

package/src/templates/partials/components/not-found/main.hbs

@@ -0,0 +1,28 @@
+<main class='flex-1 container mx-auto px-4 py-16'>
+  <div class='max-w-2xl mx-auto text-center'>
+    <div class='mb-8'>
+      <h1 class='text-9xl font-bold text-[#8f0d00] dark:text-[#ff2e1a]' aria-label='Page not found error'>404</h1>
+    </div>
+
+    <h2 class='text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4'>Page Not Found</h2>
+
+    <p class='text-xl text-slate-600 dark:text-slate-400 mb-8 font-serif leading-relaxed'>
+      We couldn't find the page you're looking for. The article or page you're trying to access may have been moved, deleted, or never existed.
+    </p>
+
+    <a href='{{logoLink}}' class='inline-flex items-center gap-2 bg-[#b21100] hover:bg-[#8a0d00] dark:bg-[#ff2e1a] dark:hover:bg-[#cc2515] text-white font-bold py-3 px-6 rounded transition-colors'>
+      <span>Go to Homepage</span>
+    </a>
+
+    <div class='mt-12 pt-8 border-t border-slate-200 dark:border-slate-800'>
+      <p class='text-sm text-slate-600 dark:text-slate-400 mb-4'>Or explore our categories:</p>
+      <div class='flex flex-wrap justify-center gap-4'>
+        {{#if navigation.categories}}
+          {{#each navigation.categories}}
+            <a href='/{{slug}}' class='text-[#8f0d00] dark:text-[#ff2e1a] hover:underline font-semibold'>{{name}}</a>
+          {{/each}}
+        {{/if}}
+      </div>
+    </div>
+  </div>
+</main>

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-[#8f0d00]'>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-[#8f0d00] 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>