categories.html

---
layout: default
title: Categories
---

<button id="scroll-top-button" class="scroll-top-button" title="Scroll to top">
    <svg 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">
        <polyline points="18 15 12 9 6 15"></polyline>
    </svg>
</button>
<div class="categories-container">
    <div class="content-list">
        <div class="all-items-list">
            {% assign categories = site.til | map: 'category' | compact | uniq | sort %}
            {% for category in categories %}
                {% if category and category != empty %}
                    {% assign category_posts = site.til | where: "category", category %}
                    <a href="#{{ category | slugify }}" class="item-link" data-count="{{ category_posts.size }}">{{ category }}</a>
                {% endif %}
            {% endfor %}
        </div>

        <div class="items-content">
            {% for category in categories %}
                {% if category and category != empty %}
                <div class="list-group" id="{{ category | slugify }}">
                    <h2 class="list-header">{{ category }}</h2>
                    <ul>
                    {% assign category_posts = site.til | where: "category", category | sort: "date" | reverse %}
                    {% for post in category_posts %}
                        <li>
                            <a href="{{ post.url | relative_url }}">{{ post.title }}</a>
                            <span class="post-date">({{ post.date | date: "%B %-d, %Y" }})</span>
                            {% if post.description %}
                            <div class="post-description-hint">{{ post.description }}</div>
                            {% endif %}
                        </li>
                    {% endfor %}
                    </ul>
                </div>
                {% endif %}
            {% endfor %}
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        if (window.location.hash) {
            const categoryId = window.location.hash.substring(1);
            const element = document.getElementById(categoryId);
            if (element) {
                element.scrollIntoView();
            }
        }
        
        // Scroll to top button functionality
        const scrollTopButton = document.getElementById('scroll-top-button');
        
        // Show/hide button based on scroll position
        window.addEventListener('scroll', function() {
            if (window.pageYOffset > 300) {
                scrollTopButton.classList.add('visible');
            } else {
                scrollTopButton.classList.remove('visible');
            }
        });
        
        // Scroll to top when button is clicked
        scrollTopButton.addEventListener('click', function() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });
    });
</script>