HowDoYouConvert/hdyc-svelte/src/routes/[slug]/+page.svelte

<script lang="ts">
  import Calculator from '$lib/components/Calculator.svelte';
  import type { PageData } from './$types';
  import { buildSeoMeta, canonicalUrl, SITE_NAME, SITE_URL, toJsonLd } from '$lib/seo';

  export let data: PageData;

  $: calc = data.calculator;
  $: related = data.related;
  $: pageTitle = `${calc.name} — ${SITE_NAME}`;
  $: pageDescription = ['3col', '3col-mul'].includes(calc.type)
    ? `Compute ${calc.labels.in3 ?? 'the derived value'} using ${calc.labels.in1} and ${calc.labels.in2}. Enter any two fields to solve the third.`
    : `Convert ${calc.labels.in1} to ${calc.labels.in2} instantly with our free online calculator. Accurate two-way conversion with the exact formula shown.`;
  $: seo = buildSeoMeta({
    title: pageTitle,
    description: pageDescription,
    pathname: `/${calc.slug}`,
  });
  $: breadcrumbJsonLd = toJsonLd({
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: [
      {
        '@type': 'ListItem',
        position: 1,
        name: 'Home',
        item: SITE_URL,
      },
      {
        '@type': 'ListItem',
        position: 2,
        name: data.categoryLabel,
        item: canonicalUrl(`/category/${calc.category}`),
      },
      {
        '@type': 'ListItem',
        position: 3,
        name: calc.name,
        item: seo.canonical,
      },
    ],
  });
  $: webPageJsonLd = toJsonLd({
    '@context': 'https://schema.org',
    '@type': 'WebPage',
    name: calc.name,
    description: pageDescription,
    url: seo.canonical,
    isPartOf: {
      '@type': 'WebSite',
      name: SITE_NAME,
      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} />
  {@html `<script type="application/ld+json">${breadcrumbJsonLd}</script>`}
  {@html `<script type="application/ld+json">${webPageJsonLd}</script>`}
</svelte:head>

<nav class="breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/category/{calc.category}">{data.categoryIcon} {data.categoryLabel}</a></li>
    <li aria-current="page">{calc.name}</li>
  </ol>
</nav>

<h1 class="page-title calculator-page-title">{calc.name}</h1>

{#key calc.slug}
  <Calculator config={calc} showTitle={false} />
{/key}

<div class="seo-content">
  {#if calc.descriptionHTML}
    {@html calc.descriptionHTML}
  {:else}
    <h3>How to convert {calc.labels.in1} to {calc.labels.in2}</h3>
    {#if calc.type === 'standard' && calc.factor}
      <p>
        The conversion between {calc.labels.in1.toLowerCase()} and {calc.labels.in2.toLowerCase()}
        uses a fixed multiplication factor. One {calc.labels.in1.toLowerCase().replace(/s$/, '')} equals
        {calc.factor}{calc.offset ? ` plus an offset of ${calc.offset}` : ''} {calc.labels.in2.toLowerCase()}.
        {#if calc.offset}
          This offset is common in temperature conversions, where scales differ not just in magnitude but also in their zero point.
        {/if}
      </p>
      <p>
        To convert, multiply the value in {calc.labels.in1.toLowerCase()} by {calc.factor}{calc.offset ? `, then add ${calc.offset}` : ''}.
        To convert in the opposite direction, {calc.offset ? `subtract ${calc.offset}, then ` : ''}divide by {calc.factor}.
      </p>
    {:else if calc.type === '3col' || calc.type === '3col-mul'}
      <p>
        This is a three-variable conversion. Enter any two of the three values
        — {calc.labels.in1}, {calc.labels.in2}, and {calc.labels.in3} — and the third
        will be calculated automatically.
      </p>
    {:else if calc.type === 'base'}
      <p>
        Number system conversion between base-{calc.fromBase} ({calc.labels.in1.toLowerCase()}) and
        base-{calc.toBase} ({calc.labels.in2.toLowerCase()}). Enter a value in either field and the
        equivalent representation will appear in the other.
      </p>
    {:else}
      <p>
        Enter a value in the field for {calc.labels.in1.toLowerCase()} and the equivalent
        in {calc.labels.in2.toLowerCase()} will be calculated instantly. The conversion
        works bidirectionally — modify either field and the other updates in real time.
      </p>
    {/if}
  {/if}
</div>

{#if related.length > 0}
  <h3 class="section-heading">Related Converters</h3>
  <div class="related-grid">
    {#each related as rel}
      <a href="/{rel.slug}" class="related-chip">{rel.name}</a>
    {/each}
  </div>
{/if}