EDA Resource Browser - Visual Architecture

System Overview

Resource Browser is a compact SvelteKit application that reads CRD manifests stored in the repo (under static/resources/<release>/...) and exposes:

• A release-aware resource browser and search index
• Per-resource pages showing YAML and OpenAPI-style schema details
• Lightweight version comparison and diff views

The app is built with SvelteKit + Vite and can be deployed as a static site (for example, Cloudflare Pages).

🚀 EDA Resource Browser

A compact, fast web UI for exploring Nokia EDA Custom Resource Definitions (CRDs) and release manifests.

Clean, focused features:

• 🔎 Search and browse CRDs by release
• 📄 View YAML and OpenAPI-style schemas for each resource
• 🔁 Compare versions across releases and inspect diffs

Quick start

1. Install dependencies:

pnpm install

2. Run the development server (hot-reload):

pnpm run dev

3. Build for production:

pnpm run prepare
pnpm run build

Preview the production build locally:

pnpm run preview

Notes and tips

• Demo data: sample CRD manifests are placed under static/resources/<release>/... — the app reads these for the release browser.
• CI tip: if pnpm install in CI errors with a frozen-lockfile mismatch, regenerate the lockfile locally with:

pnpm install --no-frozen-lockfile
git add pnpm-lock.yaml
git commit -m "chore: update pnpm-lock.yaml"

Developer notes

• Built with SvelteKit + Vite and styled with TailwindCSS. Routes expose a home listing and per-resource detail pages.
• Keep changes small and UI-focused. If you add a new release, drop its manifest under static/resources/<release>/manifest.json.

Contributing

• Open issues and PRs welcome. Please include a short description and screenshots where helpful.

Performance notes

We changed the hero/background handling to improve LCP:

• The primary hero is now an inline (via a element) inserted early in the layout for accurate LCP measurement and preloading control. The CSS now uses gradients only; the image sits behind the page content.
• Fonts: we prefer WOFF2 for smaller payloads and preloaded critical hero fonts. If you need to generate WOFF2 assets from the existing TTF fonts in /static/fonts, run:

pnpm install -D ttf2woff2
pnpm run generate:woff2

Note: `ttf2woff2` reads from stdin and writes a compressed WOFF2 to stdout. The `generate:woff2` script wraps this in a loop and pipes each TTF into the converter. If you prefer a one-off command, you can run:

```bash
npx ttf2woff2 < static/fonts/NokiaPureText_Rg.ttf > static/fonts/NokiaPureText_Rg.woff2

Or to convert all TTFs at once using a shell loop (same as the script):

for f in static/fonts/*.ttf; do npx ttf2woff2 < "$f" > "${f%.ttf}.woff2"; done

That converts TTF files in `static/fonts` to WOFF2. After that, update the `app.html` preloads if you change filenames.