@justdanielndev/status-page 1.17.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Anand Chowdhary
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,46 @@
+# ⬆️ Upptime Status Page
+
+This repository contains the web app for Upptime's status page website. It's written in Svelte and a sample website is published at https://demo.upptime.js.org/.
+
+[**To get started, visit upptime/upptime →**](https://github.com/upptime/upptime)
+
+<!-- prettier-ignore-start -->
+|   | Status |
+| - | - |
+| Build | [![Node CI](https://github.com/upptime/status-page/workflows/Node%20CI/badge.svg)](https://github.com/upptime/status-page/actions?query=workflow%3A%22Node+CI%22) [![Dependencies](https://img.shields.io/librariesio/github/upptime/status-page)](https://libraries.io/github/upptime/status-page) [![GitHub release (latest by date)](https://img.shields.io/github/v/release/upptime/status-page)](https://github.com/upptime/status-page/releases) [![Snyk Vulnerabilities for GitHub Repo](https://img.shields.io/snyk/vulnerabilities/github/upptime/status-page)](https://snyk.io/test/github/upptime/status-page) |
+| Health | [![License CI](https://github.com/upptime/status-page/workflows/License%20CI/badge.svg)](https://github.com/upptime/status-page/actions?query=workflow%3A%22License+CI%22) [![CLA Assistant](https://github.com/upptime/status-page/workflows/CLA%20Assistant/badge.svg)](https://github.com/upptime/status-page/actions?query=workflow%3A%22CLA+Assistant%22) [![Pull Request Labeler](https://github.com/upptime/status-page/workflows/Pull%20Request%20Labeler/badge.svg)](https://github.com/upptime/status-page/actions?query=workflow%3A%22Pull+Request+Labeler%22) |
+| PRs | [![Feature Branch Pull Request](https://github.com/upptime/status-page/workflows/Feature%20Branch%20Pull%20Request/badge.svg)](https://github.com/upptime/status-page/actions?query=workflow%3A%22Feature+Branch+Pull+Request%22) [![Hotfix Branch Pull Request](https://github.com/upptime/status-page/workflows/Hotfix%20Branch%20Pull%20Request/badge.svg)](https://github.com/upptime/status-page/actions?query=workflow%3A%22Hotfix+Branch+Pull+Request%22) [![Merge PRs](https://github.com/upptime/status-page/workflows/Merge%20PRs/badge.svg)](https://github.com/upptime/status-page/actions?query=workflow%3A%22Merge+PRs%22) |
+<!-- prettier-ignore-end -->
+
+## 🎁 Contributing
+
+This repository is for Upptime's embeddable web app. We love contributions, so please read our [Contributing Guidelines](https://github.com/upptime-js/.github/blob/master/CONTRIBUTING.md) and [Code of Conduct](https://github.com/upptime-js/.github/blob/master/CODE_OF_CONDUCT.md) and open an issue or make a pull request!
+
+### Issues
+
+We use the [upptime/upptime](https://github.com/upptime/upptime) repository for issues for all projects, including this one. If you found a bug or have a feature request, [open an issue](https://github.com/upptime/upptime/issues) in the Upptime repository and add the label "static-site".
+
+## 💻 Usage
+
+When you use Upptime, we automatically generate a static status website and push it to the `gh-pages` branch. You don't have to manually manage any code from this repository.
+
+When building locally, you can start a server:
+
+```bash
+npm run dev
+```
+
+Currently, the `.upptimerc.yml` configuration file is required one directly above the project root.
+
+## 📄 License
+
+[MIT](./LICENSE) © [Koj](https://koj.co) 
+
+<p align="center">
+  <a href="https://koj.co">
+    <img width="44" alt="Koj" src="https://kojcdn.com/v1598284251/website-v2/koj-github-footer_m089ze.svg">
+  </a> 
+</p>
+<p align="center">
+  <sub>An open source project by <a href="https://koj.co">Koj</a>. <br> <a href="https://koj.co">Furnish your home in style, for as low as CHF175/month →</a></sub>
+</p>

package/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

package/cypress/integration/incident.spec.js

@@ -0,0 +1,9 @@
+describe("Live status", () => {
+  beforeEach(() => {
+    cy.visit("/incident/8");
+    cy.wait(2000);
+  });
+  it("has multiple status messages", () => {
+    cy.get("article").should("have.lengthOf.above", 1);
+  });
+});

package/cypress/integration/live-status.spec.js

@@ -0,0 +1,12 @@
+describe("Live status", () => {
+  beforeEach(() => {
+    cy.visit("/");
+    cy.wait(2000);
+  });
+  it("has multiple status boxes", () => {
+    cy.get("article.link").should("have.lengthOf.above", 2);
+  });
+  it("has past issues", () => {
+    cy.get("article.down.link").should("have.lengthOf.above", 3);
+  });
+});

package/cypress/plugins/index.js

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+};

package/cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })

package/cypress/support/index.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "./commands";
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package/cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "video": false
+}

package/i18n.yml

@@ -0,0 +1,61 @@
+activeIncidents: Active Incidents
+allSystemsOperational: All systems are operational
+incidentReport: "Incident #$NUMBER report →"
+activeIncidentSummary: Opened at $DATE with $POSTS posts
+incidentTitle: Incident $NUMBER Details
+incidentDetails: Incident Details
+incidentFixed: Fixed
+incidentOngoing: Ongoing
+incidentOpenedAt: Opened at
+incidentClosedAt: Closed at
+incidentViewOnGitHub: View and Subscribe on GitHub
+incidentCommentSummary: Posted at $DATE by $AUTHOR
+incidentBack: ← Back to all incidents
+pastIncidents: Past Incidents
+pastIncidentsResolved: Resolved in $MINUTES minutes 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
+degraded: Degraded
+ms: ms
+loading: Loading
+navGitHub: GitHub
+footer: This page is [open source]($REPO), powered by [Upptime](https://upptime.js.org)
+rateLimitExceededTitle: Rate limit exceeded
+rateLimitExceededIntro: You have exceeded the number of requests you can do in an hour, so you'll have to wait before accessing this website again. Alternately, you can add a GitHub Personal Access Token to continue to use this website.
+rateLimitExceededWhatDoesErrorMean: What does this error mean?
+rateLimitExceededErrorMeaning: This website uses the GitHub API to access real-time data about our websites' status. By default, GitHub allows each IP address 60 requests per hour, which you have consumed.
+rateLimitExceededErrorHowCanFix: How can I fix it?
+rateLimitExceededErrorFix: You can wait for another hour and your IP address' limit will be restored. Alternately, you can add your GitHub Personal Access Token, which gives you an additional 5,000 requests per hour.
+rateLimitExceededGeneratePAT: Learn how to generate a Personal Access Token
+rateLimitExceededHasSet: You have a personal access token set.
+rateLimitExceededRemoveToken: Remove token
+rateLimitExceededGitHubPAT: GitHub Personal Access Token
+rateLimitExceededCopyPastePAT: Copy and paste your token
+rateLimitExceededSaveToken: Save token
+errorTitle: An error occurred
+errorIntro: An error occurred in trying to get the latest status details.
+errorText: You can try again in a few moments.
+errorHome: Go to the homepage
+pastScheduledMaintenance: Past Scheduled Maintenance
+scheduledMaintenance: Scheduled Maintenance
+scheduledMaintenanceSummaryStarted: Started at $DATE for $DURATION minutes
+scheduledMaintenanceSummaryStarts: Starts at $DATE for $DURATION minutes
+startedAt: Started at
+startsAt: Starts at
+duration: Duration
+durationMin: $DURATION minutes
+incidentCompleted: Completed
+incidentScheduled: Scheduled
+duration24H: 24h
+duration7D: 7d
+duration30D: 30d
+duration1Y: 1y
+durationAll: all
+locale: en-US

package/init-tests.ts

@@ -0,0 +1,12 @@
+import { copyFile, readFile } from "fs-extra";
+import { join } from "path";
+
+const initTests = async () => {
+  let hasFile = false;
+  try {
+    await readFile(join("..", ".upptimerc.yml"));
+    hasFile = true;
+  } catch (error) {}
+  if (!hasFile) await copyFile(join(".", ".upptimerc.yml"), join("..", ".upptimerc.yml"));
+};
+initTests();

package/jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  preset: "ts-jest",
+  testEnvironment: "node",
+};

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@justdanielndev/status-page",
+  "version": "1.17.0",
+  "description": "Upptime status page website",
+  "main": "dist/index.js",
+  "scripts": {
+    "pre-process": "ts-node pre-process.ts",
+    "post-process": "ts-node post-process.ts",
+    "init-tests": "ts-node init-tests.ts",
+    "dev": "npm run pre-process && sapper dev",
+    "build": "npm run init-tests && npm run pre-process && sapper build --legacy",
+    "export": "npm run pre-process && npm run post-process",
+    "start": "node __sapper__/build",
+    "cy:run": "cypress run",
+    "cy:open": "cypress open",
+    "test": "npm run init-tests && run-p --race dev cy:run",
+    "semantic-release": "semantic-release"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/justdanielndev/status-page.git"
+  },
+  "keywords": [
+    "koj",
+    "template",
+    "nodejs",
+    "typescript"
+  ],
+  "author": "Zoe <zoe@hackclub.email>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/justdanielndev/status-page/issues"
+  },
+  "homepage": "https://github.com/justdanielndev/status-page#readme",
+  "dependencies": {
+    "@octokit/rest": "^18.12.0",
+    "compression": "^1.7.4",
+    "fs-extra": "^10.1.0",
+    "js-yaml": "^4.1.0",
+    "polka": "next",
+    "sirv": "^1.0.5",
+    "snarkdown": "^2.0.0",
+    "svelte-chartjs": "^1.1.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.18.2",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/plugin-transform-runtime": "^7.18.2",
+    "@babel/preset-env": "^7.18.2",
+    "@babel/runtime": "^7.18.3",
+    "@koj/config": "^1.2.11",
+    "@rollup/plugin-babel": "^5.1.0",
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.0.1",
+    "@rollup/plugin-replace": "^2.3.3",
+    "@semantic-release/changelog": "^6.0.1",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^8.0.4",
+    "@semantic-release/npm": "^9.0.1",
+    "@types/fs-extra": "^9.0.13",
+    "@types/jest": "^27.5.1",
+    "@types/js-yaml": "^4.0.5",
+    "cypress": "^9.7.0",
+    "jest": "^28.1.0",
+    "npm-run-all": "^4.1.5",
+    "rollup": "^2.74.1",
+    "rollup-plugin-svelte": "^6.0.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "sapper": "^0.29.0",
+    "semantic-release": "^19.0.2",
+    "semantic-release-gitmoji": "^1.4.4",
+    "svelte": "^3.24.1",
+    "ts-jest": "^28.0.3",
+    "ts-node": "^10.8.0",
+    "typescript": "^4.7.2"
+  }
+}

package/post-process.ts

@@ -0,0 +1,61 @@
+import { readFile, writeFile, copyFile, copy, remove, pathExists } from "fs-extra";
+import { load } from "js-yaml";
+import { join } from "path";
+import { execSync } from "child_process";
+
+export const postProcess = async () => {
+  let config: {
+    "status-website"?: {
+      cname?: string;
+      robotsText?: string;
+      baseUrl?: string;
+    };
+  } = load(await readFile(join("..", ".upptimerc.yml"), "utf8")) as any;
+  const baseUrl = (config["status-website"] || {}).baseUrl || "/";
+
+  execSync(`sapper export --legacy --basepath ${baseUrl}`, {
+    stdio: "inherit",
+  });
+
+  if (baseUrl !== "/") {
+    await copy(join(".", "__sapper__", "export", baseUrl), join(".", "__sapper__", "export"));
+    await remove(join(".", "__sapper__", "export", baseUrl));
+  }
+
+  try {
+    if (await pathExists(join(".", "assets")))
+      await copy(join(".", "assets"), join(".", "__sapper__", "export"), { recursive: true });
+  } catch (error) {
+    console.log("Got an error in copying assets", error);
+  }
+
+  const [owner, repo] = (process.env.GITHUB_REPOSITORY || "").split("/");
+
+  if (
+    config["status-website"] &&
+    config["status-website"].cname &&
+    config["status-website"].cname !== "demo.upptime.js.org"
+  )
+    await writeFile(join(".", "__sapper__", "export", "CNAME"), config["status-website"].cname);
+  else if (
+    config["status-website"] &&
+    config["status-website"].cname &&
+    config["status-website"].cname === "demo.upptime.js.org" &&
+    owner === "upptime" &&
+    repo === "upptime"
+  )
+    await writeFile(join(".", "__sapper__", "export", "CNAME"), "demo.upptime.js.org");
+
+  if (config["status-website"] && config["status-website"].robotsText)
+    await writeFile(
+      join(".", "__sapper__", "export", "robots.txt"),
+      config["status-website"].robotsText
+    );
+
+  await copyFile(
+    join(".", "__sapper__", "export", "service-worker-index.html"),
+    join(".", "__sapper__", "export", "404.html")
+  );
+};
+
+postProcess();

package/pre-process.ts

@@ -0,0 +1,32 @@
+import { readFile, writeJson, ensureDir } from "fs-extra";
+import { load } from "js-yaml";
+import { join } from "path";
+
+export const preProcess = async () => {
+  const i18n = load(await readFile(join(".", "i18n.yml"), "utf8")) as {
+    [index: string]: string;
+  };
+
+  let config: {
+    logoUrl?: string;
+    name?: string;
+    owner: string;
+    repo: string;
+    introTitle?: string;
+    introMessage?: string;
+    path: string;
+    i18n?: { [index: string]: string };
+    "status-website"?: {
+      cname?: string;
+      baseUrl?: string;
+    };
+  } = load(await readFile(join("..", ".upptimerc.yml"), "utf8")) as any;
+  if (!config.owner || !config.repo) throw new Error("Owner/repo not set");
+  config.path = `https://${config.owner}.github.io/${config.repo}`;
+  if (config["status-website"]?.cname) config.path = `https://${config["status-website"].cname}${config["status-website"]?.baseUrl ?? ""}`;
+  config.i18n = { ...i18n, ...config.i18n };
+  await ensureDir(join(".", "src", "data"));
+  await writeJson(join(".", "src", "data", "config.json"), config);
+};
+
+preProcess();

package/release.config.js

@@ -0,0 +1 @@
+module.exports = require("@koj/config").releaseMaster;

package/rollup.config.js

@@ -0,0 +1,116 @@
+import resolve from "@rollup/plugin-node-resolve";
+import replace from "@rollup/plugin-replace";
+import commonjs from "@rollup/plugin-commonjs";
+import svelte from "rollup-plugin-svelte";
+import babel from "@rollup/plugin-babel";
+import json from "@rollup/plugin-json";
+import { terser } from "rollup-plugin-terser";
+import config from "sapper/config/rollup.js";
+import pkg from "./package.json";
+
+const mode = process.env.NODE_ENV;
+const dev = mode === "development";
+const legacy = !!process.env.SAPPER_LEGACY_BUILD;
+
+const onwarn = (warning, onwarn) =>
+  (warning.code === "MISSING_EXPORT" && /'preload'/.test(warning.message)) ||
+  (warning.code === "CIRCULAR_DEPENDENCY" && /[/\\]@sapper[/\\]/.test(warning.message)) ||
+  onwarn(warning);
+
+export default {
+  client: {
+    input: config.client.input(),
+    output: config.client.output(),
+    plugins: [
+      json(),
+      replace({
+        "process.browser": true,
+        "process.env.NODE_ENV": JSON.stringify(mode),
+      }),
+      svelte({
+        dev,
+        hydratable: true,
+        emitCss: true,
+      }),
+      resolve({
+        browser: true,
+        dedupe: ["svelte"],
+      }),
+      commonjs(),
+
+      legacy &&
+        babel({
+          extensions: [".js", ".mjs", ".html", ".svelte"],
+          babelHelpers: "runtime",
+          exclude: ["node_modules/@babel/**"],
+          presets: [
+            [
+              "@babel/preset-env",
+              {
+                targets: "> 0.25%, not dead",
+              },
+            ],
+          ],
+          plugins: [
+            "@babel/plugin-syntax-dynamic-import",
+            [
+              "@babel/plugin-transform-runtime",
+              {
+                useESModules: true,
+              },
+            ],
+          ],
+        }),
+
+      !dev &&
+        terser({
+          module: true,
+        }),
+    ],
+
+    preserveEntrySignatures: false,
+    onwarn,
+  },
+
+  server: {
+    input: config.server.input(),
+    output: config.server.output(),
+    plugins: [
+      json(),
+      replace({
+        "process.browser": false,
+        "process.env.NODE_ENV": JSON.stringify(mode),
+      }),
+      svelte({
+        generate: "ssr",
+        hydratable: true,
+        dev,
+      }),
+      resolve({
+        dedupe: ["svelte"],
+      }),
+      commonjs(),
+    ],
+    external: Object.keys(pkg.dependencies).concat(require("module").builtinModules),
+
+    preserveEntrySignatures: "strict",
+    onwarn,
+  },
+
+  serviceworker: {
+    input: config.serviceworker.input(),
+    output: config.serviceworker.output(),
+    plugins: [
+      resolve(),
+      replace({
+        "process.browser": true,
+        "process.env.NODE_ENV": JSON.stringify(mode),
+      }),
+      commonjs(),
+      !dev && terser(),
+    ],
+
+    preserveEntrySignatures: false,
+    onwarn,
+  },
+};

package/src/client.js

@@ -0,0 +1,18 @@
+import * as sapper from '@sapper/app';
+
+//
+// <https://github.com/upptime/upptime/issues/758>
+// if we do not use this then we need to move sapper at end of <body>
+// <https://caniuse.com/domcontentloaded>
+//
+if (document.readyState !== 'loading') {
+  sapper.start({
+    target: document.querySelector('#sapper')
+  });
+} else {
+  document.addEventListener('DOMContentLoaded', function() {
+    sapper.start({
+      target: document.querySelector('#sapper')
+    });
+  });
+}

package/src/components/ActiveIncidents.svelte

@@ -0,0 +1,79 @@
+<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(`issues-${owner}-${repo}`, () =>
+          octokit.issues.listForRepo({
+            owner,
+            repo,
+            state: "open",
+            filter: "all",
+            sort: "created",
+            direction: "desc",
+            labels: "status",
+          })
+        )
+      ).data;
+      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;
+      });
+    } catch (error) {
+      handleError(error);
+    }
+    loading = false;
+  });
+</script>
+
+{#if !incidents.length && !loading}
+  <article class="up">✅ &nbsp; {config.i18n.allSystemsOperational}</article>
+{/if}
+
+<section>
+  {#if loading}
+    <Loading />
+  {:else if incidents.length}
+    <h2>{config.i18n.activeIncidents}</h2>
+    {#each incidents as incident}
+      <article
+        class="down down-active link {incident.title.includes('degraded') ? 'degraded' : ''}"
+      >
+        <div class="f">
+          <div>
+            <h4>{incident.title.replace("🛑", "").replace("⚠️", "").trim()}</h4>
+            <div>
+              {config.i18n.activeIncidentSummary
+                .replace(/\$DATE/g, new Date(incident.created_at).toLocaleString(config.i18n.locale))
+                .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>
+
+<style>
+  section {
+    margin-bottom: 2rem;
+  }
+</style>