datalog-theme 0.6.0

data/_includes/components/navigation-enhancements.html

@@ -0,0 +1,454 @@
+{%- comment -%}
+Navigation Enhancements Component
+Provides back-to-top button and keyboard shortcuts
+
+Parameters:
+  - show_back_to_top: Show back-to-top button (default: true)
+  - show_keyboard_shortcuts: Enable keyboard shortcuts (default: true)
+  - back_to_top_threshold: Scroll threshold in pixels (default: 300)
+{%- endcomment -%}
+
+{%- assign show_back_to_top = include.show_back_to_top | default: true -%}
+{%- assign show_keyboard_shortcuts = include.show_keyboard_shortcuts | default: true -%}
+{%- assign back_to_top_threshold = include.back_to_top_threshold | default: 300 -%}
+
+{%- if show_back_to_top -%}
+  <button type="button"
+          class="back-to-top"
+          data-back-to-top
+          aria-label="Back to top"
+          hidden>
+    <svg class="back-to-top__icon"
+         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">
+      <line x1="12" y1="19" x2="12" y2="5"></line>
+      <polyline points="5 12 12 5 19 12"></polyline>
+    </svg>
+    <span class="back-to-top__text">Top</span>
+    <svg class="back-to-top__progress"
+         width="52"
+         height="52"
+         viewBox="0 0 52 52"
+         aria-hidden="true">
+      <circle class="back-to-top__progress-bg"
+              cx="26"
+              cy="26"
+              r="24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              opacity="0.2"></circle>
+      <circle class="back-to-top__progress-indicator"
+              cx="26"
+              cy="26"
+              r="24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              data-progress-circle></circle>
+    </svg>
+  </button>
+{%- endif -%}
+
+{%- if show_keyboard_shortcuts -%}
+  <div class="keyboard-shortcuts"
+       data-keyboard-shortcuts
+       role="dialog"
+       aria-modal="true"
+       aria-labelledby="shortcuts-title"
+       hidden>
+
+    <div class="keyboard-shortcuts__content">
+      <div class="keyboard-shortcuts__header">
+        <h3 class="keyboard-shortcuts__title" id="shortcuts-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">
+            <rect x="2" y="4" width="20" height="16" rx="2"></rect>
+            <path d="M6 8h.01M10 8h.01M14 8h.01M18 8h.01M8 12h.01M12 12h.01M16 12h.01M7 16h10"></path>
+          </svg>
+          Keyboard Shortcuts
+        </h3>
+
+        <button type="button"
+                class="keyboard-shortcuts__close"
+                data-shortcuts-close
+                aria-label="Close keyboard shortcuts">
+          <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="keyboard-shortcuts__body">
+        <div class="shortcuts-section">
+          <h4 class="shortcuts-section__title">Navigation</h4>
+          <dl class="shortcuts-list">
+            <div class="shortcuts-list__item">
+              <dt class="shortcuts-list__keys">
+                <kbd>g</kbd> <kbd>h</kbd>
+              </dt>
+              <dd class="shortcuts-list__description">Go to home page</dd>
+            </div>
+
+            <div class="shortcuts-list__item">
+              <dt class="shortcuts-list__keys">
+                <kbd>g</kbd> <kbd>a</kbd>
+              </dt>
+              <dd class="shortcuts-list__description">Go to archive</dd>
+            </div>
+
+            <div class="shortcuts-list__item">
+              <dt class="shortcuts-list__keys">
+                <kbd>←</kbd> / <kbd>→</kbd>
+              </dt>
+              <dd class="shortcuts-list__description">Previous / Next post</dd>
+            </div>
+
+            <div class="shortcuts-list__item">
+              <dt class="shortcuts-list__keys">
+                <kbd>↑</kbd> / <kbd>↓</kbd>
+              </dt>
+              <dd class="shortcuts-list__description">Scroll up / down</dd>
+            </div>
+          </dl>
+        </div>
+
+        <div class="shortcuts-section">
+          <h4 class="shortcuts-section__title">Actions</h4>
+          <dl class="shortcuts-list">
+            <div class="shortcuts-list__item">
+              <dt class="shortcuts-list__keys">
+                <kbd>/</kbd>
+              </dt>
+              <dd class="shortcuts-list__description">Focus search</dd>
+            </div>
+
+            <div class="shortcuts-list__item">
+              <dt class="shortcuts-list__keys">
+                <kbd>?</kbd>
+              </dt>
+              <dd class="shortcuts-list__description">Show this help</dd>
+            </div>
+
+            <div class="shortcuts-list__item">
+              <dt class="shortcuts-list__keys">
+                <kbd>Esc</kbd>
+              </dt>
+              <dd class="shortcuts-list__description">Close dialogs</dd>
+            </div>
+
+            <div class="shortcuts-list__item">
+              <dt class="shortcuts-list__keys">
+                <kbd>s</kbd>
+              </dt>
+              <dd class="shortcuts-list__description">Share current page</dd>
+            </div>
+          </dl>
+        </div>
+
+        <div class="shortcuts-section">
+          <h4 class="shortcuts-section__title">Reading</h4>
+          <dl class="shortcuts-list">
+            <div class="shortcuts-list__item">
+              <dt class="shortcuts-list__keys">
+                <kbd>r</kbd>
+              </dt>
+              <dd class="shortcuts-list__description">Toggle reading mode</dd>
+            </div>
+
+            <div class="shortcuts-list__item">
+              <dt class="shortcuts-list__keys">
+                <kbd>t</kbd>
+              </dt>
+              <dd class="shortcuts-list__description">Toggle theme</dd>
+            </div>
+
+            <div class="shortcuts-list__item">
+              <dt class="shortcuts-list__keys">
+                <kbd>+</kbd> / <kbd>-</kbd>
+              </dt>
+              <dd class="shortcuts-list__description">Increase / decrease font size</dd>
+            </div>
+
+            <div class="shortcuts-list__item">
+              <dt class="shortcuts-list__keys">
+                <kbd>0</kbd>
+              </dt>
+              <dd class="shortcuts-list__description">Reset font size</dd>
+            </div>
+          </dl>
+        </div>
+      </div>
+
+      <div class="keyboard-shortcuts__footer">
+        <p class="keyboard-shortcuts__hint">
+          Press <kbd>?</kbd> anytime to show shortcuts
+        </p>
+      </div>
+    </div>
+
+    <div class="keyboard-shortcuts__backdrop"
+         data-shortcuts-backdrop></div>
+  </div>
+{%- endif -%}
+
+<script>
+(function() {
+  'use strict';
+
+  // Back to Top functionality
+  const initBackToTop = () => {
+    const button = document.querySelector('[data-back-to-top]');
+    if (!button) return;
+
+    const progressCircle = button.querySelector('[data-progress-circle]');
+    const threshold = {{ back_to_top_threshold }};
+    const circumference = 2 * Math.PI * 24; // radius is 24
+
+    if (progressCircle) {
+      progressCircle.style.strokeDasharray = circumference;
+      progressCircle.style.strokeDashoffset = circumference;
+    }
+
+    let ticking = false;
+
+    const updateButton = () => {
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+      const scrollPercent = (scrollTop / docHeight) * 100;
+
+      // Show/hide button
+      button.hidden = scrollTop < threshold;
+
+      // Update progress circle
+      if (progressCircle) {
+        const offset = circumference - (scrollPercent / 100) * circumference;
+        progressCircle.style.strokeDashoffset = offset;
+      }
+
+      ticking = false;
+    };
+
+    const requestTick = () => {
+      if (!ticking) {
+        requestAnimationFrame(updateButton);
+        ticking = true;
+      }
+    };
+
+    window.addEventListener('scroll', requestTick, { passive: true });
+
+    button.addEventListener('click', () => {
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+      });
+    });
+
+    // Initial check
+    updateButton();
+  };
+
+  // Keyboard Shortcuts functionality
+  const initKeyboardShortcuts = () => {
+    const panel = document.querySelector('[data-keyboard-shortcuts]');
+    if (!panel) return;
+
+    const backdrop = panel.querySelector('[data-shortcuts-backdrop]');
+    const closeBtn = panel.querySelector('[data-shortcuts-close]');
+
+    const openPanel = () => {
+      panel.hidden = false;
+      document.body.style.overflow = 'hidden';
+      closeBtn?.focus();
+    };
+
+    const closePanel = () => {
+      panel.hidden = true;
+      document.body.style.overflow = '';
+    };
+
+    closeBtn?.addEventListener('click', closePanel);
+    backdrop?.addEventListener('click', closePanel);
+
+    // Keyboard shortcut handling
+    let keySequence = [];
+    let sequenceTimeout;
+
+    document.addEventListener('keydown', (e) => {
+      // Ignore if typing in input/textarea
+      if (e.target.matches('input, textarea, select')) {
+        return;
+      }
+
+      // ESC to close dialogs
+      if (e.key === 'Escape') {
+        if (!panel.hidden) {
+          closePanel();
+          e.preventDefault();
+        }
+        return;
+      }
+
+      // ? to show shortcuts
+      if (e.key === '?' && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        openPanel();
+        e.preventDefault();
+        return;
+      }
+
+      // Handle key sequences (g + h, g + a)
+      clearTimeout(sequenceTimeout);
+      keySequence.push(e.key.toLowerCase());
+      keySequence = keySequence.slice(-2); // Keep last 2 keys
+
+      sequenceTimeout = setTimeout(() => {
+        keySequence = [];
+      }, 1000);
+
+      const sequence = keySequence.join(' ');
+
+      // Navigation shortcuts
+      if (sequence === 'g h') {
+        window.location.href = '{{ "/" | relative_url }}';
+        e.preventDefault();
+      } else if (sequence === 'g a') {
+        window.location.href = '{{ "/archive/" | relative_url }}';
+        e.preventDefault();
+      }
+
+      // Single key shortcuts
+      switch (e.key) {
+        case '/':
+          // Focus search
+          const searchInput = document.querySelector('[data-search-input], input[type="search"]');
+          if (searchInput) {
+            searchInput.focus();
+            e.preventDefault();
+          }
+          break;
+
+        case 'ArrowLeft':
+          // Previous post
+          const prevLink = document.querySelector('.post-navigation__prev a, a[rel="prev"]');
+          if (prevLink && !e.ctrlKey && !e.metaKey) {
+            window.location.href = prevLink.href;
+            e.preventDefault();
+          }
+          break;
+
+        case 'ArrowRight':
+          // Next post
+          const nextLink = document.querySelector('.post-navigation__next a, a[rel="next"]');
+          if (nextLink && !e.ctrlKey && !e.metaKey) {
+            window.location.href = nextLink.href;
+            e.preventDefault();
+          }
+          break;
+
+        case 'r':
+          // Toggle reading mode
+          if (!e.ctrlKey && !e.metaKey) {
+            const readingModeToggle = document.querySelector('[data-reading-mode-toggle]');
+            if (readingModeToggle) {
+              readingModeToggle.click();
+              e.preventDefault();
+            }
+          }
+          break;
+
+        case 't':
+          // Toggle theme
+          if (!e.ctrlKey && !e.metaKey) {
+            const currentTheme = document.body.classList.contains('dark-mode') ? 'light' : 'dark';
+            const themeButton = document.querySelector(`[data-theme="${currentTheme}"]`);
+            if (themeButton) {
+              themeButton.click();
+              e.preventDefault();
+            }
+          }
+          break;
+
+        case '+':
+        case '=':
+          // Increase font size
+          if (!e.ctrlKey && !e.metaKey) {
+            const increaseBtn = document.querySelector('[data-font-size-control] [data-action="increase"]');
+            if (increaseBtn) {
+              increaseBtn.click();
+              e.preventDefault();
+            }
+          }
+          break;
+
+        case '-':
+          // Decrease font size
+          if (!e.ctrlKey && !e.metaKey) {
+            const decreaseBtn = document.querySelector('[data-font-size-control] [data-action="decrease"]');
+            if (decreaseBtn) {
+              decreaseBtn.click();
+              e.preventDefault();
+            }
+          }
+          break;
+
+        case '0':
+          // Reset font size
+          if (!e.ctrlKey && !e.metaKey) {
+            const resetBtn = document.querySelector('[data-font-size-control] [data-action="reset"]');
+            if (resetBtn) {
+              resetBtn.click();
+              e.preventDefault();
+            }
+          }
+          break;
+
+        case 's':
+          // Share (if native share available)
+          if (!e.ctrlKey && !e.metaKey && navigator.share) {
+            navigator.share({
+              title: document.title,
+              url: window.location.href
+            }).catch(() => {});
+            e.preventDefault();
+          }
+          break;
+      }
+    });
+  };
+
+  // Initialize when DOM is ready
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      initBackToTop();
+      initKeyboardShortcuts();
+    });
+  } else {
+    initBackToTop();
+    initKeyboardShortcuts();
+  }
+})();
+</script>

data/_includes/components/newsletter-signup.html

@@ -0,0 +1,178 @@
+{%- comment -%}
+Newsletter Signup Component
+Integrates with popular email services (Mailchimp, ConvertKit, Buttondown, etc.)
+
+Parameters:
+  - compact: Compact layout (default: false)
+  - inline: Inline layout (default: false)
+  - heading: Custom heading text
+  - description: Custom description text
+  - provider: Email provider (mailchimp, convertkit, buttondown, custom)
+{%- endcomment -%}
+
+{%- assign compact = include.compact | default: false -%}
+{%- assign inline = include.inline | default: false -%}
+{%- assign heading = include.heading | default: "Stay Updated" -%}
+{%- assign description = include.description | default: "Get the latest posts delivered right to your inbox" -%}
+{%- assign provider = include.provider | default: site.phase2_features.newsletter.provider | default: "custom" -%}
+
+{%- comment -%} Get provider settings from config {%- endcomment -%}
+{%- assign newsletter_config = site.phase2_features.newsletter -%}
+{%- assign action_url = newsletter_config.action_url -%}
+{%- assign success_message = newsletter_config.success_message | default: "Thanks for subscribing!" -%}
+
+<div class="newsletter-signup{% if compact %} newsletter-signup--compact{% endif %}{% if inline %} newsletter-signup--inline{% endif %}"
+     data-newsletter>
+  {% unless compact %}
+    <div class="newsletter-signup__icon" aria-hidden="true">
+      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
+        <polyline points="22,6 12,13 2,6"></polyline>
+      </svg>
+    </div>
+  {% endunless %}
+
+  <div class="newsletter-signup__content">
+    <h3 class="newsletter-signup__heading">{{ heading }}</h3>
+    <p class="newsletter-signup__description">{{ description }}</p>
+
+    <form class="newsletter-signup__form"
+          action="{{ action_url }}"
+          method="post"
+          target="_blank"
+          data-newsletter-form
+          novalidate>
+
+      <div class="newsletter-signup__input-group">
+        <label for="newsletter-email-{% if compact %}compact{% else %}full{% endif %}"
+               class="visually-hidden">
+          Email address
+        </label>
+        <input type="email"
+               id="newsletter-email-{% if compact %}compact{% else %}full{% endif %}"
+               name="email"
+               class="newsletter-signup__input"
+               placeholder="your@email.com"
+               required
+               aria-required="true"
+               aria-label="Email address">
+
+        <button type="submit"
+                class="newsletter-signup__button"
+                aria-label="Subscribe to newsletter">
+          <span class="newsletter-signup__button-text">Subscribe</span>
+          <svg class="newsletter-signup__button-icon"
+               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">
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+            <polyline points="12 5 19 12 12 19"></polyline>
+          </svg>
+        </button>
+      </div>
+
+      {%- comment -%} Error message {%- endcomment -%}
+      <div class="newsletter-signup__message newsletter-signup__message--error"
+           data-error-message
+           role="alert"
+           aria-live="assertive">
+      </div>
+
+      {%- comment -%} Success message {%- endcomment -%}
+      <div class="newsletter-signup__message newsletter-signup__message--success"
+           data-success-message
+           role="status"
+           aria-live="polite">
+      </div>
+
+      {%- comment -%} Privacy notice {%- endcomment -%}
+      <p class="newsletter-signup__privacy">
+        {% if newsletter_config.privacy_url %}
+          By subscribing, you agree to our
+          <a href="{{ newsletter_config.privacy_url }}" target="_blank" rel="noopener">privacy policy</a>.
+        {% else %}
+          We respect your privacy. Unsubscribe at any time.
+        {% endif %}
+      </p>
+
+      {%- comment -%} Honeypot field for spam protection {%- endcomment -%}
+      <div style="position: absolute; left: -5000px;" aria-hidden="true">
+        <input type="text" name="b_honeypot" tabindex="-1" value="">
+      </div>
+    </form>
+  </div>
+</div>
+
+<script>
+(function() {
+  'use strict';
+
+  document.addEventListener('DOMContentLoaded', function() {
+    const forms = document.querySelectorAll('[data-newsletter-form]');
+
+    forms.forEach(form => {
+      const newsletter = form.closest('[data-newsletter]');
+      const emailInput = form.querySelector('input[type="email"]');
+      const submitButton = form.querySelector('button[type="submit"]');
+      const errorMessage = form.querySelector('[data-error-message]');
+      const successMessage = form.querySelector('[data-success-message]');
+
+      form.addEventListener('submit', function(e) {
+        // Clear previous messages
+        if (errorMessage) errorMessage.textContent = '';
+        if (successMessage) successMessage.textContent = '';
+
+        // Validate email
+        if (!emailInput.validity.valid) {
+          e.preventDefault();
+          if (errorMessage) {
+            errorMessage.textContent = 'Please enter a valid email address.';
+          }
+          emailInput.focus();
+          return false;
+        }
+
+        // Show loading state
+        if (submitButton) {
+          const originalText = submitButton.querySelector('.newsletter-signup__button-text').textContent;
+          submitButton.disabled = true;
+          submitButton.querySelector('.newsletter-signup__button-text').textContent = 'Subscribing...';
+
+          // Re-enable after delay (for services that open in new tab)
+          setTimeout(() => {
+            submitButton.disabled = false;
+            submitButton.querySelector('.newsletter-signup__button-text').textContent = originalText;
+
+            // Show success message
+            if (successMessage) {
+              successMessage.textContent = '{{ success_message }}';
+            }
+
+            // Reset form
+            setTimeout(() => {
+              form.reset();
+              if (successMessage) successMessage.textContent = '';
+            }, 5000);
+          }, 2000);
+        }
+
+        // For custom implementations, you can prevent default and handle via AJAX
+        // e.preventDefault();
+        // handleAjaxSubmit(emailInput.value);
+      });
+
+      // Clear error on input
+      emailInput.addEventListener('input', function() {
+        if (errorMessage) errorMessage.textContent = '';
+      });
+    });
+  });
+})();
+</script>

data/_includes/components/open-science-badges.html

@@ -0,0 +1,16 @@
+{% assign badges = include.badges | default: site.data.academic.badges %}
+{% if badges and badges.size > 0 %}
+<section class="open-science-badges" aria-labelledby="open-science-badges-heading">
+  <h2 id="open-science-badges-heading">{% t 'open_science_badges.title' %}</h2>
+  <p class="open-science-badges__intro">{% t 'open_science_badges.description' %}</p>
+  <ul class="open-science-badges__list">
+    {% for badge in badges %}
+    <li class="open-science-badge" data-badge-label="{{ badge.label | slugify }}">
+      <span class="open-science-badge__label">{{ badge.label }}</span>
+      {% if badge.description %}<span class="open-science-badge__description">{{ badge.description }}</span>{% endif %}
+      {% if badge.criteria %}<span class="open-science-badge__criteria">{{ badge.criteria }}</span>{% endif %}
+    </li>
+    {% endfor %}
+  </ul>
+</section>
+{% endif %}