---
layout: page
title: "Tags"
description: "Explore posts by tags and topics"
permalink: /tags/
---

<!-- Breadcrumb Navigation -->
<nav class="breadcrumb">
    <a href="{{ '/' | relative_url }}" class="breadcrumb-link">Home</a>
    <span class="breadcrumb-separator">/</span>
    <a href="{{ '/posts' | relative_url }}" class="breadcrumb-link">Posts</a>
    <span class="breadcrumb-separator">/</span>
    <span class="breadcrumb-current">Tags</span>
</nav>

<!-- Dynamic Tag Content (JavaScript will handle URL params) -->
<div id="tag-dynamic-content" style="display: none;">
    <div class="tag-page">
        <div class="tag-header">
            <h1 id="tag-title">Tag</h1>
            <p id="tag-count" class="tag-count">0 posts</p>
        </div>
        
        <div id="tag-posts" class="tag-posts">
            <!-- Posts will be populated by JavaScript -->
        </div>
    </div>
</div>

<!-- All Posts Data for JavaScript -->
<script type="application/json" id="posts-data">
{
  "posts": [
    {% for post in site.posts %}
    {
      "title": {{ post.title | jsonify }},
      "url": {{ post.url | relative_url | jsonify }},
      "date": {{ post.date | date: "%B %d, %Y" | jsonify }},
      "excerpt": {{ post.excerpt | strip_html | truncate: 200 | jsonify }},
      "category": {{ post.category | jsonify }},
      "series": {{ post.series | jsonify }},
      "tags": {{ post.tags | jsonify }}
    }{% unless forloop.last %},{% endunless %}
    {% endfor %}
  ]
}
</script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const tagParam = urlParams.get('tag');
    
    if (tagParam) {
        // Show dynamic content for specific tag
        showTagContent(tagParam);
    } else {
        // Show all tags index
        showTagsIndex();
    }
});

function showTagContent(tagName) {
    console.log('showTagContent called with:', tagName);
    
    const postsData = JSON.parse(document.getElementById('posts-data').textContent);
    console.log('Posts data:', postsData);
    
    const tagPosts = postsData.posts.filter(post => 
        post.tags && post.tags.includes(tagName)
    );
    console.log('Filtered posts for tag "' + tagName + '":', tagPosts);
    
    document.getElementById('tag-dynamic-content').style.display = 'block';
    const tagsIndexElement = document.querySelector('.tags-index');
    if (tagsIndexElement) {
        tagsIndexElement.style.display = 'none';
    }
    
    document.getElementById('tag-title').textContent = tagName + ' Tag';
    document.getElementById('tag-count').textContent = 
        tagPosts.length + ' post' + (tagPosts.length !== 1 ? 's' : '') + ' tagged with "' + tagName + '"';
    
    const postsContainer = document.getElementById('tag-posts');
    postsContainer.innerHTML = '';
    
    tagPosts.forEach(post => {
        const postCard = document.createElement('article');
        postCard.className = 'tag-post-card';
        
        let tagsHtml = '';
        if (post.tags) {
            tagsHtml = '<div class="post-tags">' + 
                post.tags.slice(0, 5).map(tag => 
                    '<a href="/tags/?tag=' + encodeURIComponent(tag) + '" class="tag-link' + 
                    (tag === tagName ? ' current-tag' : '') + '">' + tag + '</a>'
                ).join('') + '</div>';
        }
        
        postCard.innerHTML = `
            <div class="post-header">
                <h2><a href="${post.url}">${post.title}</a></h2>
                <time class="post-date">${post.date}</time>
            </div>
            ${post.excerpt ? '<p class="post-excerpt">' + post.excerpt + '</p>' : ''}
            <div class="post-meta">
                ${post.category ? '<span class="post-category">' + post.category.charAt(0).toUpperCase() + post.category.slice(1) + '</span>' : ''}
                ${post.series ? '<span class="post-series">' + post.series + '</span>' : ''}
                ${tagsHtml}
            </div>
        `;
        
        postsContainer.appendChild(postCard);
    });
    
    // Update breadcrumb
    updateBreadcrumb(tagName);
}

function showTagsIndex() {
    document.getElementById('tag-dynamic-content').style.display = 'none';
    document.querySelector('.tags-index').style.display = 'block';
}

function updateBreadcrumb(tagName) {
    const breadcrumb = document.querySelector('.breadcrumb');
    if (breadcrumb) {
        breadcrumb.innerHTML = `
            <a href="/" class="breadcrumb-link">Home</a>
            <span class="breadcrumb-separator">/</span>
            <a href="/posts" class="breadcrumb-link">Posts</a>
            <span class="breadcrumb-separator">/</span>
            <a href="/tags" class="breadcrumb-link">Tags</a>
            <span class="breadcrumb-separator">/</span>
            <span class="breadcrumb-current">${tagName}</span>
        `;
    }
}
</script>

<div class="tags-index">
    <h2>All Tags</h2>
    
    {% assign all_tags = site.posts | map: 'tags' | join: ',' | split: ',' | uniq | sort %}
    {% assign tag_counts = '' | split: '' %}
    
    {% for tag in all_tags %}
        {% assign tag_posts = site.posts | where_exp: "post", "post.tags contains tag" %}
        {% assign tag_counts = tag_counts | push: tag_posts.size %}
    {% endfor %}
    
    {% if all_tags.size > 0 %}
        <div class="tags-cloud">
            {% for tag in all_tags %}
                {% assign tag_posts = site.posts | where_exp: "post", "post.tags contains tag" %}
                {% assign tag_size = tag_posts.size %}
                <a href="/tags/?tag={{ tag | url_encode }}" class="tag-cloud-item" data-count="{{ tag_size }}">
                    {{ tag }} <span class="tag-count">({{ tag_size }})</span>
                </a>
            {% endfor %}
        </div>
        
        <div class="tags-list">
            {% for tag in all_tags %}
                {% assign tag_posts = site.posts | where_exp: "post", "post.tags contains tag" %}
                <div class="tag-group">
                    <h3><a href="/tags/?tag={{ tag | url_encode }}" class="tag-title-link">{{ tag }}</a></h3>
                    <div class="tag-posts">
                        {% for post in tag_posts limit:5 %}
                            <div class="tag-post">
                                <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
                                <span class="post-date">{{ post.date | date: "%B %d, %Y" }}</span>
                            </div>
                        {% endfor %}
                        {% if tag_posts.size > 5 %}
                            <div class="tag-post-more">
                                <a href="/tags/?tag={{ tag | url_encode }}">View all {{ tag_posts.size }} posts →</a>
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
        </div>
    {% else %}
        <p>No tags found.</p>
    {% endif %}
</div>

<style>
    .breadcrumb {
        font-family: 'Inter', sans-serif;
        font-size: 0.9em;
        margin-bottom: 30px;
        color: #8d6e63;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }
    
    .breadcrumb-link {
        color: #8b6f47;
        text-decoration: none;
        padding: 4px 8px;
        border-radius: 4px;
        transition: all 0.3s ease;
        font-weight: 500;
    }
    
    .breadcrumb-link:hover {
        background: #f8f5f0;
        transform: translateY(-1px);
    }
    
    .breadcrumb-separator {
        color: #bcaaa4;
        font-weight: 300;
    }
    
    .breadcrumb-current {
        color: #5d4037;
        font-weight: 600;
        padding: 4px 8px;
        background: #f8f5f0;
        border-radius: 4px;
    }

    .tags-index {
        max-width: 900px;
        margin: 0 auto;
        padding: 40px 20px;
        font-family: 'Crimson Text', serif;
        color: #3c2e26;
    }
    
    .tags-index h2 {
        font-family: 'Inter', sans-serif;
        color: #5d4037;
        font-size: 2em;
        margin-bottom: 40px;
        text-align: center;
        font-weight: 300;
        letter-spacing: -0.02em;
    }
    
    .tags-cloud {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 60px;
        justify-content: center;
        padding: 30px;
        background: #ffffff;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(139, 111, 71, 0.1);
    }
    
    .tag-cloud-item {
        background: #f8f5f0;
        color: #6d4c41;
        padding: 8px 16px;
        border-radius: 20px;
        text-decoration: none;
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        font-size: 0.9em;
        border: 1px solid #efebe9;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    
    .tag-cloud-item:hover {
        background: #efebe9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(139, 111, 71, 0.15);
    }
    
    .tag-count {
        color: #8d6e63;
        font-size: 0.85em;
    }
    
    .tags-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 30px;
    }
    
    .tag-group {
        background: #ffffff;
        padding: 25px;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(139, 111, 71, 0.1);
        border-left: 4px solid #bcaaa4;
    }
    
    .tag-group h3 {
        font-family: 'Inter', sans-serif;
        color: #5d4037;
        margin-bottom: 15px;
        font-size: 1.3em;
        font-weight: 500;
    }
    
    .tag-title-link {
        color: inherit;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    
    .tag-title-link:hover {
        color: #8b6f47;
    }
    
    .tag-posts {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .tag-post {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 15px;
        padding: 8px 0;
        border-bottom: 1px solid #f5f5f5;
    }
    
    .tag-post:last-child {
        border-bottom: none;
    }
    
    .tag-post a {
        color: #5d4037;
        text-decoration: none;
        flex: 1;
        font-weight: 500;
        transition: color 0.3s ease;
        line-height: 1.4;
    }
    
    .tag-post a:hover {
        color: #8b6f47;
    }
    
    .tag-post .post-date {
        font-family: 'Inter', sans-serif;
        color: #8d6e63;
        font-size: 0.8em;
        white-space: nowrap;
    }
    
    .tag-post-more {
        margin-top: 10px;
        text-align: center;
    }
    
    .tag-post-more a {
        font-family: 'Inter', sans-serif;
        color: #8b6f47;
        text-decoration: none;
        font-weight: 500;
        font-size: 0.9em;
        padding: 8px 16px;
        background: #efebe9;
        border-radius: 4px;
        transition: all 0.3s ease;
    }
    
    .tag-post-more a:hover {
        background: #d7ccc8;
        transform: translateY(-1px);
    }
    
    @media (max-width: 600px) {
        .breadcrumb {
            font-size: 0.8em;
            margin-bottom: 20px;
        }
        
        .tags-index {
            padding: 20px 15px;
        }
        
        .tags-cloud {
            padding: 20px;
        }
        
        .tags-list {
            grid-template-columns: 1fr;
        }
        
        .tag-group {
            padding: 20px;
        }
        
        .tag-post {
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
        }
    }
    
    /* Tag Post Card Styles */
    .tag-post-card {
        background: #ffffff;
        border: 1px solid #efebe9;
        border-radius: 8px;
        padding: 20px;
        margin-bottom: 20px;
        transition: all 0.3s ease;
    }
    
    .tag-post-card:hover {
        box-shadow: 0 4px 12px rgba(139, 111, 71, 0.15);
        transform: translateY(-2px);
    }
    
    .tag-post-card .post-header h2 {
        margin: 0 0 8px 0;
        font-size: 1.4em;
    }
    
    .tag-post-card .post-header h2 a {
        color: #5d4037;
        text-decoration: none;
    }
    
    .tag-post-card .post-header h2 a:hover {
        color: #8d6e63;
    }
    
    .tag-post-card .post-date {
        color: #8d6e63;
        font-size: 0.9em;
        margin-bottom: 12px;
        display: block;
    }
    
    .tag-post-card .post-excerpt {
        color: #795548;
        line-height: 1.6;
        margin: 12px 0;
    }
    
    .tag-post-card .post-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 12px;
    }
    
    .tag-post-card .post-category {
        background: #e3f2fd;
        color: #1976d2;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8em;
        font-weight: 500;
    }
    
    .tag-post-card .post-series {
        background: #f3e5f5;
        color: #7b1fa2;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.8em;
        font-weight: 500;
    }
    
    .tag-post-card .post-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }
    
    .tag-post-card .tag-link {
        background: #f8f5f0;
        color: #6d4c41;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 0.75em;
        text-decoration: none;
        border: 1px solid #efebe9;
        transition: all 0.3s ease;
    }
    
    .tag-post-card .tag-link:hover {
        background: #efebe9;
        transform: translateY(-1px);
    }
    
    .tag-post-card .tag-link.current-tag {
        background: #8d6e63;
        color: white;
        border-color: #8d6e63;
    }
</style>