feat: add internationalization

ROADMAP.md

@@ -6,5 +6,5 @@
 - [x] Collect data for place times.
 - [ ] Make key private again.
 - [x] Persist state with runed.
-- [ ] Add internalization.
+- [x] Add internalization.
 - [x] Refactor components into separate files.

messages/en.json

@@ -1,4 +1,33 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
-  "hello_world": "Hello, {name} from en!"
+  "websiteTitle": "Campus Study Spots",
+  "selectCampus": "Select a campus...",
+  "searchCampus": "Search campuses...",
+  "campusNotFound": "No campus found.",
+  "colorIndication": "Colors indicate open status of the spaces.",
+  "legend": "Legend",
+  "toggleTheme": "Toggle theme",
+  "toggleLanguage": "Toggle language",
+  "open": "Open",
+  "closed": "Closed",
+  "openingSoon": "Opening Soon",
+  "closingSoon": "Closing Soon",
+  "includedAmenities": "Included Amenities",
+  "computers": "Computers",
+  "outlets": "Outlets",
+  "printing": "Printing",
+  "rooms": "Rooms",
+  "waterFountains": "Water Fountains",
+  "wifi": "WiFi",
+  "googleMaps": "Google Maps",
+  "directions": "Directions",
+  "alwaysOpen": "Always Open!",
+  "hours": "Hours",
+  "monday": "Monday",
+  "tuesday": "Tuesday",
+  "wednesday": "Wednesday",
+  "thursday": "Thursday",
+  "friday": "Friday",
+  "saturday": "Saturday",
+  "sunday": "Sunday"
 }

messages/fr.json

@@ -1,4 +1,33 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
-  "hello_world": "Hello, {name} from fr!"
+  "websiteTitle": "Lieux d'Étude sur le Campus",
+  "selectCampus": "Sélectionner un campus...",
+  "searchCampus": "Rechercher des campus...",
+  "campusNotFound": "Aucun campus trouvé.",
+  "colorIndication": "Les couleurs indiquent le statut ouvert des espaces.",
+  "legend": "Légende",
+  "toggleTheme": "Changer le thème",
+  "toggleLanguage": "Changer de langue",
+  "open": "Ouvert",
+  "closed": "Fermé",
+  "openingSoon": "Ouvre bientôt",
+  "closingSoon": "Ferme bientôt",
+  "includedAmenities": "Commodités Incluses",
+  "computers": "Ordinateurs",
+  "outlets": "Prises",
+  "printing": "Impression",
+  "rooms": "Salles",
+  "waterFountains": "Fontaines d'eau",
+  "wifi": "Wi-Fi",
+  "googleMaps": "Google Maps",
+  "directions": "Directions",
+  "alwaysOpen": "Toujours ouvert !",
+  "hours": "Heures",
+  "monday": "Lundi",
+  "tuesday": "Mardi",
+  "wednesday": "Mercredi",
+  "thursday": "Jeudi",
+  "friday": "Vendredi",
+  "saturday": "Samedi",
+  "sunday": "Dimanche"
 }

src/data/campuses.ts → src/data/en/index.ts

@@ -1,6 +1,6 @@
 import { type Campus } from "$src/campuses.d";
-import { locations as universityOfManitobaLocations } from "./en/university-of-manitoba";
-import { locations as universityOfWaterlooLocations } from "./en/university-of-waterloo";
+import { locations as universityOfManitobaLocations } from "./university-of-manitoba";
+import { locations as universityOfWaterlooLocations } from "./university-of-waterloo";
 
 export const campuses: Campus[] = [
   {

src/lib/components/custom/page-controls.svelte

@@ -3,6 +3,7 @@
   import { page } from "$app/stores";
   import { Button } from "$lib/components/ui/button/index.js";
   import { i18n } from "$lib/i18n";
+  import * as m from "$lib/paraglide/messages.js";
   import {
     setLanguageTag,
     type AvailableLanguageTag,
@@ -33,7 +34,7 @@
     <Moon
       class="absolute h-fit w-fit rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
     />
-    <span class="sr-only">Toggle theme</span>
+    <span class="sr-only">{m.toggleTheme()}</span>
   </Button>
   <Button
     onclick={switchLanguage}
@@ -42,6 +43,6 @@
     class="uppercase"
   >
     {language.current}
-    <span class="sr-only">Toggle language</span>
+    <span class="sr-only">{m.toggleLanguage()}</span>
   </Button>
 </div>

src/lib/components/custom/space-information.svelte

@@ -1,12 +1,34 @@
 <script lang="ts">
   import AmenityIcon from "$lib/components/custom/amenity-icon.svelte";
-  import type { Space } from "$src/spaces.d";
+  import { Skeleton } from "$lib/components/ui/skeleton/index.js";
+  import * as m from "$lib/paraglide/messages.js";
+  import { languageTag } from "$src/lib/paraglide/runtime";
+  import type { Space, SpaceAmenities, Weekdays } from "$src/spaces.d";
   import { ExternalLink } from "lucide-svelte/icons";
+  import translate from "translate";
 
   interface Props {
-    spaceSelected: Space;
+    space: Space;
   }
-  let { spaceSelected = $bindable() }: Props = $props();
+  let { space = $bindable() }: Props = $props();
+
+  const ta: Record<SpaceAmenities, string> = {
+    Computers: m.computers(),
+    Outlets: m.outlets(),
+    Printing: m.printing(),
+    Rooms: m.rooms(),
+    "Water Fountains": m.waterFountains(),
+    WiFi: m.wifi(),
+  };
+  const tw: Record<Weekdays, string> = {
+    monday: m.monday(),
+    tuesday: m.tuesday(),
+    wednesday: m.wednesday(),
+    thursday: m.thursday(),
+    friday: m.friday(),
+    saturday: m.saturday(),
+    sunday: m.sunday(),
+  };
 
   function spaceGoogleMapLink(space: Space) {
     if (space === undefined) return "";
@@ -17,49 +39,59 @@
   }
 </script>
 
-<p class="mb-3">
-  {spaceSelected.description}
-</p>
-{#if spaceSelected.metadata?.amenities}
+<div class="mb-3">
+  {#await translate(space.description, languageTag())}
+    <div class="flex flex-col gap-y-2">
+      {#each Array(3)}
+        <Skeleton class="h-4 w-full" />
+      {/each}
+    </div>
+  {:then result}
+    {result}
+  {:catch}
+    {space.description}
+  {/await}
+</div>
+{#if space.metadata?.amenities}
   <ul class="mb-3">
-    <h2 class="mb-1 font-semibold">Included Amenities</h2>
-    {#each spaceSelected.metadata?.amenities.slice().sort() as amenity}
+    <h2 class="mb-1 font-semibold">{m.includedAmenities()}</h2>
+    {#each space.metadata?.amenities.slice().sort() as amenity}
       <li class="flex gap-x-1 ps-1">
         <AmenityIcon {amenity} />
-        <span>{amenity}</span>
+        <span>{ta[amenity]}</span>
       </li>
     {/each}
   </ul>
 {/if}
 <div class="mb-3">
-  <h2 class="font-semibold">Directions</h2>
+  <h2 class="font-semibold">{m.directions()}</h2>
   <a
     class="flex gap-x-1 hover:underline"
-    href={spaceGoogleMapLink(spaceSelected)}
+    href={spaceGoogleMapLink(space)}
     target="_blank"
     rel="noopener noreferrer"
   >
-    <span>Google Maps</span>
+    <span>{m.googleMaps()}</span>
     <ExternalLink class="h-fit w-fit scale-75" />
   </a>
 </div>
 <div>
-  <h2 class="font-semibold">Hours</h2>
-  {#if spaceSelected.alwaysOpen}
-    <span>Always open!</span>
+  <h2 class="font-semibold">{m.hours()}</h2>
+  {#if space.alwaysOpen}
+    <span>{m.alwaysOpen()}</span>
   {:else}
     <ul>
-      {#each Object.entries(spaceSelected.hours) as [weekday, segments]}
+      {#each Object.entries(space.hours) as [weekday, segments]}
         <li class="flex justify-between gap-x-1">
-          <span class="first-letter:uppercase">{weekday}</span>
+          <span class="first-letter:uppercase">{tw[weekday as Weekdays]}</span>
           {#if segments.length > 0}
             <span>
               {segments
                 .map((segment) => `${segment.open} - ${segment.close}`)
                 .join(", ")}
             </span>
           {:else}
-            <span>Closed</span>
+            <span>{m.closed()}</span>
           {/if}
         </li>
       {/each}

src/lib/components/custom/space-status-badge.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import { Badge } from "$lib/components/ui/badge/index.js";
+  import * as m from "$lib/paraglide/messages.js";
   import { cn } from "$lib/utils.js";
   import type { SpaceStatus } from "$src/spaces.d";
 
@@ -9,6 +10,12 @@
   }
   let { status, class: className, ...restProps }: Props = $props();
 
+  const t: Record<SpaceStatus, string> = {
+    Open: m.open(),
+    Closed: m.closed(),
+    "Opening Soon": m.openingSoon(),
+    "Closing Soon": m.closingSoon(),
+  };
   const classes: Record<SpaceStatus, string> = {
     Open: "bg-green-400 hover:bg-green-500",
     Closed: "bg-red-400 hover:bg-red-500",
@@ -21,5 +28,5 @@
   class={cn(classes[status], "border-transparent", className)}
   {...restProps}
 >
-  {status}
+  {t[status]}
 </Badge>

src/routes/+page.svelte

@@ -9,16 +9,19 @@
   import * as Command from "$lib/components/ui/command/index.js";
   import * as Drawer from "$lib/components/ui/drawer/index.js";
   import * as Popover from "$lib/components/ui/popover/index.js";
+  import * as m from "$lib/paraglide/messages.js";
   import { getSpaceStatus } from "$lib/utils";
   import { cn } from "$lib/utils.js";
-  import { campuses } from "$src/data/campuses";
+  import { campuses } from "$src/data/en";
+  import { languageTag } from "$src/lib/paraglide/runtime";
   import type { Space } from "$src/spaces";
   import { Check, ChevronsUpDown } from "lucide-svelte/icons";
   import maplibregl from "maplibre-gl";
   import { mode } from "mode-watcher";
   import { PersistedState } from "runed";
   import { tick, onDestroy } from "svelte";
   import { MapLibre, Marker } from "svelte-maplibre";
+  import translate from "translate";
 
   let currentTime = $state<Date>(new Date());
   const intervalId = setInterval(() => (currentTime = new Date()), 60 * 1000);
@@ -74,7 +77,7 @@
 </script>
 
 <svelte:head>
-  <title>Campus Study Spots</title>
+  <title>{m.websiteTitle()}</title>
 </svelte:head>
 
 <MapLibre bind:map style={maptilerStyle} class="min-h-screen" standardControls>
@@ -103,21 +106,31 @@
       {#snippet child({ props })}
         <Button
           variant="outline"
-          class="w-52 justify-between"
+          class="w-60 justify-between"
           {...props}
           role="combobox"
           aria-expanded={campusComboboxOpen}
         >
-          {campusSelected?.label || "Select a campus..."}
+          {#if campusSelected?.label}
+            {#await translate(campusSelected.label, languageTag())}
+              ...
+            {:then result}
+              {result}
+            {:catch}
+              {campusSelected.label}
+            {/await}
+          {:else}
+            {m.selectCampus()}
+          {/if}
           <ChevronsUpDown class="opacity-50" />
         </Button>
       {/snippet}
     </Popover.Trigger>
-    <Popover.Content class="w-52 p-0">
+    <Popover.Content class="w-60 p-0">
       <Command.Root>
-        <Command.Input placeholder="Search campuses..." />
+        <Command.Input placeholder={m.searchCampus()} />
         <Command.List>
-          <Command.Empty>No campus found.</Command.Empty>
+          <Command.Empty>{m.campusNotFound()}</Command.Empty>
           <Command.Group>
             {#each campuses as campus}
               <Command.Item
@@ -129,11 +142,18 @@
               >
                 <Check
                   class={cn(
-                    "ml-auto",
                     campusValue.current !== campus.value && "text-transparent",
                   )}
                 />
-                {campus.label}
+                <span class="mr-auto">
+                  {#await translate(campus.label, languageTag())}
+                    ...
+                  {:then result}
+                    {result}
+                  {:catch}
+                    {campus.label}
+                  {/await}
+                </span>
               </Command.Item>
             {/each}
           </Command.Group>
@@ -145,11 +165,11 @@
 
 <PageControls />
 
-<Card.Root class="absolute bottom-10 left-2.5 z-10">
+<Card.Root class="absolute bottom-10 left-2.5 z-10 w-96 max-w-full">
   <Card.Header>
-    <Card.Title>Legend</Card.Title>
+    <Card.Title>{m.legend()}</Card.Title>
     <Card.Description>
-      Colors indicate open status of the spaces.
+      {m.colorIndication()}
     </Card.Description>
   </Card.Header>
   <Card.Content>
@@ -171,7 +191,7 @@
             <SpaceStatusBadge status={spaceSelectedStatus} />
           </Drawer.Description>
         </Drawer.Header>
-        <SpaceInformation bind:spaceSelected />
+        <SpaceInformation space={spaceSelected} />
       </div>
     </Drawer.Content>
   </Drawer.Root>