Repository navigation
Tutorial page: tags should be clickable (filter to similar tutorials) #161
Description
Activity
- added 10 commits that reference this issue
on Jun 2, 2026 - added a commit that references this issue
on Jun 2, 2026 Root cause
Top-matter chips on the U1 Object Page (
hugo/layouts/tutorials/u1-object-page.htmllines 205–220) were rendered as static<span class="op-chip">elements with nohrefor click handler. The tutorial navigator at/tutorials/already had matching slug-keyed facets (filters.products,filters.levels) and a reactive watcher that re-runs the OData query on filter mutation — but the navigator'sonMountedonly parsed?q=from the URL. Even when legacy AEM links in tutorial source carried?tag=…, the parameter was inert.Two independent gaps, same effect: chips weren't actionable, and even hand-crafted deep-links didn't work.
Solution (PR #196 → main 81364cf)
Tutorial template (u1-object-page.html)
- Experience chip (
level/experienceLevel) →<a class="op-chip op-chip--link" href="/tutorials/?level=<lower>">. - Topic/product chips → loop over
displayTagszipped withdisplayTagSlugsby index;<a class="op-chip op-chip--tag op-chip--link" href="/tutorials/?tag=<slug>">when slug present, defensive static<span>when missing. primaryTagfallback also linked.- New
.op-chip--linkCSS modifier:color: inherit, no underline, hover background tint via--sapList_Hover_Background,:focus-visiblering via--sapContent_FocusColor. - Duration (
15 min) and progress ring stay static. - Existing
Licenselabel skip preserved (label-matched).
Navigator (TutorialNavigator.vue, url-params.ts)
- New pure parsers
parseTagParams/parseLevelParams(with 12 unit tests). onMountedextended to seedfilters.productsfrom?tagandfilters.levelsfrom?level(multi-value viaURLSearchParams.getAll; unknown level values dropped silently).- The existing reactive watcher re-runs the OData query for free.
Verification
- 50/50 navigator unit tests green.
- New smoke test
test/smoke/clickable-chips.smoke.test.tsasserts the rendered HTML emits the expected anchor structure (5 quote-stripping-tolerant regexes, witness slugabap-create-basic-app).
Spec & plan
- Spec: docs/superpowers/specs/2026-06-01-clickable-tutorial-tags-design.md
- Plan: docs/superpowers/plans/2026-06-01-clickable-tutorial-tags.md
Acceptance (#161)
- ✅ Each tag links to
/tutorials/?tag=<slug>(or?level=<value>) with the right facet pre-applied. - ✅ Hover and
:focus-visiblestyles on linked chips read as interactive. - ✅ Duration (
15 min) and progress ring stay static. - ✅ Inbound multi-value URLs (
?tag=a&tag=b) work viaURLSearchParams.getAll. - ✅ Existing
Licenselabel skip preserved.
The smoke test will turn green automatically once this deploys to DEV.
- Experience chip (
- added a commit that references this issue
on Jun 2, 2026
On the tutorial page, the tags shown in the top-matter strip (e.g.
beginner,15 min,ABAP Development,Beginner,SAP Business Technology Platform) are static labels.Request
Make the tags clickable so a click navigates to Search pre-filtered by that tag, letting the reader find similar tutorials.
Acceptance
/search?tag=…(or equivalent) with the right facet pre-applied.15 min) where filtering by duration makes less sense — TBD with design.Source: feedback from Daniel Wroblewski, 2026-06-01