# HowDoYouConvert.com – Svelte Front End This repository hosts the modern SvelteKit experience for **howdoyouconvert.com**. Every calculator is rendered by Svelte on the server and client; no third-party CMS or injected script is involved anymore. ## Overview - The front end lives in `hdyc-svelte`; it uses `@sveltejs/adapter-node` to run as a Node server. - `src/routes/+page.svelte` renders the hero, search, and category grid, while `src/routes/[slug]/+page.svelte` renders the calculators themselves. - Conversion metadata is centralized in `src/lib/data/calculators.ts`, which drives the UI, search, glossary, and slug-based routing. ## Development 1. Install dependencies inside the `hdyc-svelte` folder (`npm install` is sufficient; feel free to swap `npm` for `pnpm` or `yarn`). 2. Run `npm run dev` while editing to get a localhost server with hot reloading. 3. Use `npm run check` to run `svelte-check` and surface type or markup issues. 4. When you are ready to verify the production bundle, run `npm run build` and optionally `npm run preview` or `npm run start` to exercise the compiled `build` folder. ## Data pipeline - The single source of truth for every published calculator is `calculators_list.md` in the repo root. The **Active Calculators** table at the top defines which conversions are shipped, and the completion checklist underneath should match the same set of Svelte calculators. - After editing `calculators_list.md`, run `python migrate.py` from the repo root. The script reads the registry, infers categories/types based on the conversion factor column, and writes the autogenerated `hdyc-svelte/src/lib/data/calculators.ts` file. - `calculators.ts` contains the `calculators` array, the `categories` map, and helper lookup/search functions. **Do not edit it manually**—regenerate it through `migrate.py` whenever the registry changes. - The generator also populates descriptions, hidden flags, and label metadata, so confirm the regenerated file before committing. ## Adding a calculator 1. Add a new row to the active table in `calculators_list.md`; the slug must be lowercase and dash-separated, and the conversion factor column must encode the math (`Linear Offset (m x + b)`, `1/x`, `Multi-Variable`, `10_to_2`, etc.). 2. Run `python migrate.py` so the new slug appears in `src/lib/data/calculators.ts` with the correct type and labels. 3. Start the dev server and navigate to `/new-slug` to verify the UI, bidirectional math, and description text. 4. Run `npm run check` (and optionally `npm run build`) before committing so the type system stays happy. ## Deploying & verification - The output of `npm run build` can be deployed anywhere that serves a Node app (a hosted environment or edge with Node support). `npm run start` runs the compiled server locally. - For each release, make sure the generated data file and the registry are in sync. Any mismatch will result in missing calculator pages because the routing is slug-driven. Maintaining the registry and the generated data file is the only path to publish a calculator in the new architecture.