kennethreitz.org/tuftecms/templates/connections.html

{% extends "base.html" %}

{% block content %}
<article class="collection-index-page">
    <header>
        <h1>Connections Index</h1>
        <p class="subtitle">The knowledge web &mdash; {{ total_outgoing or total_count }} outgoing and {{ total_incoming or 0 }} incoming cross-references revealing the interconnected nature of ideas.</p>
    </header>

    <section>
        <p>Every internal link from across the site, extracted and presented as a map of intellectual connections. These cross-references reveal how ideas build on each other, creating a web of meaning that transcends individual essays.</p>
        
        <hr>

        {% if articles %}
            {% for article in articles %}
                <div class="article-group">
                    <div class="article-title-container">
                        {% if article.unique_icon %}
                        <img src="{{ article.unique_icon }}" alt="Icon for {{ article.title }}" class="article-icon">
                        {% endif %}
                        <h3 class="article-title">
                            <a href="{{ article.url }}">{{ article.title }}</a>
                        </h3>
                    </div>
                    <div class="article-meta">
                        {{ article.category }}
                        {% if article.date %}
                            &middot; {{ article.date.strftime('%B %Y') if article.date.day == 1 else article.date.strftime('%B %d, %Y') }}
                        {% endif %}
                        &middot; {{ article.outgoing_connections|length or article.connections|length }} outgoing, {{ article.incoming_connections|length }} incoming
                    </div>
                    
                    {% if article.outgoing_connections or article.connections %}
                    <div class="connections-section">
                        <h4 class="connections-heading">Outgoing Links</h4>
                        <div class="connections-list">
                            {% for connection in article.outgoing_connections or article.connections %}
                                <div class="connection-entry outgoing">
                                    <div class="connection-arrow">→</div>
                                    <div class="connection-target">
                                        <strong><a href="{{ connection.target_url }}">{{ connection.link_text }}</a></strong>
                                        <div class="connection-url">{{ connection.target_url }}</div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                    
                    {% if article.incoming_connections %}
                    <div class="connections-section">
                        <h4 class="connections-heading">Incoming Links</h4>
                        <div class="connections-list">
                            {% for connection in article.incoming_connections %}
                                <div class="connection-entry incoming">
                                    <div class="connection-arrow">←</div>
                                    <div class="connection-target">
                                        <strong><a href="{{ connection.source_url }}">{{ connection.source_title }}</a></strong>
                                        <div class="connection-url">{{ connection.source_url }}</div>
                                        {% if connection.link_text %}
                                        <div class="connection-context">Links as: "{{ connection.link_text }}"</div>
                                        {% endif %}
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                </div>
            {% endfor %}
        {% else %}
            <p>No connections found across the site.</p>
        {% endif %}
    </section>
</article>

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

    .article-group {
        margin-bottom: 3rem;
        border-bottom: 1px solid var(--line-soft);
        padding-bottom: 2rem;
        max-width: 65%;
    }

    .article-group:last-child {
        border-bottom: none;
    }

    .article-title-container {
        position: relative;
        margin-bottom: 0.5rem;
    }

    .article-icon {
        width: 32px;
        height: 32px;
        position: absolute;
        left: -4rem;
        top: 0;
    }

    .article-title {
        font-size: 1.32rem;
        margin: 0;
        line-height: 1.25;
    }

    .article-title a {
        color: var(--ink);
        text-decoration: none;
    }

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

    .article-meta {
        font-size: 0.9rem;
        color: var(--ink-faint);
        margin-bottom: 1.5rem;
    }

    .connections-section {
        margin-bottom: 2rem;
    }
    
    .connections-heading {
        font-size: 1.1rem;
        color: var(--ink-muted);
        margin-bottom: 1rem;
        font-variant: small-caps;
        font-weight: 400;
        letter-spacing: 0.06em;
    }

    .connections-list {
        padding-left: 0;
        max-width: 100%;
    }

    .connection-entry {
        margin-bottom: 0;
        padding: 0.85rem 0;
        border-bottom: 1px solid var(--line-soft);
        display: flex;
        align-items: flex-start;
        gap: 1rem;
    }

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

    .connection-arrow {
        font-size: 1.2rem;
        color: var(--ink-muted);
        margin-top: 0.1rem;
        font-weight: bold;
    }

    .connection-target {
        flex: 1;
    }

    .connection-target strong a {
        color: var(--accent);
        text-decoration: none;
        font-size: 1.05rem;
    }

    .connection-target strong a:hover {
        color: var(--accent);
        text-decoration: underline;
    }

    .connection-url {
        font-size: 0.8rem;
        color: var(--ink-faint);
        font-family: monospace;
        margin-top: 0.3rem;
    }

    .connection-context {
        font-size: 0.85rem;
        color: var(--ink-muted);
        font-style: italic;
        margin-top: 0.3rem;
    }

    .connection-entry.incoming {
        border-left: none;
        background: transparent;
    }

    .connection-entry.outgoing {
        border-left: none;
    }

    @media (max-width: 768px) {
        .article-group,
        .connections-list {
            max-width: 100%;
        }

        .article-title-container {
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;
        }

        .article-icon {
            position: static;
            width: 22px;
            height: 22px;
            flex-shrink: 0;
            margin-top: 0.1rem;
        }

        .article-title {
            flex: 1;
            min-width: 0;
        }

        .connection-entry {
            gap: 0.65rem;
        }

        .connection-arrow {
            align-self: flex-start;
        }

        .connection-target {
            flex: none;
        }
    }
</style>
{% endblock %}