refactor: Centralize calculator statistics and categories into a new module, lazy load search functionality, and remove unused font preloads.
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
85
hdyc-svelte/src/lib/data/stats.ts
Normal file
85
hdyc-svelte/src/lib/data/stats.ts
Normal file
@@ -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;
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user