StatusPage

doc/statuspage.md

@@ -0,0 +1,58 @@
+# StatusPage
+
+This document relates to the [StatusPage](https://www.statuspage.io/) for Node.js, which can be
+found at [status.nodejs.org](https://status.nodejs.org).
+
+## Access
+
+The following people have access to the StatusPage control panel. New accounts can be added via the
+[User Management](https://admin.atlassian.com/s/f6b1a2fe-1302-40aa-9a3f-4f7523370639/users) page.
+
+Atlassian StatusPage has three groups available, `site-admins` that have full administration access
+in Atlassian, `statuspage-administrators` that have full administration access specifically for the
+StatusPage product, and `statuspage-users` who have regular operational access to StatusPage.
+
+Atlassian organizations also have a separate concept of org-wide administrators, that have full
+access to everything (this is technically different from `site-admins` as that is scoped to the
+"site", but this org only has one site, so they are effectively the same).
+
+| GitHub                                         | Site Role          | Org Admin |
+|------------------------------------------------|--------------------|-----------|
+| [@MattIPv4](https://github.com/MattIPv4)       | `site-admins`      | Yes       |
+| OpenJSF Operations                             | `site-admins`      | Yes       |
+| [@MylesBorins](https://github.com/MylesBorins) | `statuspage-users` | No        |
+
+## Twitter
+
+There is also a Twitter account, [@NodejsStatus](https://twitter.com/NodejsStatus), for the
+status page.
+
+This account is run via the
+[Twitter integration](https://manage.statuspage.io/pages/rxy2rhgm8q1n/twitter) on StatusPage and
+will automatically tweet any incident updates (if tweeting is selected for an incident update).
+
+## Customisations
+
+The [statuspage](../statuspage) directory in this repository contains a backup of the major
+customisations applied to the Node.js status page. These should be updated whenever the
+customisations are changed on the status page.
+
+[colors.md](../statuspage/colors.md) contains the custom color set for the whole status page
+(including emails for subscribers) in
+[Your Page > Customize page and emails > Colors](https://manage.statuspage.io/pages/rxy2rhgm8q1n/design#colors-container).
+
+[styles.scss](../statuspage/styles.scss) stores the custom styling that is applied to all web pages
+of the Node.js StatusPage site. This is controlled from the
+[Customize HTML & CSS](https://manage.statuspage.io/pages/rxy2rhgm8q1n/full-customize) view
+accessed from the button top-right on
+[Your Page > Customize page and emails > Customize status page](https://manage.statuspage.io/pages/rxy2rhgm8q1n/design#design-container).
+
+[header.html](../statuspage/header.html) contains the custom HTML used for the header on the
+status page. It is important to note that this replaces the default header (logo & subscribe
+button), so using this should be avoided if possible. Like the custom styling, this is managed from
+the [Customize HTML & CSS](https://manage.statuspage.io/pages/rxy2rhgm8q1n/full-customize) page.
+
+[footer.html](../statuspage/footer.html) contains custom HTML injected into the footer of the
+status page website. This doesn't replace any default content and is a good place for custom
+scripting if needed. This is also controlled from the
+[Customize HTML & CSS](https://manage.statuspage.io/pages/rxy2rhgm8q1n/full-customize) page.

statuspage/colors.md

@@ -0,0 +1,17 @@
+# StatusPage Colors
+
+These are the colors used on the colors customisation page for the Node.js status page.
+
+| Name             | Value   | Variable | Preview                                           |
+|------------------|---------|----------|---------------------------------------------------|
+| Body background  | #f5f6f7 | $gray0   | ![](http://singlecolorimage.com/get/f5f6f7/32x32) |
+| Font color       | #2d3438 | $gray9   | ![](http://singlecolorimage.com/get/2d3438/32x32) |
+| Light font color | #b0bcc1 | $gray4   | ![](http://singlecolorimage.com/get/b0bcc1/32x32) |
+| Greens           | #5fa04d | $green4  | ![](http://singlecolorimage.com/get/5fa04d/32x32) |
+| Yellows          | #fad8af | $orange1 | ![](http://singlecolorimage.com/get/fad8af/32x32) |
+| Oranges          | #e89c3f | $orange3 | ![](http://singlecolorimage.com/get/e89c3f/32x32) |
+| Reds             | #f55353 | $red4    | ![](http://singlecolorimage.com/get/f55353/32x32) |
+| Blues            | #229ad6 | $blue4   | ![](http://singlecolorimage.com/get/229ad6/32x32) |
+| Link color       | #229ad6 | $blue4   | ![](http://singlecolorimage.com/get/229ad6/32x32) |
+| Border color     | #eaedef | $gray1   | ![](http://singlecolorimage.com/get/eaedef/32x32) |
+| Graph color      | #229ad6 | $blue4   | ![](http://singlecolorimage.com/get/229ad6/32x32) |

statuspage/footer.html

@@ -0,0 +1,2 @@
+<!-- Load open sans font in the background -->
+<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

statuspage/styles.scss

@@ -0,0 +1,179 @@
+/* Vars from website redesign */
+$gray0: #f5f6f7;
+$gray1: #eaedef;
+$gray2: #dae1e5;
+$gray3: #cbd4d8;
+$gray4: #b0bcc1;
+$gray5: #929fa5;
+$gray6: #6f7b82;
+$gray7: #556066;
+$gray8: #3f484c;
+$gray9: #2d3438;
+$red0: #faf0f0;
+$red1: #fad4d4;
+$red2: #fab6b6;
+$red3: #fa8e8e;
+$red4: #f55353;
+$red5: #de1b1b;
+$red6: #b80d0d;
+$red7: #8f0e0e;
+$red8: #661414;
+$red9: #451717;
+$orange0: #fcf2e6;
+$orange1: #fad8af;
+$orange2: #f5bc76;
+$orange3: #e89c3f;
+$orange4: #cf7911;
+$orange5: #ad5f00;
+$orange6: #8a4d03;
+$orange7: #693d07;
+$orange8: #4d2f0b;
+$orange9: #33210c;
+$green0: #ecf2e9;
+$green1: #c5e5b5;
+$green2: #9acc7d;
+$green3: #83ba63;
+$green4: #5fa04d;
+$green5: #417f38;
+$green6: #2c682c;
+$green7: #215127;
+$green8: #193f1d;
+$green9: #0f260f;
+$blue0: #e8f4fa;
+$blue1: #bbe5fa;
+$blue2: #8dd4f7;
+$blue3: #53baed;
+$blue4: #229ad6;
+$blue5: #0c7bb3;
+$blue6: #066391;
+$blue7: #064d70;
+$blue8: #093952;
+$blue9: #0c2938;
+$purple0: #f5f0fa;
+$purple1: #ead9fa;
+$purple2: #dabcf7;
+$purple3: #c79bf2;
+$purple4: #ae74e8;
+$purple5: #9656d6;
+$purple6: #7d3cbd;
+$purple7: #642b9e;
+$purple8: #4b2175;
+$purple9: #371c52;
+$pink0: #faf0f4;
+$pink1: #fad4e4;
+$pink2: #fab4d1;
+$pink3: #f78bb8;
+$pink4: #ed5393;
+$pink5: #d6246e;
+$pink6: #b01355;
+$pink7: #8a1244;
+$pink8: #611535;
+$pink9: #421527;
+$brand-light: $green3;
+$brand: $green5;
+$brand-dark: $green7;
+$banner-clip: polygon(0 0, 100% 0, 100% calc(100% - 72px), 0 100%);
+$banner-gradient: linear-gradient(90deg, $purple9, $blue7);
+$nav-height: 6.2rem;
+$hero-height: 36rem;
+$sans-serif: "Open Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+$serif: "Merriweather", Georgia, Cambria, "Times New Roman", Times, serif;
+
+/* Base */
+html {
+  font-size: 10px;
+}
+
+body {
+  background: $gray0;
+  color: $gray9;
+  font-family: $sans-serif;
+  font-size: 1.8rem;
+}
+
+/* Font sizes */
+.font-large {
+  line-height: 1.5;
+  font-size: 2rem;
+}
+
+.font-regular {
+  line-height: 1.5;
+  font-size: 1.8rem;
+}
+
+.font-small, small, .small,
+.shared-partial.uptime-90-days-wrapper .legend .legend-item,
+#uptime-tooltip .no-outages-msg, #uptime-tooltip .outage-count {
+  line-height: 1.5;
+  font-size: 1.15rem;
+}
+
+/* Gradient BG */
+.layout-content.status::before {
+  display: block;
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: $hero-height * .75;
+  -webkit-filter: brightness(160%) saturate(45%);
+  filter: brightness(160%) saturate(45%);
+  background: $banner-gradient;
+  -webkit-clip-path: $banner-clip;
+  clip-path: $banner-clip;
+  z-index: -1;
+}
+
+.layout-content.status-index::before {
+  height: $hero-height * 1.2;
+}
+
+/* Logo text */
+.layout-content.status .masthead-container.basic .masthead .logo-container {
+  max-width: none;
+}
+
+.layout-content.status .masthead-container.basic .masthead .logo-container::after {
+  content: 'Node.js Status';
+  color: #fff;
+  font-size: 4.2rem;
+  font-weight: 600;
+  line-height: 1.5;
+  vertical-align: middle;
+  padding: 0 0 0 .5rem;
+
+  @media screen and (max-width: 850px) {
+    display: block;
+    padding: .25rem 0;
+  }
+}
+
+.layout-content.status.status-incident .page-title {
+  margin: 0 0 20rem;
+}
+
+/* Status box */
+.layout-content.status.status-index .page-status {
+  margin-bottom: 96px;
+  padding: .85rem 1.25rem 1.25rem;
+}
+
+/* Buttons */
+.flat-button, .layout-content.status .masthead-container .updates-dropdown-container .show-updates-dropdown {
+  box-shadow: none;
+  font-size: 1.25rem;
+  line-height: 1.5;
+}
+
+/* Incidents */
+.unresolved-incident .incident-title a {
+  color: $gray9 !important;
+}
+.unresolved-incident .incident-title .subscribe {
+  font-size: 1em !important;
+}
+.unresolved-incident .updates {
+  background: $gray0;
+}