unfold-nav 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +8 -2
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# Changelog
|
|
2
2
|
|
|
3
|
+
## 0.1.1
|
|
4
|
+
|
|
5
|
+
- Link the npm homepage and README to the [live showcase](https://unfold-nav.romagnolo.eu).
|
|
6
|
+
- Document container deployment and check the static showcase container in CI.
|
|
7
|
+
- Allow the exhaustive Circuit regression sweep to finish on slower CI runners.
|
|
8
|
+
|
|
3
9
|
## 0.1.0
|
|
4
10
|
|
|
5
11
|
Initial release of the dependency-free `<unfold-nav>` Web Component.
|
package/README.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
# unfold-nav
|
|
2
2
|
|
|
3
|
+
**[Live demo](https://unfold-nav.romagnolo.eu)**
|
|
4
|
+
|
|
3
5
|
One button for your whole site map. Press and hold it, and your pages unfold around it as a small graph.
|
|
4
6
|
Drag along the graph and release on a page to go there. Or tap the button and tap your way through. The
|
|
5
7
|
same component works with a mouse, a finger or a keyboard, on desktop and on phones.
|
|
@@ -11,7 +13,7 @@ same component works with a mouse, a finger or a keyboard, on desktop and on pho
|
|
|
11
13
|
- **Customisable:** options, `--unfold-*` CSS variables, `::part()` selectors, a slot for the button icon, per-page colours, and a hook to plug in any icon library.
|
|
12
14
|
- **Accessibility features:** a modal dialog with a standard tree of pages for screen readers, full keyboard support, focus management, high-contrast and forced-colors support, text that follows the reader's font size, and reduced motion. See [Accessibility](#accessibility).
|
|
13
15
|
|
|
14
|
-
|
|
16
|
+
This is an early release for compact site maps. The API may change before 1.0.
|
|
15
17
|
|
|
16
18
|
## Quick start
|
|
17
19
|
|
|
@@ -352,6 +354,8 @@ Those two properties drive the unfold animation.
|
|
|
352
354
|
|
|
353
355
|
## Showcase: 9 industries × 9 designs
|
|
354
356
|
|
|
357
|
+
[Try the live demo](https://unfold-nav.romagnolo.eu).
|
|
358
|
+
|
|
355
359
|
`pnpm dev` opens a showcase with a desktop and a phone frame side by side, running the same mock website. Pick:
|
|
356
360
|
|
|
357
361
|
- **an industry:** restaurant, fashion, SaaS, healthcare, real estate, developer docs, creative agency, banking, travel. Each is a fictional brand with its own site map, typography and artwork.
|
|
@@ -368,6 +372,8 @@ pnpm build:showcase # static site in showcase-dist/ (relative paths, host i
|
|
|
368
372
|
pnpm preview:showcase # serve that build locally
|
|
369
373
|
```
|
|
370
374
|
|
|
375
|
+
For container hosting and the Romagnolo deployment workflow, see [Showcase deployment](https://github.com/NikoKaranatsios/unfold-nav/blob/main/deploy/README.md).
|
|
376
|
+
|
|
371
377
|
## How the layout works
|
|
372
378
|
|
|
373
379
|
All the geometry lives in `src/layout.ts` as pure functions.
|
|
@@ -403,7 +409,7 @@ pnpm build # dist/unfold-nav.js (ESM), dist/unfold-nav.umd.cjs, type defi
|
|
|
403
409
|
|
|
404
410
|
Browser target: modern evergreen browsers with Custom Elements, Shadow DOM, `<dialog>` and modern CSS (`color-mix`, individual transforms). Chrome has been checked interactively; test Safari, Firefox and assistive technology in your target environments before rollout. The Popover API puts drag navigation in the top layer; browsers without it use a non-modal dialog. IE and legacy browsers are not supported.
|
|
405
411
|
|
|
406
|
-
See [CONTRIBUTING.md](CONTRIBUTING.md) for the development workflow and reproducible bug reports. GitHub Actions runs the checks and showcase build on Node 22 and 24.
|
|
412
|
+
See [CONTRIBUTING.md](https://github.com/NikoKaranatsios/unfold-nav/blob/main/CONTRIBUTING.md) for the development workflow and reproducible bug reports. GitHub Actions runs the checks and showcase build on Node 22 and 24, and smoke-tests the static showcase container.
|
|
407
413
|
|
|
408
414
|
A note on SEO: the graph only exists while it is open, so keep a plain list of links somewhere (a footer or a sitemap) for crawlers and no-JS visitors.
|
|
409
415
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "unfold-nav",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "A dependency-free Web Component that unfolds a compact site map around a navigation button.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
"type": "git",
|
|
60
60
|
"url": "git+https://github.com/NikoKaranatsios/unfold-nav.git"
|
|
61
61
|
},
|
|
62
|
-
"homepage": "https://
|
|
62
|
+
"homepage": "https://unfold-nav.romagnolo.eu",
|
|
63
63
|
"bugs": {
|
|
64
64
|
"url": "https://github.com/NikoKaranatsios/unfold-nav/issues"
|
|
65
65
|
},
|