Monitors now have their dedicated page

src/routes/monitor-[tag]/+page.server.js

@@ -0,0 +1,31 @@
+// @ts-nocheck
+import { GetIncidents, Mapper } from "../../../scripts/github.js";
+import { FetchData } from "$lib/server/page";
+import { env } from "$env/dynamic/public";
+import fs from "fs-extra";
+
+export async function load({ params, route, url, parent }) {
+	let monitors = JSON.parse(fs.readFileSync(env.PUBLIC_KENER_FOLDER + '/monitors.json', "utf8"));
+    const parentData = await parent();
+    const siteData = parentData.site;
+    const github = siteData.github;
+    const monitorsActive = [];
+	for (let i = 0; i < monitors.length; i++) {
+		 
+		//only return monitors that have category as home or category is not present
+		if (monitors[i].tag !== params.tag) {
+			continue;
+		}
+       	const gitHubActiveIssues = await GetIncidents(monitors[i].tag, github, "open");
+		delete monitors[i].api;
+		delete monitors[i].defaultStatus;
+		let data = await FetchData(monitors[i], parentData.localTz);
+		monitors[i].pageData = data;
+		monitors[i].activeIncidents = await Promise.all(gitHubActiveIssues.map(Mapper, { github }));
+		monitorsActive.push(monitors[i]);
+	}
+
+    return {
+        monitors: monitorsActive,
+    };
+}

src/routes/monitor-[tag]/+page.svelte

@@ -0,0 +1,76 @@
+<script>
+    import Monitor from "$lib/components/monitor.svelte";
+    import * as Card from "$lib/components/ui/card";
+    import Incident from "$lib/components/incident.svelte";
+    import { Separator } from "$lib/components/ui/separator";
+    import { Badge } from "$lib/components/ui/badge";
+    import { page } from "$app/stores";
+    export let data;
+
+    // let category = data.site.categories.find((c) => c.name === $page.params.category);
+    let hasActiveIncidents = false;
+    for (let i = 0; i < data.monitors.length; i++) {
+        if (data.monitors[i].activeIncidents.length > 0) {
+            hasActiveIncidents = true;
+            break;
+        }
+    }
+</script>
+<div class="mt-32"></div>
+{#if hasActiveIncidents}
+<section class="mx-auto bg-transparent mb-4 flex w-full max-w-[890px] flex-1 flex-col items-start justify-center" id="">
+    <div class="grid w-full grid-cols-2 gap-4">
+        <div class="col-span-2 md:col-span-1 text-center md:text-left">
+            <Badge variant="outline">Ongoing Incidents </Badge>
+        </div>
+    </div>
+</section>
+<section class="mx-auto backdrop-blur-[2px] mb-8 flex w-full max-w-[890px] flex-1 flex-col items-start justify-center" id="">
+    {#each data.monitors as monitor} {#each monitor.activeIncidents as incident, i}
+    <Incident {incident} state="close" variant="title+body+comments+monitor" monitor="{monitor}" />
+    {/each} {/each}
+</section>
+{/if} {#if data.monitors.length > 0}
+<section class="mx-auto bg-transparent mb-4 flex w-full max-w-[890px] flex-1 flex-col items-start justify-center" id="">
+    <div class="grid w-full grid-cols-2 gap-4">
+        <div class="col-span-2 md:col-span-1 text-center md:text-left">
+            <Badge class="" variant="outline"> Availability per Component </Badge>
+        </div>
+        <div class="col-span-2 md:col-span-1 text-center md:text-right">
+            <Badge variant="outline">
+                <span class="w-[8px] h-[8px] inline-flex rounded-full bg-api-up opacity-75 mr-1"></span>
+                <span class="mr-3">UP</span>
+
+                <span class="w-[8px] h-[8px] inline-flex rounded-full bg-api-degraded opacity-75 mr-1"></span>
+                <span class="mr-3">DEGRADED</span>
+
+                <span class="w-[8px] h-[8px] inline-flex rounded-full bg-api-down opacity-75 mr-1"></span>
+                <span class="mr-3">DOWN</span>
+            </Badge>
+        </div>
+    </div>
+</section>
+<section class="mx-auto backdrop-blur-[2px] mb-8 flex w-full max-w-[890px] flex-1 flex-col items-start justify-center">
+    <Card.Root class="w-full">
+        <Card.Content class="p-0 monitors-card">
+            {#each data.monitors as monitor}
+            <Monitor {monitor} localTz="{data.localTz}" />
+            {/each}
+        </Card.Content>
+    </Card.Root>
+</section>
+{:else}
+<section class="mx-auto bg-transparent mb-4 flex w-full max-w-[890px] flex-1 flex-col items-start justify-center" id="">
+    <Card.Root class="mx-auto">
+        <Card.Content class="pt-4">
+            <h1 class="scroll-m-20 text-2xl font-extrabold tracking-tight lg:text-2xl text-center">
+				No Monitor Found.
+			</h1>
+			<p class="mt-3 text-center">
+				Please read the documentation on how to add monitors 
+				<a href="https://kener.ing/docs#h1add-monitors" target="_blank" class="underline">here</a>.
+			</p>
+        </Card.Content>
+    </Card.Root>
+</section>
+{/if}