Rens Roosloot

v0.3 Static Nav + IA Plan

Volledige gerenderde weergave van v0.3-static-nav-ia.md.

Laatst gesynchroniseerd: 13 april 2026



# v0.3 Static Nav + IA Plan

Tracker Legend

  • TODO
  • [-] IN PROGRESS
  • DONE

Progress Snapshot

  1. Phase status: Validation
  2. Overall completion: 96%
  3. Last updated: 2026-02-06

Goal

Deliver a cleaner static-first site structure with consistent navigation, predictable URLs, and better wayfinding without adding dynamic runtime dependencies.

Scope

  1. Consistent top navigation on all pages.
  2. Breadcrumbs on project/blog/docs detail pages.
  3. Static previous/next navigation on project and blog detail pages.
  4. Static sitemap page (site/sitemap.html).
  5. Docs hub page (site/docs/index.html) linking all core docs.
  6. Predictable URL conventions for projects and docs.
  7. Shared layout partials/templates for header/footer reuse.

Non-Goals

  1. No client-side router or SPA behavior.
  2. No backend/API integration.
  3. No third-party script additions.

Information Architecture (Target)

  1. Home
  2. Projects
  3. Work
  4. Visuals
  5. Blog
  6. Docs
  7. Contact

URL Rules

  1. Projects: site/projects/<slug>.html
  2. Docs: site/docs/<doc>.html
  3. Keep legacy URLs only as minimal static redirects when needed.
  4. All runtime files and links resolve from within site/.

Implementation Phases

Phase 1: Baseline and Mapping

  1. Inventory all current pages and map each to target IA section.
  2. Define canonical slugs for projects/blog pages.
  3. Identify legacy links needing redirect stubs.

Phase 2: Shared Layout Foundation

  1. Introduce reusable header/footer partials/templates.
  2. Move existing page chrome to shared layout.
  3. Ensure language toggle/button styles remain aligned with existing design system.

Phase 3: Global Navigation Rollout

  1. Apply identical top-level nav across all pages.
  2. Set active-state behavior per page.
  3. Add footer links to key sections, sitemap, and docs hub.

Phase 4: Wayfinding

  1. Add breadcrumb trails on project/blog/docs detail pages.
  2. Add static previous/next links for project and blog detail pages.
  3. Ensure first/last items gracefully omit unavailable links.

Phase 5: Sitemap and Docs Hub

  1. Create site/sitemap.html grouped by section.
  2. Create site/docs/index.html linking:
    • URS, FS, DS
    • RISK_ASSESSMENT, TEST_PLAN
    • IQ, OQ, AGENTS
  3. Link docs hub from global nav (Docs) and footer.

Phase 6: Validation and Release Prep

  1. Manual checks:
    • Desktop/mobile navigation flow
    • Breadcrumb correctness
    • Previous/next correctness
    • Broken links check
  2. Run existing test suite and Lighthouse flow.
  3. Update CHANGELOG.md and footer version references for v0.3 prep.

Acceptance Criteria

  1. Every public page uses one consistent header and footer model.
  2. Top-level IA links are present and correct on all pages.
  3. Breadcrumbs exist on all project/blog/docs detail pages.
  4. Previous/next links work correctly on project/blog detail pages.
  5. site/sitemap.html and site/docs/index.html are live and linked globally.
  6. URL conventions are applied consistently.
  7. No production dependency outside site/.

Risks and Mitigations

  1. Risk: Link regressions during URL normalization.
    • Mitigation: page inventory + redirect stubs + link validation pass.
  2. Risk: Inconsistent nav due to duplicated markup.
    • Mitigation: shared partial/template source for header/footer.
  3. Risk: Scope creep into redesign work.
    • Mitigation: keep this release focused on IA/navigation and static maintainability.

Deliverables

  1. Updated static page set within site/.
  2. New site/sitemap.html.
  3. New site/docs/index.html.
  4. Updated shared layout templates/partials.
  5. Updated CHANGELOG.md.

Execution Checklist

Setup

  • Confirm branch is v0.3-static-nav-ia.
  • Freeze IA labels: Home, Projects, Work, Visuals, Blog, Docs, Contact.
  • Create page inventory table in this file or a companion tracker.

Page Inventory (IA Mapping)

Page Target IA section Notes
site/index.html Home Canonical homepage
site/projects.html Projects Projects hub
site/work.html Work Work overview
site/visuals.html Visuals Visuals hub
site/roosloot-site-development.html Blog Blog detail/list page
site/docs/index.html Docs Docs hub
site/sitemap.html Docs Discovery support page linked globally
site/audacity-whisper-transcriber.html Projects Legacy detail URL (redirect target exists under site/projects/)
site/puzzle-tools.html Projects Legacy detail URL (redirect target exists under site/projects/)
site/home-automation.html Projects Legacy detail URL (redirect target exists under site/projects/)
site/moon-photography.html Projects Legacy detail URL (redirect target exists under site/projects/)
site/macro-photography.html Projects Legacy detail URL (redirect target exists under site/projects/)
site/lego.html Projects Legacy detail URL (redirect target exists under site/projects/)
site/visuals-ascii-cloud.html Projects/Visuals Legacy detail URL (redirect target exists under site/projects/)
site/visuals-ascii-tide.html Projects/Visuals Legacy detail URL (redirect target exists under site/projects/)
site/404.html System Error page

URL and Inventory

  • Define canonical URL map for all project pages.
  • Define canonical URL map for docs pages under site/docs/.
  • Identify and list legacy URLs requiring static redirect stubs.
  • Verify all runtime links resolve from within site/.

Shared Layout

  • Create/update shared header partial/template.
  • Create/update shared footer partial/template.
  • Add global nav links in shared header.
  • Add footer links for Sitemap and Docs.

Apply Shared Nav Per Page

  • site/index.html
  • site/projects.html
  • site/work.html
  • site/visuals.html
  • site/home-automation.html
  • site/roosloot-site-development.html
  • site/audacity-whisper-transcriber.html
  • site/lego.html
  • site/macro-photography.html
  • site/moon-photography.html
  • site/puzzle-tools.html
  • site/visuals-ascii-cloud.html
  • site/visuals-ascii-tide.html
  • site/404.html

Breadcrumbs

  • Add breadcrumbs to project detail pages.
  • Add breadcrumbs to blog detail pages.
  • Add breadcrumbs to docs detail pages.
  • Verify breadcrumb labels match IA terms.

Previous/Next Links

  • Define explicit order list for project detail pages.
  • Define explicit order list for blog detail pages.
  • Add static previous/next blocks to each project detail page.
  • Add static previous/next blocks to each blog detail page.
  • Hide unavailable previous/next links for first/last pages.

Sitemap and Docs Hub

  • Create site/sitemap.html.
  • Group sitemap links by section: main, projects, blog, docs.
  • Create site/docs/index.html.
  • Add links to site/docs/urs.html.
  • Add links to site/docs/fs.html.
  • Add links to site/docs/ds.html.
  • Add links to site/docs/risk-assessment.html.
  • Add links to site/docs/test-plan.html.
  • Add links to site/docs/iq.html.
  • Add links to site/docs/oq.html.
  • Add links to site/docs/agents.html.

QA and Validation

  • Manual desktop nav flow check.
  • Manual mobile nav flow check.
  • Keyboard-only navigation pass.
  • Broken-link pass for top nav, breadcrumbs, previous/next, sitemap, docs hub.
  • Run e2e test suite.
  • Run Lighthouse checks.

Validation Notes

  • 2026-02-06: Automated relative-link integrity pass completed (site/**/*.html) with no broken internal href/src links.
  • 2026-02-06: npm run docs:render completed successfully after installing Node.js user-scope (v24.13.0).
  • 2026-02-06: npm run test:e2e now passes fully (27 passed / 0 failed) after updating test expectations for canonical project aliases and making a11y scans serial with a higher per-test timeout.
  • 2026-02-06: npm run test:lighthouse completed successfully (command exit code 0).

Release Prep

  • Update CHANGELOG.md for v0.3 nav/IA work.
  • Update footer version reference where applicable.
  • Final review against acceptance criteria section above.
Terug naar home