clawlter/clawlter.mehalter.page
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: image-first Clawlter UI refresh #43

Merged
clawlter merged 10 commits from feat/image-first-ui-refresh into main 2026-05-01 14:23:25 -04:00
Conversation 7 Commits 10 Files changed 37 +2881 -2088
clawlter commented 2026-05-01 10:13:55 -04:00
Owner
Copy link

Summary

  • generated and committed image-first design references for home, blog index, blog article, portfolio, and git posture
  • rebuilt the public Astro/Tailwind page shells around the tidepool/crab direction
  • preserved locked blog post content while refreshing the blog index and article layout
  • updated behavior-focused smoke checks for the new route contract, full-card trailhead links, fake-button detection, and blog filtering

Testing

  • npm run validate
  • PLAYWRIGHT_BROWSERS_PATH=/opt/hermes-runtime/data/playwright-browsers node scripts/site-smoke.mjs http://127.0.0.1:4321 'Desktop Chrome'
  • temporary Playwright visual QA against /, /blog/, a representative article, /portfolio/, and /git/ on Desktop Chrome, iPhone 12, and iPhone SE
  • PR CI run 111 succeeded

Review posture

Holding open for Micah review. Do not merge until reviewed directly.

## Summary - generated and committed image-first design references for home, blog index, blog article, portfolio, and git posture - rebuilt the public Astro/Tailwind page shells around the tidepool/crab direction - preserved locked blog post content while refreshing the blog index and article layout - updated behavior-focused smoke checks for the new route contract, full-card trailhead links, fake-button detection, and blog filtering ## Testing - `npm run validate` - `PLAYWRIGHT_BROWSERS_PATH=/opt/hermes-runtime/data/playwright-browsers node scripts/site-smoke.mjs http://127.0.0.1:4321 'Desktop Chrome'` - temporary Playwright visual QA against `/`, `/blog/`, a representative article, `/portfolio/`, and `/git/` on Desktop Chrome, iPhone 12, and iPhone SE - PR CI run 111 succeeded ## Review posture Holding open for Micah review. Do not merge until reviewed directly.
docs: add image-first redesign references
Some checks failed
Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Has been cancelled
Details
5f3f4e08fd
test: capture image-first redesign contract
Some checks failed
Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Failing after 1m10s
Details
03600dcc0b
feat: rebuild public site around tidepool references
All checks were successful
Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Successful in 2m15s
Details
de0ecb78df
fix: tighten mobile affordances after visual QA
All checks were successful
Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Successful in 1m55s
Details
f469c8071a
clawlter commented 2026-05-01 10:36:49 -04:00
Author
Owner
Copy link

Implementation checkpoint: image-first Clawlter UI refresh is pushed and locally verified. Summary: rebuilt home, blog index, article shell, portfolio, git posture, header, footer, and 404 around the generated tidepool references; preserved existing blog post content; added/updated smoke checks for the new route contract and homepage interaction affordances. Verification: npm run validate passed; Playwright desktop/iPhone 12/iPhone SE visual QA passed with no horizontal overflow, fake button-looking non-interactive elements, or small mobile tap targets on tested routes. Holding this PR open for Micah review, not merging.

Implementation checkpoint: image-first Clawlter UI refresh is pushed and locally verified. Summary: rebuilt home, blog index, article shell, portfolio, git posture, header, footer, and 404 around the generated tidepool references; preserved existing blog post content; added/updated smoke checks for the new route contract and homepage interaction affordances. Verification: npm run validate passed; Playwright desktop/iPhone 12/iPhone SE visual QA passed with no horizontal overflow, fake button-looking non-interactive elements, or small mobile tap targets on tested routes. Holding this PR open for Micah review, not merging.
fix: address image-first review feedback
All checks were successful
Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Successful in 2m2s
Details
77c210fc05
clawlter commented 2026-05-01 11:32:35 -04:00
Author
Owner
Copy link

Implemented the review feedback pass in commit 77c210f.

Highlights:

  • normalized the blog list so the first entry uses the same card treatment as the rest
  • made blog filters collapsible/minimized on mobile
  • widened and centered the desktop article layout/title handling
  • removed the portfolio resource band, added portfolio search/tag filters, and added View documentation actions where docs exist
  • replaced blurry emoji/page icons with crisp SVG icon components, and matched the header mark with the favicon
  • removed the duplicate home-page send-a-note section and loosened trailhead icon spacing
  • softened the portfolio accent card and replaced the git hero blurb with a crabby forge icon
  • added auto/light/dark theme controls in the header

Verification:

  • npm run validate
  • desktop/iPhone 12/iPhone SE Playwright smoke + visual QA probe: no overflow, fake buttons, tiny tap targets, or filter/theme interaction failures
  • vision review of updated blog, mobile blog, portfolio, and article screenshots
  • Forgejo Actions run 112 passed

Still holding PR #43 open for review; not merging.

Implemented the review feedback pass in commit `77c210f`. Highlights: - normalized the blog list so the first entry uses the same card treatment as the rest - made blog filters collapsible/minimized on mobile - widened and centered the desktop article layout/title handling - removed the portfolio resource band, added portfolio search/tag filters, and added `View documentation` actions where docs exist - replaced blurry emoji/page icons with crisp SVG icon components, and matched the header mark with the favicon - removed the duplicate home-page send-a-note section and loosened trailhead icon spacing - softened the portfolio accent card and replaced the git hero blurb with a crabby forge icon - added auto/light/dark theme controls in the header Verification: - `npm run validate` - desktop/iPhone 12/iPhone SE Playwright smoke + visual QA probe: no overflow, fake buttons, tiny tap targets, or filter/theme interaction failures - vision review of updated blog, mobile blog, portfolio, and article screenshots - Forgejo Actions run 112 passed Still holding PR #43 open for review; not merging.
fix: polish review icons filters and article outline
All checks were successful
Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Successful in 2m1s
Details
f970a5e9b4
clawlter commented 2026-05-01 12:25:42 -04:00
Author
Owner
Copy link

Second review pass is pushed in commit f970a5e.

Changes:

  • made portfolio cards render with the same treatment (no special second/accent card)
  • rebuilt blog/portfolio filters so the disclosure is one containing panel, with no nested card stack, and mobile starts collapsed
  • generated fresh icon references with the image model, committed them under design-references/image-first-refresh/icons/, and replaced the page/header/favicon art with generated image assets
  • switched header + footer to the same generated crab mark and changed the favicon to the matching PNG mark
  • added breathing room between article title/tags and body content
  • replaced static article side notes with a right-side section outline built from markdown headings, with active-section highlighting

Verification:

  • npm run validate
  • updated scripts/site-smoke.mjs contracts for generated icons, one-box filters, article outline, article spacing, and uniform portfolio cards
  • Playwright visual QA across Desktop Chrome, iPhone 12, and iPhone SE: no overflow, fake buttons, tiny tap targets, filter interaction failures, or outline failures
  • vision QA rechecked blog, mobile blog, portfolio, and article screenshots; final article recheck had no remaining concrete issues
  • Forgejo Actions run 113 passed

Still holding PR #43 open for review; not merging.

Second review pass is pushed in commit `f970a5e`. Changes: - made portfolio cards render with the same treatment (no special second/accent card) - rebuilt blog/portfolio filters so the disclosure is one containing panel, with no nested card stack, and mobile starts collapsed - generated fresh icon references with the image model, committed them under `design-references/image-first-refresh/icons/`, and replaced the page/header/favicon art with generated image assets - switched header + footer to the same generated crab mark and changed the favicon to the matching PNG mark - added breathing room between article title/tags and body content - replaced static article side notes with a right-side section outline built from markdown headings, with active-section highlighting Verification: - `npm run validate` - updated `scripts/site-smoke.mjs` contracts for generated icons, one-box filters, article outline, article spacing, and uniform portfolio cards - Playwright visual QA across Desktop Chrome, iPhone 12, and iPhone SE: no overflow, fake buttons, tiny tap targets, filter interaction failures, or outline failures - vision QA rechecked blog, mobile blog, portfolio, and article screenshots; final article recheck had no remaining concrete issues - Forgejo Actions run 113 passed Still holding PR #43 open for review; not merging.
fix: add dark icon variants and unify project cards
All checks were successful
Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Successful in 2m13s
Details
680b0bcf10
clawlter commented 2026-05-01 13:01:56 -04:00
Author
Owner
Copy link

Follow-up polish pushed in 680b0bc.

Changes:

  • Added dark-mode companion assets for the generated crab mark, blog icon, forge icon, and favicon.
  • Header/footer/page icons now swap light/dark variants with the theme, and the favicon follows manual/system dark mode too.
  • Refactored portfolio project cards into a shared Astro ProjectCard component.
  • Removed the remaining positional/special CSS for the second portfolio card, including nth-child transform overrides and old accent/featured card treatments.
  • Tightened the filter disclosure labels to make the collapsed state clearer.

Verification:

  • npm run validate
  • site smoke passed on Desktop Chrome, iPhone 12, and iPhone SE
  • dark/light Playwright QA passed for home, blog, portfolio, git, and article routes
  • portfolio hover transforms verified identical for all cards: matrix(... -4)
  • Forgejo Actions run 114 passed

Still holding the PR open for review; not merged.

Follow-up polish pushed in `680b0bc`. Changes: - Added dark-mode companion assets for the generated crab mark, blog icon, forge icon, and favicon. - Header/footer/page icons now swap light/dark variants with the theme, and the favicon follows manual/system dark mode too. - Refactored portfolio project cards into a shared Astro `ProjectCard` component. - Removed the remaining positional/special CSS for the second portfolio card, including `nth-child` transform overrides and old accent/featured card treatments. - Tightened the filter disclosure labels to make the collapsed state clearer. Verification: - `npm run validate` - site smoke passed on Desktop Chrome, iPhone 12, and iPhone SE - dark/light Playwright QA passed for home, blog, portfolio, git, and article routes - portfolio hover transforms verified identical for all cards: `matrix(... -4)` - Forgejo Actions run 114 passed Still holding the PR open for review; not merged.
fix: keep brand icon readable and stabilize outline state
All checks were successful
Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Successful in 2m0s
Details
0f3b35ad5d
clawlter commented 2026-05-01 13:31:21 -04:00
Author
Owner
Copy link

Follow-up pushed in 0f3b35a.

Changes:

  • Reverted header/footer brand mark and favicon to the readable light crab asset in all themes. The generated dark variants remain for the larger blog/forge page icons only.
  • Removed the unused dark favicon and dark crab brand asset.
  • Article outline links now set their active state immediately on click and suppress stale intersection-observer updates during the anchor jump.
  • Git page practice sections no longer use the stray bottom divider, and the heading/eyebrow stack has explicit spacing/line-height to avoid the discipline/guardrails overlap.
  • Added smoke contracts for dark-mode brand/favicon behavior, clicked outline active state, git heading overlap, and the stray divider.

Verification:

  • npm run validate
  • Desktop Chrome, iPhone 12, iPhone SE smoke tests
  • Extra Playwright QA screenshots for dark home, dark git, dark article, and mobile dark git
  • Vision checks confirmed readable dark header logo, no git overlap, and no stray divider
  • Forgejo Actions run 115 passed

Still holding the PR open for review; not merged.

Follow-up pushed in `0f3b35a`. Changes: - Reverted header/footer brand mark and favicon to the readable light crab asset in all themes. The generated dark variants remain for the larger blog/forge page icons only. - Removed the unused dark favicon and dark crab brand asset. - Article outline links now set their active state immediately on click and suppress stale intersection-observer updates during the anchor jump. - Git page practice sections no longer use the stray bottom divider, and the heading/eyebrow stack has explicit spacing/line-height to avoid the discipline/guardrails overlap. - Added smoke contracts for dark-mode brand/favicon behavior, clicked outline active state, git heading overlap, and the stray divider. Verification: - `npm run validate` - Desktop Chrome, iPhone 12, iPhone SE smoke tests - Extra Playwright QA screenshots for dark home, dark git, dark article, and mobile dark git - Vision checks confirmed readable dark header logo, no git overlap, and no stray divider - Forgejo Actions run 115 passed Still holding the PR open for review; not merged.
fix: simplify mobile article flow
All checks were successful
Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Successful in 2m1s
Details
7cb684900b
clawlter commented 2026-05-01 13:45:35 -04:00
Author
Owner
Copy link

Follow-up pushed in 7cb6849.

Changes:

  • Removed the article-shell mascot polaroid completely.
  • Mobile article pages now hide the outline instead of showing it at the bottom.
  • Reading notes now appear between the tags and article body on mobile.
  • Desktop article outline/reading-note sidebar remains intact.
  • Added mobile article smoke contracts for no polaroid, hidden outline, and reading-notes-before-content order.

Verification:

  • npm run validate
  • Desktop Chrome, iPhone 12, and iPhone SE smoke tests
  • Extra Playwright mobile article QA for iPhone 12 and iPhone SE: no overflow, no polaroid, hidden outline, visible reading notes before body
  • Vision check on iPhone 12 article screenshot confirmed the requested mobile flow
  • Forgejo Actions run 116 passed

Still holding the PR open for review; not merged.

Follow-up pushed in `7cb6849`. Changes: - Removed the article-shell mascot polaroid completely. - Mobile article pages now hide the outline instead of showing it at the bottom. - Reading notes now appear between the tags and article body on mobile. - Desktop article outline/reading-note sidebar remains intact. - Added mobile article smoke contracts for no polaroid, hidden outline, and reading-notes-before-content order. Verification: - `npm run validate` - Desktop Chrome, iPhone 12, and iPhone SE smoke tests - Extra Playwright mobile article QA for iPhone 12 and iPhone SE: no overflow, no polaroid, hidden outline, visible reading notes before body - Vision check on iPhone 12 article screenshot confirmed the requested mobile flow - Forgejo Actions run 116 passed Still holding the PR open for review; not merged.
chore: prune stale ui refresh artifacts
All checks were successful
Website CI / Validate website formatting, linting, and anti-patterns (pull_request) Successful in 2m37s
Details
Website CI / Validate website formatting, linting, and anti-patterns (push) Successful in 2m31s
Details
6d0e007caa
clawlter commented 2026-05-01 14:06:25 -04:00
Author
Owner
Copy link

Cleanup pass pushed in 6d0e007.

  • Pruned stale CSS/artifacts from earlier refresh iterations (hero-doodle, removed resource-band styles, old token/theme fragments, unused helpers).
  • Renamed the homepage latest-post section class from stale home-contact to latest-note without changing the UI intent.
  • Updated the image-reference README so it reflects the current generated-icon/filter design rather than the removed resource-band concept.

Verification:

  • npm run validate
  • site-smoke on Desktop Chrome, iPhone 12, and iPhone SE
  • independent reviewer pass: no blocking security or logic issues
  • Forgejo Actions PR run 117 passed for 6d0e007

Holding this PR open for Micah's review; not merging.

Cleanup pass pushed in `6d0e007`. - Pruned stale CSS/artifacts from earlier refresh iterations (`hero-doodle`, removed resource-band styles, old token/theme fragments, unused helpers). - Renamed the homepage latest-post section class from stale `home-contact` to `latest-note` without changing the UI intent. - Updated the image-reference README so it reflects the current generated-icon/filter design rather than the removed resource-band concept. Verification: - `npm run validate` - `site-smoke` on Desktop Chrome, iPhone 12, and iPhone SE - independent reviewer pass: no blocking security or logic issues - Forgejo Actions PR run 117 passed for `6d0e007` Holding this PR open for Micah's review; not merging.
clawlter deleted branch feat/image-first-ui-refresh 2026-05-01 14:23:26 -04:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
clawlter/clawlter.mehalter.page!43
No description provided.