datalog-theme 0.6.0

data/_includes/components/series-navigation.html

@@ -0,0 +1,124 @@
+{%- comment -%}
+Series/Collection Navigation Component
+Displays navigation for multi-part content series
+
+Parameters:
+  - series: Series name/ID
+  - show_progress: Show progress indicator (default: true)
+  - compact: Compact layout (default: false)
+{%- endcomment -%}
+
+{%- assign series_name = include.series | default: page.series -%}
+{%- assign show_progress = include.show_progress | default: true -%}
+{%- assign compact = include.compact | default: false -%}
+
+{%- if series_name -%}
+  {%- comment -%} Get all posts in this series {%- endcomment -%}
+  {%- assign series_posts = site.posts | where: "series", series_name | sort: "series_order" -%}
+  {%- assign series_count = series_posts | size -%}
+
+  {%- if series_count > 0 -%}
+    {%- comment -%} Find current post position {%- endcomment -%}
+    {%- assign current_index = 0 -%}
+    {%- for post in series_posts -%}
+      {%- if post.url == page.url -%}
+        {%- assign current_index = forloop.index -%}
+      {%- endif -%}
+    {%- endfor -%}
+
+    <nav class="series-nav{% if compact %} series-nav--compact{% endif %}"
+         aria-label="Series navigation: {{ series_name }}">
+      <div class="series-nav__header">
+        <svg class="series-nav__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">
+          <path d="M12 2v20M2 12h20"></path>
+          <path d="M16 8l4 4-4 4M8 16l-4-4 4-4"></path>
+        </svg>
+        <h3 class="series-nav__title">
+          <span class="series-nav__label">Series:</span>
+          {{ series_name }}
+        </h3>
+      </div>
+
+      {%- if show_progress -%}
+        <div class="series-nav__progress" aria-label="Series progress">
+          <div class="series-nav__progress-bar">
+            <div class="series-nav__progress-fill"
+                 style="width: {{ current_index | times: 100 | divided_by: series_count }}%"
+                 role="progressbar"
+                 aria-valuenow="{{ current_index }}"
+                 aria-valuemin="0"
+                 aria-valuemax="{{ series_count }}"
+                 aria-label="Part {{ current_index }} of {{ series_count }}">
+            </div>
+          </div>
+          <span class="series-nav__progress-text">
+            Part {{ current_index }} of {{ series_count }}
+          </span>
+        </div>
+      {%- endif -%}
+
+      <ol class="series-nav__list">
+        {%- for post in series_posts -%}
+          {%- assign is_current = false -%}
+          {%- if post.url == page.url -%}
+            {%- assign is_current = true -%}
+          {%- endif -%}
+
+          <li class="series-nav__item{% if is_current %} series-nav__item--current{% endif %}">
+            <div class="series-nav__number">{{ forloop.index }}</div>
+            {%- if is_current -%}
+              <div class="series-nav__content">
+                <strong class="series-nav__post-title">{{ post.title }}</strong>
+                <span class="series-nav__badge">Current</span>
+              </div>
+            {%- else -%}
+              <a href="{{ post.url | relative_url }}" class="series-nav__content">
+                <span class="series-nav__post-title">{{ post.title }}</span>
+                {%- if post.excerpt -%}
+                  <span class="series-nav__excerpt">{{ post.excerpt | strip_html | truncate: 80 }}</span>
+                {%- endif -%}
+              </a>
+            {%- endif -%}
+          </li>
+        {%- endfor -%}
+      </ol>
+
+      {%- comment -%} Previous/Next navigation {%- endcomment -%}
+      <div class="series-nav__controls">
+        {%- if current_index > 1 -%}
+          {%- assign prev_post = series_posts[current_index | minus: 2] -%}
+          <a href="{{ prev_post.url | relative_url }}" class="series-nav__button series-nav__button--prev">
+            <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">
+              <polyline points="15 18 9 12 15 6"></polyline>
+            </svg>
+            Previous
+          </a>
+        {%- else -%}
+          <div class="series-nav__button series-nav__button--disabled">
+            <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">
+              <polyline points="15 18 9 12 15 6"></polyline>
+            </svg>
+            Previous
+          </div>
+        {%- endif -%}
+
+        {%- if current_index < series_count -%}
+          {%- assign next_post = series_posts[current_index] -%}
+          <a href="{{ next_post.url | relative_url }}" class="series-nav__button series-nav__button--next">
+            Next
+            <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">
+              <polyline points="9 18 15 12 9 6"></polyline>
+            </svg>
+          </a>
+        {%- else -%}
+          <div class="series-nav__button series-nav__button--disabled">
+            Next
+            <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">
+              <polyline points="9 18 15 12 9 6"></polyline>
+            </svg>
+          </div>
+        {%- endif -%}
+      </div>
+    </nav>
+  {%- endif -%}
+{%- endif -%}

data/_includes/components/social-proof.html

@@ -0,0 +1,34 @@
+{%- comment -%}
+Social Proof Indicators Component
+
+This component requires REAL metrics passed via include parameters.
+It does NOT generate simulated/fabricated data.
+
+Usage (only when real analytics data is available):
+  {% include components/social-proof.html views=page_views %}
+
+To enable real data, configure GA4 analytics and use the analytics
+dashboard plugin to fetch actual page view counts.
+
+See: https://github.com/DiogoRibeiro7/analytics-blog-jekyll/issues/23
+{%- endcomment -%}
+
+{%- if include.views or include.readers -%}
+<div class="social-proof{% if include.compact %} social-proof--compact{% endif %}"
+     data-social-proof>
+  <div class="social-proof__metrics">
+    {%- if include.views -%}
+      <div class="social-proof__metric" data-metric="views">
+        <span class="social-proof__value">{{ include.views }}</span>
+        <span class="social-proof__label">views</span>
+      </div>
+    {%- endif -%}
+    {%- if include.readers -%}
+      <div class="social-proof__metric" data-metric="readers">
+        <span class="social-proof__value">{{ include.readers }}</span>
+        <span class="social-proof__label">reading now</span>
+      </div>
+    {%- endif -%}
+  </div>
+</div>
+{%- endif -%}

data/_includes/components/social-share.html

@@ -0,0 +1,119 @@
+{%- comment -%}
+Enhanced social sharing buttons with icons and analytics tracking
+Parameters:
+  - url: URL to share (default: page.url)
+  - title: Title to share (default: page.title)
+  - description: Description for sharing (default: page.excerpt)
+  - show_count: Show share count (default: false)
+{%- endcomment -%}
+
+{%- assign share_url = include.url | default: page.url | absolute_url -%}
+{%- assign share_title = include.title | default: page.title -%}
+{%- assign share_description = include.description | default: page.excerpt | strip_html | truncate: 200 -%}
+{%- assign show_count = include.show_count | default: false -%}
+
+<div class="social-share" aria-label="Share this article">
+  <h3 class="social-share__heading">Share this article</h3>
+  <div class="social-share__buttons">
+    {%- comment -%} Twitter/X Share {%- endcomment -%}
+    <a href="https://twitter.com/intent/tweet?url={{ share_url | uri_escape }}&text={{ share_title | uri_escape }}"
+       class="social-share__button social-share__button--twitter"
+       target="_blank"
+       rel="noopener noreferrer"
+       aria-label="Share on Twitter"
+       data-share-platform="twitter">
+      <svg class="social-share__icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
+      </svg>
+      <span class="social-share__label">Twitter</span>
+    </a>
+
+    {%- comment -%} LinkedIn Share {%- endcomment -%}
+    <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ share_url | uri_escape }}"
+       class="social-share__button social-share__button--linkedin"
+       target="_blank"
+       rel="noopener noreferrer"
+       aria-label="Share on LinkedIn"
+       data-share-platform="linkedin">
+      <svg class="social-share__icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+      </svg>
+      <span class="social-share__label">LinkedIn</span>
+    </a>
+
+    {%- comment -%} Facebook Share {%- endcomment -%}
+    <a href="https://www.facebook.com/sharer/sharer.php?u={{ share_url | uri_escape }}"
+       class="social-share__button social-share__button--facebook"
+       target="_blank"
+       rel="noopener noreferrer"
+       aria-label="Share on Facebook"
+       data-share-platform="facebook">
+      <svg class="social-share__icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/>
+      </svg>
+      <span class="social-share__label">Facebook</span>
+    </a>
+
+    {%- comment -%} Reddit Share {%- endcomment -%}
+    <a href="https://www.reddit.com/submit?url={{ share_url | uri_escape }}&title={{ share_title | uri_escape }}"
+       class="social-share__button social-share__button--reddit"
+       target="_blank"
+       rel="noopener noreferrer"
+       aria-label="Share on Reddit"
+       data-share-platform="reddit">
+      <svg class="social-share__icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+        <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/>
+      </svg>
+      <span class="social-share__label">Reddit</span>
+    </a>
+
+    {%- comment -%} Email Share {%- endcomment -%}
+    <a href="mailto:?subject={{ share_title | uri_escape }}&body={{ share_description | uri_escape }}%0A%0A{{ share_url | uri_escape }}"
+       class="social-share__button social-share__button--email"
+       aria-label="Share via email"
+       data-share-platform="email">
+      <svg class="social-share__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">
+        <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>
+      <span class="social-share__label">Email</span>
+    </a>
+
+    {%- comment -%} Copy Link {%- endcomment -%}
+    <button type="button"
+            class="social-share__button social-share__button--copy"
+            aria-label="Copy link to clipboard"
+            data-share-platform="copy"
+            data-copy-url="{{ share_url }}">
+      <svg class="social-share__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">
+        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+      </svg>
+      <span class="social-share__label">Copy link</span>
+    </button>
+  </div>
+</div>
+
+<script>
+  // Copy link functionality
+  document.addEventListener('DOMContentLoaded', function() {
+    const copyButton = document.querySelector('[data-share-platform="copy"]');
+    if (copyButton && navigator.clipboard) {
+      copyButton.addEventListener('click', function() {
+        const url = this.getAttribute('data-copy-url');
+        navigator.clipboard.writeText(url).then(function() {
+          const label = copyButton.querySelector('.social-share__label');
+          const originalText = label.textContent;
+          label.textContent = 'Copied!';
+          copyButton.classList.add('is-copied');
+          setTimeout(function() {
+            label.textContent = originalText;
+            copyButton.classList.remove('is-copied');
+          }, 2000);
+        }).catch(function(err) {
+          console.error('Failed to copy:', err);
+        });
+      });
+    }
+  });
+</script>