Theme-colored sparkle accent (✦) for emphasis in prose#7
Conversation
- New --sparkle CSS variable per theme. Terminal gets yellow-lime (#d8ff55), paper gets burnt sienna, ink/plum get light gold, amber goes brighter, blueprint picks warm tan. - .sparkle class applies color, trims size, slight vertical nudge. - SparkleText component auto-wraps ✦ in any body string so content can stay in site-config.ts as plain strings. - Applied to /interests, /now, /then, and book notes. Type ✦ anywhere in a body string (interests.body, NOW/THEN section.body, BOOKS note) and it renders in the theme's accent.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Adds a theme-aware “sparkle” emphasis glyph (✦) that can be embedded in prose strings and rendered with consistent styling across all site themes.
Changes:
- Introduces a per-theme
--sparkleCSS variable and a.sparklestyle for the glyph. - Adds a reusable
<SparkleText>component that wraps✦occurrences in styled markup. - Applies
<SparkleText>to prose fields in/interests,/now,/then, and/booksnotes.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| app/styles/global.css | Adds --sparkle theme variables and .sparkle styling for the glyph. |
| app/components/SparkleText.tsx | New component that parses strings and wraps ✦ with a styled span. |
| app/routes/interests.tsx | Renders interest body text through <SparkleText>. |
| app/routes/now.tsx | Renders section body text through <SparkleText>. |
| app/routes/then.tsx | Renders archived section body text through <SparkleText>. |
| app/routes/books.tsx | Renders optional book notes through <SparkleText>. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| {parts.map((part, i) => ( | ||
| <Fragment key={i}> | ||
| {i > 0 && ( | ||
| <span className="sparkle" aria-hidden="true"> |
There was a problem hiding this comment.
aria-hidden="true" removes the ✦ glyph from assistive technologies. Since the glyph is intended to convey emphasis (not purely decorative), consider exposing it to screen readers (remove aria-hidden) or provide an accessible equivalent (e.g., an aria-label/visually-hidden text) so the emphasis isn’t lost.
| <span className="sparkle" aria-hidden="true"> | |
| <span className="sparkle"> |
| export function SparkleText({ text }: { text: string }) { | ||
| if (!text.includes(SPARKLE)) return <>{text}</>; | ||
| const parts = text.split(SPARKLE); | ||
| return ( |
There was a problem hiding this comment.
There’s no automated coverage validating that ✦ gets wrapped/styled (e.g., asserting a .sparkle span appears when content contains the glyph). Since this is a new rendering behavior used across multiple pages, it would be good to add a small Playwright assertion (or component-level test if you have one) to prevent regressions.
- SparkleText now matches any of: ✦ ✧ ✻ ✽ ✶ ✴ ✳ (four-pointed + asterisk/starburst varieties). Only the character itself is wrapped in the .sparkle span; surrounding text is unchanged. - SiteHeader's tagline now renders SITE.bio through SparkleText so the always-visible bio line can carry an accent.
Summary
Add a small decorative/emphasis glyph that reads appropriately against each theme. Goal: something that functions like a more visual exclamation point, inline in body prose.
--sparkleCSS variable per theme:#d8ff55(yellow-lime)#c9751c(burnt sienna)#e8c67b(light gold)#ffe6a0(brighter amber)#ffd48a(warm tan on slate)#ffd48a(gold on plum).sparkleclass: colored withvar(--sparkle), slightly smaller (0.9em), slight vertical nudge.<SparkleText>component auto-wraps any✦in a string./interests,/now,/then, and book notes.How you use it
Type
✦anywhere in these string fields insidesite-config.tsand it renders colored:INTERESTS[i].bodyNOW.sections[i].bodyTHEN[i].sections[i].bodyBOOKS[i].items[i].note(optional)Example:
Test plan
npm run buildpassesINTERESTS[0].body, check it renders colored in all six themes