erik/slugkit
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases 6 Packages Wiki Activity Actions

Convert public UI to Tailwind CSS #156

Merged
erik merged 5 commits from feat/task-10e83edd-tailwind-public-ui into main 2026-06-19 20:48:59 -05:00
Conversation 3 Commits 5 Files changed 14 +1157 -866
erik commented 2026-06-19 20:15:14 -05:00
Owner
Copy link

Summary

  • Add Tailwind CSS v4 CLI integration to the template site build and dev workflow.
  • Convert public layout/templates to Tailwind utility classes modeled after the erikcraddock.me layout patterns.
  • Replace the hand-written public stylesheet with generated Tailwind output and a compact Tailwind input file.
  • Update docs and tests for Tailwind build/watch behavior and color-mode handling.

Verification

  • npm run build
  • ./scripts/pre-pr.sh
  • Browser smoke test at http://localhost:3000/ in light and dark modes
## Summary - Add Tailwind CSS v4 CLI integration to the template site build and dev workflow. - Convert public layout/templates to Tailwind utility classes modeled after the `erikcraddock.me` layout patterns. - Replace the hand-written public stylesheet with generated Tailwind output and a compact Tailwind input file. - Update docs and tests for Tailwind build/watch behavior and color-mode handling. ## Verification - `npm run build` - `./scripts/pre-pr.sh` - Browser smoke test at `http://localhost:3000/` in light and dark modes
feat: convert public UI to Tailwind
All checks were successful
CI / build-lint-test (pull_request) Successful in 48s
Details
d431631ab2 
Task: #task-10e83edd
erik commented 2026-06-19 20:18:47 -05:00
Author
Owner
Copy link

PR Review: Changes requested

Summary

The PR integrates Tailwind CSS into the template site's build/dev workflow, replaces the large hand-written public stylesheet with generated Tailwind output, updates the public templates, and adds documentation/tests. Local checks pass (npm run build && npm run lint && npm test). One acceptance criterion is not fully met because the homepage body copy uses very low-contrast gray text in both light and dark modes.

Acceptance criteria

  • Tailwind is installed and integrated into the template site build/dev workflow.
  • Public pages render using Tailwind classes instead of the current large hand-written stylesheet.
  • The homepage visually follows the erikcraddock.me Tailwind layout patterns.
  • Light and dark modes are readable across public pages. The homepage body copy is text-gray-400 dark:text-gray-500 on bg-gray-100 dark:bg-gray-800, which is too low contrast for normal paragraph text.
  • Existing public routes such as /, /posts/:slug, /tags, /contacts, /sources, /media/*, and /feed.xml still work.
  • Relevant tests and local checks pass.

Blocking issues

  1. template/site/src/templates/public.tsx:95 sets the homepage body to text-gray-400 dark:text-gray-500. On the surrounding hero background (bg-gray-100 dark:bg-gray-800), that paragraph is hard to read and does not satisfy the readable light/dark mode criterion. Please use stronger light/dark text colors (for example, similar to the surrounding text-gray-600 dark:text-gray-400 pattern) and keep/adjust tests so this remains covered.

Warnings

None.

Final verdict

Changes requested. Do not merge until the homepage body contrast is fixed and checks are rerun.

## PR Review: Changes requested ### Summary The PR integrates Tailwind CSS into the template site's build/dev workflow, replaces the large hand-written public stylesheet with generated Tailwind output, updates the public templates, and adds documentation/tests. Local checks pass (`npm run build && npm run lint && npm test`). One acceptance criterion is not fully met because the homepage body copy uses very low-contrast gray text in both light and dark modes. ### Acceptance criteria - [x] Tailwind is installed and integrated into the template site build/dev workflow. - [x] Public pages render using Tailwind classes instead of the current large hand-written stylesheet. - [x] The homepage visually follows the `erikcraddock.me` Tailwind layout patterns. - [ ] Light and dark modes are readable across public pages. The homepage body copy is `text-gray-400 dark:text-gray-500` on `bg-gray-100 dark:bg-gray-800`, which is too low contrast for normal paragraph text. - [x] Existing public routes such as `/`, `/posts/:slug`, `/tags`, `/contacts`, `/sources`, `/media/*`, and `/feed.xml` still work. - [x] Relevant tests and local checks pass. ### Blocking issues 1. `template/site/src/templates/public.tsx:95` sets the homepage body to `text-gray-400 dark:text-gray-500`. On the surrounding hero background (`bg-gray-100 dark:bg-gray-800`), that paragraph is hard to read and does not satisfy the readable light/dark mode criterion. Please use stronger light/dark text colors (for example, similar to the surrounding `text-gray-600 dark:text-gray-400` pattern) and keep/adjust tests so this remains covered. ### Warnings None. ### Final verdict Changes requested. Do not merge until the homepage body contrast is fixed and checks are rerun.
fix: improve homepage contrast
All checks were successful
CI / build-lint-test (pull_request) Successful in 46s
Details
68aef88685 
Task: #task-10e83edd
erik commented 2026-06-19 20:21:19 -05:00
Author
Owner
Copy link

PR Review: Approved

Summary

The PR integrates Tailwind CSS v4 into the template site, adds build/watch scripts, wires the root dev environment to run a CSS watcher, converts public templates to Tailwind utility classes, replaces the large hand-written stylesheet with generated Tailwind output, and updates docs/tests. The earlier contrast blocker was fixed by changing the homepage body copy to text-gray-600 dark:text-gray-300.

Acceptance criteria

  • Tailwind is installed and integrated into the template site build/dev workflow.
  • Public pages render using Tailwind classes instead of the current large hand-written stylesheet.
  • The homepage visually follows the erikcraddock.me Tailwind layout patterns.
  • Light and dark modes are readable across public pages.
  • Existing public routes such as /, /posts/:slug, /tags, /contacts, /sources, /media/*, and /feed.xml still work.
  • Relevant tests and local checks pass.

Blocking issues

None.

Warnings

None.

Verification

  • npm run build
  • ./scripts/pre-pr.sh
  • Forgejo Actions run #208 passed.
  • Browser smoke test at http://localhost:3000/ in light and dark modes.

Verdict

Approved. Stop at the human merge gate.

PR Review Worker Result

  • pr: open
  • review: approved
  • pr_comment: posted
  • task_comment: posted
  • blocking_issues: 0
  • warnings: 0
  • criteria_total: 6
  • criteria_met: 6
  • criteria_missing: 0
## PR Review: Approved ### Summary The PR integrates Tailwind CSS v4 into the template site, adds build/watch scripts, wires the root dev environment to run a CSS watcher, converts public templates to Tailwind utility classes, replaces the large hand-written stylesheet with generated Tailwind output, and updates docs/tests. The earlier contrast blocker was fixed by changing the homepage body copy to `text-gray-600 dark:text-gray-300`. ### Acceptance criteria - [x] Tailwind is installed and integrated into the template site build/dev workflow. - [x] Public pages render using Tailwind classes instead of the current large hand-written stylesheet. - [x] The homepage visually follows the `erikcraddock.me` Tailwind layout patterns. - [x] Light and dark modes are readable across public pages. - [x] Existing public routes such as `/`, `/posts/:slug`, `/tags`, `/contacts`, `/sources`, `/media/*`, and `/feed.xml` still work. - [x] Relevant tests and local checks pass. ### Blocking issues None. ### Warnings None. ### Verification - `npm run build` - `./scripts/pre-pr.sh` - Forgejo Actions run #208 passed. - Browser smoke test at `http://localhost:3000/` in light and dark modes. ### Verdict Approved. Stop at the human merge gate. PR Review Worker Result - pr: open - review: approved - pr_comment: posted - task_comment: posted - blocking_issues: 0 - warnings: 0 - criteria_total: 6 - criteria_met: 6 - criteria_missing: 0
fix: center homepage slogan column
All checks were successful
CI / build-lint-test (pull_request) Successful in 51s
Details
adbb8e7eb2 
Task: #task-10e83edd
fix: tighten homepage section spacing
All checks were successful
CI / build-lint-test (pull_request) Successful in 48s
Details
bbb0d2b96e 
Task: #task-10e83edd
fix: shorten feed teaser copy
All checks were successful
CI / build-lint-test (pull_request) Successful in 46s
Details
a08a517ae6 
Task: #task-10e83edd
erik commented 2026-06-19 20:48:50 -05:00
Author
Owner
Copy link

PR Review Update: Approved

Summary

Reviewed the final PR state after the homepage spacing and feed-teaser copy refinements. The follow-up commits stay within task scope and do not change public route behavior. CI is green on the latest head.

Acceptance criteria

  • Tailwind is installed and integrated into the template site build/dev workflow.
  • Public pages render using Tailwind classes instead of the current large hand-written stylesheet.
  • The homepage visually follows the erikcraddock.me Tailwind layout patterns.
  • Light and dark modes are readable across public pages.
  • Existing public routes such as /, /posts/:slug, /tags, /contacts, /sources, /media/*, and /feed.xml still work.
  • Relevant tests and local checks pass.

Blocking issues

None.

Warnings

None.

Verification

  • npm run build
  • ./scripts/pre-pr.sh
  • Forgejo Actions run #211 passed on the latest head.

Verdict

Approved.

PR Review Worker Result

  • pr: open
  • review: approved
  • pr_comment: posted
  • task_comment: posted
  • blocking_issues: 0
  • warnings: 0
  • criteria_total: 6
  • criteria_met: 6
  • criteria_missing: 0
## PR Review Update: Approved ### Summary Reviewed the final PR state after the homepage spacing and feed-teaser copy refinements. The follow-up commits stay within task scope and do not change public route behavior. CI is green on the latest head. ### Acceptance criteria - [x] Tailwind is installed and integrated into the template site build/dev workflow. - [x] Public pages render using Tailwind classes instead of the current large hand-written stylesheet. - [x] The homepage visually follows the `erikcraddock.me` Tailwind layout patterns. - [x] Light and dark modes are readable across public pages. - [x] Existing public routes such as `/`, `/posts/:slug`, `/tags`, `/contacts`, `/sources`, `/media/*`, and `/feed.xml` still work. - [x] Relevant tests and local checks pass. ### Blocking issues None. ### Warnings None. ### Verification - `npm run build` - `./scripts/pre-pr.sh` - Forgejo Actions run #211 passed on the latest head. ### Verdict Approved. PR Review Worker Result - pr: open - review: approved - pr_comment: posted - task_comment: posted - blocking_issues: 0 - warnings: 0 - criteria_total: 6 - criteria_met: 6 - criteria_missing: 0
erik merged commit ca3f0cc659 into main 2026-06-19 20:48:59 -05:00
erik deleted branch feat/task-10e83edd-tailwind-public-ui 2026-06-19 20:48:59 -05:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
activitypub

   
admin

   
api

   
articles

   
auth

   
bug

   
cleanup

   
cli

   
comments

   
compatibility

   
config

   
contacts

   
database

   
deployment

   
design

   
dev-env

   
docs

   
documentation

   
email

   
enhancement

   
feature

   
federation

   
feed

   
homepage

   
implementation

   
integration

   
media

   
openapi

   
priority:high

   
priority:low

   
priority:medium

   
proof

   
public-routes

   
public-ui

   
release

   
safety

   
social

   
sources

   
status:active

   
status:canceled

   
status:done

   
status:inprogress

   
status:waiting

   
syndication

   
tailwind

   
template

   
test

   
web
No labels
activitypub
admin
api
articles
auth
bug
cleanup
cli
comments
compatibility
config
contacts
database
deployment
design
dev-env
docs
documentation
email
enhancement
feature
federation
feed
homepage
implementation
integration
media
openapi
priority:high
priority:low
priority:medium
proof
public-routes
public-ui
release
safety
social
sources
status:active
status:canceled
status:done
status:inprogress
status:waiting
syndication
tailwind
template
test
web
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
erik/slugkit!156
No description provided.