84 lines
2.8 KiB
Svelte
84 lines
2.8 KiB
Svelte
<script lang="ts">
|
|
import { categories, calculators } from '$lib/data/calculators';
|
|
import CategoryCard from '$lib/components/CategoryCard.svelte';
|
|
import SearchBar from '$lib/components/SearchBar.svelte';
|
|
import { buildSeoMeta, SITE_NAME, SITE_URL, toJsonLd } from '$lib/seo';
|
|
|
|
const requiredCategoryFallbacks: Record<string, { label: string; icon: string }> = {
|
|
fluids: { label: 'Fluids', icon: '💧' },
|
|
magnetism: { label: 'Magnetism', icon: '🧲' },
|
|
};
|
|
|
|
const homepageCategories = {
|
|
...requiredCategoryFallbacks,
|
|
...categories,
|
|
};
|
|
|
|
const cats = Object.entries(homepageCategories).map(([key, meta]) => ({
|
|
key,
|
|
...meta,
|
|
}));
|
|
const totalCalculators = calculators.length;
|
|
const totalCategories = 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({
|
|
title: pageTitle,
|
|
description: pageDescription,
|
|
pathname: '/',
|
|
});
|
|
const websiteJsonLd = toJsonLd({
|
|
'@context': 'https://schema.org',
|
|
'@type': 'WebSite',
|
|
name: SITE_NAME,
|
|
description: pageDescription,
|
|
url: SITE_URL,
|
|
});
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>{pageTitle}</title>
|
|
<meta name="description" content={pageDescription} />
|
|
<meta name="robots" content={seo.robots} />
|
|
<link rel="canonical" href={seo.canonical} />
|
|
<meta property="og:type" content={seo.og.type} />
|
|
<meta property="og:title" content={seo.og.title} />
|
|
<meta property="og:description" content={seo.og.description} />
|
|
<meta property="og:url" content={seo.og.url} />
|
|
<meta property="og:site_name" content={seo.og.siteName} />
|
|
<meta name="twitter:card" content={seo.twitter.card} />
|
|
<meta name="twitter:title" content={seo.twitter.title} />
|
|
<meta name="twitter:description" content={seo.twitter.description} />
|
|
<script type="application/ld+json">{websiteJsonLd}</script>
|
|
</svelte:head>
|
|
|
|
<section class="hero">
|
|
<h1>How Do You Convert?</h1>
|
|
<p>Fast unit conversions with no ads.</p>
|
|
<div class="search-center">
|
|
<SearchBar idPrefix="home-search" />
|
|
</div>
|
|
</section>
|
|
|
|
<div class="stats-row">
|
|
<div class="stat">
|
|
<div class="stat-num">{totalCalculators}</div>
|
|
<div class="stat-label">Converters</div>
|
|
</div>
|
|
<div class="stat">
|
|
<div class="stat-num">{totalCategories}</div>
|
|
<div class="stat-label">Categories</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="category-section">
|
|
<div class="category-section__inner">
|
|
<h2 class="section-heading">Browse by Category</h2>
|
|
<div class="category-grid">
|
|
{#each cats as cat}
|
|
<CategoryCard icon={cat.icon} label={cat.label} href="/category/{cat.key}" />
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</section>
|