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-nodeto run as a Node server. src/routes/+page.svelterenders the hero, search, and category grid, whilesrc/routes/[slug]/+page.svelterenders the calculators themselves.- Conversion metadata is centralized in
src/lib/data/calculators.ts, which drives the UI, search, glossary, and slug-based routing.
Development
- Install dependencies inside the
hdyc-sveltefolder (npm installis sufficient; feel free to swapnpmforpnpmoryarn). - Run
npm run devwhile editing to get a localhost server with hot reloading. - Use
npm run checkto runsvelte-checkand surface type or markup issues. - When you are ready to verify the production bundle, run
npm run buildand optionallynpm run previewornpm run startto exercise the compiledbuildfolder.
Data pipeline
- The single source of truth for every published calculator is
calculators_list.mdin the repo root. The Active Calculators table at the top defines which conversions are shipped; the trailing backlog checklist stores future work. - After editing
calculators_list.md, runpython migrate.pyfrom the repo root. The script reads the registry, infers categories/types based on the conversion factor column, and writes the autogeneratedhdyc-svelte/src/lib/data/calculators.tsfile. calculators.tscontains thecalculatorsarray, thecategoriesmap, and helper lookup/search functions. Do not edit it manually—regenerate it throughmigrate.pywhenever the registry changes.- The generator also populates descriptions, hidden flags, and label metadata, so confirm the regenerated file before committing.
Adding a calculator
- 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.). - Run
python migrate.pyso the new slug appears insrc/lib/data/calculators.tswith the correct type and labels. - Start the dev server and navigate to
/new-slugto verify the UI, bidirectional math, and description text. - Run
npm run check(and optionallynpm run build) before committing so the type system stays happy.
Deploying & verification
- The output of
npm run buildcan be deployed anywhere that serves a Node app (a hosted environment or edge with Node support).npm run startruns 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.