@justdanielndev/status-page 1.17.0

package/src/components/Loading.svelte

@@ -0,0 +1,37 @@
+<script>
+  import config from "../data/config.json";
+</script>
+
+<style>
+  .loading {
+    text-align: center;
+    margin: 2.5rem 0;
+  }
+  svg {
+    zoom: 1.5;
+  }
+</style>
+
+<div class="loading">
+  <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" />
+        <path d="M36 18c0-9.94-8.06-18-18-18">
+          <animateTransform
+            attributeName="transform"
+            type="rotate"
+            from="0 18 18"
+            to="360 18 18"
+            dur="1s"
+            repeatCount="indefinite" />
+        </path>
+      </g>
+    </g>
+  </svg>
+</div>

package/src/components/Nav.svelte

@@ -0,0 +1,88 @@
+<script>
+  import config from "../data/config.json";
+  export let segment;
+</script>
+
+<nav>
+  <div class="container">
+    {#if config["status-website"] && config["status-website"].logoUrl}
+      <div>
+        <a href={config["status-website"].logoHref || config.path} class="logo">
+          {#if config["status-website"] && !config["status-website"].hideNavLogo}
+            <img alt="" src={config["status-website"].logoUrl} />
+          {/if}
+          {#if config["status-website"] && !config["status-website"].hideNavTitle}
+            <div>{config["status-website"].name}</div>
+          {/if}
+        </a>
+      </div>
+    {/if}
+    <ul>
+      {#if config["status-website"] && config["status-website"].navbar}
+        {#each config["status-website"].navbar as item}
+          <li>
+            <a
+              aria-current={segment === (item.href === "/" ? undefined : item.href)
+                ? "page"
+                : undefined}
+              href={item.href.replace("$OWNER", config.owner).replace("$REPO", config.repo)}
+              target={item.target || "_self"}>
+              {item.title}
+            </a>
+          </li>
+        {/each}
+      {/if}
+      {#if config["status-website"] && config["status-website"].navbarGitHub && !config["status-website"].navbar}
+        <li>
+          <a href={`https://github.com/${config.owner}/${config.repo}`}>
+            {config.i18n.navGitHub}
+          </a>
+        </li>
+      {/if}
+    </ul>
+  </div>
+</nav>
+
+<style>
+  nav {
+    font-weight: 300;
+    padding: 0 1em;
+    margin-bottom: 2rem;
+    white-space: nowrap;
+    overflow-x: auto;
+  }
+
+  ul {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    list-style: none;
+    align-items: center;
+    justify-content: center;
+  }
+
+  a {
+    text-decoration: none;
+    padding: 1.5rem 2rem;
+    display: block;
+  }
+
+  .logo {
+    float: left;
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 0;
+    font-weight: bold;
+    margin-right: 2rem;
+  }
+  .logo img {
+    margin-right: 1rem;
+    height: 3rem;
+    border-radius: 0.2rem;
+  }
+  .container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+</style>

package/src/components/Scheduled.svelte

@@ -0,0 +1,72 @@
+<script>
+  import Loading from "../components/Loading.svelte";
+  import { onMount } from "svelte";
+  import config from "../data/config.json";
+  import { cachedResponse, createOctokit, handleError } from "../utils/createOctokit";
+
+  let loading = true;
+  const octokit = createOctokit();
+  const owner = config.owner;
+  const repo = config.repo;
+  let incidents = [];
+
+  onMount(async () => {
+    try {
+      incidents = (
+        await cachedResponse(`maintenance-issues-${owner}-${repo}`, () =>
+          octokit.issues.listForRepo({
+            owner,
+            repo,
+            state: "closed",
+            filter: "all",
+            sort: "created",
+            direction: "desc",
+            labels: "maintenance",
+          })
+        )
+      ).data;
+    } catch (error) {
+      handleError(error);
+    }
+    incidents = incidents.map((incident, index) => {
+      incident.showHeading =
+        index === 0 ||
+        new Date(incidents[index - 1].created_at).toLocaleDateString() !==
+          new Date(incident.created_at).toLocaleDateString();
+      return incident;
+    });
+    loading = false;
+  });
+</script>
+
+<section>
+  {#if loading}
+    <Loading />
+  {:else if incidents.length}
+    <h2>{config.i18n.pastScheduledMaintenance}</h2>
+    {#each incidents as incident}
+      {#if incident.showHeading}
+        <h3>{new Date(incident.created_at).toLocaleDateString(config.i18n.locale)}</h3>
+      {/if}
+      <article class="link degraded">
+        <div class="f">
+          <div>
+            <h4>{incident.title.replace("🛑", "").replace("⚠️", "").trim()}</h4>
+            <div>Completed</div>
+          </div>
+          <div class="f r">
+            <a href={`${config.path}/incident/${incident.number}`}>
+              {config.i18n.incidentReport.replace(/\$NUMBER/g, incident.number)}
+            </a>
+          </div>
+        </div>
+      </article>
+    {/each}
+  {/if}
+</section>
+
+<style>
+  h2 {
+    margin-top: 2rem;
+  }
+</style>

package/src/components/Summary.svelte

@@ -0,0 +1,54 @@
+<script>
+  import Loading from "../components/Loading.svelte";
+  import { onMount } from "svelte";
+  import config from "../data/config.json";
+  import { handleError } from "../utils/createOctokit";
+
+  export let slug;
+  let loading = true;
+
+  let { apiBaseUrl,userContentBaseUrl } = config["status-website"] || {};
+  if (!apiBaseUrl) apiBaseUrl = "https://api.github.com";
+  if (!userContentBaseUrl)  userContentBaseUrl = "https://raw.githubusercontent.com";
+
+  const owner = config.owner;
+  const repo = config.repo;
+  let summary = null;
+
+  onMount(async () => {
+    try {
+      const res = await fetch(`${userContentBaseUrl}/${owner}/${repo}/master/history/summary.json`);
+      summary = (await res.json()).find((item) => item.slug === slug);
+    } catch (error) {
+      handleError(error);
+    }
+    loading = false;
+  });
+</script>
+
+<style>
+  .no-underline {
+    text-decoration: none;
+  }
+</style>
+
+<section>
+  {#if loading}
+    <Loading />
+  {:else if summary}
+    <h1>
+      <a class="no-underline" href={summary.url.startsWith('$') ? '#' : summary.url}>{summary.name}</a>
+      <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>
+      {#if summary.showAverageResponseTime === undefined || summary.showAverageResponseTime}
+        <dt>{config.i18n.averageResponseTimeTitle}</dt>
+        <dd>{summary.time}{config.i18n.ms}</dd>
+      {/if}
+    </dl>
+  {/if}
+</section>

package/src/routes/_error.svelte

@@ -0,0 +1,41 @@
+<script>
+  export let status;
+  export let error;
+
+  const dev = process.env.NODE_ENV === "development";
+</script>
+
+<style>
+  h1,
+  p {
+    margin: 0 auto;
+  }
+
+  h1 {
+    font-size: 2.8em;
+    font-weight: 700;
+    margin: 0 0 0.5em 0;
+  }
+
+  p {
+    margin: 1em auto;
+  }
+
+  @media (min-width: 480px) {
+    h1 {
+      font-size: 4em;
+    }
+  }
+</style>
+
+<svelte:head>
+  <title>{status}</title>
+</svelte:head>
+
+<h1>{status}</h1>
+
+<p>{error.message}</p>
+
+{#if dev && error.stack}
+  <pre>{error.stack}</pre>
+{/if}

package/src/routes/_layout.svelte

@@ -0,0 +1,110 @@
+<script>
+  import Nav from "../components/Nav.svelte";
+  import config from "../data/config.json";
+  import snarkdown from "snarkdown";
+  export let segment;
+</script>
+
+<svelte:head>
+  {#if (config["status-website"] || {}).customHeadHtml}
+    {@html (config["status-website"] || {}).customHeadHtml}
+  {/if}
+  {#if (config["status-website"] || {}).themeUrl}
+    <link rel="stylesheet" href={(config["status-website"] || {}).themeUrl} />
+  {:else if (config["status-website"] || {}).theme}
+    <link
+      rel="stylesheet"
+      href={`${config.path}/themes/${config["status-website"].theme}.css`}
+    />
+  {:else}
+    <!-- https://caniuse.com/prefers-color-scheme -->
+    <!-- https://web.dev/prefers-color-scheme/ -->
+    <script>
+      // If `prefers-color-scheme` is not supported, fall back to light mode.
+      // In this case, light.css will be downloaded with `highest` priority.
+      if (typeof window !== "undefined" && typeof document !== "undefined" && "matchMedia" in window && window.matchMedia('(prefers-color-scheme: dark)').media === 'not all') {
+        document.documentElement.style.display = 'none';
+        document.head.insertAdjacentHTML(
+          'beforeend',
+          '<link rel="stylesheet" href={`${config.path}/themes/light.css`} onload="document.documentElement.style.display = \'\'">',
+        );
+      }
+    </script>
+    <link
+      rel="stylesheet"
+      href={`${config.path}/themes/light.css`}
+      media="(prefers-color-scheme: light)"
+    />
+    <link
+      rel="stylesheet"
+      href={`${config.path}/themes/dark.css`}
+      media="(prefers-color-scheme: dark)"
+    />
+  {/if}
+  <link rel="stylesheet" href={`${config.path}/global.css`} />
+  <link
+    rel="icon"
+    type="image/svg"
+    href={(config["status-website"] || {}).faviconSvg ||
+      (config["status-website"] || {}).favicon ||
+      `https://raw.githubusercontent.com/upptime/upptime/master/assets/upptime-icon.svg`}
+  />
+  <link
+    rel="icon"
+    type="image/png"
+    href={(config["status-website"] || {}).favicon || `/logo-192.png`}
+  />
+  {#if (config["status-website"] || {}).scripts}
+    {#each (config["status-website"] || {}).scripts as script}<script
+        src={script.src}
+        async={!!script.async}
+        defer={!!script.async}>
+      </script>{/each}
+  {/if}
+  {#if (config["status-website"] || {}).links}
+    {#each (config["status-website"] || {}).links as link}
+      <link rel={link.rel} href={link.href} media={link.media} />
+    {/each}
+  {/if}
+  {#if (config["status-website"] || {}).metaTags}
+    {#each (config["status-website"] || {}).metaTags as link}
+      <meta name={link.name} content={link.content} />
+    {/each}
+  {/if}
+  {#if config['status-website'].css}
+    {@html `<style>${config['status-website'].css}</style>`}
+  {/if}
+  {#if config['status-website'].js}
+    {@html `<script>${config['status-website'].js}</script>`}
+  {/if}
+</svelte:head>
+
+{#if (config["status-website"] || {}).customBodyHtml}
+  {@html (config["status-website"] || {}).customBodyHtml}
+{/if}
+
+<Nav {segment} />
+
+<main class="container">
+  <slot />
+</main>
+
+<footer>
+  <p>
+    {@html snarkdown(
+      config.i18n.footer.replace(/\$REPO/, `https://github.com/${config.owner}/${config.repo}`)
+    )}
+  </p>
+</footer>
+
+<style>
+  footer {
+    text-align: center;
+    opacity: 0.75;
+    margin-top: 3rem;
+  }
+</style>
+
+{#if (config["status-website"] || {}).customFootHtml}
+  {@html (config["status-website"] || {}).customFootHtml}
+{/if}

package/src/routes/error.svelte

@@ -0,0 +1,27 @@
+<script>
+  import config from "../data/config.json";
+</script>
+
+<svelte:head>
+  <title>{config.i18n.errorTitle}</title>
+</svelte:head>
+
+<h1>{config.i18n.errorTitle}</h1>
+
+<p class="lead">{config.i18n.errorIntro}</p>
+
+<p>{config.i18n.errorText}</p>
+
+<a href={config.path} class="error-button">{config.i18n.errorHome}</a>
+
+<style>
+  p.lead {
+    font-size: 110%;
+  }
+  a.error-button {
+    font: inherit;
+    padding: 0.5rem 1rem;
+    border-radius: 0.2rem;
+    text-decoration: none;
+  }
+</style>

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

@@ -0,0 +1,17 @@
+<script context="module">
+  export async function preload(page) {
+    const { number } = page.params;
+    return { slug: number };
+  }
+</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} />

package/src/routes/incident/[number].svelte

@@ -0,0 +1,13 @@
+<script context="module">
+  export async function preload(page) {
+    const { number } = page.params;
+    return { number };
+  }
+</script>
+
+<script>
+  import Incident from "../../components/Incident.svelte";
+  export let number;
+</script>
+
+<Incident {number} />

package/src/routes/index.svelte

@@ -0,0 +1,48 @@
+<script>
+  import snarkdown from "snarkdown";
+  import ActiveIncidents from "../components/ActiveIncidents.svelte";
+  import ActiveScheduled from "../components/ActiveScheduled.svelte";
+  import Incidents from "../components/Incidents.svelte";
+  import LiveStatus from "../components/LiveStatus.svelte";
+  import Scheduled from "../components/Scheduled.svelte";
+  import config from "../data/config.json";
+
+  let title = "Status";
+  try {
+    title = config["status-website"].name;
+  } catch (error) {}
+</script>
+
+<svelte:head>
+  <title>{title}</title>
+</svelte:head>
+
+<header>
+  {#if config["status-website"]}
+    {#if config["status-website"].introTitle}
+      <h1>
+        {@html snarkdown(config["status-website"].introTitle)}
+      </h1>
+    {/if}
+    {#if config["status-website"].introMessage}
+      <p class="lead">
+        {@html snarkdown(config["status-website"].introMessage)}
+      </p>
+    {/if}
+  {/if}
+</header>
+
+<ActiveIncidents />
+<ActiveScheduled />
+<LiveStatus />
+<Scheduled />
+<Incidents />
+
+<style>
+  p.lead {
+    font-size: 110%;
+  }
+  header {
+    margin-bottom: 2rem;
+  }
+</style>

package/src/routes/rate-limit-exceeded.svelte

@@ -0,0 +1,88 @@
+<script>
+  import { onMount } from "svelte";
+  import { goto } from "@sapper/app";
+  import config from "../data/config.json";
+
+  let token = "";
+  let localStorageToken = false;
+  const save = () => {
+    if (typeof window !== "undefined" && "localStorage" in window)
+      window.localStorage.setItem("personal-access-token", token);
+    goto(config.path);
+  };
+  const remove = () => {
+    token = "";
+    localStorageToken = false;
+    if (typeof window !== "undefined" && "localStorage" in window)
+      window.localStorage.removeItem("personal-access-token");
+  };
+  onMount(() => {
+    if (
+      typeof window !== "undefined" &&
+      "localStorage" in window &&
+      localStorage.getItem("personal-access-token")
+    )
+      localStorageToken = true;
+  });
+</script>
+
+<svelte:head>
+  <title>{config.i18n.rateLimitExceededTitle}</title>
+</svelte:head>
+
+<h1>{config.i18n.rateLimitExceededTitle}</h1>
+
+<p class="lead">{config.i18n.rateLimitExceededIntro}</p>
+
+<h2>{config.i18n.rateLimitExceededWhatDoesErrorMean}</h2>
+
+<p>{config.i18n.rateLimitExceededErrorMeaning}</p>
+
+<h2>{config.i18n.rateLimitExceededErrorHowCanFix}</h2>
+
+<p>
+  {config.i18n.rateLimitExceededErrorFix}
+  <a
+    href="https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token"
+    target="_blank">{config.i18n.rateLimitExceededGeneratePAT}</a
+  >
+</p>
+
+{#if localStorageToken}
+  <p>{config.i18n.rateLimitExceededHasSet}</p>
+  <button on:click={remove}>{config.i18n.rateLimitExceededRemoveToken}</button>
+{:else}
+  <form on:submit|preventDefault={save}>
+    <label>
+      <span>{config.i18n.rateLimitExceededGitHubPAT}</span>
+      <input
+        type="text"
+        bind:value={token}
+        placeholder={config.i18n.rateLimitExceededCopyPastePAT}
+      />
+    </label>
+    <button class="submit-button" type="submit">{config.i18n.rateLimitExceededSaveToken}</button>
+  </form>
+{/if}
+
+<style>
+  p.lead {
+    font-size: 110%;
+  }
+  label span {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+  input,
+  button {
+    font: inherit;
+    padding: 0.5rem 1rem;
+    border: 0.1rem solid rgba(0, 0, 0, 0.25);
+    border-radius: 0.2rem;
+  }
+  input {
+    width: 15rem;
+    max-width: 100%;
+  }
+</style>

package/src/server.js

@@ -0,0 +1,25 @@
+import * as sapper from "@sapper/server";
+import compression from "compression";
+import fs from "fs-extra";
+import polka from "polka";
+import sirv from "sirv";
+import { load } from "js-yaml";
+import { join } from "path";
+
+const { PORT, NODE_ENV } = process.env;
+const dev = NODE_ENV === "development";
+
+let config
+if(fs.existsSync(join("..", ".uclirc.yml"))){
+  config = load(fs.readFileSync(join("..", ".uclirc.yml"), "utf8"));
+}else{
+  config = load(fs.readFileSync(join("..", ".upptimerc.yml"), "utf8"));
+}
+
+const baseUrl = (config["status-website"] || {}).baseUrl || "/";
+
+polka()
+  .use(baseUrl, compression({ threshold: 0 }), sirv("static", { dev }), sapper.middleware())
+  .listen(PORT, (err) => {
+    if (err) console.log("error", err);
+  });

package/src/service-worker.js

@@ -0,0 +1,15 @@
+self.addEventListener("install", function () {
+  self.skipWaiting();
+});
+
+self.addEventListener("activate", function () {
+  self.registration
+    .unregister()
+    .then(function () {
+      return self.clients.matchAll();
+    })
+    .then(function (clients) {
+      clients.forEach((client) => client.navigate(client.url));
+    })
+    .catch(function () {});
+});

package/src/template.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <meta name="theme-color" content="#333333" />
+    %sapper.base%
+    <link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
+    %sapper.scripts% %sapper.styles% %sapper.head%
+  </head>
+  <body>
+    <div id="sapper">%sapper.html%</div>
+    <script>
+      try {
+        if (typeof window !== "undefined" && window.navigator && navigator.serviceWorker) {
+          navigator.serviceWorker.getRegistrations().then(function (registrations) {
+            for (let registration of registrations) {
+              registration.unregister();
+            }
+          });
+        }
+        if (typeof window !== "undefined" && "caches" in window) {
+          caches.keys().then(function (keyList) {
+            return Promise.all(
+              keyList.map(function (key) {
+                return caches.delete(key);
+              })
+            );
+          });
+        }
+      } catch (error) {}
+    </script>
+  </body>
+</html>