@fifthbell/brokaw 0.1.39

package/src/templates/partials/blocks/x.hbs

@@ -0,0 +1,74 @@
+<figure class='my-8 w-full'>
+  <div class='x-embed-shell overflow-hidden w-full' data-tweet-id='{{xTweetId url}}'>
+    {{#if (xEmbedUrl url)}}
+      <iframe
+        title='Embedded X post'
+        src='{{xEmbedUrl url}}'
+        data-x-embed-frame='true'
+        width='100%'
+        style='border:0; display:block; width:100%; min-height:260px; height:380px;'
+        loading='lazy'
+        referrerpolicy='no-referrer-when-downgrade'
+        allowfullscreen
+      ></iframe>
+    {{else}}
+      <div class='p-4 text-sm text-slate-600 dark:text-slate-300'>
+        Post preview unavailable.
+      </div>
+    {{/if}}
+  </div>
+  <script>
+    (function () {
+      const shell = document.currentScript?.previousElementSibling;
+      if (!shell) return;
+
+      const frame = shell.querySelector('iframe[data-x-embed-frame="true"]');
+      if (!frame) return;
+
+      const setFrameHeight = (target, nextHeight) => {
+        if (!target || !Number.isFinite(nextHeight)) return;
+        const clamped = Math.max(220, Math.min(2200, Math.ceil(nextHeight)));
+        target.style.height = `${clamped}px`;
+        target.height = String(clamped);
+      };
+
+      if (!window.__xEmbedResizeBound) {
+        window.__xEmbedResizeBound = true;
+        window.addEventListener('message', (event) => {
+          if (typeof event.origin !== 'string' || !event.origin.includes('platform.twitter.com')) return;
+
+          let data = event.data;
+          if (typeof data === 'string') {
+            try {
+              data = JSON.parse(data);
+            } catch {
+              return;
+            }
+          }
+
+          if (!data || typeof data !== 'object') return;
+
+          const candidateHeights = [
+            data.height,
+            data?.details?.height,
+            Array.isArray(data?.params) ? data.params[0] : undefined
+          ];
+
+          const nextHeight = candidateHeights.find((value) => typeof value === 'number');
+          if (typeof nextHeight !== 'number') return;
+
+          const allFrames = document.querySelectorAll('iframe[data-x-embed-frame="true"]');
+          for (const candidate of allFrames) {
+            if (candidate.contentWindow === event.source) {
+              setFrameHeight(candidate, nextHeight);
+              break;
+            }
+          }
+        });
+      }
+    })();
+  </script>
+  <figcaption class='text-sm text-slate-500 dark:text-slate-400 mt-2'>
+    <a href='{{url}}' target='_blank' rel='noopener noreferrer' class='hover:underline'>View post on X</a>
+  </figcaption>
+</figure>

package/src/templates/partials/blocks/youtube.hbs

@@ -0,0 +1,12 @@
+<figure class='my-8 w-full'>
+  <div class='aspect-video overflow-hidden w-full'>
+    <iframe
+      class='w-full h-full'
+      src='https://www.youtube.com/embed/{{videoId}}?enablejsapi=1'
+      title='YouTube video player'
+      loading='lazy'
+      allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+      allowfullscreen
+    ></iframe>
+  </div>
+</figure>

package/src/templates/partials/components/article-main.hbs

@@ -0,0 +1,159 @@
+<main class='flex-1 container mx-auto px-4 grid gap-4 grid-cols-1 lg:grid-cols-12 mt-4'>
+  <div class='col-span-12 lg:col-span-4'>
+    {{#if featuredImage}}
+      <div class='mb-6 overflow-hidden aspect-video bg-slate-100'>
+        <img
+          src='{{featuredImage.url}}'
+          alt='{{featuredImage.alt}}'
+          class='w-full h-full object-cover'
+          fetchpriority='high'
+          loading='eager'
+          decoding='async'
+        />
+      </div>
+    {{/if}}
+
+    <div class='mb-3 lg:hidden'>
+      <span class='text-xs font-bold text-[#b21100] uppercase tracking-wider'>{{#with (lookup categories 0)}}{{name}}{{/with}}</span>
+    </div>
+
+    <h1 class='text-4xl font-bold text-slate-900 dark:text-slate-100 mb-4 leading-tight font-serif'>{{title}}</h1>
+    <p class='text-slate-600 dark:text-slate-400 text-xl mb-3 font-serif leading-relaxed'>{{excerpt}}</p>
+    <p class='text-sm text-slate-500 dark:text-slate-400'><span class='article-time' data-timestamp='{{publishedAt}}'>{{formatDate publishedAt}}</span></p>
+
+    <div class='mt-6 pt-6 border-t border-slate-200 dark:border-slate-800'>
+      <p class='text-xs uppercase tracking-wider text-slate-500 dark:text-slate-500 mb-3 font-sans'>Share</p>
+      <div class='flex items-center gap-3'>
+        <a href='#' data-share='twitter' class='social-share-btn group p-2 rounded-full border border-slate-300 dark:border-slate-700 hover:border-slate-900 dark:hover:border-slate-100 hover:bg-slate-50 dark:hover:bg-slate-900 transition-all' aria-label='Share on Twitter' title='Share on Twitter'>
+          <svg class='w-4 h-4 text-slate-600 dark:text-slate-400 group-hover:text-slate-900 dark:group-hover:text-slate-100 transition-colors' viewBox='0 0 24 24' fill='currentColor'>
+            <path d='M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z'></path>
+          </svg>
+        </a>
+        <a href='#' data-share='bluesky' class='social-share-btn group p-2 rounded-full border border-slate-300 dark:border-slate-700 hover:border-[#0085ff] dark:hover:border-[#0085ff] hover:bg-slate-50 dark:hover:bg-slate-900 transition-all' aria-label='Share on Bluesky' title='Share on Bluesky'>
+          <svg class='w-4 h-4 text-slate-600 dark:text-slate-400 group-hover:text-[#0085ff] dark:group-hover:text-[#0085ff] transition-colors' viewBox='0 0 600 530' fill='currentColor'>
+            <path d='M135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-.0174-2.9357-1.1937.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z'></path>
+          </svg>
+        </a>
+        <a href='#' data-share='facebook' class='social-share-btn group p-2 rounded-full border border-slate-300 dark:border-slate-700 hover:border-[#1877F2] dark:hover:border-[#1877F2] hover:bg-slate-50 dark:hover:bg-slate-900 transition-all' aria-label='Share on Facebook' title='Share on Facebook'>
+          <svg class='w-4 h-4 text-slate-600 dark:text-slate-400 group-hover:text-[#1877F2] dark:group-hover:text-[#1877F2] transition-colors' viewBox='0 0 24 24' fill='currentColor'>
+            <path d='M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z'></path>
+          </svg>
+        </a>
+        <a href='#' data-share='whatsapp' class='social-share-btn group p-2 rounded-full border border-slate-300 dark:border-slate-700 hover:border-[#25D366] dark:hover:border-[#25D366] hover:bg-slate-50 dark:hover:bg-slate-900 transition-all' aria-label='Share on WhatsApp' title='Share on WhatsApp'>
+          <svg class='w-4 h-4 text-slate-600 dark:text-slate-400 group-hover:text-[#25D366] dark:group-hover:text-[#25D366] transition-colors' viewBox='0 0 24 24' fill='currentColor'>
+            <path d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413Z'></path>
+          </svg>
+        </a>
+        <a href='#' data-share='linkedin' class='social-share-btn group p-2 rounded-full border border-slate-300 dark:border-slate-700 hover:border-[#0A66C2] dark:hover:border-[#0A66C2] hover:bg-slate-50 dark:hover:bg-slate-900 transition-all' aria-label='Share on LinkedIn' title='Share on LinkedIn'>
+          <svg class='w-4 h-4 text-slate-600 dark:text-slate-400 group-hover:text-[#0A66C2] dark:group-hover:text-[#0A66C2] transition-colors' viewBox='0 0 24 24' fill='currentColor'>
+            <path d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'></path>
+          </svg>
+        </a>
+        <a href='#' data-share='reddit' class='social-share-btn group p-2 rounded-full border border-slate-300 dark:border-slate-700 hover:border-[#FF4500] dark:hover:border-[#FF4500] hover:bg-slate-50 dark:hover:bg-slate-900 transition-all' aria-label='Share on Reddit' title='Share on Reddit'>
+          <svg class='w-4 h-4 text-slate-600 dark:text-slate-400 group-hover:text-[#FF4500] dark:group-hover:text-[#FF4500] transition-colors' viewBox='0 0 24 24' fill='currentColor'>
+            <path d='M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z'></path>
+          </svg>
+        </a>
+        <a href='#' data-share='telegram' class='social-share-btn group p-2 rounded-full border border-slate-300 dark:border-slate-700 hover:border-[#26A5E4] dark:hover:border-[#26A5E4] hover:bg-slate-50 dark:hover:bg-slate-900 transition-all' aria-label='Share on Telegram' title='Share on Telegram'>
+          <svg class='w-4 h-4 text-slate-600 dark:text-slate-400 group-hover:text-[#26A5E4] dark:group-hover:text-[#26A5E4] transition-colors' viewBox='0 0 24 24' fill='currentColor'>
+            <path d='M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z'></path>
+          </svg>
+        </a>
+        <a href='#' data-share='email' class='social-share-btn group p-2 rounded-full border border-slate-300 dark:border-slate-700 hover:border-slate-900 dark:hover:border-slate-100 hover:bg-slate-50 dark:hover:bg-slate-900 transition-all' aria-label='Share via Email' title='Share via Email'>
+          <svg class='w-4 h-4 text-slate-600 dark:text-slate-400 group-hover:text-slate-900 dark:group-hover:text-slate-100 transition-colors' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
+            <rect width='20' height='16' x='2' y='4' rx='2'></rect>
+            <path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'></path>
+          </svg>
+        </a>
+      </div>
+    </div>
+  </div>
+
+  <div class='hidden lg:flex col-span-1 items-start justify-center'>
+    <span class='text-4xl font-bold text-[#b21100] dark:text-[#ff2e1a] text-right md:[writing-mode:vertical-rl] md:[transform:rotate(180deg)]'>{{#with (lookup categories 0)}}{{name}}{{/with}}</span>
+  </div>
+
+  <div class='col-span-12 lg:col-span-7 prose dark:prose-invert max-w-none'>
+    {{#each body}}
+      {{> (lookup . 'type')}}
+    {{/each}}
+
+    {{#if articles.[1]}}
+      <section class='not-prose mt-12 pt-6 border-t border-slate-200 dark:border-slate-800'>
+        <h2 class='text-sm font-bold uppercase tracking-wider text-slate-500 dark:text-slate-400 mb-6'>Related Articles</h2>
+        <div class='grid grid-cols-1 md:grid-cols-2 gap-8'>
+          {{#each (slice articles 0 6)}}
+            {{> components/snack
+              url=url
+              title=title
+              image=featuredImage.url
+              alt=featuredImage.alt
+              categories=categories
+              excerpt=excerpt
+              readTime=(formatDate publishedAt)
+              className='flex flex-col h-full'
+            }}
+          {{/each}}
+        </div>
+      </section>
+    {{/if}}
+  </div>
+</main>
+<script>
+  (function () {
+    if (window.__fifthbellShareBound) return;
+    window.__fifthbellShareBound = true;
+
+    document.addEventListener('click', (event) => {
+      const target = event.target;
+      if (!target || !(target instanceof Element)) return;
+      const button = target.closest('.social-share-btn');
+      if (!button) return;
+
+      event.preventDefault();
+
+      const platform = button.getAttribute('data-share');
+      const url = encodeURIComponent(window.location.href);
+      const title = encodeURIComponent(document.querySelector('h1')?.textContent || '');
+      let shareUrl = '';
+
+      switch (platform) {
+        case 'twitter':
+          shareUrl = `https://twitter.com/intent/tweet?url=${url}&text=${title}`;
+          break;
+        case 'bluesky':
+          shareUrl = `https://bsky.app/intent/compose?text=${title}%20${url}`;
+          break;
+        case 'facebook':
+          shareUrl = `https://www.facebook.com/sharer/sharer.php?u=${url}`;
+          break;
+        case 'whatsapp':
+          shareUrl = `https://wa.me/?text=${title}%20${url}`;
+          break;
+        case 'linkedin':
+          shareUrl = `https://www.linkedin.com/sharing/share-offsite/?url=${url}`;
+          break;
+        case 'reddit':
+          shareUrl = `https://reddit.com/submit?url=${url}&title=${title}`;
+          break;
+        case 'telegram':
+          shareUrl = `https://t.me/share/url?url=${url}&text=${title}`;
+          break;
+        case 'email':
+          shareUrl = `mailto:?subject=${title}&body=${title}%0A%0A${url}`;
+          break;
+      }
+
+      if (!shareUrl) return;
+      window.open(shareUrl, '_blank', 'width=600,height=400,noopener,noreferrer');
+
+      if (typeof gtag === 'function') {
+        gtag('event', 'share', {
+          method: platform,
+          content_type: 'article',
+          item_id: window.location.pathname
+        });
+      }
+    });
+  })();
+</script>

package/src/templates/partials/components/breaking-news/live-updates-column.hbs

@@ -0,0 +1,29 @@
+<section class='flex flex-col h-full'>
+  <div class='bg-white dark:bg-slate-900 xl:rounded-lg xl:px-8 px-6 pt-8 pb-6 flex flex-col h-full'>
+    <h2 class='text-lg font-medium leading-6 text-slate-900 dark:text-slate-100 mb-6' style='font-variant: small-caps;'>live updates</h2>
+
+    {{#> 'ui/scroll-area' className='flex-1 min-h-0 w-full'}}
+      <div class='flex flex-col w-full gap-0'>
+        {{#each updates}}
+          <div class='flex gap-4 w-full xl:pb-6 pb-8'>
+            <div class='flex flex-col items-center gap-1'>
+              <div class='w-2 h-2 rounded-full bg-[#4FC3F7] flex-shrink-0'></div>
+            </div>
+            <div class='flex flex-col gap-3 flex-grow'>
+              <span class='text-base font-medium leading-[22px] text-[#4FC3F7]'>{{#if timestamp}}{{formatDate timestamp}}{{else}}{{time}}{{/if}}</span>
+              {{#if html}}
+                <div class='text-base leading-[22px] text-slate-900 dark:text-slate-100 [&_img]:w-full [&_img]:h-auto [&_img]:rounded-md [&_img]:mt-2'>
+                  {{{html}}}
+                </div>
+              {{else}}
+                <p class='text-base leading-[22px] text-slate-900 dark:text-slate-100'>{{text}}</p>
+              {{/if}}
+            </div>
+          </div>
+        {{else}}
+          <p class='text-base leading-[22px] text-slate-600 dark:text-slate-400'>No live updates yet.</p>
+        {{/each}}
+      </div>
+    {{/ 'ui/scroll-area'}}
+  </div>
+</section>

package/src/templates/partials/components/breaking-news.hbs

@@ -0,0 +1,56 @@
+<div class='mx-auto xl:px-4 pb-8 my-4 {{#if displayClass}}{{displayClass}}{{/if}}'>
+  <div class='grid grid-cols-1 xl:grid-cols-2 xl:gap-8 gap-6 mb-4 px-4 xl:px-0'>
+    {{#with main}}
+      <section class='flex flex-col h-full'>
+        <a href='{{url}}' class='relative w-full h-[360px] xl:rounded-t-lg overflow-hidden z-10 block' style='box-shadow: 0px 14px 14px -8px rgba(41, 41, 43, 0.08);'>
+          <img src='{{image}}' alt='{{alt}}' class='w-full h-full object-cover' fetchpriority='high' />
+        </a>
+
+        <div class='bg-white dark:bg-slate-900 xl:rounded-b-lg xl:px-8 px-6 pt-8 pb-6 flex flex-col items-center gap-6 h-full'>
+          <div class='inline-flex items-center justify-center px-3 py-2 bg-[#cc0000] text-white'>
+            <span class='text-xs font-bold tracking-[0.08em] uppercase'>{{category}}</span>
+          </div>
+
+          <div class='flex flex-col items-center gap-2 w-full'>
+            <h1 class='text-[40px] font-bold font-encode leading-[45px] text-center tracking-[1px] text-slate-900 dark:text-slate-100'>
+              <a href='{{url}}' class='hover:text-[#b21100] dark:hover:text-[#ff2e1a] transition-colors'>{{title}}</a>
+            </h1>
+            <p class='text-[22px] leading-8 text-center text-slate-600 dark:text-slate-400 font-serif'>{{excerpt}}</p>
+
+            {{#if liveUrl}}
+              <a
+                href='{{liveUrl}}'
+                class='inline-flex items-center justify-center w-full sm:w-auto px-6 py-3 mt-2 rounded-md bg-[#cc0000] text-white text-sm font-bold uppercase tracking-[0.08em] shadow-[0_10px_20px_-12px_rgba(204,0,0,0.9)] hover:bg-[#b21100] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-[#cc0000] transition-colors'
+              >
+                View Live Story
+              </a>
+            {{/if}}
+
+            {{#with (sofascoreWidgetUrl sofascore_id) as |widgetUrl|}}
+              <div class='w-full mt-4 mb-2 rounded-lg overflow-hidden border border-slate-200 dark:border-slate-700'>
+                <iframe
+                  width='100%'
+                  height='286'
+                  src='{{widgetUrl}}'
+                  title='SofaScore Attack Momentum'
+                  frameborder='0'
+                  scrolling='no'
+                  loading='lazy'
+                  referrerpolicy='no-referrer-when-downgrade'
+                  style='border:0;'
+                ></iframe>
+                {{#with (sofascoreMatchUrl sofascore_id) as |matchUrl|}}
+                  <div style='font-size:12px;font-family:Arial,sans-serif'>
+                    <a href='{{matchUrl}}' target='_blank' rel='noreferrer'>{{title}} Live Score</a>
+                  </div>
+                {{/with}}
+              </div>
+            {{/with}}
+          </div>
+        </div>
+      </section>
+    {{/with}}
+
+    {{> components/breaking-news/live-updates-column updates=updates}}
+  </div>
+</div>

package/src/templates/partials/components/category/header.hbs

@@ -0,0 +1,5 @@
+<header class='mb-8 pt-8'>
+  <div class='flex items-center gap-2 mb-6 border-l-4 border-[#b21100] pl-4'>
+    <h1 class='text-4xl font-bold tracking-tight font-serif text-slate-900 dark:text-slate-100'>{{title}}</h1>
+  </div>
+</header>

package/src/templates/partials/components/category/main-grid.hbs

@@ -0,0 +1,55 @@
+<div class='grid grid-cols-1 lg:grid-cols-12 gap-8 mb-4'>
+  <section class='lg:col-span-8'>
+    {{#with (lookup articles 0)}}
+      <article class='mb-8'>
+        <a href='{{url}}' class='block mb-4 overflow-hidden aspect-video bg-slate-100'>
+          <img src='{{featuredImage.url}}' alt='{{featuredImage.alt}}' class='w-full h-full object-cover transition-transform duration-500 hover:scale-105' />
+        </a>
+
+        <div class='flex items-center text-xs font-bold uppercase tracking-wider text-[#b21100] mb-3'>
+          <span>{{#with (lookup categories 0)}}{{name}}{{/with}}</span>
+        </div>
+
+        <h2 class='text-4xl font-bold leading-tight text-slate-900 dark:text-slate-100 mb-4 font-encode'>
+          <a href='{{url}}' class='hover:underline decoration-[#b21100]'>{{title}}</a>
+        </h2>
+
+        <p class='text-slate-600 dark:text-slate-400 font-serif leading-relaxed line-clamp-3 text-xl mb-3'>{{excerpt}}</p>
+        <span class='text-sm text-slate-500 dark:text-slate-400 block font-sans'>{{formatDate updatedAt}}</span>
+      </article>
+    {{/with}}
+
+    <div class='grid grid-cols-1 md:grid-cols-2 gap-6'>
+      {{#each (slice articles 1 3)}}
+        <article class='group'>
+          <a href='{{url}}' class='block mb-4 overflow-hidden aspect-[3/2] bg-slate-100'>
+            <img src='{{featuredImage.url}}' alt='{{featuredImage.alt}}' class='w-full h-full object-cover transition-transform duration-500 group-hover:scale-105' />
+          </a>
+          <div class='space-y-2'>
+            <span class='text-xs font-bold text-[#b21100] uppercase tracking-wider'>{{#with (lookup categories 0)}}{{name}}{{/with}}</span>
+            <h3 class='text-2xl font-bold font-serif leading-tight text-slate-900 dark:text-slate-100 group-hover:underline'>
+              <a href='{{url}}'>{{title}}</a>
+            </h3>
+            <p class='text-xl text-slate-500 dark:text-slate-400 line-clamp-3 font-serif'>{{excerpt}}</p>
+          </div>
+        </article>
+      {{/each}}
+    </div>
+  </section>
+
+  <aside class='lg:col-span-4'>
+    <div class='flex flex-col justify-between h-full'>
+      {{#each (slice articles 3 11)}}
+        {{> components/snack
+          url=url
+          title=title
+          image=featuredImage.url
+          alt=featuredImage.alt
+          readTime=(formatDate updatedAt)
+          showExcerpt=false
+          className='pt-6 pb-6 border-b border-slate-200 dark:border-slate-800'
+        }}
+      {{/each}}
+    </div>
+  </aside>
+</div>

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

@@ -0,0 +1,7 @@
+<main class='flex-1 container mx-auto px-4'>
+  <div class='mx-auto px-4 pb-8'>
+    {{> components/category/header}}
+    {{> components/category/main-grid}}
+    {{> components/category/more-grid}}
+  </div>
+</main>

package/src/templates/partials/components/category/more-grid.hbs

@@ -0,0 +1,26 @@
+<div class='border-t border-slate-200 dark:border-slate-800 pt-8 mt-8'>
+  <div class='flex items-center gap-2 mb-6 border-l-4 border-[#b21100] pl-4'>
+    <h2 class='text-2xl font-bold tracking-tight font-serif text-slate-900 dark:text-slate-100'>More in {{title}}</h2>
+  </div>
+
+  <div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6'>
+    {{#each (slice articles 13 25)}}
+      <article class='group flex flex-col h-full'>
+        <a href='{{url}}' class='block mb-3 overflow-hidden aspect-[3/2] bg-slate-100'>
+          <img src='{{featuredImage.url}}' alt='{{featuredImage.alt}}' class='w-full h-full object-cover transition-transform duration-500 group-hover:scale-105' />
+        </a>
+        <div class='flex-1 flex flex-col'>
+          <div class='flex items-center text-xs font-bold uppercase tracking-wider text-[#b21100] mb-2'>
+            <span>{{#with (lookup categories 0)}}{{name}}{{/with}}</span>
+            <span class='mx-2 text-slate-400 dark:text-slate-500'>•</span>
+            <span class='text-slate-500 dark:text-slate-400 font-normal'>{{formatDate updatedAt}}</span>
+          </div>
+          <h3 class='text-lg font-bold font-encode text-slate-900 dark:text-slate-100 mb-2 leading-snug group-hover:underline decoration-[#b21100]'>
+            <a href='{{url}}'>{{title}}</a>
+          </h3>
+          <p class='text-slate-500 dark:text-slate-400 text-base font-serif line-clamp-3 leading-relaxed'>{{excerpt}}</p>
+        </div>
+      </article>
+    {{/each}}
+  </div>
+</div>

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

@@ -0,0 +1,73 @@
+<section class='border-b border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 pb-8 mb-8 font-sans' data-nosnippet data-carousel='editorial'>
+  <div class='container mx-auto px-4 pt-8'>
+    <div class='grid grid-cols-1 lg:grid-cols-12 gap-8 items-stretch'>
+      <div class='lg:col-span-12 xl:col-span-5 flex flex-col justify-center space-y-4 pt-2 order-2 lg:order-1'>
+        <span class='kicker text-[#b21100] dark:text-[#ff2e1a] text-xs font-bold uppercase tracking-widest mb-1 block relative pl-3 before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:w-2 before:h-2 before:bg-[#b21100] before:rounded-sm'>
+          Lead Story
+        </span>
+
+        <h1 class='headline text-4xl lg:text-5xl xl:text-6xl font-bold text-slate-900 dark:text-slate-100 tracking-tight leading-[1] font-serif'>
+          <a href='{{articleUrl slug=slug categories=categories language=@root.language}}' class='hover:underline decoration-4 decoration-[#b21100]/20 underline-offset-4'>{{title}}</a>
+        </h1>
+
+        <p class='deck text-lg md:text-xl text-slate-600 dark:text-slate-400 font-serif leading-relaxed mt-4'>{{excerpt}}</p>
+
+        <div class='flex items-center space-x-4 pt-4 border-t border-slate-100 dark:border-slate-800 mt-4'>
+          <span class='text-xs font-bold uppercase tracking-wider text-slate-500'>{{#with (lookup categories 0)}}{{name}}{{else}}Top Stories{{/with}}</span>
+          <span class='text-xs text-slate-400'>•</span>
+          <a href='{{articleUrl slug=slug categories=categories language=@root.language}}' class='text-xs font-bold uppercase tracking-wider text-black dark:text-white hover:text-[#b21100] transition-colors'>Read Now &rarr;</a>
+        </div>
+
+        {{#if related.[0]}}
+          <div class='grid grid-cols-2 gap-4 pt-4 border-t border-slate-100 dark:border-slate-800 mt-4'>
+            {{#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-slate-900 dark:text-slate-100 font-sans'
+              }}
+            {{/each}}
+          </div>
+        {{/if}}
+      </div>
+
+      <div class='lg:col-span-12 xl:col-span-7 relative order-1 lg:order-2 flex flex-col'>
+        <div class='carousel-background flex-1 w-full overflow-hidden bg-slate-100 dark:bg-slate-800 relative shadow-sm'>
+          {{#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: 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: 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: url(https://images.unsplash.com/photo-1586348943529-beaae6c28db9?w=1440&h=882&fit=crop);'></div>
+            {{/if}}
+          {{/if}}
+        </div>
+
+        <div class='flex justify-between items-center mt-2 text-xs text-slate-500 font-sans border-t border-slate-100 dark:border-slate-800 pt-2'>
+          <div class='flex items-center gap-2'>
+            {{#if slides}}
+              {{#each slides}}
+                <button class='carousel-dot w-2 h-2 rounded-full {{#if @first}}active{{/if}}' data-slide='{{@index}}'></button>
+              {{/each}}
+            {{else}}
+              <button class='carousel-dot w-2 h-2 rounded-full active' data-slide='0'></button>
+            {{/if}}
+            <button class='carousel-next w-7 h-7 flex items-center justify-center text-slate-700 dark:text-slate-300 hover:text-[#b21100] dark:hover:text-[#ff2e1a] transition-colors' aria-label='Next slide'>
+              <svg width='14' height='14' viewBox='0 0 15 27' fill='none'>
+                <path d='M1.5 1.5L13.5 13.5L1.5 25.5' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'></path>
+              </svg>
+            </button>
+          </div>
+          <span class='italic text-slate-400'>Photo: Agency/Wire</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,15 @@
+<article class='{{#if className}}{{className}}{{else}}flex flex-col gap-2{{/if}}'>
+  <div class='flex items-center gap-4'>
+    <span class='{{#if timeClass}}{{timeClass}}{{else}}text-[10px] uppercase tracking-wider text-[#b21100] dark:text-[#ff2e1a] font-bold{{/if}}{{#if timestamp}} article-time{{/if}}'{{#if timestamp}} data-timestamp='{{timestamp}}'{{/if}}>{{time}}</span>
+  </div>
+  <div class='flex gap-2 lg:gap-4 items-start'>
+    <div class='flex-1'>
+      <h3 class='{{#if titleClass}}{{titleClass}}{{else}}text-sm lg:text-base leading-tight lg:leading-[22px] font-medium text-slate-900 dark:text-slate-100 font-sans{{/if}}'>
+        <a href='{{url}}' class='{{#if linkClass}}{{linkClass}}{{else}}hover:text-[#b21100] dark:hover:text-[#ff2e1a] transition-colors{{/if}}'>{{title}}</a>
+      </h3>
+    </div>
+    {{#unless (eq showImage false)}}
+      <a href='{{url}}' class='{{#if imageSizeClass}}{{imageSizeClass}}{{else}}w-12 h-12 lg:w-16 lg:h-16{{/if}} flex-shrink-0 rounded {{#if imageFallbackBgClass}}{{imageFallbackBgClass}}{{else}}bg-slate-300 dark:bg-slate-700{{/if}}' style='background: url({{#if image}}{{image}}{{else}}{{featuredImage.url}}{{/if}}) center/cover;'></a>
+    {{/unless}}
+  </div>
+</article>

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

@@ -0,0 +1 @@
+{{> components/editorial-hero}}

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

@@ -0,0 +1 @@
+{{> components/spotlight-hero}}