kennethreitz.org/templates/directory.html

{% extends "base.html" %}

{% block content %}
<!-- Directory Header & Title -->
{% if index_content and content_position == 'top' %}
<!-- Short content displayed at the top -->
<div class="directory-content-top">
    <article class="tufte">
        <section class="tufte-content">
            {{ index_content.content | safe }}
        </section>
    </article>
</div>
{% else %}
<div class="mb-12">
    <h1 class="text-4xl font-bold text-gray-100 mb-4 tracking-tight font-serif page-title">
        {{ title }}
    </h1>
    {% if current_path and current_path != '' %}
        <p class="text-xl text-gray-400 font-serif italic et-book tracking-wide">{{ current_path }}</p>
    {% endif %}
</div>
{% endif %}

{% if items %}
<!-- Directory Listing -->
<div class="space-y-2 mb-12 mt-8">
    {% for item in items %}
    <div class="group flex items-center p-4 rounded-lg hover:bg-gray-800/70 transition-all duration-300 border border-transparent hover:border-gray-700 hover:border-primary-700/50 backdrop-blur-sm">
        <!-- Item Icon -->
        <div class="flex-shrink-0 w-10 text-center text-xl mr-4">
            {% if item.is_dir %}
                <span class="text-primary-400">📁</span>
            {% elif item.is_markdown %}
                <span class="text-blue-400">📝</span>
            {% elif item.is_image %}
                <span class="text-green-400">🖼️</span>
            {% else %}
                <span class="text-gray-400">📄</span>
            {% endif %}
        </div>
        
        <!-- Item Content -->
        <div class="flex-grow flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
                    <a href="{{ item.url_path }}" 
                       class="text-lg font-medium {% if item.is_dir %}text-primary-300{% else %}text-gray-200 et-book{% endif %} hover:text-primary-400 transition-colors duration-200 group-hover:text-primary-300 tracking-wide">
                        {{ item.display_name }}{% if item.is_dir %}/{% endif %}
                    </a>
            
            <!-- Item Meta -->
            <div class="flex items-center gap-4 text-sm text-gray-400">
                <span class="font-mono">
                    {{ item.modified.strftime('%b %d, %Y') }}
                </span>
                {% if item.is_dir %}
                <span class="px-2 py-1 bg-primary-900/60 text-primary-300 rounded-full text-xs font-medium uppercase tracking-wide border border-primary-700/30">
                    folder
                </span>
                {% elif item.is_image %}
                <span class="px-2 py-1 bg-green-900/60 text-green-300 rounded-full text-xs font-medium uppercase tracking-wide border border-green-700/30">
                    image
                </span>
                {% elif not item.is_markdown %}
                <span class="px-2 py-1 bg-gray-800/60 text-gray-300 rounded-full text-xs font-medium uppercase tracking-wide border border-gray-700/30">
                    {{ item.file_type.replace('.', '') or 'file' }}
                </span>
                {% endif %}
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<!-- Empty Directory -->
<div class="text-center py-16 bg-gray-800/20 rounded-lg backdrop-blur-sm">
    <div class="text-6xl mb-6 opacity-40">📂</div>
    <p class="text-xl text-gray-400 font-serif italic et-book tracking-wide">
        This directory doesn't contain any files or folders yet.
    </p>
</div>
{% endif %}

<!-- Long content displayed at the bottom -->
{% if index_content and content_position == 'bottom' %}
<div class="directory-content-bottom bg-gray-800/30 backdrop-blur-sm border border-gray-700/30">
    <h2 class="directory-content-title">About This Directory</h2>
    <article class="tufte">
        <section class="tufte-content">
            {{ index_content.content | safe }}
        </section>
    </article>
</div>
{% endif %}
{% endblock %}

{% block extra_scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Enhanced keyboard navigation
    const items = document.querySelectorAll('.group a');
    let currentIndex = -1;

    document.addEventListener('keydown', function(e) {
        if (e.key === 'ArrowDown' || e.key === 'j') {
            e.preventDefault();
            currentIndex = Math.min(currentIndex + 1, items.length - 1);
            focusItem(currentIndex);
        } else if (e.key === 'ArrowUp' || e.key === 'k') {
            e.preventDefault();
            currentIndex = Math.max(currentIndex - 1, 0);
            focusItem(currentIndex);
        } else if (e.key === 'Enter' && currentIndex >= 0) {
            e.preventDefault();
            items[currentIndex].click();
        }
    });

    function focusItem(index) {
        items.forEach((item, i) => {
            const parent = item.closest('.group');
            if (i === index) {
                item.focus();
                parent.classList.add('bg-gray-800/70', 'border-primary-700/50');
            } else {
                parent.classList.remove('bg-gray-800/70', 'border-primary-700/50');
            }
        });
    }

    // Add elegant animation on page load
    const directoryItems = document.querySelectorAll('.group');
    directoryItems.forEach((item, index) => {
        item.style.opacity = '0';
        item.style.transform = 'translateY(20px) scale(0.98)';
        
        setTimeout(() => {
            item.style.transition = 'all 0.6s cubic-bezier(0.16, 1, 0.3, 1)';
            item.style.opacity = '1';
            item.style.transform = 'translateY(0) scale(1)';
        }, index * 60);
    });

    // Add file type icons based on extension
    const fileLinks = document.querySelectorAll('.group a');
    fileLinks.forEach(link => {
        const href = link.getAttribute('href');
        if (href && !link.querySelector('.file-icon')) {
            let icon = '';
            if (href.includes('.pdf')) icon = '📕';
            else if (href.includes('.doc') || href.includes('.docx')) icon = '📘';
            else if (href.includes('.xls') || href.includes('.xlsx')) icon = '📊';
            else if (href.includes('.zip') || href.includes('.tar')) icon = '📦';
            else if (href.includes('.mp3') || href.includes('.wav')) icon = '🎵';
            else if (href.includes('.mp4') || href.includes('.mov')) icon = '🎬';
            
            if (icon) {
                const iconSpan = document.createElement('span');
                iconSpan.textContent = ` ${icon}`;
                iconSpan.className = 'file-icon text-sm opacity-60';
                link.appendChild(iconSpan);
            }
        }
    });
});
</script>
{% endblock %}