Skip to content

WEBDEV-8927: Add a focus mode to the elements demo - #76

Open
jbuckner wants to merge 1 commit into
mainfrom
WEBDEV-8927-demo-focus-mode
Open

WEBDEV-8927: Add a focus mode to the elements demo#76
jbuckner wants to merge 1 commit into
mainfrom
WEBDEV-8927-demo-focus-mode

Conversation

@jbuckner

Copy link
Copy Markdown
Collaborator

The demo showed every element on one page. Now #elem-<tag> shows just that one, the sidebar switches the focused element instead of scrolling to it, and "All elements" goes back to the full list. Story modules load lazily, so a deep link only fetches that element's chunk.

Hash routing because the demo ships to GH Pages under a base path it doesn't know at build time, so a real path would 404 on reload.

WEBDEV-8927: https://webarchive.jira.com/browse/WEBDEV-8927

🤖 Generated with Claude Code

https://claude.ai/code/session_01QEWomUzGqJ8SazBDMrZEti

The demo rendered every story on one page, so there was no way to look at a
single element and every component was instantiated at page load.

Drive the view off the URL hash instead. #elem-<tag> shows just that element,
no hash keeps the full listing, and the sidebar switches the focused element
rather than scrolling to it. Story modules are globbed lazily, so a deep link
only fetches that element's chunk.

Hash routing rather than the History API because the demo ships to GitHub Pages
under a base path it doesn't know at build time, with no server-side rewrites,
so a real path would 404 on reload and on shared links.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QEWomUzGqJ8SazBDMrZEti
@github-actions

Copy link
Copy Markdown
PR Preview Action v1.8.1

🚀 View preview at
https://internetarchive.github.io/elements/pr/pr-76/

Built to branch ghpages at 2026-08-20 22:44 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

@codecov-commenter

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 88.23529% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 80.98%. Comparing base (b31543a) to head (423436b).

Files with missing lines Patch % Lines
demo/app-root.ts 88.23% 3 Missing and 5 partials ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main      #76      +/-   ##
==========================================
+ Coverage   78.62%   80.98%   +2.36%     
==========================================
  Files          17       26       +9     
  Lines         697      915     +218     
  Branches      189      221      +32     
==========================================
+ Hits          548      741     +193     
- Misses        100      113      +13     
- Partials       49       61      +12     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@jbuckner
jbuckner requested a review from latonv August 20, 2026 22:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants