datalog-theme 0.6.0

data/_includes/components/user-preferences.html

@@ -0,0 +1,566 @@
+{%- comment -%}
+User Preferences Panel Component
+Provides customizable reading experience controls
+
+Parameters:
+  - show_theme_toggle: Show dark/light theme toggle (default: true)
+  - show_font_size: Show font size controls (default: true)
+  - show_reading_mode: Show reading mode toggle (default: true)
+  - show_layout: Show layout preferences (default: true)
+  - position: Panel position (floating, sidebar) (default: floating)
+{%- endcomment -%}
+
+{%- assign show_theme_toggle = include.show_theme_toggle | default: true -%}
+{%- assign show_font_size = include.show_font_size | default: true -%}
+{%- assign show_reading_mode = include.show_reading_mode | default: true -%}
+{%- assign show_layout = include.show_layout | default: true -%}
+{%- assign position = include.position | default: "floating" -%}
+
+<div class="user-preferences user-preferences--{{ position }}"
+     data-user-preferences
+     aria-label="User preferences">
+
+  <button type="button"
+          class="user-preferences__trigger"
+          data-preferences-trigger
+          aria-label="Open preferences"
+          aria-expanded="false"
+          aria-controls="preferences-panel">
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="24"
+         height="24"
+         viewBox="0 0 24 24"
+         fill="none"
+         stroke="currentColor"
+         stroke-width="2"
+         stroke-linecap="round"
+         stroke-linejoin="round"
+         aria-hidden="true">
+      <circle cx="12" cy="12" r="3"></circle>
+      <path d="M12 1v6m0 6v6m7.071-13.071l-4.243 4.243m0 5.656l4.243 4.243M1 12h6m6 0h6m-13.071 7.071l4.243-4.243m5.656 0l4.243 4.243"></path>
+    </svg>
+    <span class="user-preferences__trigger-text">Preferences</span>
+  </button>
+
+  <div class="user-preferences__panel"
+       id="preferences-panel"
+       data-preferences-panel
+       role="dialog"
+       aria-modal="true"
+       aria-labelledby="preferences-title"
+       hidden>
+
+    <div class="user-preferences__header">
+      <h3 class="user-preferences__title" id="preferences-title">
+        <svg xmlns="http://www.w3.org/2000/svg"
+             width="20"
+             height="20"
+             viewBox="0 0 24 24"
+             fill="none"
+             stroke="currentColor"
+             stroke-width="2"
+             aria-hidden="true">
+          <circle cx="12" cy="12" r="3"></circle>
+          <path d="M12 1v6m0 6v6m7.071-13.071l-4.243 4.243m0 5.656l4.243 4.243M1 12h6m6 0h6m-13.071 7.071l4.243-4.243m5.656 0l4.243 4.243"></path>
+        </svg>
+        Customize Your Experience
+      </h3>
+
+      <button type="button"
+              class="user-preferences__close"
+              data-preferences-close
+              aria-label="Close preferences">
+        <svg xmlns="http://www.w3.org/2000/svg"
+             width="20"
+             height="20"
+             viewBox="0 0 24 24"
+             fill="none"
+             stroke="currentColor"
+             stroke-width="2"
+             aria-hidden="true">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+
+    <div class="user-preferences__content">
+
+      {%- if show_theme_toggle -%}
+        <div class="preference-section">
+          <h4 class="preference-section__title">
+            <svg xmlns="http://www.w3.org/2000/svg"
+                 width="18"
+                 height="18"
+                 viewBox="0 0 24 24"
+                 fill="none"
+                 stroke="currentColor"
+                 stroke-width="2"
+                 aria-hidden="true">
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+            </svg>
+            Theme
+          </h4>
+
+          <div class="preference-section__control">
+            <div class="theme-toggle" data-theme-control>
+              <button type="button"
+                      class="theme-toggle__option"
+                      data-theme="light"
+                      aria-label="Light theme">
+                <svg xmlns="http://www.w3.org/2000/svg"
+                     width="20"
+                     height="20"
+                     viewBox="0 0 24 24"
+                     fill="none"
+                     stroke="currentColor"
+                     stroke-width="2">
+                  <circle cx="12" cy="12" r="5"></circle>
+                  <line x1="12" y1="1" x2="12" y2="3"></line>
+                  <line x1="12" y1="21" x2="12" y2="23"></line>
+                  <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+                  <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+                  <line x1="1" y1="12" x2="3" y2="12"></line>
+                  <line x1="21" y1="12" x2="23" y2="12"></line>
+                  <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+                  <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+                </svg>
+                <span>Light</span>
+              </button>
+
+              <button type="button"
+                      class="theme-toggle__option"
+                      data-theme="dark"
+                      aria-label="Dark theme">
+                <svg xmlns="http://www.w3.org/2000/svg"
+                     width="20"
+                     height="20"
+                     viewBox="0 0 24 24"
+                     fill="none"
+                     stroke="currentColor"
+                     stroke-width="2">
+                  <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+                </svg>
+                <span>Dark</span>
+              </button>
+
+              <button type="button"
+                      class="theme-toggle__option"
+                      data-theme="auto"
+                      aria-label="Auto theme (system)">
+                <svg xmlns="http://www.w3.org/2000/svg"
+                     width="20"
+                     height="20"
+                     viewBox="0 0 24 24"
+                     fill="none"
+                     stroke="currentColor"
+                     stroke-width="2">
+                  <rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect>
+                  <line x1="8" y1="21" x2="16" y2="21"></line>
+                  <line x1="12" y1="17" x2="12" y2="21"></line>
+                </svg>
+                <span>Auto</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      {%- endif -%}
+
+      {%- if show_font_size -%}
+        <div class="preference-section">
+          <h4 class="preference-section__title">
+            <svg xmlns="http://www.w3.org/2000/svg"
+                 width="18"
+                 height="18"
+                 viewBox="0 0 24 24"
+                 fill="none"
+                 stroke="currentColor"
+                 stroke-width="2"
+                 aria-hidden="true">
+              <polyline points="4 7 4 4 20 4 20 7"></polyline>
+              <line x1="9" y1="20" x2="15" y2="20"></line>
+              <line x1="12" y1="4" x2="12" y2="20"></line>
+            </svg>
+            Font Size
+          </h4>
+
+          <div class="preference-section__control">
+            <div class="font-size-control" data-font-size-control>
+              <button type="button"
+                      class="font-size-control__button"
+                      data-action="decrease"
+                      aria-label="Decrease font size">
+                <span class="font-size-control__label">A-</span>
+              </button>
+
+              <div class="font-size-control__display">
+                <span data-font-size-value>100</span>%
+              </div>
+
+              <button type="button"
+                      class="font-size-control__button"
+                      data-action="increase"
+                      aria-label="Increase font size">
+                <span class="font-size-control__label">A+</span>
+              </button>
+
+              <button type="button"
+                      class="font-size-control__reset"
+                      data-action="reset"
+                      aria-label="Reset font size">
+                Reset
+              </button>
+            </div>
+          </div>
+        </div>
+      {%- endif -%}
+
+      {%- if show_reading_mode -%}
+        <div class="preference-section">
+          <h4 class="preference-section__title">
+            <svg xmlns="http://www.w3.org/2000/svg"
+                 width="18"
+                 height="18"
+                 viewBox="0 0 24 24"
+                 fill="none"
+                 stroke="currentColor"
+                 stroke-width="2"
+                 aria-hidden="true">
+              <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
+              <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
+            </svg>
+            Reading Mode
+          </h4>
+
+          <div class="preference-section__control">
+            <label class="toggle-switch">
+              <input type="checkbox"
+                     data-reading-mode-toggle
+                     aria-label="Enable reading mode (focus mode)">
+              <span class="toggle-switch__slider"></span>
+              <span class="toggle-switch__label">
+                Focus mode (minimal distractions)
+              </span>
+            </label>
+          </div>
+        </div>
+      {%- endif -%}
+
+      {%- if show_layout -%}
+        <div class="preference-section">
+          <h4 class="preference-section__title">
+            <svg xmlns="http://www.w3.org/2000/svg"
+                 width="18"
+                 height="18"
+                 viewBox="0 0 24 24"
+                 fill="none"
+                 stroke="currentColor"
+                 stroke-width="2"
+                 aria-hidden="true">
+              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
+              <line x1="9" y1="3" x2="9" y2="21"></line>
+            </svg>
+            Layout
+          </h4>
+
+          <div class="preference-section__control">
+            <div class="layout-toggle" data-layout-control>
+              <button type="button"
+                      class="layout-toggle__option"
+                      data-layout="default"
+                      aria-label="Default layout">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="3" y="3" width="18" height="18" rx="2"></rect>
+                </svg>
+                <span>Default</span>
+              </button>
+
+              <button type="button"
+                      class="layout-toggle__option"
+                      data-layout="wide"
+                      aria-label="Wide layout">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="2" y="6" width="20" height="12" rx="2"></rect>
+                </svg>
+                <span>Wide</span>
+              </button>
+            </div>
+          </div>
+        </div>
+      {%- endif -%}
+
+    </div>
+
+    <div class="user-preferences__footer">
+      <button type="button"
+              class="user-preferences__reset-all"
+              data-reset-all-preferences
+              aria-label="Reset all preferences to defaults">
+        <svg 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="1 4 1 10 7 10"></polyline>
+          <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
+        </svg>
+        Reset All to Defaults
+      </button>
+    </div>
+
+  </div>
+
+  <div class="user-preferences__backdrop"
+       data-preferences-backdrop
+       hidden></div>
+</div>
+
+<script>
+(function() {
+  'use strict';
+
+  const STORAGE_KEY = 'userPreferences';
+  const DEFAULTS = {
+    theme: 'auto',
+    fontSize: 100,
+    readingMode: false,
+    layout: 'default'
+  };
+
+  class UserPreferences {
+    constructor() {
+      this.preferences = this.loadPreferences();
+      this.panel = document.querySelector('[data-user-preferences]');
+      if (!this.panel) return;
+
+      this.initElements();
+      this.attachEventListeners();
+      this.applyPreferences();
+    }
+
+    initElements() {
+      this.trigger = this.panel.querySelector('[data-preferences-trigger]');
+      this.panelContent = this.panel.querySelector('[data-preferences-panel]');
+      this.backdrop = this.panel.querySelector('[data-preferences-backdrop]');
+      this.closeBtn = this.panel.querySelector('[data-preferences-close]');
+    }
+
+    attachEventListeners() {
+      // Open/close panel
+      this.trigger?.addEventListener('click', () => this.togglePanel());
+      this.closeBtn?.addEventListener('click', () => this.closePanel());
+      this.backdrop?.addEventListener('click', () => this.closePanel());
+
+      // ESC key to close
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && !this.panelContent?.hidden) {
+          this.closePanel();
+        }
+      });
+
+      // Theme control
+      const themeButtons = this.panel.querySelectorAll('[data-theme]');
+      themeButtons.forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          const theme = e.currentTarget.dataset.theme;
+          this.setTheme(theme);
+        });
+      });
+
+      // Font size control
+      const fontSizeControl = this.panel.querySelector('[data-font-size-control]');
+      if (fontSizeControl) {
+        fontSizeControl.addEventListener('click', (e) => {
+          const button = e.target.closest('button');
+          if (!button) return;
+
+          const action = button.dataset.action;
+          if (action === 'increase') this.changeFontSize(10);
+          else if (action === 'decrease') this.changeFontSize(-10);
+          else if (action === 'reset') this.resetFontSize();
+        });
+      }
+
+      // Reading mode toggle
+      const readingModeToggle = this.panel.querySelector('[data-reading-mode-toggle]');
+      readingModeToggle?.addEventListener('change', (e) => {
+        this.setReadingMode(e.target.checked);
+      });
+
+      // Layout control
+      const layoutButtons = this.panel.querySelectorAll('[data-layout]');
+      layoutButtons.forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          const layout = e.currentTarget.dataset.layout;
+          this.setLayout(layout);
+        });
+      });
+
+      // Reset all
+      const resetAllBtn = this.panel.querySelector('[data-reset-all-preferences]');
+      resetAllBtn?.addEventListener('click', () => this.resetAll());
+    }
+
+    togglePanel() {
+      const isHidden = this.panelContent.hidden;
+      if (isHidden) {
+        this.openPanel();
+      } else {
+        this.closePanel();
+      }
+    }
+
+    openPanel() {
+      this.panelContent.hidden = false;
+      this.backdrop.hidden = false;
+      this.trigger?.setAttribute('aria-expanded', 'true');
+      document.body.style.overflow = 'hidden';
+
+      // Focus first interactive element
+      const firstButton = this.panelContent.querySelector('button');
+      firstButton?.focus();
+    }
+
+    closePanel() {
+      this.panelContent.hidden = true;
+      this.backdrop.hidden = true;
+      this.trigger?.setAttribute('aria-expanded', 'false');
+      document.body.style.overflow = '';
+      this.trigger?.focus();
+    }
+
+    setTheme(theme) {
+      this.preferences.theme = theme;
+      this.savePreferences();
+      this.applyTheme();
+      this.updateThemeButtons();
+    }
+
+    applyTheme() {
+      const { theme } = this.preferences;
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const isDark = theme === 'auto' ? prefersDark : theme === 'dark';
+
+      document.body.classList.toggle('dark-mode', isDark);
+      document.body.dataset.theme = isDark ? 'dark' : 'light';
+      document.documentElement.dataset.theme = isDark ? 'dark' : 'light';
+    }
+
+    updateThemeButtons() {
+      const buttons = this.panel.querySelectorAll('[data-theme]');
+      buttons.forEach(btn => {
+        const isActive = btn.dataset.theme === this.preferences.theme;
+        btn.classList.toggle('theme-toggle__option--active', isActive);
+        btn.setAttribute('aria-pressed', isActive);
+      });
+    }
+
+    changeFontSize(delta) {
+      const newSize = Math.max(80, Math.min(140, this.preferences.fontSize + delta));
+      this.preferences.fontSize = newSize;
+      this.savePreferences();
+      this.applyFontSize();
+    }
+
+    resetFontSize() {
+      this.preferences.fontSize = DEFAULTS.fontSize;
+      this.savePreferences();
+      this.applyFontSize();
+    }
+
+    applyFontSize() {
+      const { fontSize } = this.preferences;
+      document.documentElement.style.setProperty('--user-font-size', `${fontSize}%`);
+
+      const display = this.panel.querySelector('[data-font-size-value]');
+      if (display) display.textContent = fontSize;
+    }
+
+    setReadingMode(enabled) {
+      this.preferences.readingMode = enabled;
+      this.savePreferences();
+      this.applyReadingMode();
+    }
+
+    applyReadingMode() {
+      document.body.classList.toggle('reading-mode', this.preferences.readingMode);
+
+      const toggle = this.panel.querySelector('[data-reading-mode-toggle]');
+      if (toggle) toggle.checked = this.preferences.readingMode;
+    }
+
+    setLayout(layout) {
+      this.preferences.layout = layout;
+      this.savePreferences();
+      this.applyLayout();
+      this.updateLayoutButtons();
+    }
+
+    applyLayout() {
+      document.body.dataset.layout = this.preferences.layout;
+    }
+
+    updateLayoutButtons() {
+      const buttons = this.panel.querySelectorAll('[data-layout]');
+      buttons.forEach(btn => {
+        const isActive = btn.dataset.layout === this.preferences.layout;
+        btn.classList.toggle('layout-toggle__option--active', isActive);
+        btn.setAttribute('aria-pressed', isActive);
+      });
+    }
+
+    resetAll() {
+      if (confirm('Reset all preferences to defaults?')) {
+        this.preferences = { ...DEFAULTS };
+        this.savePreferences();
+        this.applyPreferences();
+      }
+    }
+
+    applyPreferences() {
+      this.applyTheme();
+      this.applyFontSize();
+      this.applyReadingMode();
+      this.applyLayout();
+      this.updateThemeButtons();
+      this.updateLayoutButtons();
+    }
+
+    loadPreferences() {
+      try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        return stored ? { ...DEFAULTS, ...JSON.parse(stored) } : { ...DEFAULTS };
+      } catch (e) {
+        console.error('Failed to load preferences:', e);
+        return { ...DEFAULTS };
+      }
+    }
+
+    savePreferences() {
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(this.preferences));
+      } catch (e) {
+        console.error('Failed to save preferences:', e);
+      }
+    }
+  }
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => new UserPreferences());
+  } else {
+    new UserPreferences();
+  }
+
+  // Listen for system theme changes
+  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+    const prefs = new UserPreferences();
+    if (prefs.preferences.theme === 'auto') {
+      prefs.applyTheme();
+    }
+  });
+})();
+</script>

data/_includes/components/visualization-card.html

@@ -0,0 +1,24 @@
+{% assign tech = visualization.tech | default: 'plotly' %}
+<article class="card viz-card" data-viz-card data-viz-tech="{{ tech }}" data-viz-tags="{{ visualization.tags | join: ',' }}">
+  <p class="card-meta">
+    <span class="post-meta__badge">{{ tech }}</span>
+    {% if visualization.version %}<span>v{{ visualization.version }}</span>{% endif %}
+  </p>
+  <h3>{{ visualization.title }}</h3>
+  <p>{{ visualization.summary }}</p>
+  {% if visualization.tags %}
+  <ul class="post-list-item__tags">
+    {% for tag in visualization.tags %}
+    <li>{{ tag }}</li>
+    {% endfor %}
+  </ul>
+  {% endif %}
+  <div class="project-links">
+    {% if visualization.demo %}
+    <a class="btn btn-primary" href="{{ visualization.demo }}" target="_blank" rel="noopener">Live demo</a>
+    {% endif %}
+    {% if visualization.source %}
+    <a class="btn btn-secondary" href="{{ visualization.source }}" target="_blank" rel="noopener">Source</a>
+    {% endif %}
+  </div>
+</article>

data/_includes/components/viz-table-fallback.html

@@ -0,0 +1,19 @@
+<template id="viz-table-fallback-template" data-component="viz-table-fallback">
+  <div class="viz-table-container" data-viz-table-container>
+    <button
+      type="button"
+      class="viz-table-toggle"
+      data-viz-table-toggle
+      aria-expanded="false"
+    >
+      Show data table
+    </button>
+    <div class="viz-table-wrapper" data-viz-table-wrapper hidden>
+      <table class="viz-table" data-viz-table>
+        <caption data-viz-table-caption></caption>
+        <thead data-viz-table-head></thead>
+        <tbody data-viz-table-body></tbody>
+      </table>
+    </div>
+  </div>
+</template>

data/_includes/csp-meta.html

@@ -0,0 +1,17 @@
+{% assign csp_registry = site.data.csp | default: {} %}
+{% assign nonce_source = page.csp_nonce | default: csp_registry.nonces[page.path] | default: csp_registry.nonces[page.url] | default: '' %}
+{% assign script_hashes = page.csp_hashes | default: [] %}
+{% capture script_hash_directives -%}
+  {%- for hash in script_hashes -%}
+    'sha256-{{ hash }}'{% unless forloop.last %} {% endunless %}
+  {%- endfor -%}
+{%- endcapture -%}
+<meta http-equiv="Content-Security-Policy" content="
+  default-src 'self';
+  script-src 'self' 'nonce-{{ nonce_source }}'{% if script_hash_directives != '' %} {{ script_hash_directives | strip }}{% endif %} https://cdn.jsdelivr.net https://cdnjs.cloudflare.com https://www.googletagmanager.com https://www.google-analytics.com;
+  style-src 'self' 'nonce-{{ nonce_source }}' https://fonts.googleapis.com https://cdn.jsdelivr.net;
+  img-src 'self' data: https:;
+  font-src 'self' https://fonts.gstatic.com data:;
+  connect-src 'self' https://api.github.com https://www.google-analytics.com https://cdn.jsdelivr.net;
+  frame-src 'self' https://observablehq.com;
+" />

data/_includes/footer/nav-column.html

@@ -0,0 +1,31 @@
+{%- comment -%}
+---
+required:
+  - title
+  - items
+optional:
+  - show_descriptions
+---
+Renders a footer navigation column with optional item descriptions.
+{%- endcomment -%}
+{%- assign column_items = include.items | default: '' -%}
+{%- if column_items == '' -%}
+  {%- assign column_items = '' | split: '' -%}
+{%- endif -%}
+<div>
+  <h4>{{ include.title | strip }}</h4>
+  <ul>
+    {%- for item in column_items -%}
+      {%- capture item_label -%}{% if item.label %}{{ item.label }}{% elsif item.label_key %}{% t item.label_key %}{% endif %}{%- endcapture -%}
+      {%- capture item_description -%}{% if item.description %}{{ item.description }}{% elsif item.description_key %}{% t item.description_key %}{% endif %}{%- endcapture -%}
+      <li>
+        <a href="{{ item.url | relative_url }}">
+          <span>{{ item_label | strip }}</span>
+          {%- if include.show_descriptions and item_description != '' -%}
+            <span class="footer-nav__description">{{ item_description | strip }}</span>
+          {%- endif -%}
+        </a>
+      </li>
+    {%- endfor -%}
+  </ul>
+</div>