mirror of
https://github.com/kennethreitz/kennethreitz.org.git
synced 2026-10-24 14:39:14 +00:00
462 lines
12 KiB
HTML
462 lines
12 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ archive_title }}{% endblock %}
|
|
|
|
{% block content %}
|
|
<h1>{{ archive_title }}</h1>
|
|
|
|
<p><strong><a href="/feed.xml">[RSS Feed]</a></strong> • Get all articles with full content.</p>
|
|
|
|
{% if archive_description %}
|
|
<p>{{ archive_description }}</p>
|
|
{% endif %}
|
|
|
|
{% if grouped_posts and 'Complete Archive' in archive_title %}
|
|
<nav class="year-picker">
|
|
<div class="browse-by-type">
|
|
<strong>Browse by:</strong>
|
|
<div class="type-links">
|
|
<a href="/archive">By Date</a>
|
|
<a href="/archive/by-length">By Length</a>
|
|
<a href="/archive/themes" class="themes-link">Themes</a>
|
|
<a href="/search" class="search-link">Search</a>
|
|
<a href="/directory" class="directory-link">Directory</a>
|
|
<a href="/random" class="random-link">Random</a>
|
|
</div>
|
|
</div>
|
|
<div class="browse-by-type browse-by-type-secondary">
|
|
<strong>Indexes:</strong>
|
|
<div class="type-links">
|
|
<a href="/archive/sidenotes">Sidenotes</a>
|
|
<a href="/archive/outlines">Outlines</a>
|
|
<a href="/archive/quotes">Quotes</a>
|
|
<a href="/archive/connections">Connections</a>
|
|
<a href="/archive/terms">Terms</a>
|
|
<a href="/archive/graph">Graph</a>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="archive-toolbar">
|
|
<button id="toggleOrder" class="sort-toggle">Sort: Newest First ↓</button>
|
|
<div class="year-jump-dropdown">
|
|
<button id="yearJumpButton" class="sort-toggle" aria-expanded="false" aria-haspopup="true">Jump to Year</button>
|
|
<div id="yearDropdown" class="year-dropdown-content">
|
|
{% for year in grouped_posts.keys() %}
|
|
<a href="#year-{{ year }}">{{ year }}</a>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
<input id="archiveFilter" type="search" class="archive-filter" placeholder="Filter {{ posts|length }} posts by title…" autocomplete="off">
|
|
<span id="filterCount" class="filter-count"></span>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if grouped_posts %}
|
|
{% for group_name, posts in grouped_posts.items() %}
|
|
<section{% if 'Complete Archive' in archive_title %} id="year-{{ group_name }}"{% endif %}>
|
|
<h2>{{ group_name }} <span class="year-count">{{ posts|length }}</span></h2>
|
|
|
|
{% for post in posts %}
|
|
<div class="archive-post">
|
|
{% if post.unique_icon %}
|
|
<img src="{{ post.unique_icon }}" alt="Icon for {{ post.title }}" class="archive-post-icon">
|
|
{% endif %}
|
|
<div class="archive-post-content">
|
|
<p><strong><a href="{{ post.url }}">{{ post.title }}</a></strong>
|
|
{% if post.pub_date %}
|
|
<span class="post-date">{{ post.pub_date.strftime('%B %d, %Y') }}</span>
|
|
{% endif %}
|
|
<br>
|
|
{% if post.description %}
|
|
{{ post.description }}
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</section>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p>No posts found in this archive.</p>
|
|
<p><a href="/essays">Browse Essays</a> • <a href="/artificial-intelligence">Browse AI Writings</a></p>
|
|
{% endif %}
|
|
|
|
<style>
|
|
.year-picker {
|
|
padding: 1.15rem 1.35rem;
|
|
margin: 2rem 0 1.25rem;
|
|
width: 65%;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.year-picker p {
|
|
margin: 0;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.jump-to-year {
|
|
margin-top: 0.5rem;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.browse-by-type {
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.browse-by-type + .browse-by-type {
|
|
margin-top: 1rem;
|
|
padding-top: 1rem;
|
|
border-top: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.jump-to-year strong,
|
|
.browse-by-type strong {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.year-links,
|
|
.type-links {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.year-links a,
|
|
.type-links a {
|
|
color: var(--ink-muted);
|
|
text-decoration: none;
|
|
background: color-mix(in srgb, var(--surface-raised) 85%, transparent);
|
|
border: 1px solid var(--line-soft);
|
|
padding: 0.28rem 0.65rem;
|
|
font-size: 0.85rem;
|
|
transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
|
|
}
|
|
|
|
.year-links a:hover,
|
|
.type-links a:hover {
|
|
color: var(--ink);
|
|
background: color-mix(in srgb, var(--accent) 7%, transparent);
|
|
border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
|
|
}
|
|
|
|
/* Each special pill keeps its own category hue (tokens adapt to dark mode). */
|
|
.themes-link {
|
|
background: color-mix(in srgb, var(--cat-poetry) 12%, transparent) !important;
|
|
color: var(--cat-poetry) !important;
|
|
}
|
|
.search-link {
|
|
background: color-mix(in srgb, var(--cat-music) 12%, transparent) !important;
|
|
color: var(--cat-music) !important;
|
|
}
|
|
.directory-link {
|
|
background: color-mix(in srgb, var(--cat-software) 12%, transparent) !important;
|
|
color: var(--cat-software) !important;
|
|
}
|
|
.random-link {
|
|
background: color-mix(in srgb, var(--cat-ai) 12%, transparent) !important;
|
|
color: var(--cat-ai) !important;
|
|
}
|
|
|
|
.themes-link:hover {
|
|
background: color-mix(in srgb, var(--cat-poetry) 22%, transparent) !important;
|
|
color: var(--cat-poetry) !important;
|
|
}
|
|
.search-link:hover {
|
|
background: color-mix(in srgb, var(--cat-music) 22%, transparent) !important;
|
|
color: var(--cat-music) !important;
|
|
}
|
|
.directory-link:hover {
|
|
background: color-mix(in srgb, var(--cat-software) 22%, transparent) !important;
|
|
color: var(--cat-software) !important;
|
|
}
|
|
.random-link:hover {
|
|
background: color-mix(in srgb, var(--cat-ai) 22%, transparent) !important;
|
|
color: var(--cat-ai) !important;
|
|
}
|
|
|
|
|
|
.post-date {
|
|
color: var(--ink-muted);
|
|
font-size: 0.9rem;
|
|
font-style: italic;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.archive-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.65rem;
|
|
width: 65%;
|
|
box-sizing: border-box;
|
|
margin: 0 0 2rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
section {
|
|
margin-bottom: 2.5rem;
|
|
scroll-margin-top: 2rem; /* Offset for smooth scrolling to anchors */
|
|
}
|
|
|
|
section h2 {
|
|
border-bottom: 1px solid var(--line-soft);
|
|
padding-bottom: 0.5rem;
|
|
margin-bottom: 1.5rem;
|
|
max-width: 65%;
|
|
}
|
|
|
|
/* Archive post layout with icons */
|
|
.archive-post {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 1rem;
|
|
width: 65%;
|
|
box-sizing: border-box;
|
|
margin-bottom: 0;
|
|
padding: 0.85rem 0 0.85rem 1rem;
|
|
border-bottom: 1px solid var(--line-soft);
|
|
transition: background-color 0.15s ease;
|
|
}
|
|
|
|
.archive-post:hover {
|
|
background: color-mix(in srgb, var(--surface) 72%, transparent);
|
|
}
|
|
|
|
.archive-post:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.archive-post-icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
margin-top: 0.3rem;
|
|
margin-left: -3rem;
|
|
}
|
|
|
|
.archive-post-content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.archive-post-content p {
|
|
margin: 0;
|
|
padding-left: 0;
|
|
width: auto !important;
|
|
max-width: 100% !important;
|
|
box-sizing: border-box;
|
|
line-height: 1.42;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
/* Legacy styles for backward compatibility */
|
|
section p {
|
|
margin-bottom: 1.5rem;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
section p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
@media (max-width: 1400px) {
|
|
.year-picker {
|
|
width: 80%;
|
|
}
|
|
|
|
.archive-toolbar,
|
|
.archive-post,
|
|
section h2 {
|
|
width: 80%;
|
|
max-width: 80%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1200px) {
|
|
.year-picker {
|
|
width: 80%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1000px) {
|
|
.year-picker,
|
|
.archive-toolbar,
|
|
.archive-post,
|
|
section h2 {
|
|
width: 90%;
|
|
max-width: 90%;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 760px) {
|
|
.year-picker {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 0.8rem 1rem;
|
|
}
|
|
|
|
.archive-toolbar {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
section h2,
|
|
.archive-post {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.archive-post {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.year-picker p {
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.archive-post-icon {
|
|
margin-left: 0;
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
}
|
|
|
|
.year-jump-dropdown {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.year-dropdown-content {
|
|
display: none;
|
|
position: absolute;
|
|
background-color: var(--surface) !important;
|
|
min-width: 120px;
|
|
box-shadow: var(--shadow-soft);
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
z-index: 9999;
|
|
max-height: 300px;
|
|
overflow-y: auto;
|
|
top: 100%;
|
|
left: 0;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.year-dropdown-content a {
|
|
color: var(--ink);
|
|
padding: 0.5rem 1rem;
|
|
text-decoration: none;
|
|
display: block;
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.year-dropdown-content a:hover {
|
|
background-color: var(--line-soft);
|
|
}
|
|
|
|
.year-dropdown-content.show {
|
|
display: block;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.sort-toggle,
|
|
#yearJumpButton {
|
|
font-size: 0.85rem;
|
|
padding: 0.4rem 0.8rem;
|
|
}
|
|
|
|
.year-dropdown-content {
|
|
min-width: 100px;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.year-dropdown-content a {
|
|
padding: 0.4rem 0.8rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const button = document.getElementById('toggleOrder');
|
|
const sections = Array.from(document.querySelectorAll('section'));
|
|
let isDescending = true;
|
|
|
|
if (button && sections.length > 0) {
|
|
button.addEventListener('click', function() {
|
|
isDescending = !isDescending;
|
|
|
|
// Reverse the sections
|
|
sections.reverse();
|
|
|
|
// Re-insert them in reversed order
|
|
const parent = sections[0].parentNode;
|
|
sections.forEach(section => {
|
|
parent.appendChild(section);
|
|
});
|
|
|
|
// Update button text
|
|
button.textContent = isDescending ? 'Sort: Newest First ↓' : 'Sort: Oldest First ↑';
|
|
});
|
|
}
|
|
|
|
// Year jump dropdown
|
|
const yearButton = document.getElementById('yearJumpButton');
|
|
const yearDropdown = document.getElementById('yearDropdown');
|
|
|
|
if (yearButton && yearDropdown) {
|
|
yearButton.addEventListener('click', function(e) {
|
|
e.stopPropagation();
|
|
const isOpen = yearDropdown.classList.toggle('show');
|
|
yearButton.setAttribute('aria-expanded', String(isOpen));
|
|
});
|
|
|
|
// Close dropdown when clicking outside
|
|
document.addEventListener('click', function() {
|
|
yearDropdown.classList.remove('show');
|
|
yearButton.setAttribute('aria-expanded', 'false');
|
|
});
|
|
|
|
// Close dropdown when clicking a year link
|
|
yearDropdown.querySelectorAll('a').forEach(link => {
|
|
link.addEventListener('click', function() {
|
|
yearDropdown.classList.remove('show');
|
|
yearButton.setAttribute('aria-expanded', 'false');
|
|
});
|
|
});
|
|
}
|
|
|
|
// Instant title filter
|
|
const filterInput = document.getElementById('archiveFilter');
|
|
const filterCount = document.getElementById('filterCount');
|
|
if (filterInput) {
|
|
const allPosts = Array.from(document.querySelectorAll('.archive-post'));
|
|
const allSections = Array.from(document.querySelectorAll('section[id^="year-"]'));
|
|
|
|
filterInput.addEventListener('input', function() {
|
|
const q = filterInput.value.trim().toLowerCase();
|
|
let visible = 0;
|
|
|
|
allPosts.forEach(post => {
|
|
const title = (post.querySelector('a') || {}).textContent || '';
|
|
const match = !q || title.toLowerCase().includes(q);
|
|
post.style.display = match ? '' : 'none';
|
|
if (match) visible++;
|
|
});
|
|
|
|
// Hide year sections with no visible posts
|
|
allSections.forEach(section => {
|
|
const any = section.querySelectorAll('.archive-post:not([style*="none"])').length > 0;
|
|
section.style.display = any ? '' : 'none';
|
|
});
|
|
|
|
filterCount.textContent = q ? `${visible} match${visible === 1 ? '' : 'es'}` : '';
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|