NextBestNetwork/explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
417fd997a7883ca2a52c845a06cd92305c8233eb
explorer/docs/architecture.md
D. Rimron-Soutter 417fd997a7 feat(registers): deep‑linkable search via ?q=; docs: add docs/ and update README 
- Register Explorer:
  - Sync search input with URL query param `q` for shareable deep links
  - Initialize search from `q` on load; update URL on input; remove `q` when cleared
  - Implemented with Next.js `useSearchParams`, `useRouter`, `usePathname`
  - File: src/app/registers/RegisterBrowser.tsx

- Documentation:
  - Add docs/ hub and initial guides
    - docs/index.md (docs index)
    - docs/getting-started.md (install/dev/build/start/lint/deploy)
    - docs/architecture.md (structure, theming, styling, key paths, scripts)
    - docs/registers.md (Register Explorer overview, search, deep links, implementation notes)
  - Rewrite README.md with project overview, features, quick start, scripts, and links to docs

Notes:
- Dev server uses port 4000 (Turbopack) via package.json
- Example deep link: /registers?q=vram

Date: 2025-12-11 13:11 (Junie@lucy.xalior.com)
2025-12-11 13:11:56 +00:00

1.3 KiB
Raw Blame History

Architecture

Overview

  • Framework: Next.js App Router (React 19)
  • Styling: Bootstrap 5 with React-Bootstrap components and project SASS overrides
  • Theming: Light/Dark theme set via data-bs-theme on <html>, initialized from a cookie or system preference in src/app/layout.tsx

Key paths

  • App entry/layout: src/app/layout.tsx
  • Global styles: src/scss/nbn.scss (imports Bootstrap, a Bootswatch-like layer, and project styles)
  • Navbar: src/components/Navbar.tsx
  • Register Explorer: src/app/registers/*
  • Register parsing utilities: src/utils/register_parser.ts and src/utils/register_parsers/*
  • Data: data/nextreg.txt

Styling & SASS

  • src/scss/nbn.scss imports Bootstrap and local overrides in this order:
    1. variables (custom Bootstrap variables)
    2. Bootstrap core
    3. bootswatch (theme tweaks)
    4. explorer (project-specific styles)

Theming bootstrap

  • On the server, layout.tsx reads the NBN-theme cookie (light/dark) and sets data-bs-theme on the HTML element.
  • On the client, an inline script in the head ensures no flash of incorrect theme by immediately setting the attribute based on cookie or user preference.

Development scripts

  • Dev: pnpm dev (port 4000 with Turbopack)
  • Build: pnpm build
  • Start: pnpm start (defaults to port 3000)