Add centralized unit definitions
This commit is contained in:
@@ -3,6 +3,7 @@
|
||||
import type { CalculatorDef } from '$lib/data/calculators';
|
||||
import { page } from '$app/stores';
|
||||
import { onMount } from 'svelte';
|
||||
import QuickDefinitionCard from '$lib/components/QuickDefinitionCard.svelte';
|
||||
import QuickConversionExample from '$lib/components/QuickConversionExample.svelte';
|
||||
import QuickConversionTable from '$lib/components/QuickConversionTable.svelte';
|
||||
|
||||
@@ -116,6 +117,7 @@
|
||||
</div>
|
||||
<QuickConversionTable {config} />
|
||||
<QuickConversionExample {config} />
|
||||
<QuickDefinitionCard {config} />
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
67
hdyc-svelte/src/lib/components/QuickDefinitionCard.svelte
Normal file
67
hdyc-svelte/src/lib/components/QuickDefinitionCard.svelte
Normal file
@@ -0,0 +1,67 @@
|
||||
<script lang="ts">
|
||||
import { getDefinition } from '$lib/data/unitDefinitions';
|
||||
import type { CalculatorDef } from '$lib/data/calculators';
|
||||
|
||||
export let config: CalculatorDef;
|
||||
|
||||
const label1 = config.labels.in1 || 'Unit 1';
|
||||
const label2 = config.labels.in2 || 'Unit 2';
|
||||
|
||||
const def1 = getDefinition(label1);
|
||||
const def2 = getDefinition(label2);
|
||||
</script>
|
||||
|
||||
<section class="definition-card">
|
||||
<h3>Unit definitions</h3>
|
||||
<div class="definition-grid">
|
||||
<article>
|
||||
<strong>{label1}</strong>
|
||||
<p>{def1 ?? `Definition pending for ${label1}.`}</p>
|
||||
</article>
|
||||
<article>
|
||||
<strong>{label2}</strong>
|
||||
<p>{def2 ?? `Definition pending for ${label2}.`}</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.definition-card {
|
||||
margin: 0 2rem 2rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-radius: 12px;
|
||||
background: var(--section-bg);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.definition-card h3 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.definition-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.definition-grid article {
|
||||
background: var(--card-bg);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
padding: 0.9rem;
|
||||
}
|
||||
|
||||
.definition-grid strong {
|
||||
display: block;
|
||||
font-size: 0.95rem;
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.definition-grid p {
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
</style>
|
||||
54
hdyc-svelte/src/lib/data/unitDefinitions.ts
Normal file
54
hdyc-svelte/src/lib/data/unitDefinitions.ts
Normal file
@@ -0,0 +1,54 @@
|
||||
import { calculators } from './calculators';
|
||||
|
||||
const domainDescriptions: Record<string, string> = {
|
||||
length: 'linear or spatial distance measurement',
|
||||
weight: 'mass or force quantity',
|
||||
temperature: 'thermal energy level',
|
||||
volume: 'three-dimensional capacity',
|
||||
area: 'two-dimensional surface measurement',
|
||||
speed: 'rate of change of position',
|
||||
pressure: 'force exerted per unit area',
|
||||
energy: 'capacity to do work',
|
||||
power: 'rate of energy transfer',
|
||||
data: 'digital information volume',
|
||||
time: 'temporal duration',
|
||||
angle: 'angular measurement',
|
||||
'number-systems': 'numeric representation systems',
|
||||
radiation: 'ionizing emission metrics',
|
||||
electrical: 'electricity-related magnitude',
|
||||
force: 'force or torque measurement',
|
||||
light: 'luminous intensity',
|
||||
other: 'specialized measurement',
|
||||
};
|
||||
|
||||
const definitions: Record<string, string> = {};
|
||||
|
||||
const formatLabel = (label: string): string => {
|
||||
if (!label) return '';
|
||||
return label
|
||||
.replace(/\b([A-Z])/g, ' $1')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
};
|
||||
|
||||
const buildDefinition = (label: string, categoryKey: string): string => {
|
||||
if (!label) return '';
|
||||
const desc = domainDescriptions[categoryKey] || 'measurement';
|
||||
return `${label} is used to express ${desc}. Understanding ${label} keeps calculations aligned across the ${categoryKey} domain.`;
|
||||
};
|
||||
|
||||
calculators.forEach(calc => {
|
||||
const { category, labels } = calc;
|
||||
Object.values(labels).forEach(label => {
|
||||
if (!label) return;
|
||||
if (!definitions[label]) {
|
||||
definitions[label] = buildDefinition(label, category);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
export function getDefinition(label: string): string | undefined {
|
||||
return definitions[label];
|
||||
}
|
||||
|
||||
export const unitDefinitions = definitions;
|
||||
Reference in New Issue
Block a user