datalog-theme 0.6.0

data/_includes/components/comments.html

@@ -0,0 +1,244 @@
+{%- comment -%}
+Comment System Integration Component
+Supports multiple comment platforms: Giscus, Utterances, Disqus, Commento
+
+Parameters:
+  - provider: Comment provider (giscus, utterances, disqus, commento, custom) (default: from config)
+  - enable_comments: Override to enable/disable comments (default: true)
+  - lazy_load: Lazy load comments on scroll (default: true)
+  - show_count: Show comment count (default: true)
+{%- endcomment -%}
+
+{%- assign provider = include.provider | default: site.phase3_features.comments.provider | default: "giscus" -%}
+{%- assign enable_comments = include.enable_comments | default: page.comments | default: true -%}
+{%- assign lazy_load = include.lazy_load | default: site.phase3_features.comments.lazy_load | default: true -%}
+{%- assign show_count = include.show_count | default: true -%}
+
+{%- comment -%} Get configuration from site config {%- endcomment -%}
+{%- assign comments_config = site.phase3_features.comments -%}
+
+{%- if enable_comments and provider != "none" -%}
+  <section class="comments-section"
+           data-comments
+           data-provider="{{ provider }}"
+           id="comments"
+           aria-label="Comments section">
+
+    <div class="comments-section__header">
+      <h3 class="comments-section__title">
+        <svg class="comments-section__icon"
+             xmlns="http://www.w3.org/2000/svg"
+             width="24"
+             height="24"
+             viewBox="0 0 24 24"
+             fill="none"
+             stroke="currentColor"
+             stroke-width="2"
+             stroke-linecap="round"
+             stroke-linejoin="round"
+             aria-hidden="true">
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+        </svg>
+        Comments
+      </h3>
+
+      {%- if show_count -%}
+        <span class="comments-section__count"
+              data-comment-count
+              aria-live="polite">
+          Loading...
+        </span>
+      {%- endif -%}
+    </div>
+
+    {%- if lazy_load -%}
+      <div class="comments-section__placeholder" data-comments-placeholder>
+        <button type="button"
+                class="comments-section__load-button"
+                data-load-comments
+                aria-label="Load comments">
+          <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">
+            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+          </svg>
+          Click to load comments
+        </button>
+      </div>
+    {%- endif -%}
+
+    <div class="comments-section__container"
+         data-comments-container
+         {% if lazy_load %}style="display: none;"{% endif %}>
+
+      {%- case provider -%}
+
+        {%- when "giscus" -%}
+          {%- comment -%} Giscus (GitHub Discussions) {%- endcomment -%}
+          <script src="https://giscus.app/client.js"
+                  data-repo="{{ comments_config.giscus.repo }}"
+                  data-repo-id="{{ comments_config.giscus.repo_id }}"
+                  data-category="{{ comments_config.giscus.category }}"
+                  data-category-id="{{ comments_config.giscus.category_id }}"
+                  data-mapping="{{ comments_config.giscus.mapping | default: 'pathname' }}"
+                  data-strict="{{ comments_config.giscus.strict | default: '0' }}"
+                  data-reactions-enabled="{{ comments_config.giscus.reactions_enabled | default: '1' }}"
+                  data-emit-metadata="{{ comments_config.giscus.emit_metadata | default: '0' }}"
+                  data-input-position="{{ comments_config.giscus.input_position | default: 'bottom' }}"
+                  data-theme="{{ comments_config.giscus.theme | default: 'preferred_color_scheme' }}"
+                  data-lang="{{ comments_config.giscus.lang | default: 'en' }}"
+                  data-loading="{{ comments_config.giscus.loading | default: 'lazy' }}"
+                  crossorigin="anonymous"
+                  async>
+          </script>
+
+        {%- when "utterances" -%}
+          {%- comment -%} Utterances (GitHub Issues) {%- endcomment -%}
+          <script src="https://utteranc.es/client.js"
+                  repo="{{ comments_config.utterances.repo }}"
+                  issue-term="{{ comments_config.utterances.issue_term | default: 'pathname' }}"
+                  label="{{ comments_config.utterances.label | default: 'comment' }}"
+                  theme="{{ comments_config.utterances.theme | default: 'github-light' }}"
+                  crossorigin="anonymous"
+                  async>
+          </script>
+
+        {%- when "disqus" -%}
+          {%- comment -%} Disqus {%- endcomment -%}
+          <div id="disqus_thread"></div>
+          <script>
+            var disqus_config = function () {
+              this.page.url = "{{ page.url | absolute_url }}";
+              this.page.identifier = "{{ page.id }}";
+              this.page.title = "{{ page.title }}";
+            };
+            (function() {
+              var d = document, s = d.createElement('script');
+              s.src = 'https://{{ comments_config.disqus.shortname }}.disqus.com/embed.js';
+              s.setAttribute('data-timestamp', +new Date());
+              (d.head || d.body).appendChild(s);
+            })();
+          </script>
+          <noscript>
+            Please enable JavaScript to view the
+            <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a>
+          </noscript>
+
+        {%- when "commento" -%}
+          {%- comment -%} Commento {%- endcomment -%}
+          <div id="commento"></div>
+          <script defer
+                  src="{{ comments_config.commento.url | default: 'https://cdn.commento.io' }}/js/commento.js"
+                  {% if comments_config.commento.no_fonts %}data-no-fonts="true"{% endif %}
+                  {% if comments_config.commento.hide_deleted %}data-hide-deleted="true"{% endif %}
+                  {% if comments_config.commento.auto_init == false %}data-auto-init="false"{% endif %}>
+          </script>
+
+        {%- when "custom" -%}
+          {%- comment -%} Custom HTML for other providers {%- endcomment -%}
+          <div class="comments-section__custom">
+            {{ comments_config.custom_html }}
+          </div>
+
+      {%- endcase -%}
+    </div>
+
+    {%- comment -%} Privacy notice {%- endcomment -%}
+    {%- if comments_config.show_privacy_notice -%}
+      <div class="comments-section__privacy">
+        <small>
+          <svg xmlns="http://www.w3.org/2000/svg"
+               width="14"
+               height="14"
+               viewBox="0 0 24 24"
+               fill="none"
+               stroke="currentColor"
+               stroke-width="2"
+               stroke-linecap="round"
+               stroke-linejoin="round"
+               aria-hidden="true">
+            <circle cx="12" cy="12" r="10"></circle>
+            <line x1="12" y1="16" x2="12" y2="12"></line>
+            <line x1="12" y1="8" x2="12.01" y2="8"></line>
+          </svg>
+          Comments are powered by {{ provider | capitalize }}.
+          {%- if comments_config.privacy_url -%}
+            See our <a href="{{ comments_config.privacy_url }}">privacy policy</a>.
+          {%- endif -%}
+        </small>
+      </div>
+    {%- endif -%}
+  </section>
+
+  {%- if lazy_load -%}
+    <script>
+    (function() {
+      'use strict';
+
+      document.addEventListener('DOMContentLoaded', function() {
+        const commentsSection = document.querySelector('[data-comments]');
+        if (!commentsSection) return;
+
+        const loadButton = commentsSection.querySelector('[data-load-comments]');
+        const placeholder = commentsSection.querySelector('[data-comments-placeholder]');
+        const container = commentsSection.querySelector('[data-comments-container]');
+
+        function loadComments() {
+          if (placeholder) placeholder.style.display = 'none';
+          if (container) container.style.display = 'block';
+
+          // Execute any scripts in the container
+          const scripts = container.querySelectorAll('script');
+          scripts.forEach(script => {
+            const newScript = document.createElement('script');
+            Array.from(script.attributes).forEach(attr => {
+              newScript.setAttribute(attr.name, attr.value);
+            });
+            newScript.textContent = script.textContent;
+            script.parentNode.replaceChild(newScript, script);
+          });
+        }
+
+        // Load on button click
+        if (loadButton) {
+          loadButton.addEventListener('click', loadComments);
+        }
+
+        // Optionally load when scrolling near comments
+        const observer = new IntersectionObserver((entries) => {
+          entries.forEach(entry => {
+            if (entry.isIntersecting && entry.intersectionRatio > 0.1) {
+              // Auto-load when scrolling near (optional)
+              // loadComments();
+              // observer.disconnect();
+            }
+          });
+        }, {
+          rootMargin: '200px',
+          threshold: 0.1
+        });
+
+        observer.observe(commentsSection);
+      });
+    })();
+    </script>
+  {%- endif -%}
+
+  {%- comment -%} Comment count script (for supported providers) {%- endcomment -%}
+  {%- if show_count -%}
+    {%- if provider == "disqus" -%}
+      <script id="dsq-count-scr"
+              src="//{{ comments_config.disqus.shortname }}.disqus.com/count.js"
+              async>
+      </script>
+    {%- endif -%}
+  {%- endif -%}
+
+{%- endif -%}

data/_includes/components/content-provenance.html

@@ -0,0 +1,43 @@
+{%- comment -%}
+---
+required:
+  - page
+optional:
+  - date_format
+---
+Editorial provenance note built from the `why_this_exists`, `evidence`,
+`methodology` and `reviewed_at` front-matter fields. Renders nothing when
+none of them is set.
+{%- endcomment -%}
+{%- assign prov = include.page -%}
+{%- if prov.why_this_exists or prov.evidence or prov.methodology or prov.reviewed_at -%}
+<aside class="content-provenance" aria-labelledby="content-provenance-heading">
+  <h2 id="content-provenance-heading" class="content-provenance__heading">{% t 'post.provenance.heading' %}</h2>
+  <dl class="content-provenance__list">
+    {%- if prov.why_this_exists -%}
+    <div>
+      <dt>{% t 'post.provenance.why' %}</dt>
+      <dd>{{ prov.why_this_exists | strip_newlines }}</dd>
+    </div>
+    {%- endif -%}
+    {%- if prov.evidence -%}
+    <div>
+      <dt>{% t 'post.provenance.evidence' %}</dt>
+      <dd>{{ prov.evidence | strip_newlines }}</dd>
+    </div>
+    {%- endif -%}
+    {%- if prov.methodology -%}
+    <div>
+      <dt>{% t 'post.provenance.method' %}</dt>
+      <dd>{{ prov.methodology | strip_newlines }}</dd>
+    </div>
+    {%- endif -%}
+    {%- if prov.reviewed_at -%}
+    <div>
+      <dt>{% t 'post.provenance.reviewed' %}</dt>
+      <dd>{% include helpers/date-format.html date=prov.reviewed_at format=include.date_format %}</dd>
+    </div>
+    {%- endif -%}
+  </dl>
+</aside>
+{%- endif -%}

data/_includes/components/content-recommendations.html

@@ -0,0 +1,228 @@
+{%- comment -%}
+Content Recommendations Component
+Displays related/recommended posts based on similarity scoring
+
+Parameters:
+  - current_post: Current post object (default: page)
+  - max_recommendations: Maximum posts to show (default: 3)
+  - algorithm: Scoring algorithm (tag-based, category-based, hybrid) (default: hybrid)
+  - show_score: Show similarity score (default: false, for debugging)
+  - layout: Display layout (grid, list, compact) (default: grid)
+  - heading: Custom heading (default: "Recommended for You")
+{%- endcomment -%}
+
+{%- assign current_post = include.current_post | default: page -%}
+{%- assign max_recommendations = include.max_recommendations | default: 3 -%}
+{%- assign algorithm = include.algorithm | default: "hybrid" -%}
+{%- assign show_score = include.show_score | default: false -%}
+{%- assign layout = include.layout | default: "grid" -%}
+{%- assign heading = include.heading | default: "Recommended for You" -%}
+
+{%- comment -%} Get current post metadata {%- endcomment -%}
+{%- assign current_tags = current_post.tags | default: empty -%}
+{%- assign current_categories = current_post.categories | default: empty -%}
+{%- assign current_difficulty = current_post.difficulty | default: "" -%}
+{%- assign current_series = current_post.series | default: "" -%}
+
+{%- comment -%} Initialize recommendations array {%- endcomment -%}
+{%- assign recommendations = "" | split: "" -%}
+{%- assign scored_posts = "" | split: "" -%}
+
+{%- comment -%} Score all posts except current {%- endcomment -%}
+{%- for post in site.posts -%}
+  {%- if post.url != current_post.url -%}
+    {%- assign score = 0 -%}
+
+    {%- comment -%} Series bonus (highest priority) {%- endcomment -%}
+    {%- if current_series != "" and post.series == current_series -%}
+      {%- assign score = score | plus: 100 -%}
+    {%- endif -%}
+
+    {%- comment -%} Tag matching {%- endcomment -%}
+    {%- if algorithm == "tag-based" or algorithm == "hybrid" -%}
+      {%- for tag in current_tags -%}
+        {%- if post.tags contains tag -%}
+          {%- assign score = score | plus: 10 -%}
+        {%- endif -%}
+      {%- endfor -%}
+    {%- endif -%}
+
+    {%- comment -%} Category matching {%- endcomment -%}
+    {%- if algorithm == "category-based" or algorithm == "hybrid" -%}
+      {%- for category in current_categories -%}
+        {%- if post.categories contains category -%}
+          {%- assign score = score | plus: 15 -%}
+        {%- endif -%}
+      {%- endfor -%}
+    {%- endif -%}
+
+    {%- comment -%} Difficulty matching {%- endcomment -%}
+    {%- if current_difficulty != "" and post.difficulty == current_difficulty -%}
+      {%- assign score = score | plus: 5 -%}
+    {%- endif -%}
+
+    {%- comment -%} Recency bonus (prefer recent posts) {%- endcomment -%}
+    {%- assign days_old = "now" | date: "%s" | minus: post.date | date: "%s" | divided_by: 86400 -%}
+    {%- if days_old < 30 -%}
+      {%- assign score = score | plus: 3 -%}
+    {%- elsif days_old < 90 -%}
+      {%- assign score = score | plus: 1 -%}
+    {%- endif -%}
+
+    {%- comment -%} Store post with score {%- endcomment -%}
+    {%- if score > 0 -%}
+      {%- assign post_with_score = post.url | append: "||" | append: score -%}
+      {%- assign scored_posts = scored_posts | push: post_with_score -%}
+    {%- endif -%}
+  {%- endif -%}
+{%- endfor -%}
+
+{%- comment -%} Sort by score (manual bubble sort since Liquid doesn't have sort by custom field) {%- endcomment -%}
+{%- assign sorted_posts = scored_posts -%}
+{%- for i in (1..scored_posts.size) -%}
+  {%- for j in (1..scored_posts.size) -%}
+    {%- assign current_item = sorted_posts[j] | split: "||" -%}
+    {%- assign prev_item = sorted_posts[j-1] | split: "||" -%}
+    {%- if current_item[1] and prev_item[1] -%}
+      {%- assign current_score = current_item[1] | plus: 0 -%}
+      {%- assign prev_score = prev_item[1] | plus: 0 -%}
+      {%- if current_score > prev_score -%}
+        {%- comment -%} Swap items {%- endcomment -%}
+        {%- assign temp = sorted_posts[j] -%}
+        {%- assign sorted_posts[j] = sorted_posts[j-1] -%}
+        {%- assign sorted_posts[j-1] = temp -%}
+      {%- endif -%}
+    {%- endif -%}
+  {%- endfor -%}
+{%- endfor -%}
+
+{%- comment -%} Get top N recommendations {%- endcomment -%}
+{%- assign recommendation_count = 0 -%}
+{%- for item in sorted_posts limit: max_recommendations -%}
+  {%- assign item_parts = item | split: "||" -%}
+  {%- assign post_url = item_parts[0] -%}
+  {%- assign post_score = item_parts[1] -%}
+
+  {%- comment -%} Find the actual post object {%- endcomment -%}
+  {%- for post in site.posts -%}
+    {%- if post.url == post_url -%}
+      {%- assign recommendations = recommendations | push: post -%}
+      {%- assign recommendation_count = recommendation_count | plus: 1 -%}
+      {%- break -%}
+    {%- endif -%}
+  {%- endfor -%}
+{%- endfor -%}
+
+{%- comment -%} Display recommendations if we have any {%- endcomment -%}
+{%- if recommendation_count > 0 -%}
+  <aside class="content-recommendations content-recommendations--{{ layout }}"
+         data-recommendations
+         aria-label="Recommended articles">
+
+    <h3 class="content-recommendations__heading">{{ heading }}</h3>
+
+    <div class="content-recommendations__list">
+      {%- for post in recommendations limit: max_recommendations -%}
+        {%- comment -%} Get recommendation score for display {%- endcomment -%}
+        {%- assign post_score = 0 -%}
+        {%- if show_score -%}
+          {%- for item in sorted_posts -%}
+            {%- assign item_parts = item | split: "||" -%}
+            {%- if item_parts[0] == post.url -%}
+              {%- assign post_score = item_parts[1] -%}
+              {%- break -%}
+            {%- endif -%}
+          {%- endfor -%}
+        {%- endif -%}
+
+        <article class="recommendation-card"
+                 itemscope
+                 itemtype="https://schema.org/BlogPosting">
+
+          {%- if post.featured_image or post.image -%}
+            <div class="recommendation-card__image">
+              <a href="{{ post.url | relative_url }}" tabindex="-1" aria-hidden="true">
+                <img src="{{ post.featured_image | default: post.image | relative_url }}"
+                     alt="{{ post.title }}"
+                     loading="lazy"
+                     itemprop="image">
+              </a>
+            </div>
+          {%- endif -%}
+
+          <div class="recommendation-card__content">
+            <h4 class="recommendation-card__title" itemprop="headline">
+              <a href="{{ post.url | relative_url }}"
+                 class="recommendation-card__link">
+                {{ post.title }}
+              </a>
+            </h4>
+
+            {%- if post.excerpt -%}
+              <p class="recommendation-card__excerpt" itemprop="description">
+                {{ post.excerpt | strip_html | truncatewords: 20 }}
+              </p>
+            {%- endif -%}
+
+            <div class="recommendation-card__meta">
+              {%- if post.date -%}
+                <time class="recommendation-card__date"
+                      datetime="{{ post.date | date_to_xmlschema }}"
+                      itemprop="datePublished">
+                  {{ post.date | date: "%B %d, %Y" }}
+                </time>
+              {%- endif -%}
+
+              {%- if post.difficulty -%}
+                <span class="recommendation-card__separator" aria-hidden="true">•</span>
+                {% include components/difficulty-badge.html level=post.difficulty %}
+              {%- endif -%}
+
+              {%- comment -%} Reading time {%- endcomment -%}
+              <span class="recommendation-card__separator" aria-hidden="true">•</span>
+              {% include components/reading-time.html content=post.content variant="inline" show_icon=false %}
+
+              {%- if show_score -%}
+                <span class="recommendation-card__separator" aria-hidden="true">•</span>
+                <span class="recommendation-card__score" aria-label="Similarity score">
+                  Score: {{ post_score }}
+                </span>
+              {%- endif -%}
+            </div>
+
+            {%- if post.tags.size > 0 -%}
+              <div class="recommendation-card__tags">
+                {%- for tag in post.tags limit: 3 -%}
+                  <span class="recommendation-card__tag">{{ tag }}</span>
+                {%- endfor -%}
+              </div>
+            {%- endif -%}
+          </div>
+        </article>
+      {%- endfor -%}
+    </div>
+
+    {%- comment -%} View all link {%- endcomment -%}
+    {%- if site.phase3_features.recommendations.show_view_all -%}
+      <div class="content-recommendations__footer">
+        <a href="{{ '/archive/' | relative_url }}"
+           class="content-recommendations__view-all">
+          View all articles
+          <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">
+            <line x1="5" y1="12" x2="19" y2="12"></line>
+            <polyline points="12 5 19 12 12 19"></polyline>
+          </svg>
+        </a>
+      </div>
+    {%- endif -%}
+  </aside>
+{%- endif -%}

data/_includes/components/difficulty-badge.html

@@ -0,0 +1,84 @@
+{%- comment -%}
+Visual difficulty badge for posts
+Parameters:
+  - level: Difficulty level (beginner, intermediate, advanced, expert)
+  - show_icon: Show difficulty icon (default: true)
+  - show_description: Show difficulty description (default: false)
+{%- endcomment -%}
+
+{%- assign difficulty_level = include.level | default: page.difficulty | default: "beginner" | downcase -%}
+{%- assign show_icon = include.show_icon | default: true -%}
+{%- assign show_description = include.show_description | default: false -%}
+
+{%- comment -%} Normalize difficulty levels {%- endcomment -%}
+{%- case difficulty_level -%}
+  {%- when "beginner" or "easy" or "introductory" or "basic" -%}
+    {%- assign normalized_level = "beginner" -%}
+    {%- assign level_label = "Beginner" -%}
+    {%- assign level_description = "Suitable for those new to the topic" -%}
+    {%- assign level_color = "green" -%}
+  {%- when "intermediate" or "moderate" or "medium" -%}
+    {%- assign normalized_level = "intermediate" -%}
+    {%- assign level_label = "Intermediate" -%}
+    {%- assign level_description = "Requires some foundational knowledge" -%}
+    {%- assign level_color = "blue" -%}
+  {%- when "advanced" or "hard" or "difficult" -%}
+    {%- assign normalized_level = "advanced" -%}
+    {%- assign level_label = "Advanced" -%}
+    {%- assign level_description = "For experienced practitioners" -%}
+    {%- assign level_color = "orange" -%}
+  {%- when "expert" or "very advanced" or "research" -%}
+    {%- assign normalized_level = "expert" -%}
+    {%- assign level_label = "Expert" -%}
+    {%- assign level_description = "Cutting-edge or highly specialized" -%}
+    {%- assign level_color = "red" -%}
+  {%- else -%}
+    {%- assign normalized_level = "beginner" -%}
+    {%- assign level_label = "Beginner" -%}
+    {%- assign level_description = "Suitable for those new to the topic" -%}
+    {%- assign level_color = "green" -%}
+{%- endcase -%}
+
+<span class="difficulty-badge difficulty-badge--{{ normalized_level }}"
+      data-difficulty="{{ normalized_level }}"
+      aria-label="Difficulty level: {{ level_label }}"
+      title="{{ level_description }}">
+  {%- if show_icon -%}
+    <svg class="difficulty-badge__icon"
+         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">
+      {%- case normalized_level -%}
+        {%- when "beginner" -%}
+          {%- comment -%} Single bar {%- endcomment -%}
+          <rect x="3" y="14" width="4" height="7" rx="1"></rect>
+          <rect x="10" y="14" width="4" height="7" rx="1" opacity="0.3"></rect>
+          <rect x="17" y="14" width="4" height="7" rx="1" opacity="0.3"></rect>
+        {%- when "intermediate" -%}
+          {%- comment -%} Two bars {%- endcomment -%}
+          <rect x="3" y="14" width="4" height="7" rx="1"></rect>
+          <rect x="10" y="10" width="4" height="11" rx="1"></rect>
+          <rect x="17" y="10" width="4" height="11" rx="1" opacity="0.3"></rect>
+        {%- when "advanced" -%}
+          {%- comment -%} Three bars {%- endcomment -%}
+          <rect x="3" y="14" width="4" height="7" rx="1"></rect>
+          <rect x="10" y="10" width="4" height="11" rx="1"></rect>
+          <rect x="17" y="6" width="4" height="15" rx="1"></rect>
+        {%- when "expert" -%}
+          {%- comment -%} Star icon {%- endcomment -%}
+          <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
+      {%- endcase -%}
+    </svg>
+  {%- endif -%}
+  <span class="difficulty-badge__label">{{ level_label }}</span>
+  {%- if show_description -%}
+    <span class="difficulty-badge__description">{{ level_description }}</span>
+  {%- endif -%}
+</span>