From 10932083247719b21029f42e1e5ffb381a4ecc1c Mon Sep 17 00:00:00 2001
From: Ben <ben@ben.us.com>
Date: Sun, 8 Mar 2026 19:15:42 -0700
Subject: [PATCH] refactor: Centralize calculator statistics and categories
 into a new module, lazy load search functionality, and remove unused font
 preloads.

---
 hdyc-svelte/src/app.html                      | 42 ---------
 .../src/lib/components/SearchBar.svelte       | 11 ++-
 hdyc-svelte/src/lib/data/calculators.ts       | 42 +++++----
 hdyc-svelte/src/lib/data/stats.ts             | 85 +++++++++++++++++++
 hdyc-svelte/src/routes/+page.svelte           | 10 +--
 migrate.py                                    | 65 +++++++++-----
 tests/test_homepage_categories.py             |  2 +-
 7 files changed, 161 insertions(+), 96 deletions(-)
 create mode 100644 hdyc-svelte/src/lib/data/stats.ts

diff --git a/hdyc-svelte/src/app.html b/hdyc-svelte/src/app.html
index e88d3f9..409a589 100644
--- a/hdyc-svelte/src/app.html
+++ b/hdyc-svelte/src/app.html
@@ -10,20 +10,6 @@
 			type="font/woff2"
 			crossorigin
 		/>
-		<link
-			rel="preload"
-			href="/fonts/inter/Inter-Medium.woff2"
-			as="font"
-			type="font/woff2"
-			crossorigin
-		/>
-		<link
-			rel="preload"
-			href="/fonts/inter/Inter-SemiBold.woff2"
-			as="font"
-			type="font/woff2"
-			crossorigin
-		/>
 		<link
 			rel="preload"
 			href="/fonts/inter/Inter-Bold.woff2"
@@ -31,34 +17,6 @@
 			type="font/woff2"
 			crossorigin
 		/>
-		<link
-			rel="preload"
-			href="/fonts/inter/Inter-ExtraBold.woff2"
-			as="font"
-			type="font/woff2"
-			crossorigin
-		/>
-		<link
-			rel="preload"
-			href="/fonts/jetbrains-mono/JetBrainsMono-Regular.woff2"
-			as="font"
-			type="font/woff2"
-			crossorigin
-		/>
-		<link
-			rel="preload"
-			href="/fonts/jetbrains-mono/JetBrainsMono-Medium.woff2"
-			as="font"
-			type="font/woff2"
-			crossorigin
-		/>
-		<link
-			rel="preload"
-			href="/fonts/jetbrains-mono/JetBrainsMono-SemiBold.woff2"
-			as="font"
-			type="font/woff2"
-			crossorigin
-		/>
 		<script>
 			(function () {
 				const doc = document.documentElement;
diff --git a/hdyc-svelte/src/lib/components/SearchBar.svelte b/hdyc-svelte/src/lib/components/SearchBar.svelte
index 40c85a1..08a6a3c 100644
--- a/hdyc-svelte/src/lib/components/SearchBar.svelte
+++ b/hdyc-svelte/src/lib/components/SearchBar.svelte
@@ -1,15 +1,20 @@
 <script lang="ts">
-  import { searchCalculators } from '$lib/data/calculators';
   import { goto } from '$app/navigation';
 
   export let idPrefix = 'search';
-
   let query = '';
   let focused = false;
   let selectedIndex = -1;
   let lastQuery = '';
+  let searchCalculatorsFn: ((q: string) => any[]) | null = null;
 
-  $: results = query.length >= 2 ? searchCalculators(query).slice(0, 8) : [];
+  $: if (query.length >= 1 && !searchCalculatorsFn) {
+    import('$lib/data/calculators').then(m => {
+      searchCalculatorsFn = m.searchCalculators;
+    });
+  }
+
+  $: results = (query.length >= 2 && searchCalculatorsFn) ? searchCalculatorsFn(query).slice(0, 8) : [];
   $: listboxId = `${idPrefix}-listbox`;
   $: inputId = `${idPrefix}-input`;
   $: isOpen = focused && results.length > 0;
diff --git a/hdyc-svelte/src/lib/data/calculators.ts b/hdyc-svelte/src/lib/data/calculators.ts
index e4a7c27..6143633 100644
--- a/hdyc-svelte/src/lib/data/calculators.ts
+++ b/hdyc-svelte/src/lib/data/calculators.ts
@@ -17,26 +17,26 @@ export interface CalculatorDef {
 }
 
 export const categories: Record<string, { label: string; icon: string }> = {
-  length:          { label: 'Length / Distance',   icon: '📏' },
-  weight:          { label: 'Weight / Mass',       icon: '⚖️' },
-  temperature:     { label: 'Temperature',         icon: '🌡️' },
-  volume:          { label: 'Volume',              icon: '🧪' },
-  fluids:          { label: 'Fluids',              icon: '💧' },
-  area:            { label: 'Area',                icon: '🔳' },
-  speed:           { label: 'Speed / Velocity',    icon: '💨' },
-  pressure:        { label: 'Pressure',            icon: '🔽' },
-  energy:          { label: 'Energy',              icon: '⚡' },
-  magnetism:       { label: 'Magnetism',           icon: '🧲' },
-  power:           { label: 'Power',               icon: '🔌' },
-  data:            { label: 'Data Storage',        icon: '💾' },
-  time:            { label: 'Time',                icon: '⏱️' },
-  angle:           { label: 'Angle',               icon: '📐' },
-  'number-systems':{ label: 'Number Systems',      icon: '🔢' },
-  radiation:       { label: 'Radiation',           icon: '☢️' },
-  electrical:      { label: 'Electrical',          icon: '🔋' },
-  force:           { label: 'Force / Torque',      icon: '💪' },
-  light:           { label: 'Light',               icon: '💡' },
-  other:           { label: 'Other',               icon: '🔄' },
+  'length': { "label": "Length / Distance", "icon": "📏" },
+  'weight': { "label": "Weight / Mass", "icon": "⚖️" },
+  'temperature': { "label": "Temperature", "icon": "🌡️" },
+  'volume': { "label": "Volume", "icon": "🧪" },
+  'fluids': { "label": "Fluids", "icon": "💧" },
+  'area': { "label": "Area", "icon": "🔳" },
+  'speed': { "label": "Speed / Velocity", "icon": "💨" },
+  'pressure': { "label": "Pressure", "icon": "🔽" },
+  'energy': { "label": "Energy", "icon": "⚡" },
+  'magnetism': { "label": "Magnetism", "icon": "🧲" },
+  'power': { "label": "Power", "icon": "🔌" },
+  'data': { "label": "Data Storage", "icon": "💾" },
+  'time': { "label": "Time", "icon": "⏱️" },
+  'angle': { "label": "Angle", "icon": "📐" },
+  'number-systems': { "label": "Number Systems", "icon": "🔢" },
+  'radiation': { "label": "Radiation", "icon": "☢️" },
+  'electrical': { "label": "Electrical", "icon": "🔋" },
+  'force': { "label": "Force / Torque", "icon": "💪" },
+  'light': { "label": "Light", "icon": "💡" },
+  'other': { "label": "Other", "icon": "🔄" },
 };
 
 export const calculators: CalculatorDef[] = [
@@ -3167,8 +3167,6 @@ export const calculators: CalculatorDef[] = [
 
 ];
 
-const slugIndex = new Map(calculators.map(c => [c.slug, c]));
-
 export function getCalculatorBySlug(slug: string): CalculatorDef | undefined {
   return slugIndex.get(slug);
 }
diff --git a/hdyc-svelte/src/lib/data/stats.ts b/hdyc-svelte/src/lib/data/stats.ts
new file mode 100644
index 0000000..b20917a
--- /dev/null
+++ b/hdyc-svelte/src/lib/data/stats.ts
@@ -0,0 +1,85 @@
+// THIS FILE IS AUTO-GENERATED BY migrate.py
+export const categories: Record<string, { label: string; icon: string }> = {
+  "length": {
+    "label": "Length / Distance",
+    "icon": "📏"
+  },
+  "weight": {
+    "label": "Weight / Mass",
+    "icon": "⚖️"
+  },
+  "temperature": {
+    "label": "Temperature",
+    "icon": "🌡️"
+  },
+  "volume": {
+    "label": "Volume",
+    "icon": "🧪"
+  },
+  "fluids": {
+    "label": "Fluids",
+    "icon": "💧"
+  },
+  "area": {
+    "label": "Area",
+    "icon": "🔳"
+  },
+  "speed": {
+    "label": "Speed / Velocity",
+    "icon": "💨"
+  },
+  "pressure": {
+    "label": "Pressure",
+    "icon": "🔽"
+  },
+  "energy": {
+    "label": "Energy",
+    "icon": "⚡"
+  },
+  "magnetism": {
+    "label": "Magnetism",
+    "icon": "🧲"
+  },
+  "power": {
+    "label": "Power",
+    "icon": "🔌"
+  },
+  "data": {
+    "label": "Data Storage",
+    "icon": "💾"
+  },
+  "time": {
+    "label": "Time",
+    "icon": "⏱️"
+  },
+  "angle": {
+    "label": "Angle",
+    "icon": "📐"
+  },
+  "number-systems": {
+    "label": "Number Systems",
+    "icon": "🔢"
+  },
+  "radiation": {
+    "label": "Radiation",
+    "icon": "☢️"
+  },
+  "electrical": {
+    "label": "Electrical",
+    "icon": "🔋"
+  },
+  "force": {
+    "label": "Force / Torque",
+    "icon": "💪"
+  },
+  "light": {
+    "label": "Light",
+    "icon": "💡"
+  },
+  "other": {
+    "label": "Other",
+    "icon": "🔄"
+  }
+};
+
+export const totalCalculators = 2460;
diff --git a/hdyc-svelte/src/routes/+page.svelte b/hdyc-svelte/src/routes/+page.svelte
index 8d7a1d1..9865146 100644
--- a/hdyc-svelte/src/routes/+page.svelte
+++ b/hdyc-svelte/src/routes/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { categories, calculators } from '$lib/data/calculators';
+  import { categories, totalCalculators } from '$lib/data/stats';
   import CategoryCard from '$lib/components/CategoryCard.svelte';
   import SearchBar from '$lib/components/SearchBar.svelte';
   import { buildSeoMeta, SITE_NAME, SITE_URL, toJsonLd } from '$lib/seo';
@@ -18,8 +18,8 @@
     key,
     ...meta,
   }));
-  const totalCalculators = calculators.length;
-  const totalCategories = Object.keys(homepageCategories).length;
+  const totalConversions = totalCalculators;
+  const totalCategoriesCount = Object.keys(homepageCategories).length;
   const pageTitle = `${SITE_NAME} — Free Unit Conversion Calculators`;
   const pageDescription = 'Convert between hundreds of units instantly. Free online calculators for length, weight, temperature, volume, area, speed, energy, power, data and more.';
   const seo = buildSeoMeta({
@@ -62,11 +62,11 @@
 
 <div class="stats-row">
   <div class="stat">
-    <div class="stat-num">{totalCalculators}</div>
+    <div class="stat-num">{totalConversions}</div>
     <div class="stat-label">Converters</div>
   </div>
   <div class="stat">
-    <div class="stat-num">{totalCategories}</div>
+    <div class="stat-num">{totalCategoriesCount}</div>
     <div class="stat-label">Categories</div>
   </div>
 </div>
diff --git a/migrate.py b/migrate.py
index 1015e8d..0f0d4fe 100644
--- a/migrate.py
+++ b/migrate.py
@@ -5,6 +5,7 @@ from pathlib import Path
 BASE_DIR = Path(__file__).resolve().parent
 CALCLIST = BASE_DIR / 'calculators_list.md'
 OUTPUT_FILE = BASE_DIR / 'hdyc-svelte/src/lib/data/calculators.ts'
+STATS_FILE = BASE_DIR / 'hdyc-svelte/src/lib/data/stats.ts'
 
 CATEGORY_KEYS = [
     'length',
@@ -29,6 +30,29 @@ CATEGORY_KEYS = [
     'other',
 ]
 
+CATEGORIES = {
+    'length':          {'label': 'Length / Distance',   'icon': '📏'},
+    'weight':          {'label': 'Weight / Mass',       'icon': '⚖️'},
+    'temperature':     {'label': 'Temperature',         'icon': '🌡️'},
+    'volume':          {'label': 'Volume',              'icon': '🧪'},
+    'fluids':          {'label': 'Fluids',              'icon': '💧'},
+    'area':            {'label': 'Area',                'icon': '🔳'},
+    'speed':           {'label': 'Speed / Velocity',    'icon': '💨'},
+    'pressure':        {'label': 'Pressure',            'icon': '🔽'},
+    'energy':          {'label': 'Energy',              'icon': '⚡'},
+    'magnetism':       {'label': 'Magnetism',           'icon': '🧲'},
+    'power':           {'label': 'Power',               'icon': '🔌'},
+    'data':            {'label': 'Data Storage',        'icon': '💾'},
+    'time':            {'label': 'Time',                'icon': '⏱️'},
+    'angle':           {'label': 'Angle',               'icon': '📐'},
+    'number-systems':  {'label': 'Number Systems',      'icon': '🔢'},
+    'radiation':       {'label': 'Radiation',           'icon': '☢️'},
+    'electrical':      {'label': 'Electrical',          'icon': '🔋'},
+    'force':           {'label': 'Force / Torque',      'icon': '💪'},
+    'light':           {'label': 'Light',               'icon': '💡'},
+    'other':           {'label': 'Other',               'icon': '🔄'},
+}
+
 CATEGORY_SET = set(CATEGORY_KEYS)
 
 # Lightweight label normalization to catch duplicate/identity conversions
@@ -418,28 +442,12 @@ export interface CalculatorDef {
 }
 
 export const categories: Record<string, { label: string; icon: string }> = {
-  length:          { label: 'Length / Distance',   icon: '📏' },
-  weight:          { label: 'Weight / Mass',       icon: '⚖️' },
-  temperature:     { label: 'Temperature',         icon: '🌡️' },
-  volume:          { label: 'Volume',              icon: '🧪' },
-  fluids:          { label: 'Fluids',              icon: '💧' },
-  area:            { label: 'Area',                icon: '🔳' },
-  speed:           { label: 'Speed / Velocity',    icon: '💨' },
-  pressure:        { label: 'Pressure',            icon: '🔽' },
-  energy:          { label: 'Energy',              icon: '⚡' },
-  magnetism:       { label: 'Magnetism',           icon: '🧲' },
-  power:           { label: 'Power',               icon: '🔌' },
-  data:            { label: 'Data Storage',        icon: '💾' },
-  time:            { label: 'Time',                icon: '⏱️' },
-  angle:           { label: 'Angle',               icon: '📐' },
-  'number-systems':{ label: 'Number Systems',      icon: '🔢' },
-  radiation:       { label: 'Radiation',           icon: '☢️' },
-  electrical:      { label: 'Electrical',          icon: '🔋' },
-  force:           { label: 'Force / Torque',      icon: '💪' },
-  light:           { label: 'Light',               icon: '💡' },
-  other:           { label: 'Other',               icon: '🔄' },
-};
+"""
+    for k, v in CATEGORIES.items():
+        out += f"  '{k}': {json.dumps(v, ensure_ascii=False).replace('{', '{ ').replace('}', ' }')},\n"
+    out += "};\n"
 
+    out += """
 export const calculators: CalculatorDef[] = [
 """
     for e in calculators_ts_entries:
@@ -453,9 +461,9 @@ export const calculators: CalculatorDef[] = [
             
     out += """
 ];
+"""
 
-const slugIndex = new Map(calculators.map(c => [c.slug, c]));
-
+    out += """
 export function getCalculatorBySlug(slug: string): CalculatorDef | undefined {
   return slugIndex.get(slug);
 }
@@ -487,5 +495,16 @@ export function searchCalculators(query: string): CalculatorDef[] {
 
     print(f"Generated {len(calculators_ts_entries)} calculators into calculators.ts")
 
+    # Generate stats.ts
+    active_count = len([e for e in calculators_ts_entries if not e.get('hidden')])
+    stats_content = f"""// THIS FILE IS AUTO-GENERATED BY migrate.py
+export const categories: Record<string, {{ label: string; icon: string }}> = {json.dumps(CATEGORIES, indent=2, ensure_ascii=False)};
+
+export const totalCalculators = {active_count};
+"""
+    with open(STATS_FILE, 'w', encoding='utf-8') as f:
+        f.write(stats_content)
+    print(f"Generated stats.ts with {active_count} active calculators")
+
 if __name__ == '__main__':
     process()
diff --git a/tests/test_homepage_categories.py b/tests/test_homepage_categories.py
index 419abaa..a99ea42 100644
--- a/tests/test_homepage_categories.py
+++ b/tests/test_homepage_categories.py
@@ -72,7 +72,7 @@ class HomepageCategoryRegressionTests(unittest.TestCase):
     def test_homepage_uses_canonical_categories_map(self) -> None:
         text = HOMEPAGE_SVELTE.read_text(encoding="utf-8")
 
-        self.assertIn("import { categories, calculators } from '$lib/data/calculators';", text)
+        self.assertIn("import { categories, totalCalculators } from '$lib/data/stats';", text)
         self.assertIn("requiredCategoryFallbacks", text)
         self.assertIn("fluids: { label: 'Fluids', icon: '💧' }", text)
         self.assertIn("magnetism: { label: 'Magnetism', icon: '🧲' }", text)