datalog-theme 0.6.0

data/_includes/components/email-preferences.html

@@ -0,0 +1,200 @@
+{%- comment -%}
+Email Subscription Preferences - Granular email controls
+{%- endcomment -%}
+
+<div class="email-preferences" data-email-preferences>
+  <h3>Email Preferences</h3>
+
+  <form class="email-preferences__form" data-preferences-form>
+    <div class="form-group">
+      <label for="email-input">Email Address</label>
+      <input type="email" id="email-input" name="email" required placeholder="your@email.com">
+    </div>
+
+    <fieldset class="form-group">
+      <legend>Subscription Types</legend>
+
+      <label class="checkbox-label">
+        <input type="checkbox" name="weekly_digest" value="true" checked>
+        <span>Weekly Digest</span>
+        <small>Best posts from the week, every Monday</small>
+      </label>
+
+      <label class="checkbox-label">
+        <input type="checkbox" name="new_posts" value="true">
+        <span>New Posts</span>
+        <small>Notification for each new post</small>
+      </label>
+
+      <label class="checkbox-label">
+        <input type="checkbox" name="comments" value="true">
+        <span>Comment Replies</span>
+        <small>When someone replies to your comments</small>
+      </label>
+
+      <label class="checkbox-label">
+        <input type="checkbox" name="newsletter" value="true" checked>
+        <span>Newsletter</span>
+        <small>Monthly newsletter with curated content</small>
+      </label>
+    </fieldset>
+
+    <fieldset class="form-group">
+      <legend>Content Preferences</legend>
+
+      <label class="checkbox-label">
+        <input type="checkbox" name="topic_ml" value="true">
+        <span>Machine Learning</span>
+      </label>
+
+      <label class="checkbox-label">
+        <input type="checkbox" name="topic_statistics" value="true">
+        <span>Statistics</span>
+      </label>
+
+      <label class="checkbox-label">
+        <input type="checkbox" name="topic_visualization" value="true">
+        <span>Data Visualization</span>
+      </label>
+
+      <label class="checkbox-label">
+        <input type="checkbox" name="topic_python" value="true">
+        <span>Python</span>
+      </label>
+    </fieldset>
+
+    <div class="form-group">
+      <label for="difficulty-select">Difficulty Level</label>
+      <select id="difficulty-select" name="difficulty">
+        <option value="all">All Levels</option>
+        <option value="beginner">Beginner</option>
+        <option value="intermediate">Intermediate</option>
+        <option value="advanced">Advanced</option>
+        <option value="expert">Expert</option>
+      </select>
+    </div>
+
+    <div class="form-actions">
+      <button type="submit" class="button button--primary">Save Preferences</button>
+      <button type="button" class="button button--secondary" data-unsubscribe>Unsubscribe</button>
+    </div>
+
+    <div class="form-message" data-message hidden></div>
+  </form>
+</div>
+
+<script>
+(function() {
+  'use strict';
+
+  const STORAGE_KEY = 'emailPreferences';
+
+  class EmailPreferences {
+    constructor() {
+      this.init();
+    }
+
+    init() {
+      const form = document.querySelector('[data-preferences-form]');
+      if (!form) return;
+
+      this.loadPreferences(form);
+
+      form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        this.savePreferences(form);
+      });
+
+      const unsubBtn = form.querySelector('[data-unsubscribe]');
+      unsubBtn?.addEventListener('click', () => this.unsubscribe(form));
+    }
+
+    loadPreferences(form) {
+      try {
+        const saved = localStorage.getItem(STORAGE_KEY);
+        if (!saved) return;
+
+        const prefs = JSON.parse(saved);
+
+        // Set email
+        const emailInput = form.querySelector('[name="email"]');
+        if (emailInput && prefs.email) {
+          emailInput.value = prefs.email;
+        }
+
+        // Set checkboxes
+        Object.keys(prefs).forEach(key => {
+          const input = form.querySelector(`[name="${key}"]`);
+          if (input && input.type === 'checkbox') {
+            input.checked = prefs[key] === 'true' || prefs[key] === true;
+          } else if (input && input.type !== 'email') {
+            input.value = prefs[key];
+          }
+        });
+      } catch (e) {
+        console.error('Failed to load preferences:', e);
+      }
+    }
+
+    savePreferences(form) {
+      const formData = new FormData(form);
+      const prefs = {};
+
+      for (const [key, value] of formData.entries()) {
+        prefs[key] = value;
+      }
+
+      // Save checkboxes that are unchecked
+      form.querySelectorAll('input[type="checkbox"]').forEach(cb => {
+        if (!cb.checked) {
+          prefs[cb.name] = 'false';
+        }
+      });
+
+      try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
+        this.showMessage(form, 'Preferences saved successfully!', 'success');
+
+        // In production, send to backend
+        // fetch('/api/email-preferences', {
+        //   method: 'POST',
+        //   headers: {'Content-Type': 'application/json'},
+        //   body: JSON.stringify(prefs)
+        // });
+      } catch (e) {
+        this.showMessage(form, 'Failed to save preferences', 'error');
+      }
+    }
+
+    unsubscribe(form) {
+      if (confirm('Are you sure you want to unsubscribe from all emails?')) {
+        try {
+          localStorage.removeItem(STORAGE_KEY);
+          form.reset();
+          this.showMessage(form, 'You have been unsubscribed', 'success');
+
+          // In production, send to backend
+          // fetch('/api/unsubscribe', {method: 'POST'});
+        } catch (e) {
+          this.showMessage(form, 'Failed to unsubscribe', 'error');
+        }
+      }
+    }
+
+    showMessage(form, text, type) {
+      const messageEl = form.querySelector('[data-message]');
+      if (!messageEl) return;
+
+      messageEl.textContent = text;
+      messageEl.className = `form-message form-message--${type}`;
+      messageEl.hidden = false;
+
+      setTimeout(() => {
+        messageEl.hidden = true;
+      }, 5000);
+    }
+  }
+
+  new EmailPreferences();
+})();
+</script>

data/_includes/components/enhanced-code-block.html

@@ -0,0 +1,212 @@
+{%- comment -%}
+Enhanced Code Block with Advanced Sharing Options
+Adds copy, download, and playground integration to code blocks
+
+Parameters:
+  - code: Code content
+  - language: Programming language
+  - filename: Optional filename for downloads
+  - playground_url: URL to online playground (optional)
+  - show_line_numbers: Show line numbers (default: true)
+{%- endcomment -%}
+
+{%- assign code_content = include.code -%}
+{%- assign language = include.language | default: "text" -%}
+{%- assign filename = include.filename -%}
+{%- assign playground_url = include.playground_url -%}
+{%- assign show_line_numbers = include.show_line_numbers | default: true -%}
+
+{%- assign code_id = "code-" | append: language | append: "-" | append: include.index | default: "1" -%}
+
+<div class="enhanced-code-block" data-enhanced-code data-language="{{ language }}">
+  <div class="enhanced-code-block__header">
+    <div class="enhanced-code-block__info">
+      <span class="enhanced-code-block__language">{{ language | upcase }}</span>
+      {%- if filename -%}
+        <span class="enhanced-code-block__filename">{{ filename }}</span>
+      {%- endif -%}
+    </div>
+
+    <div class="enhanced-code-block__actions">
+      {%- comment -%} Copy button {%- endcomment -%}
+      <button type="button"
+              class="enhanced-code-block__action"
+              data-action="copy"
+              data-code-id="{{ code_id }}"
+              aria-label="Copy code to clipboard"
+              title="Copy code">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+        </svg>
+        <span class="enhanced-code-block__action-text">Copy</span>
+      </button>
+
+      {%- comment -%} Download button {%- endcomment -%}
+      <button type="button"
+              class="enhanced-code-block__action"
+              data-action="download"
+              data-code-id="{{ code_id }}"
+              data-filename="{{ filename | default: 'code.' | append: language }}"
+              aria-label="Download code file"
+              title="Download">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+          <polyline points="7 10 12 15 17 10"></polyline>
+          <line x1="12" y1="15" x2="12" y2="3"></line>
+        </svg>
+        <span class="enhanced-code-block__action-text">Download</span>
+      </button>
+
+      {%- comment -%} Playground button {%- endcomment -%}
+      {%- if playground_url -%}
+        <a href="{{ playground_url }}"
+           class="enhanced-code-block__action"
+           target="_blank"
+           rel="noopener noreferrer"
+           aria-label="Open in playground"
+           title="Open in playground">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
+          </svg>
+          <span class="enhanced-code-block__action-text">Run</span>
+        </a>
+      {%- elsif language == "python" or language == "javascript" or language == "typescript" -%}
+        <button type="button"
+                class="enhanced-code-block__action"
+                data-action="playground"
+                data-code-id="{{ code_id }}"
+                aria-label="Open in online playground"
+                title="Open in playground">
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
+          </svg>
+          <span class="enhanced-code-block__action-text">Run</span>
+        </button>
+      {%- endif -%}
+
+      {%- comment -%} Share button {%- endcomment -%}
+      <button type="button"
+              class="enhanced-code-block__action"
+              data-action="share"
+              data-code-id="{{ code_id }}"
+              aria-label="Share code snippet"
+              title="Share snippet">
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+          <circle cx="18" cy="5" r="3"></circle>
+          <circle cx="6" cy="12" r="3"></circle>
+          <circle cx="18" cy="19" r="3"></circle>
+          <line x1="8.59" y1="13.51" x2="15.42" y2="17.49"></line>
+          <line x1="15.41" y1="6.51" x2="8.59" y2="10.49"></line>
+        </svg>
+        <span class="enhanced-code-block__action-text">Share</span>
+      </button>
+    </div>
+  </div>
+
+  <pre class="enhanced-code-block__pre{% if show_line_numbers %} enhanced-code-block__pre--numbered{% endif %}"><code id="{{ code_id }}" class="language-{{ language }}" data-code-content>{{ code_content }}</code></pre>
+
+  {%- comment -%} Feedback message {%- endcomment -%}
+  <div class="enhanced-code-block__feedback" data-feedback role="status" aria-live="polite"></div>
+</div>
+
+<script>
+(function() {
+  'use strict';
+
+  // Playground URLs for different languages
+  const playgroundUrls = {
+    python: 'https://repl.it/languages/python3',
+    javascript: 'https://jsfiddle.net/',
+    typescript: 'https://www.typescriptlang.org/play',
+    go: 'https://go.dev/play/',
+    rust: 'https://play.rust-lang.org/',
+    sql: 'https://www.db-fiddle.com/'
+  };
+
+  document.addEventListener('click', function(e) {
+    const button = e.target.closest('[data-action]');
+    if (!button) return;
+
+    const action = button.dataset.action;
+    const codeId = button.dataset.codeId;
+    const codeElement = document.getElementById(codeId);
+    if (!codeElement) return;
+
+    const code = codeElement.textContent;
+    const codeBlock = button.closest('[data-enhanced-code]');
+    const feedback = codeBlock.querySelector('[data-feedback]');
+
+    function showFeedback(message, type = 'success') {
+      if (feedback) {
+        feedback.textContent = message;
+        feedback.className = `enhanced-code-block__feedback enhanced-code-block__feedback--${type}`;
+        setTimeout(() => {
+          feedback.textContent = '';
+          feedback.className = 'enhanced-code-block__feedback';
+        }, 3000);
+      }
+    }
+
+    switch (action) {
+      case 'copy':
+        if (navigator.clipboard) {
+          navigator.clipboard.writeText(code).then(() => {
+            showFeedback('Code copied to clipboard!');
+            button.querySelector('.enhanced-code-block__action-text').textContent = 'Copied!';
+            setTimeout(() => {
+              button.querySelector('.enhanced-code-block__action-text').textContent = 'Copy';
+            }, 2000);
+          }).catch(() => {
+            showFeedback('Failed to copy code', 'error');
+          });
+        }
+        break;
+
+      case 'download':
+        const filename = button.dataset.filename || 'code.txt';
+        const blob = new Blob([code], { type: 'text/plain' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        link.click();
+        URL.revokeObjectURL(url);
+        showFeedback(`Downloaded as ${filename}`);
+        break;
+
+      case 'playground':
+        const language = codeBlock.dataset.language;
+        const playgroundUrl = playgroundUrls[language];
+        if (playgroundUrl) {
+          // Encode code and open in new window
+          window.open(playgroundUrl, '_blank', 'noopener,noreferrer');
+          showFeedback('Opening in playground...');
+        } else {
+          showFeedback('Playground not available for this language', 'error');
+        }
+        break;
+
+      case 'share':
+        if (navigator.share) {
+          navigator.share({
+            title: 'Code Snippet',
+            text: code
+          }).then(() => {
+            showFeedback('Shared successfully!');
+          }).catch((err) => {
+            if (err.name !== 'AbortError') {
+              showFeedback('Failed to share', 'error');
+            }
+          });
+        } else {
+          // Fallback: copy to clipboard
+          navigator.clipboard.writeText(code).then(() => {
+            showFeedback('Link copied to clipboard!');
+          });
+        }
+        break;
+    }
+  });
+})();
+</script>

data/_includes/components/enhanced-metadata.html

@@ -0,0 +1,228 @@
+{%- comment -%}
+Enhanced Metadata Display Component
+Displays comprehensive post metadata including last updated, related tags, and more
+
+Parameters:
+  - show_updated_date: Show last updated date (default: true)
+  - show_tags_cloud: Show related tags cloud (default: true)
+  - show_category_path: Show category breadcrumb (default: true)
+  - show_reading_level: Show reading level indicator (default: true)
+  - show_word_count: Show detailed word count (default: true)
+  - layout: Display layout (inline, stacked, card) (default: inline)
+{%- endcomment -%}
+
+{%- assign show_updated_date = include.show_updated_date | default: true -%}
+{%- assign show_tags_cloud = include.show_tags_cloud | default: true -%}
+{%- assign show_category_path = include.show_category_path | default: true -%}
+{%- assign show_reading_level = include.show_reading_level | default: true -%}
+{%- assign show_word_count = include.show_word_count | default: true -%}
+{%- assign layout = include.layout | default: "inline" -%}
+
+{%- comment -%} Calculate metadata {%- endcomment -%}
+{%- assign word_count = page.content | strip_html | number_of_words -%}
+{%- assign reading_time = word_count | divided_by: 200 | ceil -%}
+
+{%- comment -%} Determine reading level {%- endcomment -%}
+{%- if word_count < 500 -%}
+  {%- assign reading_level = "Quick Read" -%}
+  {%- assign level_class = "quick" -%}
+{%- elsif word_count < 1500 -%}
+  {%- assign reading_level = "Standard" -%}
+  {%- assign level_class = "standard" -%}
+{%- elsif word_count < 3000 -%}
+  {%- assign reading_level = "In-Depth" -%}
+  {%- assign level_class = "in-depth" -%}
+{%- else -%}
+  {%- assign reading_level = "Comprehensive" -%}
+  {%- assign level_class = "comprehensive" -%}
+{%- endif -%}
+
+{%- comment -%} Check for last updated date {%- endcomment -%}
+{%- assign has_updated_date = false -%}
+{%- if page.last_modified_at or page.updated_date -%}
+  {%- assign has_updated_date = true -%}
+  {%- assign updated_date = page.last_modified_at | default: page.updated_date -%}
+{%- endif -%}
+
+<div class="enhanced-metadata enhanced-metadata--{{ layout }}"
+     data-enhanced-metadata
+     itemscope
+     itemtype="https://schema.org/Article">
+
+  <div class="enhanced-metadata__primary">
+    {%- comment -%} Published date {%- endcomment -%}
+    <div class="metadata-item metadata-item--date">
+      <svg class="metadata-item__icon"
+           xmlns="http://www.w3.org/2000/svg"
+           width="16"
+           height="16"
+           viewBox="0 0 24 24"
+           fill="none"
+           stroke="currentColor"
+           stroke-width="2"
+           aria-hidden="true">
+        <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
+        <line x1="16" y1="2" x2="16" y2="6"></line>
+        <line x1="8" y1="2" x2="8" y2="6"></line>
+        <line x1="3" y1="10" x2="21" y2="10"></line>
+      </svg>
+      <span class="metadata-item__label">Published</span>
+      <time class="metadata-item__value"
+            datetime="{{ page.date | date_to_xmlschema }}"
+            itemprop="datePublished">
+        {{ page.date | date: "%B %d, %Y" }}
+      </time>
+    </div>
+
+    {%- comment -%} Updated date {%- endcomment -%}
+    {%- if show_updated_date and has_updated_date -%}
+      <div class="metadata-item metadata-item--updated">
+        <svg class="metadata-item__icon"
+             xmlns="http://www.w3.org/2000/svg"
+             width="16"
+             height="16"
+             viewBox="0 0 24 24"
+             fill="none"
+             stroke="currentColor"
+             stroke-width="2"
+             aria-hidden="true">
+          <polyline points="1 4 1 10 7 10"></polyline>
+          <polyline points="23 20 23 14 17 14"></polyline>
+          <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"></path>
+        </svg>
+        <span class="metadata-item__label">Updated</span>
+        <time class="metadata-item__value"
+              datetime="{{ updated_date | date_to_xmlschema }}"
+              itemprop="dateModified">
+          {{ updated_date | date: "%B %d, %Y" }}
+        </time>
+      </div>
+    {%- endif -%}
+
+    {%- comment -%} Author {%- endcomment -%}
+    {%- if page.author -%}
+      <div class="metadata-item metadata-item--author"
+           itemprop="author"
+           itemscope
+           itemtype="https://schema.org/Person">
+        <svg class="metadata-item__icon"
+             xmlns="http://www.w3.org/2000/svg"
+             width="16"
+             height="16"
+             viewBox="0 0 24 24"
+             fill="none"
+             stroke="currentColor"
+             stroke-width="2"
+             aria-hidden="true">
+          <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+          <circle cx="12" cy="7" r="4"></circle>
+        </svg>
+        <span class="metadata-item__label">By</span>
+        <span class="metadata-item__value" itemprop="name">{{ page.author }}</span>
+      </div>
+    {%- endif -%}
+
+    {%- comment -%} Word count and reading time {%- endcomment -%}
+    {%- if show_word_count -%}
+      <div class="metadata-item metadata-item--words">
+        <svg class="metadata-item__icon"
+             xmlns="http://www.w3.org/2000/svg"
+             width="16"
+             height="16"
+             viewBox="0 0 24 24"
+             fill="none"
+             stroke="currentColor"
+             stroke-width="2"
+             aria-hidden="true">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+          <polyline points="14 2 14 8 20 8"></polyline>
+          <line x1="16" y1="13" x2="8" y2="13"></line>
+          <line x1="16" y1="17" x2="8" y2="17"></line>
+          <polyline points="10 9 9 9 8 9"></polyline>
+        </svg>
+        <span class="metadata-item__value">
+          {{ word_count | divided_by: 1000 }},{{ word_count | modulo: 1000 | divided_by: 100 }}{{ word_count | modulo: 100 | divided_by: 10 }}{{ word_count | modulo: 10 }} words
+        </span>
+        <span class="metadata-item__separator">·</span>
+        <span class="metadata-item__value"
+              itemprop="timeRequired"
+              content="PT{{ reading_time }}M">
+          {{ reading_time }} min read
+        </span>
+      </div>
+    {%- endif -%}
+
+    {%- comment -%} Reading level {%- endcomment -%}
+    {%- if show_reading_level -%}
+      <div class="metadata-item metadata-item--level">
+        <span class="reading-level reading-level--{{ level_class }}">
+          {{ reading_level }}
+        </span>
+      </div>
+    {%- endif -%}
+  </div>
+
+  {%- comment -%} Category path {%- endcomment -%}
+  {%- if show_category_path and page.categories.size > 0 -%}
+    <div class="enhanced-metadata__categories">
+      <svg class="enhanced-metadata__categories-icon"
+           xmlns="http://www.w3.org/2000/svg"
+           width="14"
+           height="14"
+           viewBox="0 0 24 24"
+           fill="none"
+           stroke="currentColor"
+           stroke-width="2"
+           aria-hidden="true">
+        <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path>
+      </svg>
+      <nav class="category-path" aria-label="Categories">
+        {%- for category in page.categories -%}
+          {%- unless forloop.first -%}
+            <span class="category-path__separator" aria-hidden="true">/</span>
+          {%- endunless -%}
+          <a href="{{ '/categories/' | append: category | slugify | append: '/' | relative_url }}"
+             class="category-path__link">
+            {{ category }}
+          </a>
+        {%- endfor -%}
+      </nav>
+    </div>
+  {%- endif -%}
+
+  {%- comment -%} Tags cloud {%- endcomment -%}
+  {%- if show_tags_cloud and page.tags.size > 0 -%}
+    <div class="enhanced-metadata__tags">
+      <svg class="enhanced-metadata__tags-icon"
+           xmlns="http://www.w3.org/2000/svg"
+           width="14"
+           height="14"
+           viewBox="0 0 24 24"
+           fill="none"
+           stroke="currentColor"
+           stroke-width="2"
+           aria-hidden="true">
+        <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z"></path>
+        <line x1="7" y1="7" x2="7.01" y2="7"></line>
+      </svg>
+      <div class="tags-cloud" aria-label="Related tags">
+        {%- for tag in page.tags -%}
+          <a href="{{ '/tags/' | append: tag | slugify | append: '/' | relative_url }}"
+             class="tag-pill"
+             rel="tag">
+            {{ tag }}
+          </a>
+        {%- endfor -%}
+      </div>
+    </div>
+  {%- endif -%}
+
+  {%- comment -%} Additional structured data {%- endcomment -%}
+  <meta itemprop="wordCount" content="{{ word_count }}">
+  {%- if page.description -%}
+    <meta itemprop="description" content="{{ page.description | strip_html | truncate: 160 }}">
+  {%- endif -%}
+  {%- if page.featured_image or page.image -%}
+    <meta itemprop="image" content="{{ page.featured_image | default: page.image | absolute_url }}">
+  {%- endif -%}
+</div>