112 lines
6 KiB
Markdown
112 lines
6 KiB
Markdown
# Refactor portfolio to use `@nychthemeron/library`
|
|
|
|
## Context
|
|
|
|
The portfolio currently ships a hand-rolled "Nychthemeron" design system:
|
|
local components in `src/components/ds/` (`NychButton`, `NychCard`,
|
|
`NychInputText`, `NychTextarea`, `NychMessage`, `NychTag`, `LaurelSpinner`,
|
|
`LaurelDivider`, `ImageSlot`) backed by ~1200 lines of token CSS in
|
|
`src/assets/styles/`.
|
|
|
|
`@nychthemeron/library` (now installed from the private registry at
|
|
`git.mcpeakdev.com`) is the extracted, PrimeVue-backed version of this same
|
|
design system: unstyled PrimeVue components (`Button`, `Card`, `InputText`,
|
|
`Textarea`, `Message`, `Tag`, `LoadingIcon`, plus others not yet used here)
|
|
wired up with the same `nych-*` passthrough classes, and ships the same
|
|
theme as CSS via `@nychthemeron/library/style` and `@nychthemeron/library/theme`.
|
|
|
|
Goal: replace the local duplicated implementation with the library, keeping
|
|
only what the library doesn't provide (`LaurelDivider`, `ImageSlot`, and the
|
|
580px static hero spinner).
|
|
|
|
## Styling / setup
|
|
|
|
- `src/main.ts`:
|
|
- Add `import '@nychthemeron/library/style'` and
|
|
`import '@nychthemeron/library/theme'`.
|
|
- Register PrimeVue: `app.use(PrimeVue)` (the library's components are
|
|
PrimeVue components under the hood).
|
|
- Keep the existing `import './assets/styles/styles.css'`, but trim its
|
|
`@import` manifest (see below) so it only covers portfolio-specific
|
|
CSS; the library CSS imports are added separately in `main.ts`.
|
|
- Delete `src/assets/styles/tokens/fonts.css`, `tokens/colors.css`,
|
|
`tokens/base.css` — fully superseded by `@nychthemeron/library/style`
|
|
(same theme CSS variables for both `hades`/`apollo` themes, font imports,
|
|
base reset, focus-ring, and the `nych-spin` keyframes).
|
|
- `src/assets/styles/tokens/components.css`: delete every section except
|
|
**LaurelDivider** (currently the last section, ~line 738 onward). Rename
|
|
the file to `tokens/laurel-divider.css` containing just that section.
|
|
Everything else (Button, Input/Textarea, Checkbox/Radio, ToggleSwitch,
|
|
Select, Card, Message, Tag, Dialog) is covered by
|
|
`@nychthemeron/library/theme`.
|
|
- Keep as-is: `tokens/spacing.css`, `tokens/typography.css`,
|
|
`portfolio.css`, brand SVGs in `src/assets/brand/`.
|
|
- Update `src/assets/styles/styles.css`'s `@import` manifest to drop the
|
|
removed files and add `tokens/laurel-divider.css` in place of
|
|
`tokens/components.css`.
|
|
|
|
## Component mapping
|
|
|
|
| Local component | Replacement | Notes |
|
|
|---|---|---|
|
|
| `NychTag` | `Tag` from `@nychthemeron/library` | `severity` / `rounded` props pass straight through |
|
|
| `NychMessage` | `Message` | `severity` / `closable` pass straight through |
|
|
| `NychInputText` | `InputText` | `v-model`, `placeholder`, `type`, `invalid` pass through; drop the local `size="normal"` prop (PrimeVue `size` only accepts `small`/`large`/default — `normal` maps to "don't pass `size`") |
|
|
| `NychTextarea` | `Textarea` | `v-model`, `rows`, `placeholder`, `invalid` — direct match |
|
|
| `NychButton` | `Button` | `severity`, `disabled`, `loading`, default + `icon` slots — direct match. The library's `Button` has a built-in loading spinner (laurel wreath), replacing the local `LaurelSpinner` usage inside `NychButton` |
|
|
| `NychCard` | `Card` | slot rename: local `image` slot → PrimeVue `header` slot; local default slot → PrimeVue `content` slot; `title`/`subtitle` props match |
|
|
| `LaurelSpinner` (small, used inside `NychButton`) | dropped — covered by `Button`'s built-in loader | |
|
|
| `LaurelSpinner` (Hero, 580px static, `:spinning="false"`) | kept as a local component, rewritten as a thin wrapper around `NychLoadingIcon` imported from `@nychthemeron/library/components`, with scoped CSS to set `width`/`height` and override/disable the `nych-spin` animation when `spinning` is false | per approved "wrap with CSS overrides" approach |
|
|
| `LaurelDivider`, `ImageSlot` | unchanged, no library equivalent | |
|
|
|
|
## Files affected
|
|
|
|
**Deleted:**
|
|
- `src/components/ds/NychTag.vue`
|
|
- `src/components/ds/NychMessage.vue`
|
|
- `src/components/ds/NychInputText.vue`
|
|
- `src/components/ds/NychTextarea.vue`
|
|
- `src/components/ds/NychButton.vue`
|
|
- `src/components/ds/NychCard.vue`
|
|
- `src/assets/styles/tokens/fonts.css`
|
|
- `src/assets/styles/tokens/colors.css`
|
|
- `src/assets/styles/tokens/base.css`
|
|
|
|
**Rewritten:**
|
|
- `src/components/ds/LaurelSpinner.vue` — becomes a thin wrapper around the
|
|
library's `NychLoadingIcon`, preserving its existing `size` / `color` /
|
|
`spinning` prop API so `HeroSection.vue` doesn't need to change its usage.
|
|
- `src/assets/styles/tokens/components.css` → `tokens/laurel-divider.css`
|
|
(LaurelDivider section only).
|
|
- `src/assets/styles/styles.css` (updated `@import` manifest).
|
|
- `src/main.ts` (add PrimeVue + library CSS imports, `app.use(PrimeVue)`).
|
|
|
|
**Updated imports/usages:**
|
|
- `src/components/portfolio/SkillsSection.vue` — `NychTag` from library.
|
|
- `src/components/portfolio/WorkSection.vue` — `NychCard`, `NychTag` from
|
|
library; update `NychCard` slot usage (`image` → `header`, default →
|
|
`content`).
|
|
- `src/components/portfolio/ContactSection.vue` — `NychInputText`,
|
|
`NychTextarea`, `NychButton`, `NychMessage` from library.
|
|
- `src/components/portfolio/HeroSection.vue` — `NychButton` from library;
|
|
`LaurelSpinner` continues to be imported from `./ds/LaurelSpinner.vue`
|
|
(rewritten).
|
|
|
|
## Verification
|
|
|
|
- `bun run build` and `bun run type-check` must pass.
|
|
- Visually verify via dev server (`bun run dev`):
|
|
- Hero section renders the large static laurel wreath at the same size.
|
|
- Skills/Work section tags render with correct severity colors.
|
|
- Work section cards render header image, title, content, footer tags.
|
|
- Contact form inputs/textarea/button/message render and behave
|
|
(loading spinner shows in button while "sending").
|
|
- Both `hades` and `apollo` themes (toggle `data-theme` on `<html>`) still
|
|
render correctly.
|
|
|
|
## Out of scope
|
|
|
|
- No changes to `LaurelDivider.vue` or `ImageSlot.vue` internals.
|
|
- No changes to other library components not currently used
|
|
(`Checkbox`, `Select`, `Dialog`, `ToggleSwitch`, `RadioButton`, etc.).
|
|
- No changes to the CI workflow or registry configuration.
|