kennethreitz.org/tuftecms/templates/terms.html

{% extends "base.html" %}

{% block content %}
<article class="terms-index-page">
    <header>
        <h1>Term Index</h1>
        <p class="subtitle">Book-style index &mdash; {{ total_terms }} key terms and concepts with {{ total_occurrences }} total references across the digital garden.</p>
    </header>

    <section>
        <p>An alphabetical index of significant terms, concepts, and ideas appearing throughout the essays. Like the back of a book, this maps where each concept is discussed, weighted by frequency and importance.</p>
        
        <hr>

        {% if terms %}
            <div class="terms-grid">
                {% set alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' %}
                {% for letter in alphabet %}
                    {% set letter_terms = [] %}
                    {% for term, data in terms.items() %}
                        {% if term.upper().startswith(letter) %}
                            {{ letter_terms.append((term, data)) or '' }}
                        {% endif %}
                    {% endfor %}
                    
                    {% if letter_terms %}
                        <div class="letter-section" id="letter-{{ letter }}">
                            <h2 class="letter-header">{{ letter }}</h2>
                            <div class="terms-list">
                                {% for term, data in letter_terms %}
                                    <div class="term-entry">
                                        <div class="term-name">
                                            <strong>{{ term }}</strong>
                                            <span class="term-stats">({{ data.article_count }} article{{ 's' if data.article_count != 1 else '' }}, {{ data.total_count }} occurrence{{ 's' if data.total_count != 1 else '' }})</span>
                                        </div>
                                        <div class="term-articles">
                                            {% for article in data.articles %}
                                                <a href="{{ article.url }}" class="article-link">
                                                    {{ article.title }}{% if article.count > 1 %} ({{ article.count }}){% endif %}</a>{% if not loop.last %}, {% endif %}
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
            
            <div class="alphabet-nav">
                <strong>Jump to letter:</strong>
                {% for letter in alphabet %}
                    {% set letter_terms = [] %}
                    {% for term in terms.keys() %}
                        {% if term.upper().startswith(letter) %}
                            {{ letter_terms.append(term) or '' }}
                        {% endif %}
                    {% endfor %}
                    {% if letter_terms %}
                        <a href="#letter-{{ letter }}">{{ letter }}</a>
                    {% else %}
                        <span class="inactive">{{ letter }}</span>
                    {% endif %}
                {% endfor %}
            </div>
        {% else %}
            <p>No terms found across the site.</p>
        {% endif %}
    </section>
</article>

<style>
    .subtitle {
        font-style: italic;
        color: var(--ink-muted);
        margin-top: -1rem;
        margin-bottom: 2rem;
    }

    .terms-grid {
        margin-bottom: 3rem;
        max-width: 65%;
    }

    .letter-section {
        margin-bottom: 3rem;
        scroll-margin-top: 2rem;
    }

    .letter-header {
        font-size: 1.8rem;
        font-weight: 400;
        color: var(--ink-muted);
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--line);
    }

    .terms-list {
        margin-left: 1rem;
    }

    .term-entry {
        margin-bottom: 0;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--line-soft);
        transition: background-color 0.15s ease;
    }

    .term-entry:last-child {
        border-bottom: none;
    }

    .term-entry:hover {
        background: color-mix(in srgb, var(--surface) 72%, transparent);
    }

    .term-name {
        margin-bottom: 0.5rem;
    }

    .term-name strong {
        font-size: 1.1rem;
        color: var(--ink);
        font-weight: 500;
    }

    .term-stats {
        font-size: 0.8rem;
        color: var(--ink-faint);
        margin-left: 0.5rem;
    }

    .term-articles {
        line-height: 1.6;
        margin-left: 1rem;
    }

    .article-link {
        color: var(--ink-muted);
        text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
        font-size: 0.95rem;
    }

    .article-link:hover {
        color: var(--accent);
        text-decoration: underline;
    }

    .alphabet-nav {
        position: sticky;
        bottom: 2rem;
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: 6px;
        padding: 0.85rem 1rem;
        text-align: center;
        backdrop-filter: blur(10px);
        box-shadow: var(--shadow-soft);
        z-index: 1000;
        pointer-events: auto;
        max-width: 65%;
    }

    .alphabet-nav a {
        display: inline-block;
        padding: 0.3rem 0.5rem;
        margin: 0 0.1rem;
        color: var(--ink-muted);
        text-decoration: none;
        border-radius: 999px;
        transition: all 0.2s ease;
        font-weight: bold;
    }

    .alphabet-nav a:hover {
        background: var(--line-soft);
        color: var(--ink);
    }

    .alphabet-nav .inactive {
        display: inline-block;
        padding: 0.3rem 0.5rem;
        margin: 0 0.1rem;
        color: var(--ink-faint);
        font-weight: bold;
    }

    @media (max-width: 768px) {
        .terms-grid {
            max-width: 100%;
        }

        .letter-header {
            font-size: 1.5rem;
        }

        .terms-list {
            margin-left: 0.5rem;
        }

        .term-articles {
            margin-left: 0.5rem;
        }

        .alphabet-nav {
            padding: 0.8rem;
            font-size: 0.9rem;
            max-width: 100%;
        }

        .alphabet-nav a,
        .alphabet-nav .inactive {
            padding: 0.2rem 0.3rem;
            margin: 0;
            font-size: 0.8rem;
        }
    }
</style>
{% endblock %}