rdenadai/microbox
rdenadai/microbox
Watch
1
0
Fork
You've already forked microbox
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improvements v0.0.5 #6

Merged
rdenadai merged 4 commits from improvements-v0.0.5 into main 2026-08-24 17:55:10 +00:00
Conversation 0 Commits 4 Files changed 34 +7942 -3269
rdenadai commented 2026-08-24 17:55:05 +00:00
Owner
Copy link

Improvements v0.0.5

Lighthouse perf/a11y pass, accordion/tabs refactor, installable PWA, and docs.

Performance

  • Logo: 191 KiB PNG -> 16 KiB WebP with explicit width / height.
  • Google Fonts and Google Tag Manager moved out of index.html into src/libs/thirdParty.js, injected after window.load with a requestIdleCallback fallback.
  • Accordion tool components mount lazily on first open; mounted state persists across collapse / reopen.

Accessibility

  • <html lang="en"> and <main> wrapping router-view.
  • TabView / TabPanel now expose role="tablist", unique IDs, roving tabindex, and arrow / Home / End keyboard navigation with focus management.
  • RangeView exposes <label for> plus aria-label on each handle.
  • Per-tool unique IDs plus aria-label on QR, Social Card, and Shortener inputs.
  • Light-mode color tokens re-tuned for AA contrast.

Architecture

  • Extracted AccordionTooltip.vue from AccordionView.
  • Accordion state, observers, and ARIA IDs keyed by stable item.key slugs so favorites reordering does not misroute state.
  • Replaced eager ResizeObserver setup with lazy attach-on-open / detach-on-close.
  • RangeView uses Vue 3.5 useId() for stable input IDs.

Security

  • Strict Content-Security-Policy in ui/nginx.conf (self + Google Fonts / Tag Manager allowlist, frame-ancestors 'none', form-action 'self', base-uri 'self').
  • nginx.conf adds Referrer-Policy and correct Content-Type for the Web App Manifest.

PWA

  • vite-plugin-pwa with generated service worker: precaches the SPA shell and all lazy tool chunks.
  • Runtime cache: NetworkOnly for /api/* (GET queued in background sync, POST fails visibly), CacheFirst for Google Fonts.
  • navigateFallback to /index.html for SPA routes; /api/ and /sitemap.xml stay on the network.
  • registerType: 'prompt' plus a usePwaUpdate composable and a reload banner in App.vue.
  • manifest.webmanifest with 192 / 512 / maskable icons and apple-touch-icon.

Documentation

  • Added docs/RULES.md modeled after hagalaz / tilens.
  • Added public/llms.txt with concrete API method / body examples for each tool.
  • Removed false "JWT signature verification" claim.
  • Updated README.md and ui/README.md: implemented tools moved out of "Planned"; current project structure.

Versions

  • ui/package.json, api/pyproject.toml, and MenuBar.vue aligned to 0.0.5.
# Improvements v0.0.5 Lighthouse perf/a11y pass, accordion/tabs refactor, installable PWA, and docs. ## Performance - Logo: 191 KiB PNG -> 16 KiB WebP with explicit `width` / `height`. - Google Fonts and Google Tag Manager moved out of `index.html` into `src/libs/thirdParty.js`, injected after `window.load` with a `requestIdleCallback` fallback. - Accordion tool components mount lazily on first open; mounted state persists across collapse / reopen. ## Accessibility - `<html lang="en">` and `<main>` wrapping `router-view`. - `TabView` / `TabPanel` now expose `role="tablist"`, unique IDs, roving `tabindex`, and arrow / Home / End keyboard navigation with focus management. - `RangeView` exposes `<label for>` plus `aria-label` on each handle. - Per-tool unique IDs plus `aria-label` on QR, Social Card, and Shortener inputs. - Light-mode color tokens re-tuned for AA contrast. ## Architecture - Extracted `AccordionTooltip.vue` from `AccordionView`. - Accordion state, observers, and ARIA IDs keyed by stable `item.key` slugs so favorites reordering does not misroute state. - Replaced eager `ResizeObserver` setup with lazy attach-on-open / detach-on-close. - `RangeView` uses Vue 3.5 `useId()` for stable input IDs. ## Security - Strict `Content-Security-Policy` in `ui/nginx.conf` (self + Google Fonts / Tag Manager allowlist, `frame-ancestors 'none'`, `form-action 'self'`, `base-uri 'self'`). - `nginx.conf` adds `Referrer-Policy` and correct `Content-Type` for the Web App Manifest. ## PWA - `vite-plugin-pwa` with generated service worker: precaches the SPA shell and all lazy tool chunks. - Runtime cache: `NetworkOnly` for `/api/*` (GET queued in background sync, POST fails visibly), `CacheFirst` for Google Fonts. - `navigateFallback` to `/index.html` for SPA routes; `/api/` and `/sitemap.xml` stay on the network. - `registerType: 'prompt'` plus a `usePwaUpdate` composable and a reload banner in `App.vue`. - `manifest.webmanifest` with 192 / 512 / maskable icons and `apple-touch-icon`. ## Documentation - Added `docs/RULES.md` modeled after `hagalaz` / `tilens`. - Added `public/llms.txt` with concrete API method / body examples for each tool. - Removed false "JWT signature verification" claim. - Updated `README.md` and `ui/README.md`: implemented tools moved out of "Planned"; current project structure. ## Versions - `ui/package.json`, `api/pyproject.toml`, and `MenuBar.vue` aligned to `0.0.5`. 
Performance:
- Replace 191 KiB logo PNG with 16 KiB WebP and explicit dimensions on all images.
- Move Google Fonts and Google Tag Manager out of index.html and into src/libs/thirdParty.js, deferred after window.load with requestIdleCallback fallback.
- Lazy-mount accordion tool components on first open; mounted state persists across collapse/reopen.

Accessibility:
- Set <html lang="en"> and wrap router-view in <main>.
- Replace duplicate id="url" across QR/SocialCard/Shortener tools with per-tool unique IDs plus aria-label.
- Add tablist/tab role semantics, roving tabindex, keyboard arrows (Home/End) and focus management in TabView/TabPanel.
- Expose label-for and aria-label on RangeView inputs.
- Adjust light-mode color tokens for AA contrast.

Architecture:
- Extract AccordionTooltip.vue from AccordionView with Teleport.
- Use Vue 3.5 useId() for RangeView input IDs.
- AccordionView state, observers, and ARIA IDs keyed by stable item.key slugs so reordering (favorites) does not misroute state.
- Replace eager ResizeObserver setup with lazy attach on open / detach on close.

Security:
- Add strict Content-Security-Policy header in ui/nginx.conf (self + Google Fonts/Tag Manager allowlist).

Documentation:
- Add docs/RULES.md modeled after hagalaz/tilens.
- Add public/llms.txt with concrete API method/body examples for each tool.
- Correct JWT decoder claim (inspection only, no signature verification).
- Update README.md and ui/README.md to list implemented tools and current project structure.
Add vite-plugin-pwa with generateSW:
- Precache SPA shell, all lazy tool chunks, fonts, and icons.
- Runtime cache: NetworkOnly for /api/* (GET queued in background sync, POST fails visibly), CacheFirst for Google Fonts.
- navigateFallback serves /index.html for SPA routes; /api/ and /sitemap.xml stay on the network.
- registerType 'prompt' surfaces a 'new version ready' banner with Reload action via usePwaUpdate composable.

Manifest and icons:
- public/manifest.webmanifest with name, theme/background colors, 192/512/maskable icons.
- public/pwa-{192,512,maskable-512}x512.png and apple-touch-icon.png generated from logo.webp.

nginx:
- Serve /sw.js with no-store and Service-Worker-Allowed: /.
- Serve /manifest.webmanifest with application/manifest+json and short cache.
- Add /api/* origin to connect-src for Google Analytics beacons.
- Add worker-src 'self' and Referrer-Policy.

Docs:
- Add PWA rules to docs/RULES.md: SW scope, runtime cache policy, update UX, manifest icon set.
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference
rdenadai/microbox!6
No description provided.