kennethreitz.org/templates/post.html

{% extends "base.html" %}

{% block og_title %}{{ title }}{% endblock %}
{% block og_description %}{% if description %}{{ description[:160] }}{% else %}{{ content | striptags | truncate(160) }}{% endif %}{% endblock %}
{% block og_type %}article{% endblock %}
{% block og_url %}https://kennethreitz.org{{ request.path }}{% endblock %}

{% block twitter_title %}{{ title }}{% endblock %}
{% block twitter_description %}{% if description %}{{ description[:160] }}{% else %}{{ content | striptags | truncate(160) }}{% endif %}{% endblock %}

{% block description %}{% if description %}{{ description }}{% else %}{{ content | striptags | truncate(200) }}{% endif %}{% endblock %}

{% block schema_type %}Article{% endblock %}
{% block schema_name %}{{ title }}{% endblock %}
{% block schema_url %}{{ current_path }}{% endblock %}
{% block schema_description %}{% if metadata.description %}{{ metadata.description }}{% else %}{{ title }} - An essay by Kenneth Reitz{% endif %}{% endblock %}

{% block schema_extra %},
            "headline": "{{ title }}",
            "articleSection": "{% if 'artificial-intelligence' in current_path %}AI & Consciousness{% elif 'essays' in current_path %}Essays{% else %}Writing{% endif %}",
            "wordCount": {{ (content | length / 5) | int }},
            {% if metadata and metadata.date %}
            "datePublished": "{{ metadata.date[0] if metadata.date is iterable and metadata.date is not string else metadata.date }}",
            "dateModified": "{{ metadata.date[0] if metadata.date is iterable and metadata.date is not string else metadata.date }}",
            {% endif %}
            "keywords": [
                "{% if 'artificial-intelligence' in current_path %}artificial intelligence, consciousness, philosophy{% elif 'mental-health' in current_path %}mental health, bipolar disorder, tech industry{% elif 'essays' in current_path %}technology, software development, python{% else %}writing, thoughts{% endif %}"
            ],
            "mainEntityOfPage": {
                "@type": "WebPage",
                "@id": "https://kennethreitz.org{{ current_path }}"
            }{% endblock %}

{% block extra_head %}
<style>
    /* Tufte-style typography - minimal and elegant */
    .post-header {
        margin-bottom: 3rem;
        width: 100%;
    }

    .post-title-container {
        display: flex;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 0.5rem;
        width: 70%;
    }
    
    .post-title-icon {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        margin-left: -4rem;
    }
    
    .post-title-text {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    article h1 {
        font-size: 3.2rem;
        font-style: italic;
        font-weight: 400;
        line-height: 1;
        margin: 0;
        color: #111;
        text-rendering: optimizeLegibility;
    }

    .post-subtitle {
        font-variant: small-caps;
        font-size: 1.1rem;
        color: #666;
        letter-spacing: 0.1em;
        margin-bottom: 3rem;
        font-weight: 400;
    }



    /* Text alignment */
    section p,
    article p:not(.sidenote):not(.marginnote) {
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        word-break: normal;
        overflow-wrap: break-word;
    }

    /* Asterism HR styling */
    article hr {
        width: 65%;
        max-width: 65%;
        margin: 4rem 0;
    }

    /* Parent navigation */
    .parent-navigation {
        margin-top: 4rem;
        padding-top: 2rem;
        border-top: 1px solid #eee;
        width: 65%;
    }

    .parent-link {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-decoration: none;
        color: #666;
        font-size: 0.95rem;
        font-style: italic;
        transition: color 0.2s ease;
    }

    .parent-link:hover {
        color: #333;
    }

    .parent-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
    }

    .parent-text {
        line-height: 1.2;
    }

    @media (max-width: 760px) {
        article h1 {
            font-size: 2.5rem;
            width: 100%;
        }
        
        .post-subtitle {
            font-size: 1rem;
            margin-bottom: 2rem;
        }
        
        article hr {
            width: 100%;
            max-width: 100%;
        }
        
        section p,
        article p:not(.sidenote):not(.marginnote) {
            width: 100% !important;
            max-width: 100% !important;
        }
        
        .parent-navigation {
            width: 100%;
            margin-top: 3rem;
            padding-top: 1.5rem;
        }
        
        .parent-link {
            font-size: 0.9rem;
        }
        
        .parent-icon {
            width: 18px;
            height: 18px;
        }
    }
</style>

<script>
// When arriving at a page with a hash pointing to a sidenote, auto-open it
document.addEventListener('DOMContentLoaded', function() {
    if (window.location.hash) {
        const sidenoteId = window.location.hash.substring(1);
        const checkbox = document.getElementById(sidenoteId);
        if (checkbox && checkbox.type === 'checkbox') {
            // Check the checkbox to reveal the sidenote
            checkbox.checked = true;
            
            // Find the label or parent paragraph to scroll to
            const label = document.querySelector(`label[for="${sidenoteId}"]`);
            const scrollTarget = label ? label : checkbox.parentElement;
            
            // Scroll to the sidenote after a brief delay
            setTimeout(() => {
                if (scrollTarget) {
                    scrollTarget.scrollIntoView({behavior: 'smooth', block: 'center'});
                }
                
                // Highlight the sidenote temporarily
                const sidenote = checkbox.nextElementSibling;
                if (sidenote && sidenote.classList.contains('sidenote')) {
                    sidenote.style.backgroundColor = '#fffbcc';
                    sidenote.style.transition = 'background-color 0.3s ease';
                    setTimeout(() => {
                        sidenote.style.backgroundColor = '';
                    }, 3000);
                }
            }, 100);
        }
    }
});
</script>
{% endblock %}

{% block content %}
<article>
    <div class="post-title-container">
        {% if unique_icon %}
        <img src="{{ unique_icon }}" alt="Icon for {{ title }}" class="post-title-icon">
        {% endif %}
        <div class="post-title-text">
            <h1>{{ title }}</h1>
            {% if metadata and metadata.date %}
            <div class="post-subtitle">{{ metadata.date if metadata.date is string else metadata.date[0] }}</div>
            {% endif %}
        </div>
    </div>
    
    <section>
        {{ content | safe }}
    </section>
    
    {% if parent_directory %}
    <div class="parent-navigation">
        <a href="{{ parent_directory.url }}" class="parent-link">
            {% if parent_directory.icon %}
            <img src="{{ parent_directory.icon }}" alt="Parent directory icon" class="parent-icon">
            {% endif %}
            <span class="parent-text">← {{ parent_directory.display_name }}</span>
        </a>
    </div>
    {% endif %}
</article>

{% endblock %}