@import url("/assets/md.css")feat: more i18n

@import url("/assets/md.css")

2 files changed, 24 insertions, 26 deletions

diff --git a/messages/en-gb.json b/messages/en-gb.json
index 0266281..9ce14a0 100644
--- a/messages/en-gb.json
+++ b/messages/en-gb.json
@@ -91,9 +91,14 @@
       }
     }
   ],
-  "timeJoiner": "{l} and {r}",
-  "timeJoiner2": "{l}, {r}",
-  "timeImmediate": [
+  "no_results_title": "No results",
+  "no_results_body": "No results have been found for the station *{stationName}*.\nPlease try again.",
+  "welcome_title": "No Station",
+  "welcome_body_1": "Please input a station in the search field above and select a search result.",
+  "welcome_examples": "Examples:",
+  "time_joiner": "{l} and {r}",
+  "time_joiner2": "{l}, {r}",
+  "time_immediate": [
     {
       "declarations": ["input isPastTense"],
       "selectors": ["isPastTense"],
@@ -104,6 +109,6 @@
       }
     }
   ],
-  "timeInPast": "{relTime} ago",
-  "timeInFuture": "in {relTime}"
+  "past_time": "{relTime} ago",
+  "future_time": "in {relTime}"
 }
diff --git a/src/lib/Timetable.svelte b/src/lib/Timetable.svelte
index 5fa6e95..96e0c03 100644
--- a/src/lib/Timetable.svelte
+++ b/src/lib/Timetable.svelte
@@ -64,7 +64,7 @@
     if (results.length > 1) {
       const [r, l] = [results.pop()!, results.pop()!];
       results.push(
-        m.timeJoiner({
+        m.time_joiner({
           l,
           r,
         })
@@ -75,17 +75,17 @@
         ? results[0]
         : results.length === 0
           ? ''
-          : results.reduce((pv, cv) => m.timeJoiner2({ l: pv, r: cv }));
+          : results.reduce((pv, cv) => m.time_joiner2({ l: pv, r: cv }));
     if (relTime === '')
-      return m.timeImmediate({
+      return m.time_immediate({
         isPastTense: _totalMillis < 0 ? 'true' : 'false',
       });
     if (_totalMillis < 0)
-      return m.timeInPast({
+      return m.past_time({
         relTime,
       });
     else
-      return m.timeInFuture({
+      return m.future_time({
         relTime,
       });
   };
@@ -374,29 +374,22 @@
   <div class="flex items-center justify-center">
     <div class="results">
       {#if (placeName || placeId) && isResultsPage}
-        <h2 class="text-2xl opacity-90">No results</h2>
+        <h2 class="text-2xl opacity-90">{m.no_results_title()}</h2>
         <p>
-          No results have been found for the station <b
-            >{placeName ?? placeId}</b
-          >.<br />
-          Please try again.
+          {#each m
+            .no_results_body({ stationName })
+            .split('*') as part, idx}{#if idx % 2 === 0}{part}{:else}<b
+                >{part}</b
+              >{/if}{/each}
         </p>
       {:else if placeId}
-        <h2 class="text-2xl opacity-90">No results</h2>
-        <p>
-          No results have been found for the station <b
-            >{placeName ?? placeId}</b
-          >.<br />
-          Please try again.
-        </p>
+        TODO: add some loader here
       {:else}
-        <h2 class="text-2xl opacity-90">No Station</h2>
+        <h2 class="text-2xl opacity-90">{m.welcome_title()}</h2>
         <p class="pb-1">
-          Please input a station in the search field above and select a search
-          result.
+          {m.welcome_body_1()}
         </p>
         <p class="py-1">
-          Examples:
           <span class="pt-2 flex flex-wrap gap-2 max-w-xl">
             <button
               class="{S.button('secondary').replace(