@justdanielndev/status-page 1.17.0

package/src/components/ActiveScheduled.svelte

@@ -0,0 +1,96 @@
+<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(`scheduled-current-${owner}-${repo}`, () =>
+          octokit.issues.listForRepo({
+            owner,
+            repo,
+            state: "open",
+            filter: "all",
+            sort: "created",
+            direction: "desc",
+            labels: "maintenance",
+          })
+        )
+      ).data;
+      incidents = incidents.map((incident, index) => {
+        incident.showHeading =
+          index === 0 ||
+          new Date(incidents[index - 1].created_at).toLocaleDateString() !==
+            new Date(incident.created_at).toLocaleDateString();
+        incident.metadata = {};
+        if (incident.body.includes("<!--")) {
+          const summary = incident.body.split("<!--")[1].split("-->")[0];
+          const lines = summary
+            .split("\n")
+            .filter((i) => i.trim())
+            .filter((i) => i.includes(":"));
+          lines.forEach((i) => {
+            incident.metadata[i.split(/:(.+)/)[0].trim()] = i.split(/:(.+)/)[1].trim();
+          });
+        }
+        return incident;
+      });
+    } catch (error) {
+      handleError(error);
+    }
+    loading = false;
+  });
+</script>
+
+<section>
+  {#if loading}
+    <Loading />
+  {:else if incidents.length}
+    <h2>{config.i18n.scheduledMaintenance}</h2>
+    {#each incidents as incident}
+      <article class="degraded degraded-active link">
+        <div class="f">
+          <div>
+            <h4>{incident.title.replace("🛑", "").replace("⚠️", "").trim()}</h4>
+            {#if incident.metadata.start && incident.metadata.end}
+              <div>
+                {(new Date(incident.metadata.start).getTime() < new Date().getTime()
+                  ? config.i18n.scheduledMaintenanceSummaryStarted
+                  : config.i18n.scheduledMaintenanceSummaryStarts
+                )
+                  .replace(/\$DATE/g, new Date(incident.metadata.start).toLocaleString(config.i18n.locale))
+                  .replace(
+                    /\$DURATION/g,
+                    Math.floor(
+                      (new Date(incident.metadata.end).getTime() -
+                        new Date(incident.metadata.start).getTime()) /
+                        60000
+                    )
+                  )}
+              </div>
+            {/if}
+          </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>
+  section {
+    margin-bottom: 2rem;
+  }
+</style>

package/src/components/Graph.svelte

@@ -0,0 +1,76 @@
+<script>
+  import Loading from "../components/Loading.svelte";
+  import { onMount } from "svelte";
+  import config from "../data/config.json";
+  import Line from "svelte-chartjs/src/Line.svelte";
+  import { cachedResponse, createOctokit, handleError } from "../utils/createOctokit";
+
+  export let slug;
+  let loading = true;
+  const octokit = createOctokit();
+  const owner = config.owner;
+  const repo = config.repo;
+  let commits = [];
+  let labels = [];
+  let data = [];
+  let width = 800;
+
+  onMount(async () => {
+    try {
+      commits = (
+        await cachedResponse(`commits-${owner}-${repo}-${slug}`, () =>
+          octokit.repos.listCommits({
+            owner,
+            repo,
+            path: `history/${slug}.yml`,
+            per_page: 28,
+          })
+        )
+      ).data.reverse();
+    } catch (error) {
+      handleError(error);
+    }
+    commits = commits.map((commit, index) => {
+      commit.showHeading =
+        index === 0 ||
+        new Date(commits[index - 1].created_at).toLocaleDateString() !==
+          new Date(commit.created_at).toLocaleDateString();
+      return commit;
+    });
+    data = commits
+      .filter((commit) => commit.commit.message.includes("ms) [skip ci]"))
+      .map((commit) => parseInt(commit.commit.message.split(" in ")[1].split("ms")[0]));
+    labels = commits
+      .filter((commit) => commit.commit.message.includes("ms) [skip ci]"))
+      .map((commit) => new Date(commit.commit.committer.date).toLocaleString(config.i18n.locale));
+    loading = false;
+  });
+</script>
+
+<section bind:clientWidth={width}>
+  {#if loading}
+    <Loading />
+  {:else if data.length}
+    <h2>{config.i18n.sevelDayResponseTime}</h2>
+    <Line
+      data={{
+        labels,
+        datasets: [
+          {
+            label: config.i18n.responseTimeMs,
+            backgroundColor: config.graphBackgroundColor || "#89e0cf",
+            borderColor: config.graphBorderColor || "#1abc9c",
+            data,
+          },
+        ],
+      }}
+      {width}
+      height={400}
+      options={{
+        responsive: true,
+        maintainAspectRatio: true,
+        scales: { xAxes: [{ display: false, gridLines: { display: false } }] },
+      }}
+    />
+  {/if}
+</section>

package/src/components/History.svelte

@@ -0,0 +1,84 @@
+<script>
+  import Loading from "../components/Loading.svelte";
+  import { onMount } from "svelte";
+  import config from "../data/config.json";
+  import { cachedResponse, createOctokit, handleError } from "../utils/createOctokit";
+
+  export let slug;
+  let loading = true;
+  const octokit = createOctokit();
+  const owner = config.owner;
+  const repo = config.repo;
+  let incidents = [];
+
+  onMount(async () => {
+    try {
+      incidents = (
+        await cachedResponse(`closed-issues-${owner}-${repo}-${slug}`, () =>
+          octokit.issues.listForRepo({
+            owner,
+            repo,
+            state: "closed",
+            filter: "all",
+            sort: "created",
+            direction: "desc",
+            labels: `status,${slug}`,
+          })
+        )
+      ).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>
+
+<style>
+  h2 {
+    margin-top: 2rem;
+  }
+</style>
+
+<section>
+  {#if loading}
+    <Loading />
+  {:else if incidents.length}
+    <h2>{config.i18n.pastIncidents}</h2>
+    {#each incidents as incident}
+      {#if incident.showHeading}
+        <h3>{new Date(incident.created_at).toLocaleDateString(config.i18n.locale)}</h3>
+      {/if}
+      <article class="down link {incident.title.includes('degraded') ? 'degraded' : ''}">
+        <div class="f">
+          <div>
+            <h4>{incident.title.replace('🛑', '').replace('⚠️', '').trim()}</h4>
+            <div>
+              {@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={`${config.path}/incident/${incident.number}`}>
+              {config.i18n.incidentReport.replace(/\$NUMBER/g, incident.number)}
+            </a>
+          </div>
+        </div>
+      </article>
+    {/each}
+  {/if}
+</section>

package/src/components/Incident.svelte

@@ -0,0 +1,161 @@
+<script>
+  import Loading from "../components/Loading.svelte";
+  import { onMount } from "svelte";
+  import snarkdown from "snarkdown";
+  import config from "../data/config.json";
+  import { cachedResponse, createOctokit, handleError } from "../utils/createOctokit";
+
+  export let number;
+
+  let md = snarkdown;
+  let loading = true;
+  let loadingIncident = true;
+
+  const octokit = createOctokit();
+  const owner = config.owner;
+  const repo = config.repo;
+  let comments = [];
+  let incident = {};
+
+  onMount(async () => {
+    try {
+      incident = (
+        await cachedResponse(`issue-${owner}-${repo}-${number}`, () =>
+          octokit.issues.get({
+            owner,
+            repo,
+            issue_number: number,
+            sort: "created",
+            direction: "desc",
+          })
+        )
+      ).data;
+      incident.metadata = {};
+      if (incident.body.includes("<!--")) {
+        const summary = incident.body.split("<!--")[1].split("-->")[0];
+        const lines = summary
+          .split("\n")
+          .filter((i) => i.trim())
+          .filter((i) => i.includes(":"));
+        lines.forEach((i) => {
+          incident.metadata[i.split(/:(.+)/)[0].trim()] = i.split(/:(.+)/)[1].trim();
+        });
+      }
+    } catch (error) {
+      handleError(error);
+    }
+    loadingIncident = false;
+    try {
+      comments = (
+        await cachedResponse(`issue-comments-${owner}-${repo}-${number}`, () =>
+          octokit.issues.listComments({
+            owner,
+            repo,
+            issue_number: number,
+          })
+        )
+      ).data.reverse();
+    } catch (error) {
+      handleError(error);
+    }
+    loading = false;
+  });
+</script>
+
+<svelte:head>
+  <title>{config.i18n.incidentTitle.replace("$NUMBER", number)}</title>
+</svelte:head>
+
+<h2>
+  {#if loadingIncident}
+    {config.i18n.incidentDetails}
+  {:else}
+    {incident.title}
+    <span class={`tag ${incident.state}`}>
+      {incident.state === "closed"
+        ? incident.metadata.start
+          ? config.i18n.incidentCompleted
+          : config.i18n.incidentFixed
+        : incident.metadata.start
+        ? config.i18n.incidentScheduled
+        : config.i18n.incidentOngoing}
+    </span>
+  {/if}
+</h2>
+
+<section>
+  {#if loading}
+    <Loading />
+  {:else}
+    <div class="f">
+      <dl>
+        {#if incident.metadata.start}
+          <dt>
+            {new Date(incident.metadata.start).getTime() < new Date().getTime()
+              ? config.i18n.startedAt
+              : config.i18n.startsAt}
+          </dt>
+          <dd>{new Date(incident.metadata.start).toLocaleString(config.i18n.locale)}</dd>
+        {:else}
+          <dt>{config.i18n.incidentOpenedAt}</dt>
+          <dd>{new Date(incident.created_at).toLocaleString(config.i18n.locale)}</dd>
+        {/if}
+        {#if incident.metadata.start && incident.metadata.end}
+          <dt>{config.i18n.duration}</dt>
+          <dd>
+            {config.i18n.durationMin.replace(
+              /\$DURATION/g,
+              Math.floor(
+                (new Date(incident.metadata.end).getTime() -
+                  new Date(incident.metadata.start).getTime()) /
+                  60000
+              )
+            )}
+          </dd>
+        {:else if incident.closed_at}
+          <dt>{config.i18n.incidentClosedAt}</dt>
+          <dd>{new Date(incident.closed_at).toLocaleString(config.i18n.locale)}</dd>
+        {/if}
+      </dl>
+      <div class="r">
+        <p>
+          <a href={`https://github.com/${config.owner}/${config.repo}/issues/${number}`}>
+            {config.i18n.incidentViewOnGitHub}
+          </a>
+        </p>
+      </div>
+    </div>
+    {#each comments as comment}
+      <article>
+        <p>
+          {@html md(comment.body)}
+        </p>
+        <div>
+          {@html config.i18n.incidentCommentSummary
+            .replace(
+              /\$DATE/g,
+              `<a href=${comment.html_url}>${new Date(comment.created_at).toLocaleString(config.i18n.locale)}</a>`
+            )
+            .replace(/\$AUTHOR/g, `<a href=${comment.user.html_url}>@${comment.user.login}</a>`)}
+        </div>
+      </article>
+    {/each}
+  {/if}
+</section>
+
+<footer><a href={config.path}>{config.i18n.incidentBack}</a></footer>
+
+<style>
+  footer {
+    margin-top: 2rem;
+  }
+  p {
+    margin-top: 0;
+  }
+  h2 {
+    line-height: 1;
+  }
+  .r {
+    text-align: right;
+  }
+</style>

package/src/components/Incidents.svelte

@@ -0,0 +1,83 @@
+<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(`closed-issues-${owner}-${repo}`, () =>
+          octokit.issues.listForRepo({
+            owner,
+            repo,
+            state: "closed",
+            filter: "all",
+            sort: "created",
+            direction: "desc",
+            labels: "status",
+          })
+        )
+      ).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>
+
+<style>
+  h2 {
+    margin-top: 2rem;
+  }
+</style>
+
+<section>
+  {#if loading}
+    <Loading />
+  {:else if incidents.length}
+    <h2>{config.i18n.pastIncidents}</h2>
+    {#each incidents as incident}
+      {#if incident.showHeading}
+        <h3>{new Date(incident.created_at).toLocaleDateString(config.i18n.locale)}</h3>
+      {/if}
+      <article class="down link {incident.title.includes('degraded') ? 'degraded' : ''}">
+        <div class="f">
+          <div>
+            <h4>{incident.title.replace('🛑', '').replace('⚠️', '').trim()}</h4>
+            <div>
+              {@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={`${config.path}/incident/${incident.number}`}>
+              {config.i18n.incidentReport.replace(/\$NUMBER/g, incident.number)}
+            </a>
+          </div>
+        </div>
+      </article>
+    {/each}
+  {/if}
+</section>

package/src/components/LiveStatus.svelte

@@ -0,0 +1,190 @@
+<script>
+  import Loading from "../components/Loading.svelte";
+  import { onMount } from "svelte";
+  import config from "../data/config.json";
+  import { createOctokit, handleError } from "../utils/createOctokit";
+
+  let loading = true;
+  const octokit = createOctokit();
+  const owner = config.owner;
+  const repo = config.repo;
+  let sites = [];
+
+  let { apiBaseUrl, userContentBaseUrl } = config["status-website"] || {};
+  if (!apiBaseUrl) apiBaseUrl = "https://api.github.com";
+  if (!userContentBaseUrl) userContentBaseUrl = "https://raw.githubusercontent.com";
+
+  const graphsBaseUrl = `${userContentBaseUrl}/${owner}/${repo}/master/graphs`;
+  let form = null;
+
+  let selected = "week";
+
+  onMount(async () => {
+    try {
+      const res = await fetch(`${userContentBaseUrl}/${owner}/${repo}/master/history/summary.json`);
+      sites = await res.json();
+    } catch (error) {
+      handleError(error);
+    }
+    loading = false;
+    if (form) form.classList.remove("changed");
+  });
+
+  const changed = () => {
+    if (form) {
+      form.classList.add("changed");
+      setTimeout(() => form.classList.remove("changed"), 500);
+    }
+  };
+</script>
+
+<div class="f changed" bind:this={form}>
+  <h2>{config.i18n.liveStatus}</h2>
+  <form class="f r">
+    <div>
+      <input
+        value="day"
+        bind:group={selected}
+        name="d"
+        type="radio"
+        on:change={changed}
+        id="data_day"
+      /><label for="data_day">{config.i18n.duration24H}</label>
+    </div>
+    <div>
+      <input
+        value="week"
+        bind:group={selected}
+        name="d"
+        type="radio"
+        on:change={changed}
+        id="data_week"
+      /><label for="data_week">{config.i18n.duration7D}</label>
+    </div>
+    <div>
+      <input
+        value="month"
+        bind:group={selected}
+        name="d"
+        type="radio"
+        on:change={changed}
+        id="data_month"
+      /><label for="data_month">{config.i18n.duration30D}</label>
+    </div>
+    <div>
+      <input
+        value="year"
+        bind:group={selected}
+        name="d"
+        type="radio"
+        on:change={changed}
+        id="data_year"
+      /><label for="data_year">{config.i18n.duration1Y}</label>
+    </div>
+    <div>
+      <input
+        value="all"
+        bind:group={selected}
+        name="d"
+        type="radio"
+        on:change={changed}
+        id="data_all"
+      /><label for="data_all">{config.i18n.durationAll}</label>
+    </div>
+  </form>
+</div>
+<section class="live-status">
+  {#if loading}
+    <Loading />
+  {:else if sites.length}
+    {#each sites as site}
+      <article
+        class={`${site.status} link graph`}
+        style="--background: url('{`${graphsBaseUrl}/${site.slug}/response-time${
+          selected === "day"
+            ? "-day"
+            : selected === "week"
+            ? "-week"
+            : selected === "month"
+            ? "-month"
+            : selected === "year"
+            ? "-year"
+            : ""
+        }.png`}')"
+        ><h4>
+          <img class="icon" alt="" src={site.icon} />
+          <a href={`${config.path}/history/${site.slug}`}>{site.name}</a>
+        </h4>
+        <div>
+          {@html config.i18n.overallUptime.split("$UPTIME")[0]}
+          <span class="data"
+            >{selected === "day"
+              ? site.uptimeDay
+              : selected === "week"
+              ? site.uptimeWeek
+              : selected === "month"
+              ? site.uptimeMonth
+              : selected === "year"
+              ? site.uptimeYear
+              : site.uptime}
+            {@html config.i18n.overallUptime.split("$UPTIME")[1]}</span
+          >
+        </div>
+        {#if site.showAverageResponseTime === undefined || site.showAverageResponseTime}
+          <div>
+            {@html config.i18n.averageResponseTime.split("$TIME")[0]}
+            <span class="data"
+              >{selected === "day"
+                ? site.timeDay
+                : selected === "week"
+                ? site.timeWeek
+                : selected === "month"
+                ? site.timeMonth
+                : selected === "year"
+                ? site.timeYear
+                : site.time}
+              {@html config.i18n.averageResponseTime.split("$TIME")[1]}</span
+            >
+          </div>
+        {/if}
+      </article>
+    {/each}
+  {/if}
+</section>
+
+<style>
+  article.graph {
+    background-image: var(--background);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center right;
+  }
+  .icon {
+    height: 1rem;
+    margin-right: 0.33rem;
+    vertical-align: middle;
+    transform: scale(1.1) translateY(-0.1rem);
+  }
+  a {
+    text-decoration: none;
+  }
+  .r input:checked + label {
+    font-weight: bold;
+  }
+  .r input {
+    display: none;
+  }
+  .r label {
+    margin-left: 1rem;
+  }
+  .data {
+    transition: 0.3s;
+  }
+  .changed + section {
+    background-color: transparent;
+  }
+  .data {
+    padding: 0.15rem 0.25rem;
+    border-radius: 0.2rem;
+  }
+</style>