simplex-web 0.2.0__py3-none-any.whl

simplex/web/templates/deck.html

@@ -0,0 +1,149 @@
+{% extends "base.html" %}
+{% block title %}{{ deck.title }} -- {{ site.brand }}{% endblock %}
+{% block nav_actions %}
+  {% if has_pdf %}
+  <a
+    href="{{ deck.slug }}.pdf"
+    class="site-resource-link"
+    download
+  >
+    <span class="pdf-file-icon" aria-hidden="true"><span>PDF</span></span>
+    <span>ppt</span>
+  </a>
+  {% endif %}
+  {% if has_notes_pdf %}
+  <a
+    href="notes.pdf"
+    class="site-resource-link"
+    download
+  >
+    <i data-lucide="file-text" aria-hidden="true"></i>
+    <span class="icon-fallback" aria-hidden="true">N</span>
+    <span>Notes PDF</span>
+  </a>
+  {% endif %}
+{% endblock %}
+{% block main_class %}deck-main{% endblock %}
+{% block content %}
+<section
+  class="deck-grid"
+  data-deck-slug="{{ deck.slug }}"
+  data-slide-count="{{ slide_count }}"
+  data-default-slide-number="{% if deck.web.show_slide_number %}true{% else %}false{% endif %}"
+  data-default-clock="{% if deck.web.show_clock %}true{% else %}false{% endif %}"
+>
+  <div class="deck-viewer">
+    <div class="deck-viewer-frame">
+      <iframe
+        src="slides.html"
+        title="{{ deck.title }} presentation"
+        allowfullscreen
+        allow="autoplay; fullscreen"
+        loading="lazy"
+        class="deck-iframe"
+      ></iframe>
+    </div>
+    <div class="deck-controls" role="toolbar" aria-label="Slide controls">
+      <div class="deck-control-group" aria-label="Playback">
+        <button data-control="prev" class="deck-ctl-btn" aria-label="Previous slide" title="Previous" type="button">
+          <i data-lucide="chevron-left" aria-hidden="true"></i>
+          <span class="icon-fallback" aria-hidden="true">‹</span>
+        </button>
+        <button data-control="restart" class="deck-ctl-btn" aria-label="Restart slide" title="Restart" type="button">
+          <i data-lucide="rotate-ccw" aria-hidden="true"></i>
+          <span class="icon-fallback" aria-hidden="true">↺</span>
+        </button>
+        <button data-control="toggle-play" class="deck-ctl-btn deck-ctl-play" aria-label="Play" title="Play" data-state="paused" type="button">
+          <i data-lucide="play" class="deck-ctl-icon-play" aria-hidden="true"></i>
+          <i data-lucide="pause" class="deck-ctl-icon-pause" aria-hidden="true"></i>
+          <span class="icon-fallback deck-ctl-icon-play" aria-hidden="true">▶</span>
+          <span class="icon-fallback deck-ctl-icon-pause" aria-hidden="true">Ⅱ</span>
+        </button>
+        <button data-control="next" class="deck-ctl-btn" aria-label="Next slide" title="Next" type="button">
+          <i data-lucide="chevron-right" aria-hidden="true"></i>
+          <span class="icon-fallback" aria-hidden="true">›</span>
+        </button>
+        <button data-control="fullscreen" class="deck-ctl-btn" aria-label="Fullscreen" title="Fullscreen" type="button">
+          <i data-lucide="maximize" aria-hidden="true"></i>
+          <span class="icon-fallback" aria-hidden="true">⛶</span>
+        </button>
+        <span class="deck-counter" data-counter aria-live="polite">1 / {{ slide_count }}</span>
+      </div>
+      <div class="deck-settings" data-settings>
+        <button
+          type="button"
+          class="deck-settings-trigger"
+          data-settings-toggle
+          aria-expanded="false"
+          aria-haspopup="true"
+        >
+          <i data-lucide="settings" aria-hidden="true"></i>
+          <span class="icon-fallback" aria-hidden="true">⚙</span>
+          <span>Player Settings</span>
+        </button>
+        <div class="deck-settings-panel" data-settings-panel hidden>
+          <label class="deck-setting-row">
+            <span><i data-lucide="palette" aria-hidden="true"></i>Slide Color</span>
+            <input type="checkbox" data-setting="slide-color" checked />
+          </label>
+          <label class="deck-setting-row">
+            <span><i data-lucide="list-ordered" aria-hidden="true"></i>Enumeration</span>
+            <input
+              type="checkbox"
+              data-setting="slide-number"
+              {% if deck.web.show_slide_number %}checked{% endif %}
+            />
+          </label>
+          <label class="deck-setting-row">
+            <span><i data-lucide="clock" aria-hidden="true"></i>Clock</span>
+            <input type="checkbox" data-setting="clock" {% if deck.web.show_clock %}checked{% endif %} />
+          </label>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <aside class="deck-sidebar" aria-label="Slide list">
+    <ol class="deck-slide-list" role="list">
+      {% for slide in slides %}
+      <li>
+        <button
+          type="button"
+          class="deck-slide-card"
+          data-slide-target="{{ slide.index }}"
+          {% if loop.first %}aria-current="true"{% endif %}
+        >
+          <div class="deck-slide-thumb">
+            {% if slide.thumbnail %}
+            <img
+              src="{{ slide.thumbnail }}"
+              alt=""
+              loading="lazy"
+              decoding="async"
+            />
+            {% else %}
+            <div class="deck-slide-thumb-empty" aria-hidden="true"></div>
+            {% endif %}
+            <div class="deck-slide-overlay">
+              <span class="deck-slide-title">
+                {{ slide.name or slide.scene }}
+              </span>
+              {% set duration_seconds = slide.duration_s|round(0, "ceil")|int %}
+              <span class="deck-slide-duration">
+                {{ "%d:%02d"|format(duration_seconds // 60, duration_seconds % 60) }}
+              </span>
+            </div>
+          </div>
+        </button>
+      </li>
+      {% endfor %}
+    </ol>
+  </aside>
+
+  {% if notes_html %}
+  <article class="deck-notes prose prose-invert max-w-none">
+    {{ notes_html|safe }}
+  </article>
+  {% endif %}
+</section>
+{% endblock %}

simplex/web/templates/index.html

@@ -0,0 +1,20 @@
+{% extends "base.html" %}
+{% block title %}{{ site.brand }} -- Decks{% endblock %}
+{% block content %}
+{% if not registry.sections %}
+<p class="text-neutral-400">
+  No decks yet. Run <code class="px-1 bg-neutral-800 rounded">simplex new my-deck</code>
+  to create one.
+</p>
+{% else %}
+{% if latest_section %}
+{% set section = latest_section %}
+{% set carousel_variant = "latest" %}
+{% include "_carousel.html" %}
+{% endif %}
+{% set carousel_variant = "section" %}
+{% for section in registry.sections %}
+{% include "_carousel.html" %}
+{% endfor %}
+{% endif %}
+{% endblock %}

simplex/web/templates/revealjs.html.j2

@@ -0,0 +1,374 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />
+  <title>{{ deck.title }} -- slides</title>
+  <link rel="stylesheet" href="{{ static_prefix }}/reveal.js/reset.css" />
+  <link rel="stylesheet" href="{{ static_prefix }}/reveal.js/reveal.css" />
+  <style>
+    {{ palette_css|safe }}
+  </style>
+  <style>
+    :root {
+      --simplex-stage-bg: #2b2b2b;
+      --simplex-stage-progress: rgba(255, 255, 255, 0.08);
+    }
+    :root[data-theme="light"] {
+      --simplex-stage-bg: #f3f5f7;
+      --simplex-stage-progress: rgba(21, 31, 40, 0.14);
+    }
+    html, body {
+      background: var(--simplex-stage-bg);
+      color: var(--simplex-text, #f8f8f8);
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      touch-action: manipulation;
+    }
+    .reveal, .reveal .slides {
+      background: var(--simplex-stage-bg);
+      width: 100% !important;
+      height: 100% !important;
+      inset: 0;
+    }
+    /* Override reveal's transform-based scaling: we want the video to fill
+       the viewer box natively. Reveal still drives slide changes; only the
+       layout math is ours. */
+    .reveal .slides {
+      top: 0 !important;
+      left: 0 !important;
+      transform: none !important;
+      zoom: 1 !important;
+    }
+    .reveal .slides > section,
+    .reveal .slides > section > section {
+      position: absolute;
+      inset: 0;
+      width: 100% !important;
+      height: 100% !important;
+      padding: 0;
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--simplex-stage-bg);
+    }
+    .reveal video {
+      max-width: 100%;
+      max-height: 100%;
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+      background: var(--simplex-stage-bg);
+      display: block;
+    }
+    .reveal .controls { display: none !important; }
+    .reveal .progress {
+      background: var(--simplex-stage-progress);
+      height: 3px;
+      color: var(--simplex-accent, #ffd700);
+    }
+    .reveal .progress span { background: var(--simplex-accent, #ffd700); }
+    .tap-zone {
+      position: fixed;
+      top: 0;
+      bottom: 0;
+      width: 33vw;
+      z-index: 30;
+      background: transparent;
+      cursor: pointer;
+      -webkit-tap-highlight-color: transparent;
+    }
+    .tap-zone.next { right: 0; width: 67vw; }
+    .tap-zone.prev { left: 0; }
+    @media (prefers-reduced-motion: reduce) {
+      .reveal .slides section { transition: none !important; }
+    }
+    .empty-slide {
+      font-family: var(--simplex-font-sans, ui-sans-serif, system-ui, sans-serif);
+      font-size: 1.25rem;
+      color: rgba(255,255,255,.65);
+      padding: 2rem;
+      text-align: center;
+    }
+    .simplex-chrome {
+      position: fixed;
+      z-index: 40;
+      font-family: var(--simplex-font-sans, ui-sans-serif, system-ui, sans-serif);
+      font-size: 1rem;
+      color: var(--simplex-text-muted, rgba(255,255,255,.65));
+      pointer-events: none;
+    }
+    .simplex-chrome.clock { bottom: 10px; left: 10px; }
+    .simplex-chrome.slide-number { bottom: 10px; right: 10px; }
+  </style>
+  {% if deck_custom_css %}
+  <style>
+    {{ deck_custom_css|safe }}
+  </style>
+  {% endif %}
+</head>
+<body>
+  <div class="reveal" role="region" aria-label="{{ deck.title }} slide viewer">
+    <div class="slides">
+      {% for main in main_slides %}
+      <section
+        data-main-index="{{ main.index }}"
+        data-scene="{{ main.scene }}"
+        data-name="{{ main.name }}"
+      >
+        {% for sub in main.subsections %}
+        <section
+          data-sub-name="{{ sub.name }}"
+          {% if "loop" in sub.section_type %}data-background-video-loop{% endif %}
+        >
+          {% if sub.video_href %}
+          <video
+            data-autoplay
+            muted
+            playsinline
+            preload="metadata"
+            aria-label="{{ main.name }} - {{ sub.name }}"
+          >
+            <source src="{{ sub.video_href }}" type="video/mp4" />
+          </video>
+          {% else %}
+          <div class="empty-slide">
+            <p>{{ main.name }} - {{ sub.name }}</p>
+            <p style="font-size:.85rem;opacity:.6">no video segment available</p>
+          </div>
+          {% endif %}
+        </section>
+        {% endfor %}
+        {% if not main.subsections %}
+        <section data-sub-name="empty">
+          <div class="empty-slide">
+            <p>{{ main.name }}</p>
+            <p style="font-size:.85rem;opacity:.6">no rendered video for this slide yet</p>
+          </div>
+        </section>
+        {% endif %}
+      </section>
+      {% endfor %}
+    </div>
+  </div>
+
+  <button class="tap-zone prev" aria-hidden="true" tabindex="-1"
+          data-tap="prev"></button>
+  <button class="tap-zone next" aria-hidden="true" tabindex="-1"
+          data-tap="next"></button>
+
+  <div
+    class="simplex-chrome clock"
+    id="simplex-clock"
+    aria-hidden="true"
+    {% if not show_clock %}hidden{% endif %}
+  ></div>
+  <div
+    class="simplex-chrome slide-number"
+    id="simplex-slide-number"
+    aria-hidden="true"
+    {% if not show_slide_number %}hidden{% endif %}
+  ></div>
+
+  <script src="{{ static_prefix }}/reveal.js/reveal.js"></script>
+  <script>
+    (function () {
+      const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+      const isTouch = window.matchMedia('(hover: none) and (pointer: coarse)').matches;
+      const parentOrigin = (function () {
+        try { return window.parent.location.origin || '*'; } catch (_) { return '*'; }
+      })();
+      const chromeState = {
+        clock: {% if show_clock %}true{% else %}false{% endif %},
+        slideNumber: {% if show_slide_number %}true{% else %}false{% endif %},
+      };
+
+      Reveal.initialize({
+        embedded: true,
+        controls: false,
+        controlsTutorial: false,
+        progress: true,
+        hash: false,
+        // Remap all arrow keys to flat next/prev so direction never matters,
+        // even when the slide grid has vertical sub-stops. Keys: 37 left,
+        // 38 up, 39 right, 40 down, 32 space, 33 PageUp, 34 PageDown.
+        keyboard: {
+          37: 'prev', 38: 'prev', 33: 'prev',
+          39: 'next', 40: 'next', 32: 'next', 34: 'next',
+        },
+        // Disable Reveal's built-in swipe gestures. Mobile navigation goes
+        // through the .tap-zone elements below; this keeps tap-right = next
+        // and tap-left = prev regardless of horizontal/vertical slide layout.
+        touch: false,
+        transition: reduce ? 'none' : '{{ transition }}',
+        backgroundTransition: 'none',
+        autoPlayMedia: true,
+        slideNumber: false,
+        loop: false,
+        center: false,
+        // Reveal's scale-to-fit math fights us when the video already knows
+        // its aspect; disableLayout: true means our CSS sizes every slide.
+        disableLayout: true,
+        viewDistance: 2,
+      }).then(function () {
+        function currentMainIndex() {
+          // Resolve the active 1-based main-slide index from the closest
+          // ancestor ``<section data-main-index>``. Works for both top-level
+          // mains and their vertical sub-stops -- on a sub-slide the
+          // closest() walk still lands on the surrounding main, so the
+          // sidebar stays highlighted on the right thumbnail card while the
+          // user scrubs through sub-stops.
+          const slide = Reveal.getCurrentSlide();
+          if (!slide) return 0;
+          const main = slide.closest('[data-main-index]') || slide;
+          const raw = main.getAttribute('data-main-index');
+          return raw ? parseInt(raw, 10) || 0 : 0;
+        }
+        function emit() {
+          const idx = Reveal.getIndices();
+          const total = {{ main_slide_count }};
+          renderSlideNumber();
+          try {
+            window.parent.postMessage(
+              {
+                type: 'simplex.slide',
+                idx: currentMainIndex(),
+                sub: idx.v || 0,
+                total: total,
+              },
+              parentOrigin
+            );
+          } catch (_) { /* parent gone or different origin */ }
+        }
+        function renderSlideNumber() {
+          const el = document.getElementById('simplex-slide-number');
+          if (!el) return;
+          el.textContent = currentMainIndex() + ' / ' + {{ main_slide_count }};
+        }
+        function applyChrome() {
+          const clock = document.getElementById('simplex-clock');
+          const slideNumber = document.getElementById('simplex-slide-number');
+          if (clock) clock.hidden = !chromeState.clock;
+          if (slideNumber) slideNumber.hidden = !chromeState.slideNumber;
+          renderSlideNumber();
+        }
+        Reveal.on('slidechanged', emit);
+        Reveal.on('ready', emit);
+        applyChrome();
+
+        window.addEventListener('message', function (e) {
+          const data = e.data || {};
+          if (typeof data !== 'object') return;
+          if (data.type === 'simplex.goto' && Number.isInteger(data.idx)) {
+            // ``data.idx`` is the 1-based main-slide number from the sidebar
+            // (``data-slide-target``). Reveal's horizontal index is 0-based,
+            // so subtract one before dispatching.
+            Reveal.slide(data.idx - 1, data.sub || 0);
+          } else if (data.type === 'simplex.next') {
+            Reveal.next();
+          } else if (data.type === 'simplex.prev') {
+            Reveal.prev();
+          } else if (data.type === 'simplex.restart') {
+            const v = document.querySelector('.reveal .slides .present video');
+            if (v) {
+              try { v.currentTime = 0; } catch (_) { /* */ }
+              const p = v.play();
+              if (p && typeof p.catch === 'function') p.catch(function () {});
+            }
+          } else if (data.type === 'simplex.toggle-play') {
+            const v = document.querySelector('.reveal .slides .present video');
+            if (v) {
+              if (v.paused) {
+                if (v.ended || v.currentTime >= Math.max(0, v.duration - 0.05)) {
+                  try { v.currentTime = 0; } catch (_) { /* */ }
+                }
+                const p = v.play();
+                if (p && typeof p.catch === 'function') p.catch(function () {});
+              } else {
+                v.pause();
+              }
+              try {
+                window.parent.postMessage(
+                  { type: 'simplex.play-state', playing: !v.paused },
+                  parentOrigin
+                );
+              } catch (_) { /* */ }
+            }
+          } else if (data.type === 'simplex.fullscreen') {
+            const el = document.documentElement;
+            const fn = el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen;
+            const exit = document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen;
+            const inFs = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement;
+            try {
+              if (inFs) { if (exit) { exit.call(document); } }
+              else if (fn) { fn.call(el); }
+            } catch (_) { /* */ }
+          } else if (data.type === 'simplex.set-chrome') {
+            if (typeof data.clock === 'boolean') chromeState.clock = data.clock;
+            if (typeof data.slideNumber === 'boolean') chromeState.slideNumber = data.slideNumber;
+            applyChrome();
+          } else if (data.type === 'simplex.set-theme' && typeof data.theme === 'string') {
+            document.documentElement.dataset.theme = data.theme;
+            document.documentElement.style.colorScheme = data.theme;
+          }
+        });
+
+        document.addEventListener('play', function (e) {
+          if (!e.target || e.target.tagName !== 'VIDEO') return;
+          try {
+            window.parent.postMessage(
+              { type: 'simplex.play-state', playing: true }, parentOrigin
+            );
+          } catch (_) { /* */ }
+        }, true);
+        document.addEventListener('pause', function (e) {
+          if (!e.target || e.target.tagName !== 'VIDEO') return;
+          try {
+            window.parent.postMessage(
+              { type: 'simplex.play-state', playing: false }, parentOrigin
+            );
+          } catch (_) { /* */ }
+        }, true);
+
+        if (isTouch) {
+          document.querySelectorAll('.tap-zone').forEach(function (z) {
+            z.addEventListener('click', function (ev) {
+              ev.preventDefault();
+              if (z.dataset.tap === 'next') { Reveal.next(); }
+              else { Reveal.prev(); }
+            }, { passive: false });
+          });
+        } else {
+          document.querySelectorAll('.tap-zone').forEach(function (z) {
+            z.style.display = 'none';
+          });
+        }
+      });
+
+      // Wall clock in the corner. Updates once per second; pad single
+      // digits so the layout doesn't reflow.
+      (function () {
+        const el = document.getElementById('simplex-clock');
+        if (!el) return;
+        const pad = (n) => String(n).padStart(2, '0');
+        const tick = () => {
+          const now = new Date();
+          el.textContent = pad(now.getHours()) + ':' + pad(now.getMinutes()) + ':' + pad(now.getSeconds());
+        };
+        tick();
+        setInterval(tick, 1000);
+      })();
+
+      {% if watch %}
+      // --watch mode: subscribe to SSE for live reload on render.
+      const es = new EventSource('/_simplex/events');
+      es.addEventListener('reload', () => window.location.reload());
+      {% endif %}
+    })();
+  </script>
+</body>
+</html>

simplex/web/templates/section.html

@@ -0,0 +1,74 @@
+{% extends "base.html" %}
+{% block title %}{{ section.config.title }} -- {{ site.brand }}{% endblock %}
+{% block content %}
+<section class="section-page-heading">
+  <div class="carousel-heading-line">
+    <h1>{{ section.config.title }}</h1>
+  </div>
+  {% if section.config.blurb %}
+  <p>{{ section.config.blurb }}</p>
+  {% endif %}
+</section>
+
+<ol class="section-deck-grid" role="list">
+  {% for deck in section.decks %}
+  {% set thumb = thumbs.get(deck.slug) %}
+  {% set gif = preview_gifs.get(deck.slug) %}
+  {% set created = deck_dates.get(deck.slug) %}
+  <li>
+    <a
+      href="{{ site.url('decks/' + deck.slug + '/') }}"
+      class="carousel-card"
+      aria-label="Open {{ deck.title }}"
+    >
+      <div class="carousel-thumb">
+        {% if thumb %}
+        <img
+          src="{{ site.url('decks/' + deck.slug + '/' + thumb) }}"
+          {% if gif %}data-preview-gif="{{ site.url('decks/' + deck.slug + '/' + gif) }}"{% endif %}
+          alt=""
+          loading="lazy"
+          decoding="async"
+          width="480"
+          height="270"
+        />
+        {% else %}
+        <div class="carousel-thumb-empty" aria-hidden="true">
+          <span>{{ deck.title[:1] }}</span>
+        </div>
+        {% endif %}
+        <div class="carousel-scrim" aria-hidden="true"></div>
+        <div class="carousel-card-content">
+          <div class="carousel-card-top">
+            {% if deck.category %}
+            <span class="carousel-badge">{{ deck.category }}</span>
+            {% endif %}
+            {% if created %}
+            <span class="carousel-created">
+              <i data-lucide="calendar" aria-hidden="true"></i>
+              {{ created }}
+            </span>
+            {% endif %}
+          </div>
+          <div class="carousel-card-bottom">
+            <h2>{{ deck.title }}</h2>
+            {% if deck.summary %}
+            <p>{{ deck.summary }}</p>
+            {% endif %}
+            <div class="carousel-card-actions">
+              <span class="carousel-play">
+                <i data-lucide="play" aria-hidden="true"></i>
+                Play now
+              </span>
+              {% if deck.duration_minutes %}
+              <span class="carousel-duration">{{ deck.duration_minutes }} min</span>
+              {% endif %}
+            </div>
+          </div>
+        </div>
+      </div>
+    </a>
+  </li>
+  {% endfor %}
+</ol>
+{% endblock %}