Phil Skentelbery
377027e79a
Implement Phase 2 of v1.3.0 per microformats-tags-design.md Template Updates: - templates/index.html: Add h-feed properties (u-url, enhanced p-author with u-photo/p-note, feed-level u-photo) - templates/index.html: Add p-category markup with rel="tag" to note previews - templates/note.html: Add p-category markup with rel="tag" for tags - templates/note.html: Enhance author h-card with u-photo and p-note (hidden for parsers) - templates/note.html: Document u-photo placement outside e-content per draft spec - templates/tag.html: Create new tag archive template with h-feed structure Key Decisions Applied: - Tags ordered alphabetically by display_name (ready for backend) - rel="tag" on all p-category links per microformats2 spec - Author bio (p-note) hidden with display: none for semantic parsing - Dual u-photo elements intentional for parser compatibility - Graceful fallback when author photo/bio not available Templates are backward compatible and ready for backend integration. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
87 lines
3.1 KiB
HTML
87 lines
3.1 KiB
HTML
{% extends "base.html" %}
|
|
{% from "partials/media.html" import display_media %}
|
|
|
|
{% block title %}StarPunk - Home{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="h-feed">
|
|
{# h-feed required properties per microformats.org/wiki/h-feed #}
|
|
<h2 class="p-name">{{ config.SITE_NAME or 'Recent Notes' }}</h2>
|
|
|
|
{# u-url for feed (self-reference) #}
|
|
<a class="u-url" href="{{ url_for('public.index', _external=True) }}" style="display: none;">Feed URL</a>
|
|
|
|
{# Feed-level author h-card with all properties #}
|
|
{# Hidden because it's semantic-only markup for parsers, not visual content #}
|
|
{# The visible author display is on individual note pages #}
|
|
{% if author %}
|
|
<div class="p-author h-card" style="display: none;">
|
|
{% if author.photo %}
|
|
<img class="u-photo" src="{{ author.photo }}" alt="{{ author.name or 'Author' }}">
|
|
{% endif %}
|
|
<a class="p-name u-url" href="{{ author.url or author.me }}">{{ author.name or author.url or author.me }}</a>
|
|
{% if author.note %}
|
|
<p class="p-note">{{ author.note }}</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{# u-photo at feed level (duplicate of author photo for broad parser compatibility) #}
|
|
{# Some parsers expect feed-level u-photo, others look inside author h-card #}
|
|
{% if author and author.photo %}
|
|
<img class="u-photo" src="{{ author.photo }}" alt="" style="display: none;">
|
|
{% endif %}
|
|
|
|
{% if notes %}
|
|
{% for note in notes %}
|
|
<article class="h-entry note-preview">
|
|
{# Detect if note has explicit title (starts with # heading) - per Q22 #}
|
|
{% set has_explicit_title = note.content.strip().startswith('#') %}
|
|
|
|
{# p-name only if note has explicit title (per Q22) #}
|
|
{% if has_explicit_title %}
|
|
<h3 class="p-name">{{ note.title }}</h3>
|
|
{% endif %}
|
|
|
|
{# Media preview (if available) #}
|
|
{{ display_media(note.media) }}
|
|
|
|
{# e-content: note content (preview) #}
|
|
<div class="e-content">
|
|
{{ note.html[:300]|safe }}{% if note.html|length > 300 %}...{% endif %}
|
|
</div>
|
|
|
|
<footer class="note-meta">
|
|
{# u-url for permalink #}
|
|
<a class="u-url" href="{{ url_for('public.note', slug=note.slug, _external=True) }}">
|
|
<time class="dt-published" datetime="{{ note.created_at.isoformat() }}">
|
|
{{ note.created_at.strftime('%B %d, %Y') }}
|
|
</time>
|
|
</a>
|
|
|
|
{# Tags in preview #}
|
|
{% if note.tags %}
|
|
<span class="note-tags">
|
|
{% for tag in note.tags %}
|
|
<a class="p-category" rel="tag" href="{{ url_for('public.tag', tag=tag.name) }}">{{ tag.display_name }}</a>
|
|
{% endfor %}
|
|
</span>
|
|
{% endif %}
|
|
|
|
{# Author h-card nested in each h-entry (per Q20) #}
|
|
{% if author %}
|
|
<div class="p-author h-card">
|
|
<a class="p-name u-url" href="{{ author.url or author.me }}">
|
|
{{ author.name or author.url or author.me }}
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</footer>
|
|
</article>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="empty-state">No notes published yet. Check back soon!</p>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock %}
|