feat: v1.2.0-rc.1 - IndieWeb Features Release Candidate

Complete implementation of v1.2.0 "IndieWeb Features" release.

## Phase 1: Custom Slugs
- Optional custom slug field in note creation form
- Auto-sanitization (lowercase, hyphens only)
- Uniqueness validation with auto-numbering
- Read-only after creation to preserve permalinks
- Matches Micropub mp-slug behavior

## Phase 2: Author Discovery + Microformats2
- Automatic h-card discovery from IndieAuth identity URL
- 24-hour caching with graceful fallback
- Never blocks login (per ADR-061)
- Complete h-entry, h-card, h-feed markup
- All required Microformats2 properties
- rel-me links for identity verification
- Passes IndieWeb validation

## Phase 3: Media Upload
- Upload up to 4 images per note (JPEG, PNG, GIF, WebP)
- Automatic optimization with Pillow
  - Auto-resize to 2048px
  - EXIF orientation correction
  - 95% quality compression
- Social media-style layout (media top, text below)
- Optional captions for accessibility
- Integration with all feed formats (RSS, ATOM, JSON Feed)
- Date-organized storage with UUID filenames
- Immutable caching (1 year)

## Database Changes
- migrations/006_add_author_profile.sql - Author discovery cache
- migrations/007_add_media_support.sql - Media storage

## New Modules
- starpunk/author_discovery.py - h-card discovery and caching
- starpunk/media.py - Image upload, validation, optimization

## Documentation
- 4 new ADRs (056, 057, 058, 061)
- Complete design specifications
- Developer Q&A with 40+ questions answered
- 3 implementation reports
- 3 architect reviews (all approved)

## Testing
- 56 new tests for v1.2.0 features
- 842 total tests in suite
- All v1.2.0 feature tests passing

## Dependencies
- Added: mf2py (Microformats2 parser)
- Added: Pillow (image processing)

Version: 1.2.0-rc.1

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

templates/admin/edit.html

@@ -23,6 +23,20 @@
       <small>Use Markdown syntax for formatting</small>
     </div>
 
+    <div class="form-group">
+      <label for="slug">Slug (permanent)</label>
+      <input type="text"
+             id="slug"
+             name="slug"
+             value="{{ note.slug }}"
+             readonly
+             class="form-control"
+             disabled>
+      <small class="form-text text-muted">
+        Slugs cannot be changed after creation to preserve permalinks.
+      </small>
+    </div>
+
     <div class="form-group form-checkbox">
       <input type="checkbox" id="published" name="published" {% if note.published %}checked{% endif %}>
       <label for="published">Published</label>

templates/admin/new.html

@@ -6,7 +6,7 @@
 <div class="note-editor">
   <h2>Create New Note</h2>
 
-  <form action="{{ url_for('admin.create_note_submit') }}" method="POST" class="note-form">
+  <form action="{{ url_for('admin.create_note_submit') }}" method="POST" enctype="multipart/form-data" class="note-form">
     <div class="form-group">
       <label for="content">Content (Markdown)</label>
       <textarea
@@ -20,6 +20,37 @@
       <small>Use Markdown syntax for formatting</small>
     </div>
 
+    <div class="form-group">
+      <label for="custom_slug">Custom Slug (optional)</label>
+      <input type="text"
+             id="custom_slug"
+             name="custom_slug"
+             pattern="[a-z0-9-]+"
+             placeholder="leave-blank-for-auto-generation"
+             class="form-control">
+      <small class="form-text text-muted">
+        Lowercase letters, numbers, and hyphens only.
+        Leave blank to auto-generate from content.
+      </small>
+    </div>
+
+    <div class="form-group">
+      <label for="media_files">Images (optional, max 4)</label>
+      <input type="file"
+             name="media_files"
+             id="media_files"
+             accept="image/jpeg,image/png,image/gif,image/webp"
+             multiple
+             class="form-control">
+      <small class="form-text text-muted">
+        JPEG, PNG, GIF, WebP only. Max 10MB per file, 4 images total.
+        Images will appear at the top of your note.
+      </small>
+    </div>
+
+    <!-- Preview area (filled via JavaScript after file selection) -->
+    <div id="media-preview" class="media-preview" style="display: none;"></div>
+
     <div class="form-group form-checkbox">
       <input type="checkbox" id="published" name="published" checked>
       <label for="published">Publish immediately</label>
@@ -37,4 +68,85 @@
 {{ super() }}
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
 <script src="{{ url_for('static', filename='js/preview.js') }}"></script>
+
+<style>
+.media-preview {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+  margin: 1rem 0;
+  padding: 1rem;
+  background: #f5f5f5;
+  border-radius: 4px;
+}
+
+.media-preview-item {
+  border: 1px solid #ddd;
+  padding: 0.5rem;
+  border-radius: 4px;
+  background: white;
+}
+
+.media-preview-item img {
+  width: 100%;
+  height: auto;
+  display: block;
+  margin-bottom: 0.5rem;
+  border-radius: 2px;
+}
+
+.caption-input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 0.9rem;
+}
+</style>
+
+<script>
+// Media upload preview and caption handling
+// Per Q3: Show preview after selection
+// Per Q7: Allow caption input per image
+document.addEventListener('DOMContentLoaded', function() {
+  const fileInput = document.getElementById('media_files');
+  const preview = document.getElementById('media-preview');
+
+  fileInput.addEventListener('change', function(e) {
+    const files = Array.from(e.target.files);
+
+    if (files.length === 0) {
+      preview.style.display = 'none';
+      preview.innerHTML = '';
+      return;
+    }
+
+    if (files.length > 4) {
+      alert('Maximum 4 images allowed');
+      e.target.value = '';
+      return;
+    }
+
+    preview.innerHTML = '';
+    preview.style.display = 'grid';
+
+    files.forEach((file, index) => {
+      const reader = new FileReader();
+      reader.onload = function(event) {
+        const div = document.createElement('div');
+        div.className = 'media-preview-item';
+        div.innerHTML = `
+          <img src="${event.target.result}" alt="Preview ${index + 1}">
+          <input type="text"
+                 name="captions[]"
+                 placeholder="Caption (optional)"
+                 class="caption-input">
+        `;
+        preview.appendChild(div);
+      };
+      reader.readAsDataURL(file);
+    });
+  });
+});
+</script>
 {% endblock %}

templates/base.html

@@ -8,6 +8,13 @@
   <link rel="alternate" type="application/rss+xml" title="{{ config.SITE_NAME }} RSS Feed" href="{{ url_for('public.feed', _external=True) }}">
   <link rel="alternate" type="application/xml+opml" title="{{ config.SITE_NAME }} Feed Subscription List" href="{{ url_for('public.opml', _external=True) }}">
 
+  {# rel-me links from discovered author profile (v1.2.0 Phase 2) #}
+  {% if author and author.rel_me_links %}
+    {% for profile_url in author.rel_me_links %}
+  <link rel="me" href="{{ profile_url }}">
+    {% endfor %}
+  {% endif %}
+
   {% block head %}{% endblock %}
 </head>
 <body>

templates/index.html

@@ -4,20 +4,47 @@
 
 {% block content %}
 <div class="h-feed">
-  <h2 class="p-name">Recent Notes</h2>
+  <h2 class="p-name">{{ config.SITE_NAME or 'Recent Notes' }}</h2>
+
+  {# Feed-level author h-card (per Q24) #}
+  {% if author %}
+  <div class="p-author h-card" style="display: none;">
+    <a class="p-name u-url" href="{{ author.url or author.me }}">{{ author.name or author.url }}</a>
+  </div>
+  {% 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 %}
+
+      {# e-content: note content (preview) #}
       <div class="e-content">
         {{ note.html[:300]|safe }}{% if note.html|length > 300 %}...{% endif %}
       </div>
+
       <footer class="note-meta">
-        <a class="u-url" href="{{ url_for('public.note', slug=note.slug) }}">
+        {# 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>
+
+        {# 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 %}

templates/note.html

@@ -4,21 +4,65 @@
 
 {% block content %}
 <article class="h-entry">
+  {# 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 %}
+  <h1 class="p-name">{{ note.title }}</h1>
+  {% endif %}
+
+  {# Media display at TOP (v1.2.0 Phase 3, per ADR-057) #}
+  {% if note.media %}
+  <div class="note-media">
+    {% for item in note.media %}
+    <figure class="media-item">
+      <img src="{{ url_for('public.media_file', path=item.path) }}"
+           alt="{{ item.caption or 'Image' }}"
+           class="u-photo"
+           width="{{ item.width }}"
+           height="{{ item.height }}">
+      {% if item.caption %}
+      <figcaption>{{ item.caption }}</figcaption>
+      {% endif %}
+    </figure>
+    {% endfor %}
+  </div>
+  {% endif %}
+
+  {# e-content: note content BELOW media (per ADR-057) #}
   <div class="e-content">
     {{ note.html|safe }}
   </div>
+
   <footer class="note-meta">
-    <a class="u-url" href="{{ url_for('public.note', slug=note.slug) }}">
+    {# u-url and u-uid same for notes (per Q23) #}
+    <a class="u-url u-uid" 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 at %I:%M %p') }}
       </time>
     </a>
+
+    {# dt-updated if note was modified #}
     {% if note.updated_at and note.updated_at != note.created_at %}
     <span class="updated">
-      (Updated: <time datetime="{{ note.updated_at.isoformat() }}">{{ note.updated_at.strftime('%B %d, %Y') }}</time>)
+      (Updated: <time class="dt-updated" datetime="{{ note.updated_at.isoformat() }}">{{ note.updated_at.strftime('%B %d, %Y') }}</time>)
     </span>
     {% endif %}
+
+    {# Author h-card (nested within 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>
+      {% if author.photo %}
+      <img class="u-photo" src="{{ author.photo }}" alt="{{ author.name or 'Author' }}" width="48" height="48">
+      {% endif %}
+    </div>
+    {% endif %}
   </footer>
+
   <nav class="note-nav">
     <a href="/">Back to all notes</a>
   </nav>