Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

StatusPage #2299

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions doc/statuspage.md
Original file line number Diff line number Diff line change
@@ -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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should have the account be under the auspices of the project/OpenJS Foundation. Is that the plan?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, once we've figured out access, I think it makes sense to make ops@jsf the owner of twitter & statuspage.


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.
17 changes: 17 additions & 0 deletions statuspage/colors.md
Original file line number Diff line number Diff line change
@@ -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) |
2 changes: 2 additions & 0 deletions statuspage/footer.html
Original file line number Diff line number Diff line change
@@ -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">
Empty file added statuspage/header.html
Empty file.
179 changes: 179 additions & 0 deletions statuspage/styles.scss
Original file line number Diff line number Diff line change
@@ -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;
}