Repository navigation
Quick check widget: instrument-label palette + clean rationale citations - #16
Merged
Merged
Conversation
…esthetic
The pretest widget was reading as an anonymous beige-on-white card on
/learn pages — flat, low presence, with letter-index plates that were
nearly invisible and a dark mode that mixed a dark header with a
forced-white card body.
Refinement (palette + typography only, no structural HTML changes):
- Header strip → filled slate-900 instrument-label with mono "01 of 03"
counter and crystal-300 separator; small caps "Pretest" annotation tag
- A/B/C indices → 6×6 mono plate references that fill with crystal/
emerald/red on selected/correct/wrong-chosen states
- Card silhouette switched from crystal-200 border to neutral slate so
the accent lives in the header only
- Helper line dropped italic and gained a leading crystal em-dash
- Question stem promoted to text-base/medium for hierarchy
- Dark mode now a true mirror: card body bg-slate-900, header
bg-slate-950, all states have dark variants
- Completion card recoloured to emerald (was crystal) so finish state
reads distinct from idle
Plate refs and high-contrast header give the widget one strong visual
moment per the project's "scientifically clean and intriguing" direction
captured in the new .impeccable.md design context.
Tests updated to query by aria-label/role rather than fragile text
matching ("01 of 03" splits across spans by design).
…rces footer Curated question rationales were authored with inline scholarly citation markers like `[ref:read-gemmology-3e]` (520 occurrences across the bank, 4 distinct keys: Read, Anderson, Gübelin & Koivula vols 1 and 3). They were never wired to a resolver, so every "Not quite — here is why" panel got sprinkled with bracketed slug noise that snagged the eye mid-sentence. Fix: small render-time helper (`src/lib/quiz/citations.ts`) that - strips `[ref:...]` markers from rationale strings, tidying any double spaces or pre-punctuation gaps a removed marker would have left behind, - collects the unique slugs in first-seen order across the main rationale and all per-option rationales, - maps each slug to a short human label (falls back to the raw slug if unknown, so adding a fifth source tomorrow does not silently drop the citation). `RationalePanel` runs the strip on every rationale string before render and emits a single small-caps "Sources" line at the foot of the body, deduped across the whole panel. When no citations exist, the footer is omitted entirely. The YAML question content is untouched — provenance lives in source where curators write it; readers get clean prose plus a single sourced attribution line. Tests: 16 new (10 utility, 6 panel render). Full suite: 226/226 pass.
|
🚀 Preview deployed to: https://09f5090c.gemmology-dev.pages.dev |
Bissbert
added a commit
that referenced
this pull request
May 11, 2026
…ons (#16) * style(learn-widget): refine Quick check palette to instrument-label aesthetic The pretest widget was reading as an anonymous beige-on-white card on /learn pages — flat, low presence, with letter-index plates that were nearly invisible and a dark mode that mixed a dark header with a forced-white card body. Refinement (palette + typography only, no structural HTML changes): - Header strip → filled slate-900 instrument-label with mono "01 of 03" counter and crystal-300 separator; small caps "Pretest" annotation tag - A/B/C indices → 6×6 mono plate references that fill with crystal/ emerald/red on selected/correct/wrong-chosen states - Card silhouette switched from crystal-200 border to neutral slate so the accent lives in the header only - Helper line dropped italic and gained a leading crystal em-dash - Question stem promoted to text-base/medium for hierarchy - Dark mode now a true mirror: card body bg-slate-900, header bg-slate-950, all states have dark variants - Completion card recoloured to emerald (was crystal) so finish state reads distinct from idle Plate refs and high-contrast header give the widget one strong visual moment per the project's "scientifically clean and intriguing" direction captured in the new .impeccable.md design context. Tests updated to query by aria-label/role rather than fragile text matching ("01 of 03" splits across spans by design). * feat(rationale): strip inline [ref:slug] markers, surface unified Sources footer Curated question rationales were authored with inline scholarly citation markers like `[ref:read-gemmology-3e]` (520 occurrences across the bank, 4 distinct keys: Read, Anderson, Gübelin & Koivula vols 1 and 3). They were never wired to a resolver, so every "Not quite — here is why" panel got sprinkled with bracketed slug noise that snagged the eye mid-sentence. Fix: small render-time helper (`src/lib/quiz/citations.ts`) that - strips `[ref:...]` markers from rationale strings, tidying any double spaces or pre-punctuation gaps a removed marker would have left behind, - collects the unique slugs in first-seen order across the main rationale and all per-option rationales, - maps each slug to a short human label (falls back to the raw slug if unknown, so adding a fifth source tomorrow does not silently drop the citation). `RationalePanel` runs the strip on every rationale string before render and emits a single small-caps "Sources" line at the foot of the body, deduped across the whole panel. When no citations exist, the footer is omitted entirely. The YAML question content is untouched — provenance lives in source where curators write it; readers get clean prose plus a single sourced attribution line. Tests: 16 new (10 utility, 6 panel render). Full suite: 226/226 pass.
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Two scoped polish changes to the
LearnQuizWidget(the Quick check pretest above each/learn/[slug]article):[ref:read-gemmology-3e]etc., 520 occurrences across 4 keys) stripped from rationale prose at render time and surfaced as a single dedupedSourcesfooter line. They were never wired to a resolver, so they snagged the eye mid-sentence in every "Not quite — here is why" panel.Bonus: introduces
.impeccable.mdcapturing the project's design context (precise, considered, alive) so future design decisions have grounding.Changes
Palette (commit
2836358):slate-900instrument-label with mono01 of 03counter and small-capsPretestannotation tagcrystal/emerald/redon selected / correct / wrong-chosen statescrystal-200to neutral slate so the accent lives only in the headercrystal-500em-dash; question stem promoted totext-base font-mediumslate-900, headerslate-950, all states have dark variantsCitations (commit
33bfc3c):src/lib/quiz/citations.tswithstripCitations/extractCitations/collectCitations/citationLabeland a 4-entryCITATION_LABELSmap (Read, Anderson, Gübelin & Koivula vols 1 + 3)RationalePanelstrips refs from all rationale strings before render and emits one small-capsSources · ·line at the foot of the body, deduped across the panelTest plan
citations.test.tsand the newRationalePanelcitation cases)LearnQuizWidgettest queries migrated from fragilegetByText(/1 of 3/)to semanticgetByRole('complementary', { name: /question 1 of 3/ })since the counter now splits across spans by design[ref:snags; Sources footer renders once at the footOut of scope
/learnpages (separate concern; widget at least respectsdark:classes when present)[ref:…]markers (intentionally kept; provenance is curator-side, render is reader-side)