✨ Add summary component

site/i18n.yml

@@ -16,9 +16,14 @@ pastIncidents: Past Incidents
 pastIncidentsResolved: Resolved in $MINUTES minuted with $POSTS posts
 liveStatus: Live Status
 overallUptime: Overall uptime $UPTIME%
+overallUptimeTitle: Overall uptime
 averageResponseTime: Average response time $TIMEms
+averageResponseTimeTitle: Average response
 sevelDayResponseTime: 7-day response time
 responseTimeMs: Response time (ms)
+up: Up
+down: Down
+ms: ms
 loading: Loading
 navStatus: Status
 navGitHub: GitHub

site/src/components/Incident.svelte

@@ -45,38 +45,12 @@
   footer {
     margin-top: 2rem;
   }
-  dl {
-    margin-bottom: 1.5rem;
-  }
-  dl dt {
-    font-weight: bold;
-  }
-  dl dd {
-    margin: 0 0 1rem 0;
-  }
   p {
     margin-top: 0;
   }
   h2 {
     line-height: 1;
   }
-  .closed {
-    background-color: #16a085;
-  }
-  .open {
-    background-color: #c0392b;
-  }
-  .closed,
-  .open {
-    display: inline-block;
-    color: #fff;
-    padding: 0.33rem 0.5rem;
-    border-radius: 0.2rem;
-    font-size: 70%;
-    vertical-align: middle;
-    margin-top: -0.2rem;
-    margin-left: 0.5rem;
-  }
   .r {
     text-align: right;
   }
@@ -91,7 +65,7 @@
     {config.i18n.incidentDetails}
   {:else}
     {incident.title}
-    <span class={incident.state}>
+    <span class={`tag ${incident.state}`}>
       {incident.state === 'closed' ? config.i18n.incidentFixed : config.i18n.incidentOngoing}
     </span>
   {/if}

site/src/components/Summary.svelte

@@ -0,0 +1,53 @@
+<script>
+  import Loading from "../components/Loading.svelte";
+  import { Octokit } from "@octokit/rest";
+  import { onMount } from "svelte";
+  import config from "../data/config.json";
+
+  export let slug;
+  let loading = true;
+  const octokit = new Octokit({
+    userAgent: config["user-agent"],
+  });
+  const owner = config.owner;
+  const repo = config.repo;
+  let summary = null;
+
+  onMount(async () => {
+    summary = JSON.parse(
+      atob(
+        (
+          await octokit.repos.getContent({
+            owner,
+            repo,
+            path: "history/summary.json",
+          })
+        ).data.content
+      )
+    ).find((item) => item.slug === slug);
+    loading = false;
+  });
+</script>
+
+<style>
+
+</style>
+
+<section>
+  {#if loading}
+    <Loading />
+  {:else if summary}
+    <h1>
+      {summary.name}
+      <span class={`tag ${summary.status}`}>
+        {summary.status === 'up' ? config.i18n.up : config.i18n.down}
+      </span>
+    </h1>
+    <dl>
+      <dt>{config.i18n.overallUptimeTitle}</dt>
+      <dd>{summary.uptime}%</dd>
+      <dt>{config.i18n.averageResponseTimeTitle}</dt>
+      <dd>{summary.time}{config.i18n.ms}</dd>
+    </dl>
+  {/if}
+</section>

site/src/routes/history/[number].svelte

@@ -6,10 +6,12 @@
 </script>
 
 <script>
+  import Summary from "../../components/Summary.svelte";
   import History from "../../components/History.svelte";
   import Graph from "../../components/Graph.svelte";
   export let slug;
 </script>
 
+<Summary {slug} />
 <Graph {slug} />
 <History {slug} />

site/static/global.css

@@ -91,3 +91,32 @@ article.up {
 section + h2 {
   margin-top: 2rem;
 }
+
+.tag.closed,
+.tag.up {
+  background-color: #16a085;
+}
+.tag.open,
+.tag.down {
+  background-color: #c0392b;
+}
+.tag {
+  display: inline-block;
+  color: #fff;
+  padding: 0.33rem 0.5rem;
+  border-radius: 0.2rem;
+  font-size: 70%;
+  vertical-align: middle;
+  margin-top: -0.2rem;
+  margin-left: 0.5rem;
+}
+
+dl {
+  margin-bottom: 1.5rem;
+}
+dl dt {
+  font-weight: bold;
+}
+dl dd {
+  margin: 0 0 1rem 0;
+}