@gaulatti/giorgia 0.1.57

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,41 @@
+<!doctype html>
+<html lang='{{language}}'>
+  <head>
+    <meta charset='UTF-8' />
+    <meta name='viewport' content='width=device-width, initial-scale=1' />
+    <link rel='preload' as='style' href='https://cdn.fifthbell.com/content/fonts/fonts.css' onload="this.rel='stylesheet';this.media='all'" />
+    <noscript><link href='https://cdn.fifthbell.com/content/fonts/fonts.css' rel='stylesheet' /></noscript>
+    <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>
+    {{#if rumConfig}}
+    <script>
+      (function(n,i,v,r,s,c,u,x,z){
+        x=window;z=x[s]=x[s]||function(){z.q.push(arguments)};z.q=[];u=i.createElement(v);
+        u.async=1;u.src=r;u.setAttribute('crossorigin','');i.head.appendChild(u);
+      })(window,document,'script','https://rum.aws.amazon.com/loader.js','RUM');
+      RUM('create', {{{jsonString rumConfig.appMonitorName}}}, {
+        identityPoolId: {{{jsonString rumConfig.identityPoolId}}},
+        guestRoleArn: {{{jsonString rumConfig.guestRoleArn}}},
+        sessionSampleRate: 1,
+        endpoint: {{{jsonString 'https://dataplane.rum.us-east-1.amazonaws.com'}}},
+        telemetries: ['performance', 'errors', 'http'],
+        allowCookies: true
+      });
+    </script>
+    {{/if}}
+    {{#if gaConfig}}
+    <script async src='https://www.googletagmanager.com/gtag/js?id={{{gaConfig.measurementId}}}'></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', {{{jsonString gaConfig.measurementId}}}, {
+        content_group: '404'
+      });
+    </script>
+    {{/if}}
+  </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,86 @@
+<!doctype html>
+<html lang='{{language}}'{{#if mourningMode}} class='dark'{{/if}}>
+  <head>
+    <meta charset='UTF-8' />
+    <meta name='viewport' content='width=device-width, initial-scale=1' />
+    <link href='https://cdn.fifthbell.com/content/fonts/fonts.css' rel='stylesheet' />
+    {{#if (eq layout 'homepage')}}
+      {{#if hero.url}}
+        <link rel='preload' as='image' href='{{hero.url}}' fetchpriority='high' />
+      {{/if}}
+    {{else}}
+      {{#if featuredImage.url}}
+        <link rel='preload' as='image' href='{{featuredImage.url}}' fetchpriority='high' />
+      {{/if}}
+    {{/if}}
+    <meta name='description' content='{{#if seo.metaDescription}}{{seo.metaDescription}}{{else if excerpt}}{{excerpt}}{{else}}{{resolveHeadTitle this}}{{/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>
+    {{#if rumConfig}}
+    <script>
+      (function(n,i,v,r,s,c,u,x,z){
+        x=window;z=x[s]=x[s]||function(){z.q.push(arguments)};z.q=[];u=i.createElement(v);
+        u.async=1;u.src=r;u.setAttribute('crossorigin','');i.head.appendChild(u);
+      })(window,document,'script','https://rum.aws.amazon.com/loader.js','RUM');
+      RUM('create', {{{jsonString rumConfig.appMonitorName}}}, {
+        identityPoolId: {{{jsonString rumConfig.identityPoolId}}},
+        guestRoleArn: {{{jsonString rumConfig.guestRoleArn}}},
+        sessionSampleRate: 1,
+        endpoint: {{{jsonString 'https://dataplane.rum.us-east-1.amazonaws.com'}}},
+        telemetries: ['performance', 'errors', 'http'],
+        allowCookies: true
+      });
+    </script>
+    {{/if}}
+    {{#if gaConfig}}
+    <script async src='https://www.googletagmanager.com/gtag/js?id={{{gaConfig.measurementId}}}'></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', {{{jsonString gaConfig.measurementId}}}, {
+        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>
+    {{/if}}
+  </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/templates/instagram-image.hbs

@@ -0,0 +1,175 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=1080, initial-scale=1.0" />
+  <link href="https://cdn.fifthbell.com/content/fonts/fonts.css" rel="stylesheet">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      width: 1080px;
+      height: 1350px;
+      overflow: hidden;
+      background-color: #000;
+      position: relative;
+    }
+
+    .hero-image {
+      position: absolute;
+      inset: 0;
+      height: 100%;
+      background-color: #000;
+    }
+
+    .hero-image img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      opacity: 0.9;
+    }
+
+    .card-container {
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      flex-direction: column;
+      z-index: 10;
+    }
+
+    .card-container header {
+      display: flex;
+      align-items: center;
+      background-color: rgba(0, 0, 0, 0.70);
+      backdrop-filter: blur(8px);
+      -webkit-backdrop-filter: blur(8px);
+      position: relative;
+      z-index: 1;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
+    }
+
+    .card-container header .category-label {
+      margin-left: 32px;
+    }
+
+    .logo-container {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 0 32px;
+      background-color: #b21100;
+    }
+
+    .brand-logo {
+      display: flex;
+      align-items: center;
+    }
+
+    .qr-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 16px;
+      background-color: #ffffff;
+    }
+
+    .qr-code {
+      width: 119px;
+      height: 119px;
+      padding: 10px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .qr-code svg {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    .card-container main {
+      display: flex;
+      flex-direction: column;
+      background-color: rgba(0, 0, 0, 0.35);
+      backdrop-filter: blur(16px);
+      -webkit-backdrop-filter: blur(16px);
+      padding: 110px;
+      padding-top: 36px;
+    }
+
+    .accent-bar {
+      width: 64px;
+      height: 6px;
+      background-color: #b21100;
+      margin-bottom: 24px;
+    }
+
+    .category-label {
+      font-family: 'Encode Sans Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+      font-size: 80px;
+      line-height: 119px;
+      font-weight: 600;
+      color: #ffffff;
+      text-transform: uppercase;
+      letter-spacing: 0.02em;
+    }
+
+    .title-text {
+      font-family: 'Encode Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+      font-size: 68px;
+      line-height: 1.1;
+      font-weight: 700;
+      color: #ffffff;
+      text-wrap: balance;
+      display: -webkit-box;
+      -webkit-line-clamp: 5;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  </style>
+</head>
+<body>
+  <div class="hero-image">
+    <img src="{{imageUrl}}" alt="Featured Image" />
+  </div>
+
+  <div class="card-container">
+    <header>
+      <div class="logo-container">
+        <div class="brand-logo" style="color: white; width: 140px; height: 119px; display: flex; align-items: center; justify-content: end;">
+          <svg width="61" height="61" 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>
+        </div>
+      </div>
+      {{#if qrCodeHtml}}
+        {{{qrCodeHtml}}}
+      {{else if url}}
+        {{{instagramQrCode url}}}
+      {{/if}}
+      <div class="category-label">{{categoryName}}</div>
+    </header>
+    <main>
+      <div class="accent-bar"></div>
+      <h1 class="title-text">{{title}}</h1>
+    </main>
+  </div>
+
+  <script>
+    window.onload = () => {
+      if (document.fonts) {
+        document.fonts.ready.then(() => {
+          setTimeout(() => { document.body.setAttribute('data-ready', '1'); }, 300);
+        });
+      } else {
+        setTimeout(() => { document.body.setAttribute('data-ready', '1'); }, 1000);
+      }
+    };
+  </script>
+</body>
+</html>