Commit Graph

48 Commits

Author SHA1 Message Date
Ricardo
34fdab4b85 feat: use replyTargets config for platform-to-syndicator mapping
- Frontend now reads replyTargets from isOwner API to resolve which
  syndicator handles replies for each platform
- Build-time reply buttons get platform from URL heuristics as fallback
- enrichBuildTimeBadges upgrades to NodeInfo-resolved platform at runtime
2026-03-26 08:21:54 +01:00
Ricardo
dcd73b1897 fix: frontend reply syndication mapping and empty array cleanup
- Map platform to syndicator using service.name keys from isOwner API
- Add activitypub platform mapping (was completely missing)
- Remove empty mp-syndicate-to array for webmention replies (caused
  permanent no-op entries in syndication queue)
2026-03-25 22:41:14 +01:00
Ricardo
d4984f43bf fix: enrich build-time reply badges with conversations API platform data
Build-time reply cards rendered from webmention.io cache lack platform
provenance — they fall through URL heuristics to "webmention" (IndieWeb badge).
After conversations API data arrives with NodeInfo-resolved platform names,
enrichBuildTimeBadges() upgrades matching build-time cards with correct badges.

Also adds wm-provenance-badge class to all badge variants for reliable
DOM selection during enrichment.

Confab-Link: http://localhost:8080/sessions/184584f4-67e1-485a-aba8-02ac34a600fe
2026-03-15 16:11:39 +01:00
Ricardo
6046eceaac feat: use NodeInfo-resolved platform for provenance badges
detectPlatform() now checks item.platform first (set by conversations
API via NodeInfo) before falling back to URL heuristics. Mastodon gets
its own badge, Bluesky gets its own, all other fediverse software
shows the Fediverse badge, and webmention.io data uses Bridgy URL
heuristics as fallback.

Confab-Link: http://localhost:8080/sessions/184584f4-67e1-485a-aba8-02ac34a600fe
2026-03-15 15:16:40 +01:00
Ricardo
c7c0f4e0a4 refactor: unified owner reply threading via conversations API
- Remove self-mention filter (siteOrigin, isSelfMention) from webmentions.js
- Remove build-time self-mention filter from eleventy.config.js
- processWebmentions() now separates is_owner items and threads them
  under parent interaction cards via threadOwnerReplies()
- owner:detected handler reduced to wireReplyButtons() only
- Remove loadOwnerReplies() and Alpine.store replies from comments.js
- Owner replies now come from conversations API with parent_url metadata

Confab-Link: http://localhost:8080/sessions/184584f4-67e1-485a-aba8-02ac34a600fe
2026-03-15 12:45:55 +01:00
Ricardo
55927722cc fix: filter out self-mentions from webmentions display
Owner replies sent via webmention-sender appear as webmentions on
the owner's own posts, showing the reply as a top-level entry instead
of threaded. Filter out any webmention whose source URL starts with
the site URL, in both build-time (eleventy.config.js) and client-side
(webmentions.js) rendering paths.

Confab-Link: http://localhost:8080/sessions/184584f4-67e1-485a-aba8-02ac34a600fe
2026-03-15 09:23:41 +01:00
Ricardo
3eacba1672 fix: don't send empty mp-syndicate-to in Micropub reply
Sending mp-syndicate-to: [] caused a server-side crash in jf2.js
where syndicateTo?.includes() received a non-iterable after
normalization. Only include the property when a target exists.

Confab-Link: http://localhost:8080/sessions/184584f4-67e1-485a-aba8-02ac34a600fe
2026-03-14 23:40:43 +01:00
Ricardo
395750da9b fix: show inline reply form under webmention cards
Reply buttons on webmention interactions (Bluesky, Mastodon, IndieWeb)
now show an inline reply form directly under the card instead of
delegating to the hidden Comments section. The form posts via Micropub
with optional syndication targeting.

Confab-Link: http://localhost:8080/sessions/184584f4-67e1-485a-aba8-02ac34a600fe
2026-03-14 22:49:15 +01:00
Ricardo
02546950bf fix: use Alpine.js v3 API for reply button click handler
Alpine v3 uses Alpine.$data(el) instead of el.__x.$data.
The old v2 pattern silently failed, making Reply buttons non-functional.

Confab-Link: http://localhost:8080/sessions/184584f4-67e1-485a-aba8-02ac34a600fe
2026-03-14 21:43:33 +01:00
Ricardo
0fe6ab0195 fix: reply buttons on dynamic webmentions + owner comment form
- Add .wm-reply-btn button and .wm-owner-reply-slot to dynamically
  created reply elements (parity with build-time Nunjucks template)
- Extract wireReplyButtons() so buttons are wired both on owner:detected
  and after dynamic replies are appended (fixes timing gap)
- Use data-wired attribute to prevent double-wiring
- Show comment form for site owner (isOwner) not just IndieAuth users
- Fix "Signed in as" display to use ownerProfile when user is null

Confab-Link: http://localhost:8080/sessions/184584f4-67e1-485a-aba8-02ac34a600fe
2026-03-14 20:12:06 +01:00
Ricardo
a9b4300d7b fix: reply buttons hidden + missing webmentions on pages without build-time data
Two bugs fixed:

1. Reply buttons stayed hidden despite owner being detected. The
   alpine:initialized event fires before the async checkOwner() fetch
   resolves, so isOwner was always false when the handler ran. Fix:
   dispatch custom owner:detected event from init() after both owner
   check and owner replies are loaded.

2. Client-side webmentions not rendering on pages with zero build-time
   webmentions. createWebmentionsSection() looked for .webmention-form
   but the <details> element lacked that class, so the insertion point
   was never found. Fix: add webmention-form class to the details element.

Confab-Link: http://localhost:8080/sessions/184584f4-67e1-485a-aba8-02ac34a600fe
2026-03-14 19:19:11 +01:00
Ricardo
58e3695d68 fix: use DOM-based dedup instead of timestamp for client-side webmentions
The previous approach filtered client-side webmentions by timestamp
(only show items received after buildTime). This missed webmentions
that existed in the API but weren't included in the build-time cache
(e.g., Bluesky interactions via Bridgy that webmention.io stored but
the Eleventy cache plugin didn't fetch).

Now scans the DOM for actually-rendered items: author URLs in facepiles
for likes/reposts/bookmarks, and wm-url on reply cards. Only appends
webmentions not already visible, regardless of when they were received.

Confab-Link: http://localhost:8080/sessions/184584f4-67e1-485a-aba8-02ac34a600fe
2026-03-14 18:30:04 +01:00
Ricardo
39351c4728 feat: reply-to-interactions frontend
- 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
2026-03-14 16:34:56 +01:00
Ricardo
61db75bd76 fix: hide TOC widget wrapper when no headings found
When tocScanner finds no .e-content or fewer than 3 headings,
hide the parent .widget-collapsible container so the empty
collapsible chrome (header button, border) doesn't show.

Confab-Link: http://localhost:8080/sessions/cc343b15-8d10-43cd-a48f-ca912eb79b83
2026-03-11 14:13:57 +01:00
Ricardo
48160a5b13 feat: client-side TOC widget with Alpine.js scroll spy
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
2026-03-10 13:01:53 +01:00
Ricardo
254d5069f7 fix: move focus-trap logic from inline attribute to JS method
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
2026-03-07 20:35:32 +01:00
Ricardo
1026d728af a11y: fix all remaining WCAG 2.1 AA issues from audit round 2
- Focus traps for fediverse modal and lightbox dialogs (C3, C4)
- Search widget input label (C5)
- Blogroll widget tab ARIA semantics (C6)
- Footer social links "opens in new tab" warning (S5)
- Reply context aria-label on aside (S8)
- Photo alt text fallback includes post title (S10)
- Post categories use list markup (M3)
- Funkwhale now-playing bars aria-hidden (M7)
- TOC uses static Tailwind classes instead of dynamic (M9)
- Footer headings use proper aria heading roles (M15)
- Header anchor opacity increased to 1 for contrast (M18)
- Custom HTML widgets labeled as regions (M19)
- Empty collection placeholder role=status (M22)
- GitHub widget loading state announced (N5)
- Subscribe icon contrast improved (m1)
- All Permalink links have aria-label with post context (m3)
- Podroll audio element aria-label (m4)
- Obfuscated email link aria-label (m6)
- Fediverse follow button uses aria-label (M10)

Score: 53.6% → 92.9% (26/28 WCAG criteria passing)

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
2026-03-07 19:34:25 +01:00
Ricardo
e236b4bf65 a11y: comprehensive WCAG 2.1 Level AA accessibility audit
- 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
2026-03-07 18:58:08 +01:00
Ricardo
0c6229088c feat: rework single post view for better content hierarchy
- 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
2026-03-05 13:22:32 +01:00
Ricardo
155816a0bc feat: replace all primary (blue) with contextual colors across entire theme
Eliminate monotonous blue by replacing ~290 primary- references in 60 files
with semantically appropriate colors:

- accent (teal): links, CTAs, buttons, tabs, focus rings, spinners
- purple: Funkwhale/music, photos, Mastodon/fediverse
- surface (neutral): GitHub, dates/metadata, info boxes
- amber: bookmarks, blogroll categories
- red: likes
- green: reposts
- sky: replies
- orange: RSS/feeds, podcasts
- #0085ff: Bluesky brand
- #a730b8: Mastodon brand

Also updates prose link colors in tailwind.config.js, pagefind UI
primary color to teal, and client-side JS color references.

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
2026-03-04 12:50:19 +01:00
Ricardo
760058d0e4 feat: multi-domain fediverse support and share-to-mastodon upgrade
- Replace single localStorage string with versioned multi-domain store
  (fediverse_domains_v1) with usage tracking, inspired by Mastodon's
  share.joinmastodon.org project
- Add domain validation via URL constructor before redirecting
- Add mode param to fediverseInteract component: "interact" for
  authorize_interaction, "share" for /share?text=...
- Migrate old fediverse_instance key automatically on first load
- Extract shared modal partial (fediverse-modal.njk) used by post
  interaction, follow widget, and share widget
- Share widget now prompts visitors for their own instance instead of
  hardcoding site owner's Mastodon instance

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
2026-03-03 11:09:29 +01:00
Ricardo
fb19a68f9e feat: replace Post button with post-type dropdown menu
Clicking Post now shows a dropdown with Note, Bookmark, Reply, Like,
Repost, and Article options. Each opens /posts/create with the
selected type and pre-filled URL/title in a popup window.
2026-02-28 11:12:07 +01:00
Ricardo
a7cc646881 feat: add share-post.js module for Post buttons 2026-02-28 08:20:55 +01:00
Ricardo
4c8c44a49e feat: add save-for-later buttons to frontend pages
Add shared save-later.js module and per-item save buttons to
blogroll, podroll, listening, and news pages. Buttons are hidden
by default and only visible when logged in. Posts to the readlater
plugin API at /readlater/save.
2026-02-27 16:17:16 +01:00
Ricardo
1e900fab16 fix: include photo gallery images in lightbox selector 2026-02-27 11:54:01 +01:00
Ricardo
e2c40468b6 feat: add fullscreen lightbox for article images
Alpine.js component that lets visitors click any image inside
article content to view it fullscreen with keyboard navigation
(arrow keys, Escape to close) and prev/next buttons.
2026-02-27 10:14:35 +01:00
Ricardo
e3f81293d1 fix: align client-side webmention selectors with build-time HTML
- Change .avatar-row selector to .facepile to match build-time template
- Use facepile-avatar class for dynamically created avatar links
- Fix pluralization in updateCount (was only replacing the number,
  now rebuilds the full "N Like/Likes" text correctly)
- Align ring color classes with build-time template
2026-02-23 11:02:32 +01:00
Ricardo
f898837b25 fix: remove platform exception in client-side webmention filter
Conversations items are now included in build-time rendering via
conversationMentions data, so they no longer need a special exception
to bypass the timestamp filter. All items (webmention.io and
conversations) are now filtered equally by build timestamp.
2026-02-23 10:58:48 +01:00
Ricardo
1bc6aaa0a5 fix: add author-based dedup to client-side webmentions
The client-side webmentions.js was deduplicating by wm-id and source
URL, but conversations API and webmention.io use different ID formats
(string vs numeric). Add author URL + action type dedup to catch
cross-source duplicates (e.g., same Bluesky like reported by both).
2026-02-23 10:40:14 +01:00
Ricardo
5d8222e5ae fix: vendor Alpine.js and lite-youtube-embed locally instead of CDN
jsdelivr CDN outages (503) break Alpine.js loading, making all
interactive components non-functional. Bundle vendor JS/CSS locally
to eliminate external CDN dependency.
2026-02-22 16:24:43 +01:00
Ricardo
0962e054d1 fix: remove fediverse node autocomplete (CORS blocked)
nodes.fediverse.party doesn't send CORS headers, so the fetch fails
from the browser. Remove autocomplete entirely — users type their
instance once and localStorage remembers it.
2026-02-22 16:08:20 +01:00
Ricardo
8597856589 feat: add fediverse remote interaction button and syndication platform buttons
Add a Fediverse button to the "Also on" footer for posts syndicated via
self-hosted ActivityPub. Clicking it redirects users to their own instance
via authorize_interaction so they can like/boost/reply natively. Instance
is stored in localStorage for repeat visits, with a modal for first-time
entry and Shift+click to change.

Also adds branded syndication buttons for LinkedIn and IndieNews, and
replaces the heuristic Mastodon URL detection with exact matching against
the configured MASTODON_INSTANCE.
2026-02-22 15:56:01 +01:00
Ricardo
c327221352 fix: use Alpine.data() for comments component registration
Convert commentsSection from a global function to Alpine.data()
registration via the alpine:init event. This is the proper Alpine.js
pattern for reusable components — the component is registered in
Alpine's internal registry before DOM processing begins, eliminating
script loading order issues.

Reverts the hacky approach of moving the script tag to <head>.
2026-02-21 22:40:34 +01:00
rmdes
fa7bfb26ea feat: add comment system components and recent comments widget
- Comment area on post pages (IndieAuth sign-in, submit, display)
- Alpine.js client-side component for auth flow and comment CRUD
- Recent comments sidebar widget with build-time data fetching
- Include comments.js in base layout, comments.njk before webmentions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-21 21:56:15 +01:00
Ricardo
c1e9983c66 fix: show conversations reactions on individual post pages
Conversations items (from Mastodon/Bluesky/ActivityPub) were filtered
out by the client-side timestamp check that prevents duplicating
build-time webmentions. Since conversations data is never in the
build-time cache, bypass the filter for items with a platform field.
2026-02-20 17:52:07 +01:00
rmdes
fc9f5968da feat: dual-fetch from conversations API for enriched interaction data
Fetch from both /webmentions/api/mentions and /conversations/api/mentions,
merge results with conversations items taking priority (richer metadata),
and display platform badges (Mastodon/Bluesky icons) on interaction cards.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-18 21:28:01 +01:00
Ricardo
c3eb04570c feat: add zachleat.com-inspired theme enhancements
- Add time-difference web component for relative dates
- Add @zachleat/table-saw for responsive tables
- Add webmention facepile styling with bookmarks support
- Add OG image thumbnails to post navigation
- Add @11ty/is-land for lazy widget hydration
- Wrap sidebar widgets in is-land for deferred loading
- Lazy-load webmention avatars with is-land
- Add @zachleat/filter-container for blog archive filtering
- Add posting frequency sparkline to blog header
- Inline critical CSS and defer full stylesheet loading
2026-02-18 11:16:33 +01:00
Ricardo
c5cd3c2c75 fix: update webmention API URLs for new moderation plugin
Change all webmention fetch URLs from /webmentions-api/api/mentions
to /webmentions/api/mentions to match the new @rmdes/indiekit-endpoint-webmention-io
plugin which replaces both the upstream viewer and the proxy plugin.

Build-time feed now fetches from local Indiekit API instead of
webmention.io directly.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-10 21:24:28 +01:00
Ricardo
e79f23309d fix: dispatch auth event on window for Alpine.js compatibility
Alpine's .window modifier listens on window, not document.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-05 13:23:30 +01:00
Ricardo
8229dfe3c7 feat: add admin UI for logged-in users (dashboard link + FAB)
Auth detection via /session/login probe with sessionStorage cache.
Dashboard link appears in desktop and mobile nav when authenticated.
Floating action button with quick-create menu for Note, Article,
Photo, Bookmark, and Page post types.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-05 12:12:33 +01:00
Ricardo
a8b44329d8 fix: cache webmention API responses in sessionStorage to persist across refreshes
The old sessionStorage rate limiter prevented re-fetching on page refresh,
causing webmentions to disappear since they weren't in the build-time HTML.
Now caches the actual API response data with a 5-minute TTL so webmentions
render instantly from cache on refresh, while still fetching fresh data in
the background.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-05 10:39:47 +01:00
Ricardo
f58198c021 fix: fetch webmentions for both trailing slash URL variants
Bridgy sends webmentions with inconsistent target URLs — articles
get trailing slashes but likes/bookmarks/reposts don't. The
client-side JS now queries both variants and deduplicates, matching
the build-time filter's behavior.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-02-05 10:06:40 +01:00
Ricardo
24f790c4cb fix: properly create webmentions section before appending type sections
When no build-time webmentions exist, the first type to be processed
was silently dropped because createWebmentionsSection() only creates
the wrapper, not the type-specific section. After calling it, the code
tried to find the selector which still didn't exist.

Fixed by: create wrapper if needed, then always append the section
to the wrapper and get the row/list from the newly created section.
2026-01-28 17:24:00 +01:00
Ricardo
924a21b9f8 fix: correct variable name in updateTotalCount call
Changed newMentions.length to mentionsToShow.length to fix
JavaScript error that was breaking webmention display.
2026-01-28 16:53:23 +01:00
Ricardo
44e8983da8 fix: show all webmentions when no build-time data exists
When build-time webmentions section doesn't exist, show ALL webmentions
from the API instead of filtering to only new ones.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-28 16:33:19 +01:00
Ricardo
b20f371647 fix: use webmentions proxy in client-side fetcher
Prevents direct calls to webmention.io API which may fail without token

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-28 15:12:08 +01:00
Ricardo
1f3fe00ce8 fix: multiple frontend issues
- Add Alpine.js Collapse plugin for x-collapse directive
- Create favicon.svg and favicon.ico with proper linking
- Fix default-avatar references (use existing .svg instead of .png)
- Add favicon.ico to passthrough copy

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-28 15:08:01 +01:00
Ricardo
922ae40460 feat: add client-side webmention fetcher for real-time updates
- Add js/webmentions.js to fetch new webmentions from webmention.io API
- Supplements build-time cached webmentions with real-time data
- Shows new webmentions with 'NEW' badge and visual ring highlight
- Uses safe DOM methods to prevent XSS vulnerabilities
- Data attributes on webmentions container provide target URL and build time

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-26 10:11:48 +01:00