Commit Graph

183 Commits

Author SHA1 Message Date
Ricardo
15b88b7087 feat: add skeleton loader to prevent FOUC during CSS load
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
2026-03-07 16:56:59 +01:00
Ricardo
e3d5a46e11 fix(depth): add shadow-lg to avatars/album art, font-mono to stat numbers
System: avatars/album art get shadow-lg for presence.
Stat numbers get font-mono like dates/timestamps.

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
2026-03-07 15:59:42 +01:00
Ricardo
c6a3b090df fix(dark-mode): correct dark mode token pairs
- bg-white -> bg-surface-50 (token compliance)
- Add missing dark:text-surface-100 on inputs
- Fix dark:border-surface-600 -> dark:border-surface-700
- Fix badge bg opacity (dark:bg-accent-900/30)

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
2026-03-07 15:59:36 +01:00
Ricardo
9832c671c6 fix(radius): correct border-radius to match system
- rounded -> rounded-full for badges/pills
- rounded-xl -> rounded-lg for standard cards (xl reserved for hero/featured)

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
2026-03-07 15:59:29 +01:00
Ricardo
931c784dec fix(hover): correct card hover borders to domain colors
Replace hover:border-surface-400 with domain-colored borders.
Add hover:underline to text links missing it.

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
2026-03-07 15:59:23 +01:00
Ricardo
dacf819b99 fix(dates): add font-mono text-sm to all <time> elements
System convention: every rendered date gets font-mono class.
CSS base layer handles font-family, but classes ensure consistency
and proper text-sm sizing across all templates.

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
2026-03-07 15:59:17 +01:00
Ricardo
4945a6f1e6 fix(dates): add font-mono to Alpine.js-rendered date spans
CSS base layer covers <time> elements automatically, but dates
rendered via x-text into <span> elements need explicit font-mono.

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
2026-03-07 15:59:10 +01:00
Ricardo
d8032ccfd2 fix(domain-colors): correct domain color assignments across 8 files
- starred.njk: accent -> emerald (Code domain)
- photos.njk: purple -> amber (Writing domain)
- reposts.njk: emerald -> rose (Social domain)
- blog.njk: red/green/sky -> rose (Social domain unified)
- featured.njk: red/green/sky -> rose (Social domain unified)
- digest.njk: accent -> amber (Writing domain)
- digest-index.njk: orange -> amber (Writing domain)
- search widget: primary -> accent (stale token)

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
2026-03-07 15:58:55 +01:00
Ricardo
0f843e7ce1 fix(cards): add shadow-sm to all card elements across 24 files
Design system requires shadow-sm + border on all cards.
Also fixes bg-white -> bg-surface-50 and bg-surface-100 -> bg-surface-50
where card backgrounds used wrong tokens.

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
2026-03-07 15:58:48 +01:00
Ricardo
c71a7f38a8 fix: prevent FOUC for images and SVG icons on first paint
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
2026-03-07 15:46:43 +01:00
Ricardo
ee7fa5de7f fix: hide month labels and improve dark mode contrast in AI post-graph
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
2026-03-06 15:45:43 +01:00
Ricardo
dc8762b427 fix: register ai-usage widget in sidebar.njk and add zap icon
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
2026-03-06 15:07:15 +01:00
Ricardo
596334ab38 feat: redesign navigation - curated header, updated footer, comprehensive /slashes/
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
2026-03-06 14:05:22 +01:00
Ricardo
81ea22ac34 feat: add AI usage homepage section with stats and contribution graph
Full-width section for homepage builder showing 4-column stats grid,
level breakdown pills, AI-involved post-graph, and link to /ai/ page.

Confab-Link: http://localhost:8080/sessions/edb1b7b0-da66-4486-bd9c-d1cfa7553b88
2026-03-06 12:35:40 +01:00
Ricardo
d1a8ee7ec2 feat: add AI usage sidebar widget for homepage and blog sidebars
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
2026-03-06 12:28:49 +01:00
Ricardo
8baec25b2c feat: blog filter nav, interactions pagination, note unfurl, pagefind improvements
- 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
2026-03-06 10:45:55 +01:00
Ricardo
e7aaf73fba feat: consistent AP logo, Mastodon syndication detection
- 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
2026-03-06 10:42:39 +01:00
Ricardo
b5d0b684d9 feat: add link to /ai/ page in AI usage disclosure
The "Learn more about AI usage on this site" link appears when
the AI usage label is clicked/tapped on posts, providing context
about the site's AI transparency policy.

Confab-Link: http://localhost:8080/sessions/956f4251-b4a9-4bc9-b214-53402ad1fe63
2026-03-06 09:23:38 +01:00
Ricardo
b9a42b3a73 feat: configurable post-graph section and dedicated /graph page
- 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
2026-03-05 15:42:00 +01:00
Ricardo
d8e982e3c3 feat: always show AI Usage disclosure on posts
Default aiTextLevel to "0" (None) when absent from frontmatter,
so every post shows the collapsed AI disclosure line.

Confab-Link: http://localhost:8080/sessions/648a550c-4f65-46be-b9a9-6b7e0fd90751
2026-03-05 15:21:57 +01:00
Ricardo
9d2786c308 fix: move AI Usage below reply-context on interaction posts
The AI disclosure was appearing between the (often empty) e-content
and the unfurl card, breaking the visual flow on likes/replies/reposts.
Now renders after the reply-context card.

Confab-Link: http://localhost:8080/sessions/648a550c-4f65-46be-b9a9-6b7e0fd90751
2026-03-05 15:12:57 +01:00
Ricardo
87f5b7fd2d fix: move post-graph outside tier conditional so it shows on all homepage layouts
Confab-Link: http://localhost:8080/sessions/956f4251-b4a9-4bc9-b214-53402ad1fe63
2026-03-05 14:25:36 +01:00
Ricardo
14dcfba50a feat: fix sparkline calculation, redesign with domain colors, add post-graph
- Fix sparkline downward trend by extrapolating partial current month
- Redesign sparkline SVG with gradient fill and responsive sizing
- Apply domain-specific colors (amber/rose/emerald/purple) via currentColor
- Add eleventy-plugin-post-graph for GitHub-style contribution grids
- Homepage: posting activity graph in Tier 2 default layout
- AI page (/ai/): stats dashboard + AI-involved posts graph injected via layout
- New filters: aiPosts (filter by AI level), aiStats (total/count/percentage)

Confab-Link: http://localhost:8080/sessions/956f4251-b4a9-4bc9-b214-53402ad1fe63
2026-03-05 14:21:27 +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
be90da09e4 feat: style CV education section with colored borders and accordion
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
2026-03-05 10:15:39 +01:00
Ricardo
47439e71c5 feat: add brand colors to social icons in hero sections
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
2026-03-05 08:50:28 +01:00
Ricardo
1348cbdf2e fix: reduce amber saturation in Featured section dark mode
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
2026-03-05 08:01:19 +01:00
Ricardo
9b50893782 feat: redesign post navigation with image-first approach
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
2026-03-04 22:25:57 +01:00
Ricardo
132e8b566c feat: add /featured/ collection page and "View all" link
- New featured.njk page with pagination, type-aware rendering
- "View all N featured posts" link appears when count exceeds maxItems

Confab-Link: http://localhost:8080/sessions/bd3f7012-c703-47e9-bfe2-2ad04ce1842d
2026-03-04 22:12:02 +01:00
Ricardo
8cd3c86bfa feat: add featured posts section for homepage builder
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
2026-03-04 19:26:18 +01:00
Ricardo
c077237f1d fix: replace sidebar PagefindUI with redirect search form
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
2026-03-04 19:12:07 +01:00
Ricardo
8136640619 feat: add AI disclosure aside to page layout
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
2026-03-04 17:40:29 +01:00
Ricardo
a7265bc7ce fix: project cards — per-project color cycling and collapsible grid stretch bug
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
2026-03-04 16:48:05 +01:00
Ricardo
cb3c2115ae feat: implement design system — domain colors, date typography, interaction states, CV family colors
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
2026-03-04 15:13:34 +01:00
Ricardo
8e393e215d feat: warm palette overhaul — cold zinc/teal to warm stone/amber
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
2026-03-04 14:02:59 +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
2ca3e047a4 feat: UI overhaul — accent color, Inter font, widget icons, diversified colors
- 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
2026-03-04 11:21:39 +01:00
Ricardo
212e62c0f8 feat: add AI usage metadata to JSON-LD structured data
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
2026-03-03 18:01:42 +01:00
Ricardo
49c9d5ffe6 feat: display AI usage disclosure on posts and blog listing
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
2026-03-03 14:39:44 +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
6cfb92818e feat: include share-post.js in base layout 2026-02-28 08:21:05 +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
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
dbd2f72019 fix: handle absolute URLs in JSON-LD image field
When markdown images use full https:// URLs, the template was prepending
site.url again, causing double-domain in structured data
(e.g., https://rmendes.net/https://rmendes.net/media/...).

Now checks if postImage starts with 'http' and skips the prefix.
2026-02-26 14:56:13 +01:00
Ricardo
581c585677 feat: add digest feed discovery link and navigation items 2026-02-26 08:27:57 +01:00
Ricardo
abc0404816 feat: add fullwidth layout and interactive architecture page
Add a reusable fullwidth layout (layouts/fullwidth.njk) for rich HTML
content that needs the full container width without sidebar or prose
constraints. Add the interactive architecture explorer as a static
asset served via passthrough copy at /interactive/architecture.html.

- layouts/fullwidth.njk: site header + footer only, no sidebar
- interactive/architecture.html: tabbed architecture guide
- eleventy.config.js: passthrough copy for interactive/ directory
2026-02-25 16:48:06 +01:00
Ricardo
cd7083eb9a feat: preserve custom order for skills and interests sections
Remove dictsort from for-loops so categories render in the order
set by the admin UI drag-drop reorder, instead of alphabetically.
2026-02-25 15:57:42 +01:00
Ricardo
ab31e080bb feat: update interests templates for category-based data model
Interests are now grouped by category (matching skills pattern).
Updated cv-interests.njk to iterate categories, cv.js fallback to {},
and cv.njk hasCvData check to include interests.
2026-02-25 14:56:11 +01:00
Ricardo
116ac63f5f fix: CV page hero issues — avatar 404, collapsible description, interest filter, contact info
- Add eleventy:ignore to avatar img to prevent image transform rewriting URL to broken relative path
- Wrap authorDescription in details/summary for collapsible "More about me" toggle
- Fix interest filter logic: untyped interests no longer bypass work/personal filter
- Display location, org, website, email, PGP key from CV identity in hero section
2026-02-25 12:26:03 +01:00
Ricardo
2558e9fe57 feat: CV hero uses plugin identity with site.author fallback
CV page hero now checks cvPageConfig.identity before falling back to
site.author, matching the homepage hero pattern. Social links use the
shared socialIcon macro.
2026-02-25 11:07:47 +01:00