✨ Add support for site heading

.statusrc.yml

@@ -17,5 +17,5 @@ status-website:
   cname: up.js.org
   logoUrl: https://avatars3.githubusercontent.com/u/65495851?s=88&v=4
   name: Koj Status
-  introTitle: Up.js is the open-source uptime monitor and status page, powered entirely by GitHub.
-  introMessage: This is a sample status page which uses **real-time** data from our [Github repository](https://github.com/koj-co/up.js).
+  introTitle: "**Up.js** is the open-source uptime monitor and status page, powered entirely by GitHub."
+  introMessage: This is a sample status page which uses **real-time** data from our [Github repository](https://github.com/koj-co/up.js). Literally, no server required, it's just GitHub Actions, Issues, and Pages.

site/src/routes/index.svelte

@@ -2,11 +2,32 @@
   import ActiveIncidents from "../components/ActiveIncidents.svelte";
   import Incidents from "../components/Incidents.svelte";
   import config from "../data/config.json";
+  import snarkdown from "snarkdown";
 </script>
 
+<style>
+  p.lead {
+    font-size: 110%;
+  }
+  header {
+    margin-bottom: 2rem;
+  }
+</style>
+
 <svelte:head>
   <title>Koj Status</title>
 </svelte:head>
-{JSON.stringify(config)}
+
+<header>
+  {#if config['status-website']}
+    <h1>
+      {@html snarkdown(config['status-website'].introTitle)}
+    </h1>
+    <p class="lead">
+      {@html snarkdown(config['status-website'].introMessage)}
+    </p>
+  {/if}
+</header>
+
 <ActiveIncidents />
 <Incidents />