- Owner detection via Alpine.js global store (shared across components)
- Inline reply form for native comments with threaded display
- Micropub reply support for social/webmention interactions
- Provenance badges (Mastodon/Bluesky/ActivityPub/IndieWeb) on webmentions
- detectPlatform() for both build-time and client-side webmentions
- Reply buttons on webmention cards (owner only)
- Threaded owner reply display under matching webmentions
- Auto-expand comments section when comments exist
- Hide IndieAuth sign-in when admin session detected
- Author badge on owner comments and replies
Confab-Link: http://localhost:8080/sessions/184584f4-67e1-485a-aba8-02ac34a600fe
Replace the server-side toc.njk placeholder (which never rendered because
no code populated the `toc` variable) with a client-side Alpine.js component
that scans .e-content headings at page load, builds a dynamic table of
contents, and highlights the current section via IntersectionObserver.
- Only appears on articles/notes with 3+ headings (h2-h4)
- Excluded at build time for bookmarks, likes, and reposts
- Scroll spy activates heading in top 30% of viewport
Confab-Link: http://localhost:8080/sessions/cc343b15-8d10-43cd-a48f-ca912eb79b83
The previous commit fixed the Tier 2 default hero avatar (home.njk),
but production uses the homepage builder (Tier 1) which renders
hero.njk instead. Same issue: HTML width/height 96x96 but CSS sets
sm:w-32/h-32 (128px) on desktop, causing CLS on resize.
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
Three root causes identified via PageSpeed layout shift culprits:
1. Grid mismatch (CLS 0.495): Critical CSS used `2fr 1fr` but Tailwind
compiles to `repeat(3, minmax(0, 1fr))` with `grid-column: span 2`.
Updated critical CSS to match Tailwind's exact output.
2. Font swap FOUT (CLS 0.074): @font-face declarations were only in the
deferred stylesheet. Moved to critical CSS with font-display:optional
and added <link rel="preload"> for weights 400/600/700. Changed all
font-display from swap to optional in tailwind.css source.
3. Avatar resize: HTML width/height was 96x96 but CSS sets sm:w-32/h-32
(128px) on desktop. Updated attributes to 128x128.
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
The skeleton-to-content swap was the root cause of extreme CLS scores.
Critical CSS already provides correct first-paint layout, making the
skeleton unnecessary. Removes html.loading class, skeleton div,
page-content wrapper, and all skeleton CSS rules.
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
The @keydown.tab handler in fediverse-modal.njk contained complex
inline JS with arrow functions, querySelector strings with escaped
quotes, and comparison operators — all of which confused
html-minifier-terser's HTML parser, causing parse errors on every
page that includes the modal (i.e., nearly every page).
Moved the focus-trap logic to a trapFocus() method on the Alpine
component where it belongs.
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
The accessibility change from <span> to <ul> caused categories to stack
vertically. Add flex utilities to maintain horizontal flow while keeping
the semantic list markup and ARIA attributes.
Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
- Add skip-to-main-content link and main content ID target
- Add prefers-reduced-motion media queries for all animations
- Enhance visible focus indicators (2px offset, high-contrast ring)
- Replace ~160 text-surface-500 instances with text-surface-600/dark:text-surface-400
for 4.5:1+ contrast ratio compliance
- Add aria-hidden="true" to ~30+ decorative SVG icons across sidebars/widgets
- Convert facepile containers from div to semantic ul/li with role="list"
- Add aria-label to icon-only buttons (share, sort controls)
- Add sr-only labels to form inputs (webmention, search)
- Add aria-live="polite" to dynamically loaded webmentions
- Add aria-label with relative+absolute date to time-difference component
- Add keyboard handlers (Enter/Space) to custom interactive elements
- Add aria-label to nav landmarks (table of contents)
- Fix modal focus trap and dialog accessibility
- Fix lightbox keyboard navigation and screen reader announcements
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
Articles, notes, and bookmarks were all sharing amber, which
defeats the purpose of per-type color identity.
New complete color map (7 unique colors):
- Articles: indigo (long-form writing)
- Notes: teal (short posts)
- Bookmarks: amber (saved links)
- Likes: red (heart)
- Replies: sky (conversation)
- Reposts: green (sharing)
- Photos: purple (visual)
Updated across collection pages, blog.njk mixed view,
recent-posts widget (now shows type-specific icons and colors
for all 7 types), and design system documentation.
Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
Replace unstyled content flash with pulsing gray placeholder shapes
while the deferred Tailwind stylesheet loads. Uses a 'loading' class
on <html> that critical CSS uses to show skeleton / hide content,
removed by the stylesheet's onload handler.
Includes noscript fallback to bypass skeleton when JS is disabled.
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
Add critical CSS rules to constrain images (max-width:100%) and inline
SVGs (default 1.25rem) before Tailwind loads. Add width/height HTML
attributes to avatar images in hero sections and h-card sidebar widget.
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
Widget: add noLabels to prevent month abbreviations from squishing
together in the narrow sidebar. Both widget and section: use lighter
boxColorDark (#44403c / surface-700) so empty grid cells are visible
against the surface-800 sidebar/section backgrounds in dark mode.
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
The ai-usage widget was empty on blog listing pages (/notes/, /photos/)
because sidebar.njk (the third sidebar dispatcher) was missing the
widget registration. Also adds the "zap" lightning bolt icon to icon.njk
which was referenced but never defined.
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
Replace the 22-item "/" dropdown with a curated "Pages" dropdown (Blogroll,
Podroll, News, All Pages). Add /now to header nav. Move CV and Digest to
footer only. Add auth-gated Dashboard to footer Navigate column. Remove
Interactions from footer Content column.
Refactor /slashes/ into a comprehensive site map with three sections: Pages
(dynamic CMS pages), Activity Feeds (plugin pages), and Site Pages (theme
.njk pages like /graph, /changelog, /featured, /starred, etc.).
Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
Compact widget showing AI transparency stats (total, AI-involved,
human-only, ratio), level breakdown pills, and a 1-year post-graph
highlighting AI-involved posts. Links to /ai/ for full report.
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
- Replace broken client-side type filter on /blog/ with navigation
pill links to dedicated collection pages (with post counts)
- Replace Load More with proper prev/next/page-number pagination
on Interactions inbound tab (20 per page, filter resets page)
- Add auto-unfurl transform for standalone external links in notes
- Exclude Digest and Categories pages from Pagefind search index
- Add Pagefind search filters for post type, year, and category
- Add Pagefind filter metadata to page.njk layout
Confab-Link: http://localhost:8080/sessions/956f4251-b4a9-4bc9-b214-53402ad1fe63
- Replace network-diagram SVG with official ActivityPub logo in post footer
- Replace person-plus SVG with AP logo in fediverse follow widget
- Replace Mastodon icon with AP logo in share widget, use #a730b8 purple
- AP icon brand color: #f1027e → #a730b8 in social-icon macro
- Detect Mastodon syndication URLs (/@username pattern) for proper logo pill
Confab-Link: http://localhost:8080/sessions/c5b1471e-b046-44d9-b94f-ab5e68fae7cc
- Add posting-activity.njk section template with configurable years/limit
- Register posting-activity in homepage-section.njk dispatcher
- Move hardcoded post-graph into Tier 2 block (homepage builder controls its own)
- Add "View full history" link to /graph/ on both Tier 2 and section template
- Create /graph/ page showing all years with no limit
Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
- Add post-type header (Reply/Like/Repost/Bookmark/Note) for titleless posts
- Add left accent border to user content on interaction posts
- Collapse AI Usage box into a compact <details> summary line
- Collapse comments section when empty, auto-open when comments exist
- Collapse webmention send form behind <details> toggle
Confab-Link: http://localhost:8080/sessions/648a550c-4f65-46be-b9a9-6b7e0fd90751
Apply the same visual pattern used in projects/skills/interests:
- Colored left borders cycling through 8-color palette
- 2-column responsive grid layout
- Alpine.js collapsible descriptions (accordion)
- Hover states on clickable rows
- Dates shown in summary row (desktop) and detail panel (mobile)
Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
Replace monochrome (black/amber) social icons with official brand
colors for each service. Add socialIconColorClass macro that maps
icon names to Tailwind color classes with dark mode variants.
Changes:
- social-icon.njk: add brand color macro for 30+ icon types
- social-icon.njk: replace ActivityPub icon with official W3C logo
- hero.njk: apply brand colors to icons, neutral text for labels
- cv-builder.njk: same brand color treatment as hero section
Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
Article title links now have explicit text color instead of inheriting
the global amber link color. Default article left-border changed from
amber to neutral surface tone. Card hover border toned down to neutral.
Interaction types (likes, bookmarks, reposts, replies, photos) keep
their semantic colors unchanged.
Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
OG images are now the primary navigation element — large, prominent,
and clickable. Directional labels overlay the image. Falls back to
text title + date when no OG image exists. Inspired by zachleat.com.
Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
Add `featuredPosts` collection filtering posts with `featured: true`
frontmatter. New `featured-posts` section template with type-aware
rendering (articles, notes, photos, bookmarks, etc.) and star icon
header. Registered in homepage-section.njk dispatcher.
To feature a post, add `featured: true` to its frontmatter. Then add
a `{ "type": "featured-posts" }` section to the homepage config.
Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
PagefindUI in the ~300px sidebar caused 218+ results to expand inline,
pushing content down with poor readability. Replace with a simple GET
form that redirects to /search/?q=query in all four sidebars.
Confab-Link: http://localhost:8080/sessions/4d40ef89-a713-48c1-b4ed-0ffafca25677
Pages (slash pages like /about, /now, /ai) were missing the AI usage
disclosure that already displays on posts. Adds the same aside block
to page.njk so AI metadata renders consistently across all content types.
Confab-Link: http://localhost:8080/sessions/3bf0740c-86e8-4ed6-b7ce-f83d8462c682
Add items-start to grid container so expanding one project card no longer
stretches the adjacent card to fill the row height. Add per-project color
cycling (border-l + tech tags) using the 8-color palette, replacing uniform
amber accent colors.
Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
Apply the collaboratively-written design system from .interface-design/system.md:
- Domain color map: Social pages (rose), Code pages (emerald), Reading pages
(orange), Music pages (purple) replace generic accent tokens
- Font-mono on all <time> elements via global CSS rule + wrap 7 non-<time> dates
- Shadow standardization: replace hover:shadow-lg with border-hover on news cards
- Active states: scale(0.97) press feedback on buttons and pagination links
- Gradient cleanup: remove to-white gradient on github featured project cards
- CV Skills & Interests: cycle through 8 distinct colors per family category
(amber, emerald, sky, rose, purple, orange, teal, indigo) on both CV page
and homepage
- Update system.md with refined palette documentation and domain color spec
Files: 19 changed across templates, CSS, and design documentation
Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
Replace the entire color system with a design-driven warm palette:
- Surface tokens: cold zinc grays → warm stone (#faf8f5 to #0f0e0d)
- Accent tokens: cold teal → warm amber (#fffbeb to #451a03)
- All bg-white → bg-surface-50 across templates (warm cream instead of pure white)
- Critical CSS: all hardcoded hex values updated to warm palette
- Prism code blocks: cold gray backgrounds → warm stone
- Pagefind search UI: blue buttons/links → amber interactive colors
- Dark mode: warm dark surfaces with amber accents throughout
Design system documented in .interface-design/system.md
Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
- Add teal accent color scale and activate Inter font via @font-face
- Neutralize nav/footer hovers from primary blue to surface neutrals
- Apply accent color to hero subtitle, FAB, CTA buttons, card hovers
- Fix reply post-type color from generic primary to distinctive sky blue
- Create centralized icon macro (icon.njk) with 24 reusable SVG icons
- Add per-widget-type icons and colored left-accent borders to all sidebars
- Update .p-category tags from blue to neutral surface with border
- Diversify color vocabulary: red (likes), amber (bookmarks/blogroll),
green (reposts), purple (funkwhale), sky (replies), orange (subscribe)
Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
Add usageInfo (link to /ai transparency page) and creativeWorkStatus
(human-readable AI disclosure) to the Article JSON-LD when AI metadata
properties are present. Valid Schema.org, no impact on ActivityPub.
Confab-Link: http://localhost:8080/sessions/83d68915-7921-4cc4-a838-c331fd1c4d6e
Show AI transparency metadata (text level, code level, tools) as a
subtle aside on individual posts and compact badges in blog listing.
Supports both camelCase and underscore property names.
Confab-Link: http://localhost:8080/sessions/83d68915-7921-4cc4-a838-c331fd1c4d6e
