@fifthbell/brokaw 0.1.39

package/src/templates/partials/headers/header-minimal.hbs

@@ -0,0 +1,16 @@
+<header class='border-b border-slate-200 dark:border-slate-700 relative z-[60] bg-white dark:bg-slate-900 transition-colors' style='view-transition-name: site-header;'>
+  <div class='container mx-auto px-4'>
+    <nav class='flex items-center justify-center h-16'>
+      <div class='bg-[#b21100] text-white p-3'>
+        <a href='{{logoLink}}' aria-label='fifthbell - Home'>
+          <svg class='w-7 h-7' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'>
+            <path d='M10.268 21a2 2 0 0 0 3.464 0'></path>
+            <path d='M3.262 15.326A1 1 0 0 0 4 17h16a1 1 0 0 0 .74-1.673C19.41 13.956 18 12.499 18 8A6 6 0 0 0 6 8c0 4.499-1.411 5.956-2.738 7.326'></path>
+            <path d='M4 2C2.8 3.7 2 5.7 2 8'></path>
+            <path d='M22 8a10 10 0 0 0-2-6'></path>
+          </svg>
+        </a>
+      </div>
+    </nav>
+  </div>
+</header>

package/src/templates/partials/nav/nav-categories.hbs

@@ -0,0 +1,5 @@
+{{#if navigation.categories}}
+  {{#each navigation.categories}}
+    <a href='/{{slug}}' class='block text-lg font-bold text-black dark:text-white hover:text-[#b21100] dark:hover:text-[#ff2e1a] transition-colors'>{{uppercase name}}</a>
+  {{/each}}
+{{/if}}

package/src/templates/partials/shell/doc-end.hbs

@@ -0,0 +1,282 @@
+    </div>
+    <script>
+      (function () {
+        function getLocale() {
+          var lang = document.documentElement.getAttribute('lang') || 'en';
+          if (lang === 'es') return 'es';
+          if (lang === 'it') return 'it';
+          return 'en';
+        }
+
+        function formatRelativeTimestamp(isoString) {
+          if (!isoString) return '';
+
+          var date = new Date(isoString);
+          if (Number.isNaN(date.getTime())) return '';
+
+          var locale = getLocale();
+          var rtf = new Intl.RelativeTimeFormat(locale, { numeric: 'auto' });
+          var diffMs = Date.now() - date.getTime();
+          var diffMinutes = Math.max(1, Math.floor(diffMs / 60000));
+
+          if (diffMinutes < 60) {
+            return rtf.format(-diffMinutes, 'minute');
+          }
+
+          var diffHours = Math.max(1, Math.floor(diffMinutes / 60));
+          if (diffHours < 24) {
+            return rtf.format(-diffHours, 'hour');
+          }
+
+          var diffDays = Math.max(1, Math.floor(diffHours / 24));
+          return rtf.format(-diffDays, 'day');
+        }
+
+        function hydrateRelativeTimes(root) {
+          var scope = root || document;
+          var timestamps = scope.querySelectorAll('.article-time[data-timestamp]');
+
+          timestamps.forEach(function (node) {
+            var isoString = node.getAttribute('data-timestamp');
+            var formatted = formatRelativeTimestamp(isoString);
+            if (formatted) {
+              node.textContent = formatted;
+            }
+          });
+        }
+
+        window.__brokawHydrateRelativeTimes = hydrateRelativeTimes;
+
+        function initRelativeTimes() {
+          hydrateRelativeTimes(document);
+          window.setInterval(function () {
+            hydrateRelativeTimes(document);
+          }, 60000);
+        }
+
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', initRelativeTimes);
+        } else {
+          initRelativeTimes();
+        }
+      })();
+    </script>
+    <script>
+      (function () {
+        function setSlideState(slides, dots, index) {
+          slides.forEach(function (slide, slideIndex) {
+            var active = slideIndex === index;
+            var wasActive = slide.classList.contains('active');
+
+            if (active) {
+              slide.classList.remove('hidden');
+              slide.classList.add('active');
+              slide.classList.remove('pointer-events-none');
+
+              if (!wasActive) {
+                slide.classList.remove('opacity-100');
+                slide.classList.add('opacity-0');
+                window.requestAnimationFrame(function () {
+                  slide.classList.remove('opacity-0');
+                  slide.classList.add('opacity-100');
+                });
+              } else {
+                slide.classList.remove('opacity-0');
+                slide.classList.add('opacity-100');
+              }
+            } else {
+              slide.classList.remove('active');
+              slide.classList.remove('opacity-100');
+              slide.classList.add('opacity-0');
+              slide.classList.add('hidden');
+              slide.classList.add('pointer-events-none');
+            }
+          });
+          dots.forEach(function (dot, dotIndex) {
+            dot.classList.toggle('active', dotIndex === index);
+          });
+        }
+
+        function initCarousels(root) {
+          var scopes = (root || document).querySelectorAll('[data-carousel]');
+          scopes.forEach(function (scope) {
+            if (scope.dataset.carouselBound === 'true') return;
+
+            var slides = Array.prototype.slice.call(scope.querySelectorAll('.carousel-slide'));
+            if (slides.length === 0) {
+              scope.dataset.carouselBound = 'true';
+              return;
+            }
+
+            var dots = Array.prototype.slice.call(scope.querySelectorAll('.carousel-dot'));
+            var nextButton = scope.querySelector('.carousel-next');
+            var activeIndex = slides.findIndex(function (slide) {
+              return slide.classList.contains('active');
+            });
+            var currentIndex = activeIndex >= 0 ? activeIndex : 0;
+            var timer = null;
+
+            function clearTimer() {
+              if (timer === null) return;
+              window.clearInterval(timer);
+              timer = null;
+            }
+
+            function startTimer() {
+              clearTimer();
+              if (slides.length < 2) return;
+
+              timer = window.setInterval(function () {
+                if (!document.contains(scope)) {
+                  clearTimer();
+                  return;
+                }
+                currentIndex = (currentIndex + 1) % slides.length;
+                setSlideState(slides, dots, currentIndex);
+              }, 6000);
+            }
+
+            function goToSlide(nextIndex) {
+              currentIndex = nextIndex;
+              setSlideState(slides, dots, currentIndex);
+              startTimer();
+            }
+
+            dots.forEach(function (dot, dotIndex) {
+              dot.addEventListener('click', function () {
+                goToSlide(dotIndex);
+              });
+            });
+
+            if (nextButton) {
+              nextButton.addEventListener('click', function () {
+                goToSlide((currentIndex + 1) % slides.length);
+              });
+            }
+
+            scope.addEventListener('mouseenter', clearTimer);
+            scope.addEventListener('mouseleave', startTimer);
+
+            setSlideState(slides, dots, currentIndex);
+            startTimer();
+            scope.dataset.carouselBound = 'true';
+          });
+        }
+
+        window.__brokawInitCarousels = initCarousels;
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', function () {
+            initCarousels(document);
+          });
+        } else {
+          initCarousels(document);
+        }
+      })();
+    </script>
+    <script>
+      (function () {
+        var WIDGET_HOST = 'widgets.sofascore.com';
+        var WIDGET_PATH = '/embed/attackMomentum';
+
+        function getWidgetTheme() {
+          return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
+        }
+
+        function updateSofascoreIframe(iframe, theme) {
+          if (!(iframe instanceof HTMLIFrameElement)) return;
+          var src = iframe.getAttribute('src');
+          if (!src) return;
+
+          try {
+            var url = new URL(src, window.location.origin);
+            if (url.hostname !== WIDGET_HOST) return;
+            if (!url.pathname.includes(WIDGET_PATH)) return;
+
+            if (url.searchParams.get('widgetTheme') === theme) return;
+
+            url.searchParams.set('widgetTheme', theme);
+            iframe.setAttribute('src', url.toString());
+          } catch (_error) {
+            // Ignore malformed iframe src values.
+          }
+        }
+
+        function syncSofascoreTheme() {
+          var theme = getWidgetTheme();
+          var iframes = document.querySelectorAll('iframe[src*="widgets.sofascore.com/embed/attackMomentum"]');
+          iframes.forEach(function (iframe) {
+            updateSofascoreIframe(iframe, theme);
+          });
+        }
+
+        if (document.readyState === 'loading') {
+          document.addEventListener('DOMContentLoaded', syncSofascoreTheme);
+        } else {
+          syncSofascoreTheme();
+        }
+
+        var observer = new MutationObserver(function () {
+          syncSofascoreTheme();
+        });
+        observer.observe(document.documentElement, {
+          attributes: true,
+          attributeFilter: ['class'],
+        });
+      })();
+    </script>
+    <script>
+      (function () {
+        if (typeof gtag !== 'function') return;
+
+        /**
+          * Scroll depth tracking
+          * Tracks when users scroll to certain percentages of the page.
+          */
+        var scrollMilestones = [25, 50, 75, 100];
+        var scrollReached = {};
+
+        function checkScrollDepth() {
+          var scrolled = window.scrollY || document.documentElement.scrollTop;
+          var docHeight = document.documentElement.scrollHeight - window.innerHeight;
+          if (docHeight <= 0) return;
+          var pct = Math.min(100, Math.round((scrolled / docHeight) * 100));
+          for (var i = 0; i < scrollMilestones.length; i++) {
+            var milestone = scrollMilestones[i];
+            if (!scrollReached[milestone] && pct >= milestone) {
+              scrollReached[milestone] = true;
+              gtag('event', 'scroll_depth', { percent_scrolled: milestone });
+            }
+          }
+        }
+
+        window.addEventListener('scroll', checkScrollDepth, { passive: true });
+        checkScrollDepth();
+
+        /**
+          * Outbound link click tracking
+          * Tracks clicks on links that navigate away from the current site.
+          */
+        document.addEventListener('click', function (e) {
+          var target = e.target;
+          while (target && target.tagName !== 'A') {
+            target = target.parentElement;
+          }
+          if (!target) return;
+          var href = target.getAttribute('href');
+          if (!href || href.charAt(0) === '#' || href.indexOf('mailto:') === 0 || href.indexOf('tel:') === 0) return;
+          try {
+            var url = new URL(href, window.location.href);
+            if (url.hostname && url.hostname !== window.location.hostname) {
+              gtag('event', 'outbound_click', {
+                link_url: url.href,
+                link_domain: url.hostname,
+                link_text: (target.textContent || '').trim().slice(0, 100),
+                transport_type: 'beacon'
+              });
+            }
+          } catch (_) {}
+        });
+      })();
+    </script>
+  </body>
+</html>

package/src/templates/partials/shell/doc-start-404.hbs

@@ -0,0 +1,28 @@
+<!doctype html>
+<html lang='{{language}}'>
+  <head>
+    <meta charset='UTF-8' />
+    <meta name='viewport' content='width=device-width, initial-scale=1' />
+    <link rel='preconnect' href='https://fonts.googleapis.com' />
+    <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
+    <link
+      href='https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap&family=Encode+Sans:wght@100..900&family=Oswald:wght@200..700&display=swap'
+      rel='stylesheet'
+    />
+    <meta name='description' content='{{#if seo.metaDescription}}{{seo.metaDescription}}{{else}}Page not found{{/if}}' />
+    <link rel='canonical' href='{{canonicalUrl}}' />
+    <title>{{#if seo.metaTitle}}{{seo.metaTitle}}{{else}}404 - Page Not Found | fifthbell{{/if}}</title>
+    <style>{{{styles}}}</style>
+    <!-- Google tag (gtag.js) -->
+    <script async src='https://www.googletagmanager.com/gtag/js?id=G-9SGVGCR4JL'></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-9SGVGCR4JL', {
+        content_group: '404'
+      });
+    </script>
+  </head>
+  <body class='bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100 transition-colors'>
+    <div class='min-h-screen flex flex-col'>

package/src/templates/partials/shell/doc-start-standard.hbs

@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang='{{language}}'>
+  <head>
+    <meta charset='UTF-8' />
+    <meta name='viewport' content='width=device-width, initial-scale=1' />
+    <link rel='preconnect' href='https://fonts.googleapis.com' />
+    <link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
+    <link
+      href='https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Libre+Franklin:ital,wght@0,100..900;1,100..900&display=swap&family=Encode+Sans:wght@100..900&family=Oswald:wght@200..700&display=swap'
+      rel='stylesheet'
+    />
+    {{#if featuredImage.url}}
+      <link rel='preload' as='image' href='{{featuredImage.url}}' fetchpriority='high' />
+    {{/if}}
+    <meta name='description' content='{{#if seo.metaDescription}}{{seo.metaDescription}}{{else}}{{excerpt}}{{/if}}' />
+    <link rel='canonical' href='{{canonicalUrl}}' />
+    <meta property='og:title' content='{{resolveHeadTitle this}}' />
+    <meta property='og:description' content='{{#if seo.metaDescription}}{{seo.metaDescription}}{{else}}{{excerpt}}{{/if}}' />
+    <meta property='og:url' content='{{canonicalUrl}}' />
+    <meta property='og:site_name' content='fifthbell' />
+    {{#if (eq layout 'article-page')}}
+      <meta property='og:type' content='article' />
+    {{else}}
+      <meta property='og:type' content='website' />
+    {{/if}}
+    {{#with (socialImageUrl (coalesce seo.ogImage featuredImage.url)) as |socialImage|}}
+      {{#if socialImage}}
+        <meta property='og:image' content='{{socialImage}}' />
+        <meta property='og:image:type' content='image/jpeg' />
+        <meta property='og:image:width' content='1200' />
+        <meta property='og:image:height' content='630' />
+        <meta property='og:image:alt' content='{{#if featuredImage.alt}}{{featuredImage.alt}}{{else}}{{resolveHeadTitle this}}{{/if}}' />
+      {{/if}}
+      <meta name='twitter:card' content='{{#if socialImage}}summary_large_image{{else}}summary{{/if}}' />
+      {{#if socialImage}}
+        <meta name='twitter:image' content='{{socialImage}}' />
+        <meta name='twitter:image:src' content='{{socialImage}}' />
+        <meta name='twitter:image:alt' content='{{#if featuredImage.alt}}{{featuredImage.alt}}{{else}}{{resolveHeadTitle this}}{{/if}}' />
+      {{/if}}
+    {{/with}}
+    <meta name='twitter:site' content='@thisisfifthbell' />
+    <meta name='twitter:title' content='{{resolveHeadTitle this}}' />
+    <meta name='twitter:description' content='{{#if seo.metaDescription}}{{seo.metaDescription}}{{else}}{{excerpt}}{{/if}}' />
+    <title>{{resolveHeadTitle this}}</title>
+    <style>{{{styles}}}</style>
+    <!-- Google tag (gtag.js) -->
+    <script async src='https://www.googletagmanager.com/gtag/js?id=G-9SGVGCR4JL'></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', 'G-9SGVGCR4JL', {
+        content_group: {{{jsonString layout}}}
+      });
+      gtag('event', 'page_metadata', {
+        content_type: {{{jsonString layout}}},
+        content_id: {{{jsonString id}}},
+        content_language: {{{jsonString language}}},
+        author_name: {{{jsonString authors.[0].name}}},
+        author_slug: {{{jsonString authors.[0].slug}}},
+        category_name: {{{jsonString categories.[0].name}}},
+        category_slug: {{{jsonString categories.[0].slug}}},
+        published_at: {{{jsonString publishedAt}}}
+      });
+    </script>
+  </head>
+  <body class='bg-white dark:bg-slate-950 text-slate-900 dark:text-slate-100 transition-colors'>
+    <div class='min-h-screen flex flex-col'>