datalog-theme 0.6.0

data/_includes/components/enhanced-toc.html

@@ -0,0 +1,209 @@
+{%- comment -%}
+Enhanced table of contents with:
+- Sticky positioning
+- Progress indicator
+- Collapsible sections
+- Active section highlighting
+- Scroll spy functionality
+
+Parameters:
+  - html: Content to parse (default: content)
+  - h_min: Minimum heading level (default: 2)
+  - h_max: Maximum heading level (default: 4)
+  - heading: TOC title (default: "Table of Contents")
+  - collapsible: Make TOC collapsible (default: true)
+  - show_progress: Show reading progress bar (default: true)
+{%- endcomment -%}
+
+{%- assign toc_content = include.html | default: content -%}
+{%- assign h_min = include.h_min | default: 2 -%}
+{%- assign h_max = include.h_max | default: 4 -%}
+{%- assign toc_heading = include.heading | default: "Table of Contents" -%}
+{%- assign collapsible = include.collapsible | default: true -%}
+{%- assign show_progress = include.show_progress | default: true -%}
+
+{%- capture toc_markup -%}
+  {{ toc_content | markdownify | tocify: h_min, h_max }}
+{%- endcapture -%}
+
+{%- if toc_markup contains '<li' -%}
+<aside class="enhanced-toc{% if collapsible %} enhanced-toc--collapsible{% endif %}"
+       data-toc-enhanced
+       aria-label="{{ toc_heading }}"
+       role="doc-toc">
+
+  {%- if show_progress -%}
+  <div class="enhanced-toc__progress" aria-hidden="true">
+    <div class="enhanced-toc__progress-bar" data-toc-progress></div>
+  </div>
+  {%- endif -%}
+
+  <div class="enhanced-toc__header">
+    <h2 class="enhanced-toc__heading">{{ toc_heading }}</h2>
+    {%- if collapsible -%}
+    <button type="button"
+            class="enhanced-toc__toggle"
+            aria-expanded="true"
+            aria-controls="toc-content"
+            data-toc-toggle>
+      <svg class="enhanced-toc__toggle-icon enhanced-toc__toggle-icon--expand"
+           xmlns="http://www.w3.org/2000/svg"
+           width="20"
+           height="20"
+           viewBox="0 0 24 24"
+           fill="none"
+           stroke="currentColor"
+           stroke-width="2"
+           stroke-linecap="round"
+           stroke-linejoin="round"
+           aria-hidden="true">
+        <polyline points="18 15 12 9 6 15"></polyline>
+      </svg>
+      <svg class="enhanced-toc__toggle-icon enhanced-toc__toggle-icon--collapse"
+           xmlns="http://www.w3.org/2000/svg"
+           width="20"
+           height="20"
+           viewBox="0 0 24 24"
+           fill="none"
+           stroke="currentColor"
+           stroke-width="2"
+           stroke-linecap="round"
+           stroke-linejoin="round"
+           aria-hidden="true">
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+      <span class="visually-hidden">Toggle table of contents</span>
+    </button>
+    {%- endif -%}
+  </div>
+
+  <div class="enhanced-toc__content" id="toc-content">
+    {{ toc_markup }}
+  </div>
+
+  <div class="enhanced-toc__stats" aria-live="polite">
+    <span class="enhanced-toc__reading-progress" data-reading-progress>
+      <span class="visually-hidden">Reading progress: </span>
+      <span data-progress-percent>0</span>% complete
+    </span>
+  </div>
+</aside>
+
+<script>
+  (function() {
+    'use strict';
+
+    document.addEventListener('DOMContentLoaded', function() {
+      const toc = document.querySelector('[data-toc-enhanced]');
+      if (!toc) return;
+
+      const tocContent = toc.querySelector('.enhanced-toc__content');
+      const tocLinks = toc.querySelectorAll('.enhanced-toc__content a');
+      const tocToggle = toc.querySelector('[data-toc-toggle]');
+      const progressBar = toc.querySelector('[data-toc-progress]');
+      const progressPercent = toc.querySelector('[data-progress-percent]');
+
+      // Collapsible functionality
+      if (tocToggle) {
+        tocToggle.addEventListener('click', function() {
+          const isExpanded = tocToggle.getAttribute('aria-expanded') === 'true';
+          tocToggle.setAttribute('aria-expanded', !isExpanded);
+          tocContent.hidden = isExpanded;
+          toc.classList.toggle('is-collapsed', isExpanded);
+        });
+      }
+
+      // Get all headings that are in the TOC
+      const headings = Array.from(document.querySelectorAll('.post-content h2[id], .post-content h3[id], .post-content h4[id]'));
+
+      if (headings.length === 0) return;
+
+      // Scroll spy - highlight active section
+      function updateActiveLink() {
+        const scrollPosition = window.scrollY + 100; // Offset for better UX
+
+        let currentHeading = null;
+        for (let i = headings.length - 1; i >= 0; i--) {
+          if (headings[i].offsetTop <= scrollPosition) {
+            currentHeading = headings[i];
+            break;
+          }
+        }
+
+        tocLinks.forEach(link => {
+          link.classList.remove('is-active');
+          if (currentHeading && link.getAttribute('href') === '#' + currentHeading.id) {
+            link.classList.add('is-active');
+          }
+        });
+      }
+
+      // Reading progress
+      function updateProgress() {
+        const windowHeight = window.innerHeight;
+        const documentHeight = document.documentElement.scrollHeight;
+        const scrollTop = window.scrollY;
+        const trackLength = documentHeight - windowHeight;
+        const percentScrolled = Math.floor((scrollTop / trackLength) * 100);
+
+        if (progressBar) {
+          progressBar.style.width = percentScrolled + '%';
+        }
+        if (progressPercent) {
+          progressPercent.textContent = percentScrolled;
+        }
+      }
+
+      // Smooth scroll for TOC links
+      tocLinks.forEach(link => {
+        link.addEventListener('click', function(e) {
+          const targetId = this.getAttribute('href');
+          if (targetId && targetId.startsWith('#')) {
+            e.preventDefault();
+            const targetElement = document.querySelector(targetId);
+            if (targetElement) {
+              const offsetTop = targetElement.offsetTop - 80; // Account for sticky header
+              window.scrollTo({
+                top: offsetTop,
+                behavior: 'smooth'
+              });
+              // Update URL without jumping
+              if (history.pushState) {
+                history.pushState(null, null, targetId);
+              }
+            }
+          }
+        });
+      });
+
+      // Throttle scroll events for performance
+      let scrollTimeout;
+      function throttledScroll() {
+        if (scrollTimeout) {
+          window.cancelAnimationFrame(scrollTimeout);
+        }
+        scrollTimeout = window.requestAnimationFrame(function() {
+          updateActiveLink();
+          updateProgress();
+        });
+      }
+
+      window.addEventListener('scroll', throttledScroll, { passive: true });
+
+      // Initial update
+      updateActiveLink();
+      updateProgress();
+
+      // Make TOC sticky on scroll
+      const tocTop = toc.offsetTop;
+      window.addEventListener('scroll', function() {
+        if (window.scrollY > tocTop - 20) {
+          toc.classList.add('is-sticky');
+        } else {
+          toc.classList.remove('is-sticky');
+        }
+      }, { passive: true });
+    });
+  })();
+</script>
+{%- endif -%}

data/_includes/components/hero.html

@@ -0,0 +1,15 @@
+{% assign hero_bg = page.hero_image | default: '/assets/img/20220607123041_detail.001.png' %}
+<style nonce="{{ page.csp_nonce }}">
+  .hero { --hero-bg: url('{{ hero_bg | relative_url }}'); }
+</style>
+<section class="hero">
+  <div class="hero-overlay"></div>
+  <div class="container hero-content">
+    <h1>{{ page.hero_title | default: site.title }}</h1>
+    <p class="hero-tagline">{{ page.hero_tagline | default: site.hero_tagline }}</p>
+    {% if page.hero_cta_url %}
+      {% capture hero_cta_fallback %}{% t 'home.read_more' %}{% endcapture %}
+      <a class="btn btn-primary" href="{{ page.hero_cta_url | relative_url }}">{{ page.hero_cta_label | default: hero_cta_fallback | strip }}</a>
+    {% endif %}
+  </div>
+</section>

data/_includes/components/language-switcher.html

@@ -0,0 +1,396 @@
+{%- comment -%}
+Multi-language Support (i18n) Component
+Provides language switching and translated content
+
+Parameters:
+  - show_language_switcher: Show language dropdown (default: true)
+  - show_flags: Show country flags (default: true)
+  - position: Position (header, footer, floating) (default: header)
+  - available_languages: Languages to show (default: from config)
+{%- endcomment -%}
+
+{%- assign show_language_switcher = include.show_language_switcher | default: true -%}
+{%- assign show_flags = include.show_flags | default: true -%}
+{%- assign position = include.position | default: "header" -%}
+
+{%- comment -%} Get available languages from config or use defaults {%- endcomment -%}
+{%- if site.phase5_features.i18n.languages -%}
+  {%- assign available_languages = site.phase5_features.i18n.languages -%}
+{%- else -%}
+  {%- assign available_languages = "en,es,fr,de,pt" | split: "," -%}
+{%- endif -%}
+
+{%- comment -%} Detect current language from page or site config {%- endcomment -%}
+{%- assign current_lang = page.lang | default: site.lang | default: "en" -%}
+
+{%- comment -%} Language names and flags {%- endcomment -%}
+{%- assign lang_names = "English,Español,Français,Deutsch,Português" | split: "," -%}
+{%- assign lang_codes = "en,es,fr,de,pt" | split: "," -%}
+{%- assign lang_flags = "🇺🇸,🇪🇸,🇫🇷,🇩🇪,🇵🇹" | split: "," -%}
+
+{%- if show_language_switcher -%}
+  <div class="language-switcher language-switcher--{{ position }}"
+       data-language-switcher
+       role="navigation"
+       aria-label="Language selection">
+
+    <button type="button"
+            class="language-switcher__trigger"
+            data-lang-trigger
+            aria-haspopup="true"
+            aria-expanded="false"
+            aria-controls="language-menu">
+
+      {%- comment -%} Current language display {%- endcomment -%}
+      {%- for code in lang_codes -%}
+        {%- if code == current_lang -%}
+          {%- if show_flags -%}
+            <span class="language-switcher__flag" aria-hidden="true">
+              {{ lang_flags[forloop.index0] }}
+            </span>
+          {%- endif -%}
+          <span class="language-switcher__name">
+            {{ lang_names[forloop.index0] }}
+          </span>
+          <svg class="language-switcher__icon"
+               xmlns="http://www.w3.org/2000/svg"
+               width="16"
+               height="16"
+               viewBox="0 0 24 24"
+               fill="none"
+               stroke="currentColor"
+               stroke-width="2"
+               aria-hidden="true">
+            <polyline points="6 9 12 15 18 9"></polyline>
+          </svg>
+        {%- endif -%}
+      {%- endfor -%}
+    </button>
+
+    <ul class="language-switcher__menu"
+        id="language-menu"
+        data-lang-menu
+        role="menu"
+        hidden>
+
+      {%- for code in available_languages -%}
+        {%- assign lang_index = nil -%}
+        {%- for check_code in lang_codes -%}
+          {%- if check_code == code -%}
+            {%- assign lang_index = forloop.index0 -%}
+            {%- break -%}
+          {%- endif -%}
+        {%- endfor -%}
+
+        {%- if lang_index -%}
+          {%- assign is_current = false -%}
+          {%- if code == current_lang -%}
+            {%- assign is_current = true -%}
+          {%- endif -%}
+
+          <li class="language-switcher__item"
+              role="none">
+            <button type="button"
+                    class="language-switcher__option{% if is_current %} language-switcher__option--active{% endif %}"
+                    data-lang="{{ code }}"
+                    role="menuitem"
+                    {% if is_current %}aria-current="true"{% endif %}
+                    lang="{{ code }}">
+              {%- if show_flags -%}
+                <span class="language-switcher__flag" aria-hidden="true">
+                  {{ lang_flags[lang_index] }}
+                </span>
+              {%- endif -%}
+              <span class="language-switcher__label">
+                {{ lang_names[lang_index] }}
+              </span>
+              {%- if is_current -%}
+                <svg class="language-switcher__check"
+                     xmlns="http://www.w3.org/2000/svg"
+                     width="16"
+                     height="16"
+                     viewBox="0 0 24 24"
+                     fill="none"
+                     stroke="currentColor"
+                     stroke-width="2"
+                     aria-hidden="true">
+                  <polyline points="20 6 9 17 4 12"></polyline>
+                </svg>
+              {%- endif -%}
+            </button>
+          </li>
+        {%- endif -%}
+      {%- endfor -%}
+    </ul>
+  </div>
+
+  {%- comment -%} Translation strings for common UI elements {%- endcomment -%}
+  <script type="application/json" data-i18n-strings>
+  {
+    "en": {
+      "readMore": "Read more",
+      "readLess": "Read less",
+      "share": "Share",
+      "bookmark": "Bookmark",
+      "unbookmark": "Remove bookmark",
+      "comments": "Comments",
+      "noComments": "No comments yet",
+      "loading": "Loading...",
+      "error": "An error occurred",
+      "publishedOn": "Published on",
+      "updatedOn": "Updated on",
+      "by": "by",
+      "in": "in",
+      "minutes": "minutes",
+      "minRead": "min read",
+      "relatedPosts": "Related Posts",
+      "popularPosts": "Popular Posts",
+      "recentPosts": "Recent Posts",
+      "categories": "Categories",
+      "tags": "Tags",
+      "searchPlaceholder": "Search posts...",
+      "noResults": "No results found",
+      "showingResults": "Showing {{count}} results"
+    },
+    "es": {
+      "readMore": "Leer más",
+      "readLess": "Leer menos",
+      "share": "Compartir",
+      "bookmark": "Guardar",
+      "unbookmark": "Eliminar marcador",
+      "comments": "Comentarios",
+      "noComments": "Aún no hay comentarios",
+      "loading": "Cargando...",
+      "error": "Ocurrió un error",
+      "publishedOn": "Publicado el",
+      "updatedOn": "Actualizado el",
+      "by": "por",
+      "in": "en",
+      "minutes": "minutos",
+      "minRead": "min de lectura",
+      "relatedPosts": "Artículos Relacionados",
+      "popularPosts": "Artículos Populares",
+      "recentPosts": "Artículos Recientes",
+      "categories": "Categorías",
+      "tags": "Etiquetas",
+      "searchPlaceholder": "Buscar artículos...",
+      "noResults": "No se encontraron resultados",
+      "showingResults": "Mostrando {{count}} resultados"
+    },
+    "fr": {
+      "readMore": "Lire la suite",
+      "readLess": "Lire moins",
+      "share": "Partager",
+      "bookmark": "Enregistrer",
+      "unbookmark": "Supprimer le signet",
+      "comments": "Commentaires",
+      "noComments": "Pas encore de commentaires",
+      "loading": "Chargement...",
+      "error": "Une erreur s'est produite",
+      "publishedOn": "Publié le",
+      "updatedOn": "Mis à jour le",
+      "by": "par",
+      "in": "dans",
+      "minutes": "minutes",
+      "minRead": "min de lecture",
+      "relatedPosts": "Articles Connexes",
+      "popularPosts": "Articles Populaires",
+      "recentPosts": "Articles Récents",
+      "categories": "Catégories",
+      "tags": "Étiquettes",
+      "searchPlaceholder": "Rechercher des articles...",
+      "noResults": "Aucun résultat trouvé",
+      "showingResults": "Affichage de {{count}} résultats"
+    },
+    "de": {
+      "readMore": "Weiterlesen",
+      "readLess": "Weniger lesen",
+      "share": "Teilen",
+      "bookmark": "Lesezeichen",
+      "unbookmark": "Lesezeichen entfernen",
+      "comments": "Kommentare",
+      "noComments": "Noch keine Kommentare",
+      "loading": "Wird geladen...",
+      "error": "Ein Fehler ist aufgetreten",
+      "publishedOn": "Veröffentlicht am",
+      "updatedOn": "Aktualisiert am",
+      "by": "von",
+      "in": "in",
+      "minutes": "Minuten",
+      "minRead": "Min. Lesezeit",
+      "relatedPosts": "Verwandte Beiträge",
+      "popularPosts": "Beliebte Beiträge",
+      "recentPosts": "Neueste Beiträge",
+      "categories": "Kategorien",
+      "tags": "Schlagwörter",
+      "searchPlaceholder": "Beiträge durchsuchen...",
+      "noResults": "Keine Ergebnisse gefunden",
+      "showingResults": "Zeige {{count}} Ergebnisse"
+    },
+    "pt": {
+      "readMore": "Ler mais",
+      "readLess": "Ler menos",
+      "share": "Compartilhar",
+      "bookmark": "Salvar",
+      "unbookmark": "Remover marcador",
+      "comments": "Comentários",
+      "noComments": "Ainda sem comentários",
+      "loading": "Carregando...",
+      "error": "Ocorreu um erro",
+      "publishedOn": "Publicado em",
+      "updatedOn": "Atualizado em",
+      "by": "por",
+      "in": "em",
+      "minutes": "minutos",
+      "minRead": "min de leitura",
+      "relatedPosts": "Artigos Relacionados",
+      "popularPosts": "Artigos Populares",
+      "recentPosts": "Artigos Recentes",
+      "categories": "Categorias",
+      "tags": "Tags",
+      "searchPlaceholder": "Pesquisar artigos...",
+      "noResults": "Nenhum resultado encontrado",
+      "showingResults": "Mostrando {{count}} resultados"
+    }
+  }
+  </script>
+
+  <script>
+  (function() {
+    'use strict';
+
+    const STORAGE_KEY = 'preferredLanguage';
+
+    class LanguageSwitcher {
+      constructor() {
+        this.currentLang = '{{ current_lang }}';
+        this.translations = {};
+        this.init();
+      }
+
+      init() {
+        // Load translation strings
+        const stringsEl = document.querySelector('[data-i18n-strings]');
+        if (stringsEl) {
+          try {
+            this.translations = JSON.parse(stringsEl.textContent);
+          } catch (e) {
+            console.error('Failed to parse translation strings:', e);
+          }
+        }
+
+        // Restore preferred language
+        const savedLang = this.getPreferredLanguage();
+        if (savedLang && savedLang !== this.currentLang) {
+          this.switchLanguage(savedLang);
+        }
+
+        this.attachEventListeners();
+      }
+
+      attachEventListeners() {
+        const trigger = document.querySelector('[data-lang-trigger]');
+        const menu = document.querySelector('[data-lang-menu]');
+        const options = document.querySelectorAll('[data-lang]');
+
+        if (!trigger || !menu) return;
+
+        // Toggle menu
+        trigger.addEventListener('click', () => {
+          const isHidden = menu.hidden;
+          menu.hidden = !isHidden;
+          trigger.setAttribute('aria-expanded', isHidden);
+        });
+
+        // Close on outside click
+        document.addEventListener('click', (e) => {
+          if (!e.target.closest('[data-language-switcher]')) {
+            menu.hidden = true;
+            trigger.setAttribute('aria-expanded', 'false');
+          }
+        });
+
+        // Language selection
+        options.forEach(option => {
+          option.addEventListener('click', () => {
+            const lang = option.dataset.lang;
+            this.switchLanguage(lang);
+            menu.hidden = true;
+            trigger.setAttribute('aria-expanded', 'false');
+          });
+        });
+
+        // Keyboard navigation
+        menu.addEventListener('keydown', (e) => {
+          if (e.key === 'Escape') {
+            menu.hidden = true;
+            trigger.setAttribute('aria-expanded', 'false');
+            trigger.focus();
+          }
+        });
+      }
+
+      switchLanguage(lang) {
+        this.currentLang = lang;
+        this.savePreferredLanguage(lang);
+
+        // Update document language
+        document.documentElement.lang = lang;
+
+        // Reload page with language parameter
+        const url = new URL(window.location.href);
+        url.searchParams.set('lang', lang);
+
+        // Store scroll position
+        sessionStorage.setItem('scrollPosition', window.pageYOffset);
+
+        window.location.href = url.toString();
+      }
+
+      getPreferredLanguage() {
+        try {
+          return localStorage.getItem(STORAGE_KEY);
+        } catch (e) {
+          return null;
+        }
+      }
+
+      savePreferredLanguage(lang) {
+        try {
+          localStorage.setItem(STORAGE_KEY, lang);
+        } catch (e) {
+          console.error('Failed to save language preference:', e);
+        }
+      }
+
+      // Translate a key
+      t(key, replacements = {}) {
+        let text = this.translations[this.currentLang]?.[key] || key;
+
+        // Replace placeholders
+        Object.keys(replacements).forEach(placeholder => {
+          text = text.replace(`{{${placeholder}}}`, replacements[placeholder]);
+        });
+
+        return text;
+      }
+    }
+
+    // Initialize
+    const languageSwitcher = new LanguageSwitcher();
+
+    // Make available globally
+    window.i18n = {
+      t: (key, replacements) => languageSwitcher.t(key, replacements),
+      currentLang: () => languageSwitcher.currentLang
+    };
+
+    // Restore scroll position
+    const scrollPos = sessionStorage.getItem('scrollPosition');
+    if (scrollPos) {
+      window.scrollTo(0, parseInt(scrollPos, 10));
+      sessionStorage.removeItem('scrollPosition');
+    }
+  })();
+  </script>
+{%- endif -%}

data/_includes/components/math-fallback.html

@@ -0,0 +1,19 @@
+{%- comment -%}
+---
+optional:
+  - expressions
+---
+Renders a noscript fallback for MathJax expressions when available.
+{%- endcomment -%}
+{%- assign expressions = include.expressions | default: '' -%}
+{%- if expressions != blank and expressions != empty and expressions.size > 0 -%}
+  <noscript class="math-noscript">
+    <p class="math-noscript__message">Enable JavaScript to render equations.</p>
+    {%- for expression in expressions -%}
+      <pre class="math-noscript__code">{{ expression.latex | escape }}</pre>
+      {%- if expression.alt -%}
+        <p class="math-noscript__alt">{{ expression.alt }}</p>
+      {%- endif -%}
+    {%- endfor -%}
+  </noscript>
+{%- endif -%}