datalog-theme 0.6.0

data/_includes/components/package-install.html

@@ -0,0 +1,194 @@
+{%- comment -%}
+Package Installation Component
+Displays installation instructions for different package managers
+
+Parameters:
+  - language: python, r, julia, etc.
+  - package_name: Name of the package
+  - pip_command: Custom pip install command
+  - conda_command: Custom conda install command
+  - cran_command: Custom R install command
+  - git_url: GitHub clone URL
+{%- endcomment -%}
+
+{%- assign language = include.language | default: "python" -%}
+{%- assign package_name = include.package_name | default: page.title -%}
+{%- assign pip_command = include.pip_command -%}
+{%- assign conda_command = include.conda_command -%}
+{%- assign cran_command = include.cran_command -%}
+{%- assign git_url = include.git_url | default: page.github_url -%}
+
+<div class="package-install" id="installation">
+  <h2 class="package-install__title">Installation</h2>
+
+  {%- if language == "python" -%}
+    <div class="package-install__tabs" data-install-tabs>
+      <div class="package-install__tab-buttons">
+        <button class="package-install__tab-btn package-install__tab-btn--active"
+                data-tab="pip">
+          pip
+        </button>
+        <button class="package-install__tab-btn" data-tab="conda">
+          conda
+        </button>
+        <button class="package-install__tab-btn" data-tab="git">
+          Git
+        </button>
+      </div>
+
+      <div class="package-install__tab-content" data-tab-content="pip">
+        <div class="package-install__code-block">
+          <div class="package-install__code-header">
+            <span class="package-install__code-label">Terminal</span>
+            <button class="package-install__copy-btn" data-copy-btn>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <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>
+              Copy
+            </button>
+          </div>
+          <pre><code data-copy-text>{{ pip_command | default: "pip install " | append: package_name }}</code></pre>
+        </div>
+      </div>
+
+      <div class="package-install__tab-content" data-tab-content="conda" hidden>
+        <div class="package-install__code-block">
+          <div class="package-install__code-header">
+            <span class="package-install__code-label">Terminal</span>
+            <button class="package-install__copy-btn" data-copy-btn>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <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>
+              Copy
+            </button>
+          </div>
+          <pre><code data-copy-text>{{ conda_command | default: "conda install " | append: package_name }}</code></pre>
+        </div>
+      </div>
+
+      <div class="package-install__tab-content" data-tab-content="git" hidden>
+        <div class="package-install__code-block">
+          <div class="package-install__code-header">
+            <span class="package-install__code-label">Terminal</span>
+            <button class="package-install__copy-btn" data-copy-btn>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <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>
+              Copy
+            </button>
+          </div>
+          <pre><code data-copy-text>git clone {{ git_url }}
+cd {{ package_name }}
+pip install -e .</code></pre>
+        </div>
+      </div>
+    </div>
+
+  {%- elsif language == "r" -%}
+    <div class="package-install__tabs" data-install-tabs>
+      <div class="package-install__tab-buttons">
+        <button class="package-install__tab-btn package-install__tab-btn--active" data-tab="cran">
+          CRAN
+        </button>
+        <button class="package-install__tab-btn" data-tab="github">
+          GitHub
+        </button>
+      </div>
+
+      <div class="package-install__tab-content" data-tab-content="cran">
+        <div class="package-install__code-block">
+          <div class="package-install__code-header">
+            <span class="package-install__code-label">R Console</span>
+            <button class="package-install__copy-btn" data-copy-btn>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <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>
+              Copy
+            </button>
+          </div>
+          <pre><code data-copy-text>{{ cran_command | default: "install.packages('" | append: package_name | append: "')" }}</code></pre>
+        </div>
+      </div>
+
+      <div class="package-install__tab-content" data-tab-content="github" hidden>
+        <div class="package-install__code-block">
+          <div class="package-install__code-header">
+            <span class="package-install__code-label">R Console</span>
+            <button class="package-install__copy-btn" data-copy-btn>
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <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>
+              Copy
+            </button>
+          </div>
+          <pre><code data-copy-text>devtools::install_github("{{ git_url | remove: "https://github.com/" }}")</code></pre>
+        </div>
+      </div>
+    </div>
+  {%- endif -%}
+</div>
+
+<script>
+(function() {
+  'use strict';
+
+  const initInstallTabs = () => {
+    const containers = document.querySelectorAll('[data-install-tabs]');
+
+    containers.forEach(container => {
+      const tabBtns = container.querySelectorAll('[data-tab]');
+      const tabContents = container.querySelectorAll('[data-tab-content]');
+      const copyBtns = container.querySelectorAll('[data-copy-btn]');
+
+      // Tab switching
+      tabBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+          const tabName = btn.dataset.tab;
+
+          // Update buttons
+          tabBtns.forEach(b => b.classList.remove('package-install__tab-btn--active'));
+          btn.classList.add('package-install__tab-btn--active');
+
+          // Update content
+          tabContents.forEach(content => {
+            content.hidden = content.dataset.tabContent !== tabName;
+          });
+        });
+      });
+
+      // Copy functionality
+      copyBtns.forEach(btn => {
+        btn.addEventListener('click', async () => {
+          const codeEl = btn.closest('.package-install__code-block').querySelector('[data-copy-text]');
+          const text = codeEl.textContent.trim();
+
+          try {
+            await navigator.clipboard.writeText(text);
+            const originalHTML = btn.innerHTML;
+            btn.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> Copied!';
+            btn.classList.add('package-install__copy-btn--success');
+
+            setTimeout(() => {
+              btn.innerHTML = originalHTML;
+              btn.classList.remove('package-install__copy-btn--success');
+            }, 2000);
+          } catch (err) {
+            console.error('Failed to copy:', err);
+          }
+        });
+      });
+    });
+  };
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initInstallTabs);
+  } else {
+    initInstallTabs();
+  }
+})();
+</script>

data/_includes/components/performance-monitor.html

@@ -0,0 +1,170 @@
+{%- comment -%}
+Performance Monitoring - Track Core Web Vitals and RUM
+{%- endcomment -%}
+
+<script>
+(function() {
+  'use strict';
+
+  class PerformanceMonitor {
+    constructor() {
+      this.metrics = {};
+      this.init();
+    }
+
+    init() {
+      // Core Web Vitals
+      this.measureCLS();
+      this.measureFID();
+      this.measureLCP();
+      this.measureTTFB();
+      this.measureFCP();
+
+      // Custom metrics
+      this.measurePageLoad();
+      this.measureResourceTiming();
+
+      // Report after page load
+      window.addEventListener('load', () => {
+        setTimeout(() => this.reportMetrics(), 2000);
+      });
+    }
+
+    measureCLS() {
+      let clsValue = 0;
+      let clsEntries = [];
+
+      const observer = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          if (!entry.hadRecentInput) {
+            clsValue += entry.value;
+            clsEntries.push(entry);
+          }
+        }
+      });
+
+      observer.observe({type: 'layout-shift', buffered: true});
+      this.metrics.cls = () => clsValue;
+    }
+
+    measureFID() {
+      const observer = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          this.metrics.fid = entry.processingStart - entry.startTime;
+        }
+      });
+
+      observer.observe({type: 'first-input', buffered: true});
+    }
+
+    measureLCP() {
+      const observer = new PerformanceObserver((list) => {
+        const entries = list.getEntries();
+        const lastEntry = entries[entries.length - 1];
+        this.metrics.lcp = lastEntry.renderTime || lastEntry.loadTime;
+      });
+
+      observer.observe({type: 'largest-contentful-paint', buffered: true});
+    }
+
+    measureTTFB() {
+      const navTiming = performance.getEntriesByType('navigation')[0];
+      if (navTiming) {
+        this.metrics.ttfb = navTiming.responseStart - navTiming.requestStart;
+      }
+    }
+
+    measureFCP() {
+      const observer = new PerformanceObserver((list) => {
+        for (const entry of list.getEntries()) {
+          if (entry.name === 'first-contentful-paint') {
+            this.metrics.fcp = entry.startTime;
+          }
+        }
+      });
+
+      observer.observe({type: 'paint', buffered: true});
+    }
+
+    measurePageLoad() {
+      window.addEventListener('load', () => {
+        const navTiming = performance.getEntriesByType('navigation')[0];
+        if (navTiming) {
+          this.metrics.domContentLoaded = navTiming.domContentLoadedEventEnd - navTiming.domContentLoadedEventStart;
+          this.metrics.loadComplete = navTiming.loadEventEnd - navTiming.loadEventStart;
+          this.metrics.totalTime = navTiming.loadEventEnd - navTiming.fetchStart;
+        }
+      });
+    }
+
+    measureResourceTiming() {
+      window.addEventListener('load', () => {
+        const resources = performance.getEntriesByType('resource');
+        const byType = {};
+
+        resources.forEach(resource => {
+          const type = resource.initiatorType;
+          if (!byType[type]) byType[type] = {count: 0, totalSize: 0, totalDuration: 0};
+
+          byType[type].count++;
+          byType[type].totalSize += resource.transferSize || 0;
+          byType[type].totalDuration += resource.duration;
+        });
+
+        this.metrics.resources = byType;
+      });
+    }
+
+    reportMetrics() {
+      const report = {
+        url: window.location.href,
+        userAgent: navigator.userAgent,
+        connection: navigator.connection ? {
+          effectiveType: navigator.connection.effectiveType,
+          downlink: navigator.connection.downlink,
+          rtt: navigator.connection.rtt
+        } : null,
+        metrics: {
+          cls: typeof this.metrics.cls === 'function' ? this.metrics.cls() : this.metrics.cls,
+          fid: this.metrics.fid,
+          lcp: this.metrics.lcp,
+          ttfb: this.metrics.ttfb,
+          fcp: this.metrics.fcp,
+          domContentLoaded: this.metrics.domContentLoaded,
+          loadComplete: this.metrics.loadComplete,
+          totalTime: this.metrics.totalTime
+        },
+        resources: this.metrics.resources,
+        timestamp: new Date().toISOString()
+      };
+
+      // Log to console (in production, send to analytics endpoint)
+      console.log('Performance Metrics:', report);
+
+      // Store in localStorage for debugging
+      try {
+        const history = JSON.parse(localStorage.getItem('performanceHistory') || '[]');
+        history.push(report);
+        localStorage.setItem('performanceHistory', JSON.stringify(history.slice(-10))); // Keep last 10
+      } catch (e) {
+        console.error('Failed to store performance metrics:', e);
+      }
+
+      // Send to analytics (if configured)
+      if (window.gtag) {
+        window.gtag('event', 'web_vitals', {
+          event_category: 'Performance',
+          cls: report.metrics.cls,
+          fid: report.metrics.fid,
+          lcp: report.metrics.lcp
+        });
+      }
+    }
+  }
+
+  // Initialize
+  if ('PerformanceObserver' in window) {
+    new PerformanceMonitor();
+  }
+})();
+</script>

data/_includes/components/popular-posts.html

@@ -0,0 +1,233 @@
+{%- comment -%}
+Popular Posts Widget Component
+Displays trending and most popular content
+
+Parameters:
+  - max_posts: Maximum posts to display (default: 5)
+  - sort_by: Sorting method (recent, comments, trending) (default: recent)
+  - show_stats: Show reading stats (default: true)
+  - show_thumbnail: Show post thumbnail (default: true)
+  - layout: Display layout (list, grid, compact) (default: list)
+  - heading: Custom heading (default: "Popular Posts")
+{%- endcomment -%}
+
+{%- assign max_posts = include.max_posts | default: 5 -%}
+{%- assign sort_by = include.sort_by | default: "recent" -%}
+{%- assign show_stats = include.show_stats | default: true -%}
+{%- assign show_thumbnail = include.show_thumbnail | default: true -%}
+{%- assign layout = include.layout | default: "list" -%}
+{%- assign heading = include.heading | default: "Popular Posts" -%}
+
+{%- comment -%} Get posts and apply basic filtering {%- endcomment -%}
+{%- assign all_posts = site.posts -%}
+
+{%- comment -%} Simulate popularity scoring (in real app, use analytics data) {%- endcomment -%}
+{%- assign scored_posts = "" | split: "" -%}
+
+{%- for post in all_posts limit: 20 -%}
+  {%- assign score = 0 -%}
+
+  {%- comment -%} Recency score (prefer recent content) {%- endcomment -%}
+  {%- assign days_old = "now" | date: "%s" | minus: post.date | date: "%s" | divided_by: 86400 -%}
+  {%- if days_old < 7 -%}
+    {%- assign score = score | plus: 50 -%}
+  {%- elsif days_old < 30 -%}
+    {%- assign score = score | plus: 30 -%}
+  {%- elsif days_old < 90 -%}
+    {%- assign score = score | plus: 10 -%}
+  {%- endif -%}
+
+  {%- comment -%} Tag count (more tags = more discoverable) {%- endcomment -%}
+  {%- assign tag_score = post.tags.size | times: 5 -%}
+  {%- assign score = score | plus: tag_score -%}
+
+  {%- comment -%} Featured posts bonus {%- endcomment -%}
+  {%- if post.featured -%}
+    {%- assign score = score | plus: 25 -%}
+  {%- endif -%}
+
+  {%- comment -%} Difficulty-based scoring (beginner posts might be more popular) {%- endcomment -%}
+  {%- if post.difficulty == "beginner" -%}
+    {%- assign score = score | plus: 15 -%}
+  {%- endif -%}
+
+  {%- comment -%} Add randomness for variety (simulates view counts) {%- endcomment -%}
+  {%- assign random_bonus = post.title | size | modulo: 30 -%}
+  {%- assign score = score | plus: random_bonus -%}
+
+  {%- comment -%} Store post with score {%- endcomment -%}
+  {%- assign post_with_score = post.url | append: "||" | append: score -%}
+  {%- assign scored_posts = scored_posts | push: post_with_score -%}
+{%- endfor -%}
+
+{%- comment -%} Simple bubble sort by score {%- endcomment -%}
+{%- assign sorted_posts = scored_posts -%}
+{%- for i in (1..scored_posts.size) -%}
+  {%- for j in (1..scored_posts.size) -%}
+    {%- assign current = sorted_posts[j] | split: "||" -%}
+    {%- assign prev = sorted_posts[j-1] | split: "||" -%}
+    {%- if current[1] and prev[1] -%}
+      {%- assign current_score = current[1] | plus: 0 -%}
+      {%- assign prev_score = prev[1] | plus: 0 -%}
+      {%- if current_score > prev_score -%}
+        {%- assign temp = sorted_posts[j] -%}
+        {%- assign sorted_posts[j] = sorted_posts[j-1] -%}
+        {%- assign sorted_posts[j-1] = temp -%}
+      {%- endif -%}
+    {%- endif -%}
+  {%- endfor -%}
+{%- endfor -%}
+
+{%- comment -%} Build popular posts array {%- endcomment -%}
+{%- assign popular_posts = "" | split: "" -%}
+{%- for item in sorted_posts limit: max_posts -%}
+  {%- assign item_parts = item | split: "||" -%}
+  {%- assign post_url = item_parts[0] -%}
+
+  {%- for post in site.posts -%}
+    {%- if post.url == post_url -%}
+      {%- assign popular_posts = popular_posts | push: post -%}
+      {%- break -%}
+    {%- endif -%}
+  {%- endfor -%}
+{%- endfor -%}
+
+<aside class="popular-posts popular-posts--{{ layout }}"
+       data-popular-posts
+       aria-label="{{ heading }}">
+
+  <div class="popular-posts__header">
+    <h3 class="popular-posts__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"
+           stroke-linecap="round"
+           stroke-linejoin="round"
+           aria-hidden="true">
+        <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
+        <polyline points="17 6 23 6 23 12"></polyline>
+      </svg>
+      {{ heading }}
+    </h3>
+
+    {%- if show_stats -%}
+      <span class="popular-posts__subtitle">
+        Trending this month
+      </span>
+    {%- endif -%}
+  </div>
+
+  <div class="popular-posts__list">
+    {%- for post in popular_posts -%}
+      {%- assign loop_index = forloop.index -%}
+
+      <article class="popular-post"
+               itemscope
+               itemtype="https://schema.org/BlogPosting">
+
+        <div class="popular-post__rank" aria-label="Rank {{ loop_index }}">
+          {{ loop_index }}
+        </div>
+
+        {%- if show_thumbnail and post.featured_image or post.image -%}
+          <div class="popular-post__thumbnail">
+            <a href="{{ post.url | relative_url }}"
+               tabindex="-1"
+               aria-hidden="true">
+              <img src="{{ post.featured_image | default: post.image | relative_url }}"
+                   alt=""
+                   loading="lazy"
+                   itemprop="image">
+            </a>
+          </div>
+        {%- endif -%}
+
+        <div class="popular-post__content">
+          <h4 class="popular-post__title" itemprop="headline">
+            <a href="{{ post.url | relative_url }}"
+               class="popular-post__link">
+              {{ post.title }}
+            </a>
+          </h4>
+
+          {%- if show_stats -%}
+            <div class="popular-post__meta">
+              {%- if post.date -%}
+                <time class="popular-post__date"
+                      datetime="{{ post.date | date_to_xmlschema }}"
+                      itemprop="datePublished">
+                  {{ post.date | date: "%b %d, %Y" }}
+                </time>
+              {%- endif -%}
+
+              <span class="popular-post__separator" aria-hidden="true">•</span>
+
+              {%- comment -%} Reading time {%- endcomment -%}
+              {% include components/reading-time.html
+                 content=post.content
+                 variant="inline"
+                 show_icon=false %}
+
+              {%- comment -%} View count removed — was simulated. Re-enable with real analytics data. {%- endcomment -%}
+            </div>
+          {%- endif -%}
+
+          {%- if post.excerpt and layout != "compact" -%}
+            <p class="popular-post__excerpt" itemprop="description">
+              {{ post.excerpt | strip_html | truncatewords: 15 }}
+            </p>
+          {%- endif -%}
+
+          {%- if post.tags.size > 0 and layout == "grid" -%}
+            <div class="popular-post__tags">
+              {%- for tag in post.tags limit: 2 -%}
+                <span class="popular-post__tag">{{ tag }}</span>
+              {%- endfor -%}
+            </div>
+          {%- endif -%}
+        </div>
+
+        {%- comment -%} Trending indicator for top 3 {%- endcomment -%}
+        {%- if loop_index <= 3 -%}
+          <div class="popular-post__badge" aria-label="Trending">
+            <svg xmlns="http://www.w3.org/2000/svg"
+                 width="16"
+                 height="16"
+                 viewBox="0 0 24 24"
+                 fill="none"
+                 stroke="currentColor"
+                 stroke-width="2"
+                 aria-hidden="true">
+              <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"></polyline>
+              <polyline points="17 6 23 6 23 12"></polyline>
+            </svg>
+          </div>
+        {%- endif -%}
+      </article>
+    {%- endfor -%}
+  </div>
+
+  {%- if site.phase4_features.popular_posts.show_view_all -%}
+    <div class="popular-posts__footer">
+      <a href="{{ '/archive/' | relative_url }}"
+         class="popular-posts__view-all">
+        View all posts
+        <svg xmlns="http://www.w3.org/2000/svg"
+             width="16"
+             height="16"
+             viewBox="0 0 24 24"
+             fill="none"
+             stroke="currentColor"
+             stroke-width="2"
+             aria-hidden="true">
+          <line x1="5" y1="12" x2="19" y2="12"></line>
+          <polyline points="12 5 19 12 12 19"></polyline>
+        </svg>
+      </a>
+    </div>
+  {%- endif -%}
+</aside>

data/_includes/components/post-hero.html

@@ -0,0 +1,62 @@
+{%- comment -%}
+---
+required:
+  - page
+---
+Renders a post hero from the `post_hero` hash, which the Minimal Mistakes
+compatibility hook (_plugins/front_matter_compat.rb) builds from `header.*`
+fields and which can also be written directly:
+
+  post_hero:
+    image: /assets/images/hero.jpg
+    overlay: true          # title over the image, as Minimal Mistakes does
+    overlay_filter: 0.35   # number, rgba(...) or a gradient
+    overlay_color: "#123"
+    alt: Description of the image (figure variant)
+    caption: Caption under the image (figure variant)
+
+The overlay variant sets its background through a nonce-carrying <style>
+element rather than a style attribute, because the theme's Content Security
+Policy does not allow inline style attributes.
+{%- endcomment -%}
+{%- assign hero = include.page.post_hero -%}
+{%- assign hero_src = hero.image -%}
+{%- unless hero_src contains '://' -%}
+  {%- assign hero_src = hero_src | relative_url -%}
+{%- endunless -%}
+{%- assign hero_alt = hero.alt | default: include.page.title | default: '' | strip_html | strip_newlines -%}
+{%- assign overlay_filter = '' -%}
+{%- if hero.overlay_filter -%}
+  {%- assign filter_value = hero.overlay_filter | append: '' -%}
+  {%- if filter_value contains 'gradient' -%}
+    {%- assign overlay_filter = filter_value -%}
+  {%- elsif filter_value contains 'rgba' -%}
+    {%- assign overlay_filter = 'linear-gradient(' | append: filter_value | append: ', ' | append: filter_value | append: ')' -%}
+  {%- else -%}
+    {%- assign rgba = 'rgba(0, 0, 0, ' | append: filter_value | append: ')' -%}
+    {%- assign overlay_filter = 'linear-gradient(' | append: rgba | append: ', ' | append: rgba | append: ')' -%}
+  {%- endif -%}
+{%- endif -%}
+{%- if hero.overlay -%}
+{%- assign hero_id = include.page.url | default: 'page' | slugify | prepend: 'post-hero-' -%}
+<style nonce="{{ page.csp_nonce }}">
+  #{{ hero_id }} { {% if hero.overlay_color %}background-color: {{ hero.overlay_color }}; {% endif %}background-image: {% if overlay_filter != '' %}{{ overlay_filter }}, {% endif %}url('{{ hero_src }}'); }
+</style>
+<div id="{{ hero_id }}" class="post-hero post-hero--overlay">
+  <div class="post-hero__inner">
+    {%- if include.page.title -%}
+    <h1 class="article-title post-hero__title" itemprop="headline">{{ include.page.title }}</h1>
+    {%- endif -%}
+    {%- if include.page.subtitle -%}
+    <p class="post-hero__subtitle">{{ include.page.subtitle }}</p>
+    {%- endif -%}
+  </div>
+</div>
+{%- else -%}
+<figure class="post-hero">
+  <img class="post-hero__image" src="{{ hero_src }}" alt="{{ hero_alt | escape_once }}" loading="eager" decoding="async" />
+  {%- if hero.caption -%}
+  <figcaption class="post-hero__caption">{{ hero.caption | markdownify | strip_html | strip_newlines }}</figcaption>
+  {%- endif -%}
+</figure>
+{%- endif -%}