erik/slugkit

Fork 0

Convert public UI to Tailwind CSS #155

New issue

Closed

opened 2026-06-19 19:54:52 -05:00 by erik · 5 comments

erik commented

2026-06-19 19:54:52 -05:00

Owner

Goal

Convert the Slugkit template site's public UI from hand-written CSS to Tailwind CSS so it can follow the erikcraddock.me layout patterns directly and consistently.

Requirements

Add Tailwind CSS to the template site build and dev workflow using stable package versions only.
Replace or substantially reduce template/site/src/styles/public.css for public page styling in favor of Tailwind utility classes.
Use ~/Private/code/github/evcraddock/erikcraddock.me/ as the reference for layout primitives, including max-w-6xl mx-auto px-4, light/dark mode, header, hero, card, and grid patterns.
Update public templates to use Tailwind classes for the homepage, article cards, post detail, tags, contacts, sources, footer, and shared layout elements.
Preserve existing public routes and behavior.
Ensure light and dark modes are readable across public pages.
Update tests to cover behavior and important structure without overfitting visual implementation details.
Document any new build, dev, or CSS pipeline commands if needed.

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.

Dependencies

None

## Goal Convert the Slugkit template site's public UI from hand-written CSS to Tailwind CSS so it can follow the `erikcraddock.me` layout patterns directly and consistently. ## Requirements - Add Tailwind CSS to the template site build and dev workflow using stable package versions only. - Replace or substantially reduce `template/site/src/styles/public.css` for public page styling in favor of Tailwind utility classes. - Use `~/Private/code/github/evcraddock/erikcraddock.me/` as the reference for layout primitives, including `max-w-6xl mx-auto px-4`, light/dark mode, header, hero, card, and grid patterns. - Update public templates to use Tailwind classes for the homepage, article cards, post detail, tags, contacts, sources, footer, and shared layout elements. - Preserve existing public routes and behavior. - Ensure light and dark modes are readable across public pages. - Update tests to cover behavior and important structure without overfitting visual implementation details. - Document any new build, dev, or CSS pipeline commands if needed. ## 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. ## Dependencies - None

erik added the

labels

2026-06-19 19:54:52 -05:00

erik commented

2026-06-19 20:05:56 -05:00

Author

Owner

Synced from todu comment by @todu on 2026-06-20T01:05:03.511Z

Update

Started implementation on branch feat/task-10e83edd-tailwind-public-ui.
Verified latest stable Tailwind packages are tailwindcss@4.3.1 and @tailwindcss/cli@4.3.1.
Plan includes adding a CSS watcher to make dev via Procfile.dev so template/server and Tailwind changes are watched together.

_Synced from todu comment by @todu on 2026-06-20T01:05:03.511Z_ ### Update - Started implementation on branch `feat/task-10e83edd-tailwind-public-ui`. - Verified latest stable Tailwind packages are `tailwindcss@4.3.1` and `@tailwindcss/cli@4.3.1`. - Plan includes adding a CSS watcher to `make dev` via `Procfile.dev` so template/server and Tailwind changes are watched together.

erik commented

2026-06-19 20:22:29 -05:00

Author

Owner

Synced from todu comment by @todu on 2026-06-20T01:21:23.766Z

Review update

PR: #156 is open and reviewed after the contrast fix.
Result: approved; no blocking issues or warnings.
Verified: npm run build, ./scripts/pre-pr.sh, Forgejo Actions run #208, and browser smoke testing in light/dark modes.
Acceptance: 6/6 criteria met.
Follow-up: waiting for explicit human merge approval.

_Synced from todu comment by @todu on 2026-06-20T01:21:23.766Z_ ### Review update - PR: https://forge.caradoc.com/erik/slugkit/pulls/156 is open and reviewed after the contrast fix. - Result: approved; no blocking issues or warnings. - Verified: `npm run build`, `./scripts/pre-pr.sh`, Forgejo Actions run #208, and browser smoke testing in light/dark modes. - Acceptance: 6/6 criteria met. - Follow-up: waiting for explicit human merge approval.

erik commented

2026-06-19 20:22:29 -05:00

Author

Owner

Synced from todu comment by @todu on 2026-06-20T01:18:58.346Z

Review update

PR: erik/slugkit#156 reviewed.
Result: changes requested.
Verified: npm run build && npm run lint && npm test passed locally.
Acceptance: 5/6 criteria met; light/dark readability is not fully met because template/site/src/templates/public.tsx:95 uses low-contrast homepage body colors (text-gray-400 dark:text-gray-500) on the hero background.
Follow-up: increase the homepage body text contrast, rerun checks, and rerun PR review before merge approval.

_Synced from todu comment by @todu on 2026-06-20T01:18:58.346Z_ ### Review update - PR: erik/slugkit#156 reviewed. - Result: changes requested. - Verified: `npm run build && npm run lint && npm test` passed locally. - Acceptance: 5/6 criteria met; light/dark readability is not fully met because `template/site/src/templates/public.tsx:95` uses low-contrast homepage body colors (`text-gray-400 dark:text-gray-500`) on the hero background. - Follow-up: increase the homepage body text contrast, rerun checks, and rerun PR review before merge approval.

erik

2026-06-19 20:49:46 -05:00

closed this issue
added
status:done
and removed
status:inprogress
labels

erik commented

2026-06-19 20:49:47 -05:00

Author

Owner

Synced from todu comment by @todu on 2026-06-20T01:49:16.088Z

Task close gate: READY

Acceptance criteria evaluation:

Tailwind build/dev integration: met — merged PR #156 adds stable Tailwind v4 packages, css:build/css:watch, template build integration, and the make dev Overmind CSS watcher.
Public pages use Tailwind classes: met — public templates now carry Tailwind utility classes and src/styles/public.css is generated from src/styles/tailwind.css.
Homepage follows erikcraddock.me Tailwind layout patterns: met — merged layout uses max-width containers, light/dark mode classes, hero/logo/card/grid patterns, and final centered slogan/spacing refinements.
Light and dark modes readable: met — contrast blocker was fixed and browser smoke testing covered light/dark modes.
Existing public routes preserved: met — public route tests remained passing and PR scope did not remove /, /posts/:slug, /tags, /contacts, /sources, /media/*, or /feed.xml.
Checks pass: met — npm run build, ./scripts/pre-pr.sh, and Forgejo Actions run #211 passed before merge.

Readiness: READY. PR #156 merged into main. No tests were run during this close gate per instruction.

_Synced from todu comment by @todu on 2026-06-20T01:49:16.088Z_ ### Task close gate: READY Acceptance criteria evaluation: - Tailwind build/dev integration: met — merged PR #156 adds stable Tailwind v4 packages, `css:build`/`css:watch`, template build integration, and the `make dev` Overmind CSS watcher. - Public pages use Tailwind classes: met — public templates now carry Tailwind utility classes and `src/styles/public.css` is generated from `src/styles/tailwind.css`. - Homepage follows `erikcraddock.me` Tailwind layout patterns: met — merged layout uses max-width containers, light/dark mode classes, hero/logo/card/grid patterns, and final centered slogan/spacing refinements. - Light and dark modes readable: met — contrast blocker was fixed and browser smoke testing covered light/dark modes. - Existing public routes preserved: met — public route tests remained passing and PR scope did not remove `/`, `/posts/:slug`, `/tags`, `/contacts`, `/sources`, `/media/*`, or `/feed.xml`. - Checks pass: met — `npm run build`, `./scripts/pre-pr.sh`, and Forgejo Actions run #211 passed before merge. Readiness: READY. PR #156 merged into `main`. No tests were run during this close gate per instruction.

erik commented

2026-06-19 20:49:47 -05:00

Author

Owner

Synced from todu comment by @todu on 2026-06-20T01:48:55.545Z

Review update

PR: #156 reviewed at final head.
Result: approved; no blocking issues or warnings.
Verified: npm run build, ./scripts/pre-pr.sh, and Forgejo Actions run #211 passed.
Acceptance: 6/6 criteria met.
Follow-up: human approved merge; proceeding to merge PR #156.

_Synced from todu comment by @todu on 2026-06-20T01:48:55.545Z_ ### Review update - PR: https://forge.caradoc.com/erik/slugkit/pulls/156 reviewed at final head. - Result: approved; no blocking issues or warnings. - Verified: `npm run build`, `./scripts/pre-pr.sh`, and Forgejo Actions run #211 passed. - Acceptance: 6/6 criteria met. - Follow-up: human approved merge; proceeding to merge PR #156.