pandorga 1.2.1

data/_includes/plotly.html

@@ -0,0 +1,22 @@
+{% if include.src %}
+<figure class="plotly-figure" style="margin: 1.5rem auto; text-align: center; max-width: {% if include.width %}{{ include.width }}{% else %}100{% endif %}%;">
+  {% assign _cap = include.caption | strip %}
+  {% if _cap != "" %}
+    {% assign _last = _cap | slice: -1, 1 %}
+    {% unless _last == '.' or _last == '!' or _last == '?' %}
+      {% assign _cap = _cap | append: '.' %}
+    {% endunless %}
+  {% endif %}
+  <iframe
+    class="plotly-embed-frame"
+    src="{{ include.src }}"
+    title="{{ include.alt | default: include.caption | default: 'Interactive chart' }}"
+    loading="lazy"
+    scrolling="no"
+    style="width: 100%; height: {% if include.height %}{{ include.height }}{% else %}480{% endif %}px; border: 0; display: block; border-radius: 0; background: transparent;"
+  ></iframe>
+  {% if include.caption or include.source %}
+  <figcaption>{% if _cap != "" %}{{ _cap }}{% endif %}{% if include.source %} Source: {{ include.source | strip }}{% endif %}</figcaption>
+  {% endif %}
+</figure>
+{% endif %}

data/_includes/theme/dev-reexport.html

@@ -0,0 +1,100 @@
+<div id="dev-reexport" class="contents">
+  <button id="dev-reexport-btn" type="button"
+    class="flex items-center justify-center w-7 h-7 p-1 border border-tertiary/40 hover:border-tertiary text-tertiary hover:bg-surface-container-low transition-colors duration-300 cursor-pointer shrink-0"
+    aria-label="Export content JSON"
+    title="Export">
+    <span id="dev-reexport-label" class="sr-only">Export</span>
+    <span id="dev-reexport-icon" class="material-symbols-outlined text-xl" aria-hidden="true">sync</span>
+  </button>
+  <button id="dev-open-studio-btn" type="button"
+    class="flex items-center justify-center w-7 h-7 p-1 border border-tertiary/40 hover:border-tertiary text-tertiary hover:bg-surface-container-low transition-colors duration-300 cursor-pointer shrink-0"
+    aria-label="Open Studio"
+    title="Open Studio"
+    data-studio-href="{{ site.baseurl }}/studio/">
+    <span class="sr-only">Open Studio</span>
+    <span class="material-symbols-outlined text-xl" aria-hidden="true">architecture</span>
+  </button>
+</div>
+<script>
+  (function () {
+    var openBtn = document.getElementById("dev-open-studio-btn");
+    if (openBtn) {
+      openBtn.addEventListener("click", function (e) {
+        e.preventDefault();
+        var href = openBtn.getAttribute("data-studio-href") || "/studio/";
+        window.open(href, "_blank");
+      });
+    }
+
+    var btn = document.getElementById("dev-reexport-btn");
+    var label = document.getElementById("dev-reexport-label");
+    var icon = document.getElementById("dev-reexport-icon");
+    if (!btn || !label || !icon) return;
+
+    var busy = false;
+
+    function forcePageRefresh() {
+      try {
+        var url = new URL(window.location.href);
+        url.searchParams.set("_refresh", String(Date.now()));
+        window.location.replace(url.toString());
+      } catch (err) {
+        window.location.reload();
+      }
+    }
+
+    btn.addEventListener("click", function (e) {
+      e.preventDefault();
+      if (busy) return;
+      busy = true;
+      btn.disabled = true;
+      btn.classList.add("is-busy");
+      btn.setAttribute("aria-busy", "true");
+
+      var originalText = label.textContent;
+      var originalIcon = icon.textContent;
+      var originalTitle = btn.title || "Export";
+
+      label.textContent = "Exporting";
+      btn.title = "Exporting...";
+      icon.textContent = "sync";
+
+      fetch("/__dev/reexport", {
+        method: "POST",
+        headers: { "Accept": "application/json" }
+      })
+        .then(function (response) {
+          return response.json().then(function (data) {
+            if (!response.ok || !data.ok) {
+              throw new Error((data && data.error) || ("Export failed: " + response.status));
+            }
+            return data;
+          });
+        })
+        .then(function () {
+          btn.classList.remove("is-busy");
+          icon.textContent = "check";
+          label.textContent = "Refreshed";
+          btn.title = "Refreshed!";
+          setTimeout(function () {
+            forcePageRefresh();
+          }, 200);
+        })
+        .catch(function (err) {
+          console.error("Local dev export error:", err);
+          btn.classList.remove("is-busy");
+          icon.textContent = "error";
+          label.textContent = "Failed";
+          btn.title = "Export failed";
+          setTimeout(function () {
+            icon.textContent = originalIcon;
+            label.textContent = originalText;
+            btn.title = originalTitle;
+            btn.disabled = false;
+            btn.removeAttribute("aria-busy");
+            busy = false;
+          }, 2500);
+        });
+    });
+  })();
+</script>

data/_includes/theme/favicons.html

@@ -0,0 +1,4 @@
+<link rel="icon" href="/assets/icons/favicon.svg" type="image/svg+xml" sizes="any" />
+<link rel="icon" href="/assets/icons/favicon-32.png" type="image/png" sizes="32x32" />
+<link rel="apple-touch-icon" href="/assets/icons/apple-touch-icon.png" />
+<link rel="icon" href="/favicon.ico" sizes="16x16 32x32" />

data/_includes/theme/font-loader.html

@@ -0,0 +1,55 @@
+{% include theme/theme-context.liquid %}
+{% assign font_title = sf.title | default: "Lora" %}
+{% assign font_subtitle = sf.subtitle | default: "Lato" %}
+{% assign font_label = sf.label | default: "Ysabeau SC" %}
+{% assign font_body = sf.body | default: "Newsreader" %}
+{% assign font_mono = sf.mono %}
+{% assign font_code = sf.code %}
+{% assign font_cv_body = sf.cv_body %}
+{% assign title_slug = font_title | replace: ' ', '+' %}
+{% assign subtitle_slug = font_subtitle | replace: ' ', '+' %}
+{% assign label_slug = font_label | replace: ' ', '+' %}
+{% assign body_slug = font_body | replace: ' ', '+' %}
+{% assign mono_slug = font_mono | replace: ' ', '+' %}
+{% assign code_slug = font_code | replace: ' ', '+' %}
+{% assign cv_body_slug = font_cv_body | replace: ' ', '+' %}
+{% assign title_spec = sf.google_title_spec | default: "ital,wght@0,400;0,500;0,700;1,400;1,500" %}
+{% assign subtitle_spec = sf.google_subtitle_spec | default: "ital,wght@0,300;0,400;0,500;0,700;1,400;1,500" %}
+{% assign label_spec = sf.google_label_spec | default: "ital,wght@0,400;0,500;0,700;1,400;1,500" %}
+{% assign body_spec = sf.google_body_spec | default: "ital,wght@0,300;0,400;0,500;0,700;1,400;1,500;1,700" %}
+{% assign mono_spec = sf.google_mono_spec | default: "wght@400;500;700" %}
+{% assign code_spec = sf.google_code_spec | default: "wght@300;400;500;600;700" %}
+{% assign cv_body_spec = sf.google_cv_body_spec | default: "wght@300;400;500;600;700" %}
+{% comment %}
+  Build the Google Fonts URL without repeating a family. Title is always
+  requested. Body / label / subtitle / mono / code append only when their
+  family name differs from ones already on the URL.
+{% endcomment %}
+{% assign fonts_href = "https://fonts.googleapis.com/css2?family=" | append: title_slug | append: ":" | append: title_spec %}
+{% unless font_label == font_title %}
+  {% assign fonts_href = fonts_href | append: "&family=" | append: label_slug | append: ":" | append: label_spec %}
+{% endunless %}
+{% unless font_body == font_title or font_body == font_label %}
+  {% assign fonts_href = fonts_href | append: "&family=" | append: body_slug | append: ":" | append: body_spec %}
+{% endunless %}
+{% if font_mono and font_mono != '' %}
+  {% unless font_mono == font_title or font_mono == font_label or font_mono == font_body %}
+    {% assign fonts_href = fonts_href | append: "&family=" | append: mono_slug | append: ":" | append: mono_spec %}
+  {% endunless %}
+{% endif %}
+{% if font_code and font_code != '' %}
+  {% unless font_code == font_title or font_code == font_label or font_code == font_body or font_code == font_mono %}
+    {% assign fonts_href = fonts_href | append: "&family=" | append: code_slug | append: ":" | append: code_spec %}
+  {% endunless %}
+{% endif %}
+{% if font_subtitle != font_body and font_subtitle != font_label and font_subtitle != font_title %}
+  {% assign fonts_href = fonts_href | append: "&family=" | append: subtitle_slug | append: ":" | append: subtitle_spec %}
+{% endif %}
+{% if font_cv_body and font_cv_body != '' %}
+  {% unless font_cv_body == font_title or font_cv_body == font_label or font_cv_body == font_body or font_cv_body == font_subtitle %}
+    {% assign fonts_href = fonts_href | append: "&family=" | append: cv_body_slug | append: ":" | append: cv_body_spec %}
+  {% endunless %}
+{% endif %}
+{% assign fonts_href = fonts_href | append: "&display=swap" %}
+<link rel="preload" as="style" href="{{ fonts_href }}" />
+<link href="{{ fonts_href }}" rel="stylesheet" />

data/_includes/theme/shell-theme-boot.html

@@ -0,0 +1,115 @@
+<script>
+  (function () {
+    var config = {
+      active: {{ site.shell_theme.active | default: "system" | jsonify }},
+      storageKey: {{ site.shell_theme.storage_key | default: "site-theme" | jsonify }},
+      available: {{ site.shell_theme.available | default: site.shell_theme.active | jsonify }}
+    };
+    var root = document.documentElement;
+    var media = window.matchMedia("(prefers-color-scheme: dark)");
+    var paletteChoices = config.available.filter(function (name) {
+      return name === "light" || name === "dark";
+    });
+    if (paletteChoices.length === 0) {
+      paletteChoices = ["light"];
+    }
+
+    function resolvePalette(choice) {
+      if (choice === "system") {
+        return media.matches ? "dark" : "light";
+      }
+      if (paletteChoices.indexOf(choice) !== -1) {
+        return choice;
+      }
+      return paletteChoices[0];
+    }
+
+    function applyTheme(choice) {
+      var palette = resolvePalette(choice);
+      root.setAttribute("data-theme", palette);
+      root.style.colorScheme = palette;
+      if (window.ShellTheme) {
+        window.ShellTheme.active = choice;
+        window.ShellTheme.resolved = palette;
+      }
+    }
+
+    var choice = config.active;
+    try {
+      var stored = localStorage.getItem(config.storageKey);
+      if (stored && config.available.indexOf(stored) !== -1) {
+        choice = stored;
+      }
+    } catch (e) { /* ignore */ }
+
+    applyTheme(choice);
+
+    window.ShellTheme = {
+      active: choice,
+      resolved: resolvePalette(choice),
+      storageKey: config.storageKey,
+      available: config.available.slice(),
+      paletteChoices: paletteChoices.slice(),
+      setTheme: function (name) {
+        if (config.available.indexOf(name) === -1) return;
+        try { localStorage.setItem(config.storageKey, name); } catch (e) { /* ignore */ }
+        this.active = name;
+        applyTheme(name);
+        document.dispatchEvent(new CustomEvent("shell-theme-change", {
+          detail: { choice: name, resolved: this.resolved }
+        }));
+      }
+    };
+
+    if (typeof media.addEventListener === "function") {
+      media.addEventListener("change", function () {
+        if (window.ShellTheme.active === "system") {
+          applyTheme("system");
+          document.dispatchEvent(new CustomEvent("shell-theme-change", {
+            detail: { choice: "system", resolved: window.ShellTheme.resolved }
+          }));
+        }
+      });
+    } else if (typeof media.addListener === "function") {
+      media.addListener(function () {
+        if (window.ShellTheme.active === "system") {
+          applyTheme("system");
+        }
+      });
+    }
+  })();
+</script>
+<script>
+  (function () {
+    var offsets = [-4, -3, -2, -1, 0, 1, 2, 3, 4];
+    var key = "site-prose-offset";
+
+    function read() {
+      try {
+        var n = Number(localStorage.getItem(key));
+        if (offsets.indexOf(n) !== -1) return n;
+      } catch (e) { /* ignore */ }
+      return 0;
+    }
+
+    function apply(n) {
+      if (offsets.indexOf(n) === -1) n = 0;
+      document.documentElement.style.setProperty("--prose-size-offset", n + "pt");
+      return n;
+    }
+
+    window.ShellProseSize = {
+      offsets: offsets.slice(),
+      storageKey: key,
+      read: read,
+      apply: apply,
+      set: function (n) {
+        n = apply(Number(n));
+        try { localStorage.setItem(key, String(n)); } catch (e) { /* ignore */ }
+        return n;
+      }
+    };
+
+    apply(read());
+  })();
+</script>

data/_includes/theme/site-logo.html

@@ -0,0 +1,6 @@
+<svg class="site-logo" viewBox="0 0 32 32" role="img" aria-hidden="true" focusable="false">
+  <polygon class="site-logo-primary" points="0,0 23,0 15,17 0,20"/>
+  <polygon class="site-logo-secondary" points="23,0 32,0 32,32 17,21 15,17"/>
+  <polygon class="site-logo-tertiary" points="0,20 15,17 17,21 32,32 0,32"/>
+  <polygon class="site-logo-frame" points="1,1 31,1 31,31 1,31"/>
+</svg>

data/_includes/theme/tailwind-theme-colors.json.liquid

@@ -0,0 +1,65 @@
+{
+  "primary": "var(--color-primary)",
+  "secondary": "var(--color-secondary)",
+  "tertiary": "var(--color-tertiary)",
+  "primary-container": "var(--color-primary-container)",
+  "secondary-container": "var(--color-secondary-container)",
+  "tertiary-container": "var(--color-tertiary-container)",
+  "on-primary": "var(--color-on-primary)",
+  "on-secondary": "var(--color-on-secondary)",
+  "on-tertiary": "var(--color-on-tertiary)",
+  "on-primary-container": "var(--color-on-primary-container)",
+  "on-secondary-container": "var(--color-on-secondary-container)",
+  "on-tertiary-container": "var(--color-on-tertiary-container)",
+  "on-surface": "var(--color-on-surface)",
+  "on-surface-variant": "var(--color-on-surface-variant)",
+  "on-background": "var(--color-on-background)",
+  "outline": "var(--color-outline)",
+  "outline-variant": "var(--color-outline-variant)",
+  "gentle-faint": "var(--border-gentle-faint)",
+  "gentle-subtle": "var(--border-gentle-subtle)",
+  "gentle-divider": "var(--border-gentle-divider)",
+  "gentle": "var(--border-gentle)",
+  "gentle-hover": "var(--border-gentle-hover)",
+  "background": "var(--color-background)",
+  "background-secondary": "var(--color-background-secondary)",
+  "surface": "var(--color-surface)",
+  "surface-bright": "var(--color-surface-bright)",
+  "surface-container-lowest": "var(--color-surface-container-lowest)",
+  "surface-container-low": "var(--color-surface-container-low)",
+  "surface-container": "var(--color-surface-container)",
+  "surface-container-high": "var(--color-surface-container-high)",
+  "surface-container-highest": "var(--color-surface-container-highest)",
+  "surface-variant": "var(--color-surface-variant)",
+  "surface-dim": "var(--color-surface-dim)",
+  "panel-contrast": "var(--color-panel-contrast)",
+  "surface-card": "var(--color-surface-card)",
+  "surface-card-contrast": "var(--color-surface-card-contrast)",
+  "surface-high": "var(--color-surface-high)",
+  "surface-high-contrast": "var(--color-surface-high-contrast)",
+  "surface-tint": "var(--color-surface-tint)",
+  "inverse-primary": "var(--color-inverse-primary)",
+  "inverse-surface": "var(--color-inverse-surface)",
+  "inverse-on-surface": "var(--color-inverse-on-surface)",
+  "primary-fixed": "var(--color-primary-fixed)",
+  "primary-fixed-dim": "var(--color-primary-fixed-dim)",
+  "secondary-fixed": "var(--color-secondary-fixed)",
+  "secondary-fixed-dim": "var(--color-secondary-fixed-dim)",
+  "tertiary-fixed": "var(--color-tertiary-fixed)",
+  "tertiary-fixed-dim": "var(--color-tertiary-fixed-dim)",
+  "on-primary-fixed": "var(--color-on-primary-fixed)",
+  "on-primary-fixed-variant": "var(--color-on-primary-fixed-variant)",
+  "on-secondary-fixed": "var(--color-on-secondary-fixed)",
+  "on-secondary-fixed-variant": "var(--color-on-secondary-fixed-variant)",
+  "on-tertiary-fixed": "var(--color-on-tertiary-fixed)",
+  "on-tertiary-fixed-variant": "var(--color-on-tertiary-fixed-variant)",
+  "error": "var(--color-error)",
+  "on-error": "var(--color-on-error)",
+  "error-container": "var(--color-error-container)",
+  "on-error-container": "var(--color-on-error-container)",
+  "res-youtube": "var(--color-res-youtube)",
+  "res-podcast": "var(--color-res-podcast)",
+  "res-doc": "var(--color-res-doc)",
+  "link": "var(--color-link)",
+  "link-hover": "var(--color-link-hover)"
+}

data/_includes/theme/tailwind-theme-fonts.json.liquid

@@ -0,0 +1,6 @@
+{% include theme/theme-context.liquid %}
+{% assign font_title = sf.title | default: "Lora" %}
+{% assign font_subtitle = sf.subtitle | default: "Lato" %}
+{% assign font_label = sf.label | default: "Ysabeau SC" %}
+{% assign font_body = sf.body | default: "Newsreader" %}
+{"title":["var(--font-title)"],"subtitle":["var(--font-subtitle)","serif"],"label":["var(--font-label)","serif"],"body":["var(--font-body)","sans-serif"],"headline":["var(--font-title)"],"editorial":["var(--font-title)"],"serif":["var(--font-title)"],"sans":["var(--font-body)","sans-serif"],"mono":["var(--font-mono)"],"code":["var(--font-code)"]}

data/_includes/theme/theme-context.liquid

@@ -0,0 +1,20 @@
+{% comment %}
+  Resolves the active colour theme from _config.yml → shell_theme.active and
+  _data/themes/<name>.yml. Fonts and other non-colour tokens come from
+  _data/themes/shared.yml so light/dark cannot drift apart on type.
+  Sets tc, tn, tl, sf (colors, neutrals, links, fonts), ts (static),
+  sm (motion), sg (geometry).
+{% endcomment %}
+{% assign theme_active = site.shell_theme.active | default: "system" %}
+{% assign theme_profile = site.data.themes[theme_active] %}
+{% if theme_profile == nil %}
+  {% assign theme_profile = site.data.themes.light %}
+{% endif %}
+{% assign theme_shared = site.data.themes.shared %}
+{% assign tc = theme_profile.colors %}
+{% assign tn = theme_profile.neutrals %}
+{% assign tl = theme_profile.links %}
+{% assign sf = theme_shared.fonts %}
+{% assign sm = theme_shared.motion %}
+{% assign sg = theme_shared.geometry %}
+{% assign ts = theme_profile.static %}

data/_includes/theme/theme-toggle.html

@@ -0,0 +1,94 @@
+<div id="theme-toggle" class="relative flex items-center shrink-0">
+  <button id="theme-toggle-btn" type="button"
+    class="flex items-center justify-center w-7 h-7 p-1 text-on-surface-variant hover:text-primary transition-colors duration-300"
+    aria-label="Theme"
+    title="Theme"
+    aria-haspopup="true" aria-expanded="false" aria-controls="theme-toggle-menu">
+    <span class="sr-only">Theme</span>
+    <span id="theme-toggle-icon" class="material-symbols-outlined text-xl" aria-hidden="true">light_mode</span>
+    <span id="theme-toggle-state" class="sr-only">current: light</span>
+  </button>
+  <div id="theme-toggle-menu"
+    class="hidden absolute right-0 top-full mt-1 min-w-[9.5rem] py-1 bg-surface border border-gentle-subtle shadow-sm z-50"
+    role="menu" aria-label="Choose color theme">
+    <button type="button" role="menuitemradio" data-theme-choice="light"
+      class="theme-choice w-full flex items-center gap-2.5 px-3 py-2 text-left font-body text-on-surface-variant hover:text-primary hover:bg-surface-container-low transition-colors leading-none">
+      <span class="material-symbols-outlined text-lg shrink-0 flex items-center justify-center" aria-hidden="true">light_mode</span>
+      <span class="inline-flex items-center leading-none">Light</span>
+    </button>
+    <button type="button" role="menuitemradio" data-theme-choice="dark"
+      class="theme-choice w-full flex items-center gap-2.5 px-3 py-2 text-left font-body text-on-surface-variant hover:text-primary hover:bg-surface-container-low transition-colors leading-none">
+      <span class="material-symbols-outlined text-lg shrink-0 flex items-center justify-center" aria-hidden="true">dark_mode</span>
+      <span class="inline-flex items-center leading-none">Dark</span>
+    </button>
+    <button type="button" role="menuitemradio" data-theme-choice="system"
+      class="theme-choice w-full flex items-center gap-2.5 px-3 py-2 text-left font-body text-on-surface-variant hover:text-primary hover:bg-surface-container-low transition-colors leading-none">
+      <span class="material-symbols-outlined text-lg shrink-0 flex items-center justify-center" aria-hidden="true">routine</span>
+      <span class="inline-flex items-center leading-none">System</span>
+    </button>
+  </div>
+</div>
+<script>
+  (function () {
+    var icons = { light: "light_mode", dark: "dark_mode", system: "routine" };
+    // The visible "Theme" word is the accessible name now; this only appends
+    // the current choice for screen readers.
+    var states = { light: "current: light", dark: "current: dark", system: "current: system" };
+
+    function syncToggle() {
+      var theme = window.ShellTheme;
+      if (!theme) return;
+      var active = theme.active;
+      var iconEl = document.getElementById("theme-toggle-icon");
+      var stateEl = document.getElementById("theme-toggle-state");
+      if (iconEl) iconEl.textContent = icons[active] || icons.light;
+      if (stateEl) stateEl.textContent = states[active] || states.light;
+      document.querySelectorAll(".theme-choice").forEach(function (el) {
+        var choice = el.getAttribute("data-theme-choice");
+        var selected = choice === active;
+        el.setAttribute("aria-checked", String(selected));
+        el.classList.toggle("text-primary", selected);
+        el.classList.toggle("font-semibold", selected);
+        el.classList.toggle("bg-surface-container-low", selected);
+      });
+    }
+
+    function init() {
+      var btn = document.getElementById("theme-toggle-btn");
+      var menu = document.getElementById("theme-toggle-menu");
+      if (!btn || !menu || !window.ShellTheme) return;
+
+      syncToggle();
+
+      btn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        var open = !menu.classList.contains("hidden");
+        menu.classList.toggle("hidden", open);
+        btn.setAttribute("aria-expanded", String(!open));
+      });
+
+      menu.querySelectorAll(".theme-choice").forEach(function (el) {
+        el.addEventListener("click", function () {
+          var choice = el.getAttribute("data-theme-choice");
+          window.ShellTheme.setTheme(choice);
+          syncToggle();
+          menu.classList.add("hidden");
+          btn.setAttribute("aria-expanded", "false");
+        });
+      });
+
+      document.addEventListener("click", function () {
+        menu.classList.add("hidden");
+        btn.setAttribute("aria-expanded", "false");
+      });
+
+      document.addEventListener("shell-theme-change", syncToggle);
+    }
+
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", init);
+    } else {
+      init();
+    }
+  })();
+</script>