useweb/drizzli
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

i18n

Browse Source
This commit is contained in:
Vincent van der Wal
2026-08-01 15:07:28 +02:00
parent 9806396476
commit 774afa6c65
45 changed files with 1515 additions and 239 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/weather/week/[location]/DaySummary.svelte
+18 -16
View File
@@ -1,6 +1,8 @@
<script lang="ts">
import { formatZoned, getRelativeDayLabel } from '$lib/utils/date';
import * as m from '$lib/paraglide/messages';
import {
buildDayNarrative,
moonIllumination,
@@ -28,7 +30,6 @@
daily.dailyDates.findIndex((d) => formatZoned(d, timezone, 'yyyy-MM-dd') === dayKey)
);
let relLabel = $derived(getRelativeDayLabel(selectedDay, timezone));
let isToday = $derived(relLabel === 'Today');
let sentences = $derived(
buildDayNarrative({
@@ -38,8 +39,7 @@
dailyDates: daily.dailyDates,
timezone,
day: selectedDay,
units,
isToday
units
})
);
@@ -70,8 +70,8 @@
let daylight = $derived.by(() => {
if (!finite(daylightSeconds)) return null;
const h = Math.floor(daylightSeconds / 3600);
const m = Math.round((daylightSeconds % 3600) / 60);
return `${h} h ${String(m).padStart(2, '0')} m`;
const min = Math.round((daylightSeconds % 3600) / 60);
return m.daylight_hours({ hours: h, minutes: String(min).padStart(2, '0') });
});
let sunshine = $derived.by(() => {
@@ -98,13 +98,13 @@
let illumination = $derived(finite(phase) ? Math.round(moonIllumination(phase) * 100) : null);
</script>
<section class="mt-6" aria-label="Written forecast">
<section class="mt-6" aria-label={m.summary_heading()}>
<div class="overflow-hidden rounded-2xl border border-border/70 bg-card shadow-sm">
<div class="border-b border-border/70 bg-muted/40 px-4 py-2.5">
<h3 class="text-base font-bold">
{formatZoned(selectedDay, timezone, 'EEEE')}
<span class="font-semibold text-muted-foreground">
– in words{relLabel === formatZoned(selectedDay, timezone, 'EEEE')
– {m.summary_heading()}{relLabel === formatZoned(selectedDay, timezone, 'EEEE')
? ''
: ` (${relLabel})`}
</span>
@@ -118,7 +118,7 @@
</p>
{:else}
<p class="text-[15px] leading-relaxed text-muted-foreground">
No hourly detail available for this day.
{m.summary_no_data()}
</p>
{/if}
@@ -129,7 +129,7 @@
{#if sunrise}
<div>
<dt class="text-[11px] font-semibold tracking-wide text-muted-foreground uppercase">
Sunrise
{m.label_sunrise()}
</dt>
<dd class="font-semibold tabular-nums">{sunrise}</dd>
</div>
@@ -137,7 +137,7 @@
{#if sunset}
<div>
<dt class="text-[11px] font-semibold tracking-wide text-muted-foreground uppercase">
Sunset
{m.label_sunset()}
</dt>
<dd class="font-semibold tabular-nums">{sunset}</dd>
</div>
@@ -145,12 +145,14 @@
{#if daylight}
<div>
<dt class="text-[11px] font-semibold tracking-wide text-muted-foreground uppercase">
Daylight
{m.label_daylight()}
</dt>
<dd class="font-semibold tabular-nums">
{daylight}
{#if sunshine != null}
<span class="font-medium text-muted-foreground">· {sunshine}% sun</span>
<span class="font-medium text-muted-foreground"
>· {m.sunshine_share({ percent: sunshine })}</span
>
{/if}
</dd>
</div>
@@ -158,7 +160,7 @@
{#if finite(uv)}
<div>
<dt class="text-[11px] font-semibold tracking-wide text-muted-foreground uppercase">
UV index
{m.label_uv_index()}
</dt>
<dd class="font-semibold tabular-nums">
{uv.toFixed(1)}
@@ -169,7 +171,7 @@
{#if moonrise}
<div>
<dt class="text-[11px] font-semibold tracking-wide text-muted-foreground uppercase">
Moonrise
{m.label_moonrise()}
</dt>
<dd class="font-semibold tabular-nums">{moonrise}</dd>
</div>
@@ -177,7 +179,7 @@
{#if moonset}
<div>
<dt class="text-[11px] font-semibold tracking-wide text-muted-foreground uppercase">
Moonset
{m.label_moonset()}
</dt>
<dd class="font-semibold tabular-nums">{moonset}</dd>
</div>
@@ -196,7 +198,7 @@
</svg>
<div class="min-w-0">
<div class="text-[11px] font-semibold tracking-wide text-muted-foreground uppercase">
Moon
{m.label_moon()}
</div>
<div class="truncate font-semibold">
{moonPhaseName(phase!)}