tags.html

---
layout: default
title: Tags
permalink: /tags/
---

<div class="tags-page">
  <header class="page-header">
    <h1 class="page-title" id="page-title">All Posts</h1>
  </header>

  <div class="tags-list">
    {% comment %}
    Build tags with counts (categories + tags), sort by count desc, show top 25, hide the rest.
    Uses a numeric sort key to avoid lexicographic sorting issues.
    {% endcomment %}
    {% assign entries = "" | split: "" %}
    {% assign names = "" | split: "" %}

    {% for pair in site.categories %}
      {% assign name = pair[0] | downcase %}
      {% unless names contains name %}
        {% assign names = names | push: name %}
        {% assign count = pair[1] | size %}
        {% assign sort_key = count | plus: 100000 %}
        {% assign entry = sort_key | append: "|" | append: name %}
        {% assign entries = entries | push: entry %}
      {% endunless %}
    {% endfor %}

    {% for pair in site.tags %}
      {% assign name = pair[0] | downcase %}
      {% unless names contains name %}
        {% assign names = names | push: name %}
        {% assign count = pair[1] | size %}
        {% assign sort_key = count | plus: 100000 %}
        {% assign entry = sort_key | append: "|" | append: name %}
        {% assign entries = entries | push: entry %}
      {% endunless %}
    {% endfor %}

    {% assign sorted_tags = entries | sort | reverse %}
    {% assign total_tags = sorted_tags | size %}

    {% for tag_entry in sorted_tags limit:25 %}
      {% assign parts = tag_entry | split: "|" %}
      {% assign tag_name = parts[1] %}
      {% include tag-color.html tag=tag_name %}
      <a href="/tags/?tag={{ tag_name | url_encode }}" class="tag" data-tag="{{ tag_name }}" data-color="{{ tag_color }}">{{ tag_name | upcase }}</a>
    {% endfor %}
    {% if total_tags > 25 %}
    <button class="tag show-more-tags" data-color="lavender" id="show-more-tags">...</button>
    {% for tag_entry in sorted_tags offset:25 %}
      {% assign parts = tag_entry | split: "|" %}
      {% assign tag_name = parts[1] %}
      {% include tag-color.html tag=tag_name %}
      <a href="/tags/?tag={{ tag_name | url_encode }}" class="tag hidden-tag" data-tag="{{ tag_name }}" data-color="{{ tag_color }}">{{ tag_name | upcase }}</a>
    {% endfor %}
    {% endif %}
  </div>

  <section class="posts-grid" id="posts-container">
    {% for post in site.posts %}
    <article class="post-card" data-categories="{{ post.categories | join: ' ' | downcase }}" data-tags="{{ post.tags | join: ' ' | downcase }}">
      {% if post.categories.size > 0 %}
      {% assign cat = post.categories | first %}
      {% include tag-color.html tag=cat %}
      <div class="post-card-tag">
        <a href="/tags/?tag={{ cat | downcase | url_encode }}" class="tag" data-color="{{ tag_color }}">{{ cat | upcase }}</a>
      </div>
      {% endif %}
      
      <h2 class="post-card-title">
        <a href="{{ post.url }}">{{ post.title }}</a>
      </h2>
      
      <p class="post-card-excerpt">
        {{ post.excerpt | strip_html | truncate: 200 }}
      </p>
      
      <div class="post-card-meta">
        <span>{{ post.date | date: "%Y-%m-%d" }}</span>
        <span>·</span>
        <span>{% include reading-time.html content=post.content %}</span>
      </div>
    </article>
    {% endfor %}
  </section>
</div>

<script>
(function() {
  // Get tag from URL
  const urlParams = new URLSearchParams(window.location.search);
  const selectedTag = urlParams.get('tag');
  
  if (selectedTag && selectedTag.toLowerCase() !== 'all') {
    const tag = selectedTag.toLowerCase();
    
    // Update page title
    document.getElementById('page-title').textContent = selectedTag.charAt(0).toUpperCase() + selectedTag.slice(1);
    
    // Highlight active tag
    document.querySelectorAll('.tags-list .tag').forEach(tagEl => {
      if (tagEl.dataset.tag === tag) {
        tagEl.classList.add('active');
      }
    });
    
    // Filter posts
    document.querySelectorAll('.post-card').forEach(post => {
      const categories = post.dataset.categories || '';
      const tags = post.dataset.tags || '';
      const allTags = (categories + ' ' + tags).toLowerCase();
      
      if (allTags.includes(tag)) {
        post.style.display = '';
      } else {
        post.style.display = 'none';
      }
    });
  }
  
  // Show more tags functionality
  const showMoreBtn = document.getElementById('show-more-tags');
  if (showMoreBtn) {
    showMoreBtn.addEventListener('click', function() {
      document.querySelectorAll('.tags-list .hidden-tag').forEach(tag => {
        tag.classList.remove('hidden-tag');
      });
      showMoreBtn.style.display = 'none';
    });
  }
})();
</script>