Files
StarPunk/templates/tag.html
Phil Skentelbery 377027e79a feat(templates): Add microformats2 h-feed and p-category markup for tags
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>
2025-12-10 11:35:11 -07:00

66 lines
2.0 KiB
HTML

{% extends "base.html" %}
{% from "partials/media.html" import display_media %}
{% block title %}{{ tag.display_name }} - StarPunk{% endblock %}
{% block content %}
<div class="h-feed">
<h1 class="p-name">Notes tagged "{{ tag.display_name }}"</h1>
{% 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 with this tag.</p>
{% endif %}
<nav class="note-nav">
<a href="/">Back to all notes</a>
</nav>
</div>
{% endblock %}