33 lines
3.0 KiB
Markdown
33 lines
3.0 KiB
Markdown
# 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.
|