🌐 Add i18n for all strings

site/i18n.yml

@@ -1 +1,24 @@
 activeIncidents: Active Incidents
+allSystemsOperational: All systems are operational
+incidentReport: Incident report →
+activeIncidentSummary: Opened at $DATE with $POSTS posts
+incidentTitle: Incident $NUMBER Details
+incidentDetails: Incident Details
+incidentFixed: Fixed
+incidentOngoing: Ongoing
+incidentOpenedAt: Opened at
+incidentClosedAt: Closed at
+incidentSubscribe: Subscribe to Updates
+incidentViewOnGitHub: View on GitHub
+incidentCommentSummary: Posted at $DATE by $AUTHOR
+incidentBack: ← Back to all incidents
+pastIncidents: Past Incidents
+pastIncidentsResolved: Resolved in $MINUTES minuted with $POSTS posts
+liveStatus: Live Status
+overallUptime: Overall uptime $UPTIME%
+averageResponseTime: Average response time $TIMEms
+loading: Loading
+navStatus: Status
+navAbout: About
+navGitHub: GitHub
+footer: This page is [open source]($REPO), powered by [Upptime](https://upptime.js.org)

site/src/components/ActiveIncidents.svelte

@@ -49,7 +49,7 @@
 </style>
 
 {#if !incidents.length && !loading}
-  <article class="good">✅ &nbsp; All systems are operational</article>
+  <article class="good">✅ &nbsp; {config.i18n.allSystemsOperational}</article>
 {/if}
 
 <section>
@@ -57,18 +57,22 @@
     <Loading />
   {:else if incidents.length}
     {#each incidents as incident}
-      <h2>Active Incidents</h2>
+      <h2>{config.i18n.activeIncidents}</h2>
       <article class="down">
         <div class="f">
           <div>
             <h4>{incident.title.replace('🛑', '').replace('⚠️', '').trim()}</h4>
             <div>
-              Opened at {new Date(incident.created_at).toLocaleString()} with {incident.comments}
-              posts
+              {config.i18n.activeIncidentSummary
+                .replace(
+                  /\$DATE/g,
+                  new Date(incident.created_at).toLocaleString()
+                )
+                .replace(/\$POSTS/g, incident.comments)}
             </div>
           </div>
           <div class="f r">
-            <a href={`/${incident.number}`}>Incident report &rarr;</a>
+            <a href={`/${incident.number}`}>{config.i18n.incidentReport}</a>
           </div>
         </div>
       </article>

site/src/components/Incident.svelte

@@ -83,16 +83,16 @@
 </style>
 
 <svelte:head>
-  <title>Incident #{number} Details</title>
+  <title>{config.i18n.incidentTitle.replace('$NUMBER', number)}</title>
 </svelte:head>
 
 <h2>
   {#if loadingIncident}
-    Incident Details
+    {config.i18n.incidentDetails}
   {:else}
     {incident.title}
     <span class={incident.state}>
-      {incident.state === 'closed' ? 'Fixed' : 'Ongoing'}
+      {incident.state === 'closed' ? config.i18n.incidentFixed : config.i18n.incidentOngoing}
     </span>
   {/if}
 </h2>
@@ -103,10 +103,10 @@
   {:else}
     <div class="f">
       <dl>
-        <dt>Opened at</dt>
+        <dt>{config.i18n.incidentOpenedAt}</dt>
         <dd>{new Date(incident.created_at).toLocaleString()}</dd>
         {#if incident.closed_at}
-          <dt>Closed at</dt>
+          <dt>{config.i18n.incidentClosedAt}</dt>
           <dd>{new Date(incident.closed_at).toLocaleString()}</dd>
         {/if}
       </dl>
@@ -114,13 +114,13 @@
         <p>
           <a
             href={`https://github.com/${config.owner}/${config.repo}/issues/${number}`}>
-            Subscribe to Updates
+            {config.i18n.incidentSubscribe}
           </a>
         </p>
         <p>
           <a
             href={`https://github.com/${config.owner}/${config.repo}/issues/${number}`}>
-            View on GitHub
+            {config.i18n.incidentViewOnGitHub}
           </a>
         </p>
       </div>
@@ -131,12 +131,17 @@
           {@html md(comment.body)}
         </p>
         <div>
-          Posted at
-          <a href={comment.html_url}>
-            {new Date(comment.created_at).toLocaleString()}
-          </a>
-          by
-          <a href={comment.user.html_url}>@{comment.user.login}</a>
+          {@html config.i18n.incidentCommentSummary
+            .replace(
+              /\$DATE/,
+              `<a href=${comment.html_url}>${new Date(
+                comment.created_at
+              ).toLocaleString()}</a>`
+            )
+            .replace(
+              /\$AUTHOR/,
+              `<a href=${comment.user.html_url}>@${comment.user.login}</a>`
+            )}
         </div>
       </article>
     {/each}
@@ -144,5 +149,5 @@
 </section>
 
 <footer>
-  <a href="/">&larr; Back to all incidents</a>
+  <a href="/">{config.i18n.incidentBack}</a>
 </footer>

site/src/components/Incidents.svelte

@@ -35,7 +35,7 @@
   });
 </script>
 
-<h2>Past Incidents</h2>
+<h2>{config.i18n.pastIncidents}</h2>
 
 <section>
   {#if loading}
@@ -50,12 +50,20 @@
           <div>
             <h4>{incident.title.replace('🛑', '').replace('⚠️', '').trim()}</h4>
             <div>
-              Resolved in {((new Date(incident.closed_at).getTime() - new Date(incident.created_at).getTime()) / 60000).toFixed(0)}
-              minutes with {incident.comments} posts
+              {@html config.i18n.pastIncidentsResolved
+                .replace(
+                  /\$MINUTES/g,
+                  (
+                    (new Date(incident.closed_at).getTime() -
+                      new Date(incident.created_at).getTime()) /
+                    60000
+                  ).toFixed(0)
+                )
+                .replace(/\$POSTS/g, incident.comments)}
             </div>
           </div>
           <div class="f r">
-            <a href={`/${incident.number}`}>Incident report &rarr;</a>
+            <a href={`/${incident.number}`}>{config.i18n.incidentReport}</a>
           </div>
         </div>
       </article>

site/src/components/LiveStatus.svelte

@@ -36,7 +36,7 @@
   }
 </style>
 
-<h2>Live Status</h2>
+<h2>{config.i18n.liveStatus}</h2>
 <section>
   {#if loading}
     <Loading />
@@ -46,8 +46,12 @@
         class={site.status}
         style={`background-image: url("https://raw.githubusercontent.com/koj-co/upptime/master/graphs/${site.slug}.png`}>
         <h4>{site.name}</h4>
-        <div>Overall uptime: {site.uptime}%</div>
-        <div>Average response time: {site.time}ms</div>
+        <div>
+          {@html config.i18n.overallUptime.replace(/\$UPTIME/g, site.uptime)}
+        </div>
+        <div>
+          {@html config.i18n.averageResponseTime.replace(/\$TIME/g, site.time)}
+        </div>
       </article>
     {/each}
   {/if}

site/src/components/Loading.svelte

@@ -1,3 +1,7 @@
+<script>
+  import config from "../data/config.json";
+</script>
+
 <style>
   .loading {
     text-align: center;
@@ -9,7 +13,12 @@
 </style>
 
 <div class="loading">
-  <svg width="38" height="38" xmlns="http://www.w3.org/2000/svg" stroke="#aaa">
+  <svg
+    width="38"
+    height="38"
+    xmlns="http://www.w3.org/2000/svg"
+    stroke="#aaa"
+    title={config.loading}>
     <g fill="none" fill-rule="evenodd">
       <g transform="translate(1 1)" stroke-width="2">
         <circle stroke-opacity=".5" cx="18" cy="18" r="18" />

site/src/components/Nav.svelte

@@ -64,18 +64,20 @@
     <ul>
       <li>
         <a aria-current={segment === undefined ? 'page' : undefined} href="/">
-          Status
+          {config.i18n.navStatus}
         </a>
       </li>
       <li>
         <a
           aria-current={segment === 'about' ? 'page' : undefined}
           href="/about">
-          About
+          {config.i18n.navAbout}
         </a>
       </li>
       <li>
-        <a href={`https://github.com/${config.owner}/${config.repo}`}>GitHub</a>
+        <a href={`https://github.com/${config.owner}/${config.repo}`}>
+          {config.i18n.navGitHub}
+        </a>
       </li>
     </ul>
   </div>

site/src/routes/_layout.svelte

@@ -1,6 +1,7 @@
 <script>
   import Nav from "../components/Nav.svelte";
   import config from "../data/config.json";
+  import snarkdown from "snarkdown";
   export let segment;
 </script>
 
@@ -20,11 +21,6 @@
 
 <footer>
   <p>
-    This page is
-    <a href={`https://github.com/${config.owner}/${config.repo}`}>
-      open source
-    </a>
-    and powered by
-    <a href="https://upptime.js.org">Upptime</a>
+    {@html snarkdown(config.i18n.footer.replace(/\$REPO/, `https://github.com/${config.owner}/${config.repo}`))}
   </p>
 </footer>