Commit d7500b36 authored by Mantas's avatar Mantas
Browse files

v2-dev2

parent 7061d229
# cState
![Screnshot](https://raw.githubusercontent.com/mistermantas/cstate/master/images/screenshot.png)
<p style="text-align:center">
![cState](https://raw.githubusercontent.com/mistermantas/cstate/master/images/highlight.png)
[![GitHub release](https://img.shields.io/github/release/mistermantas/cstate.svg?style=flat-square)](https://github.com/mistermantas/cstate/releases) [![GitHub last commit](https://img.shields.io/github/last-commit/mistermantas/cstate.svg?style=flat-square)](https://github.com/mistermantas/cstate/commits/master) [![GitHub repo size in bytes](https://img.shields.io/github/repo-size/mistermantas/cstate.svg?style=flat-square)](https://github.com/mistermantas/cstate/tree/master/) [![Gitter](https://img.shields.io/badge/chat-gitter-ed1965.svg?style=flat-square)](https://gitter.im/cState/Lobby) [![Twitter](https://img.shields.io/twitter/follow/mistermantas.svg?style=social&label=Follow)](https://twitter.com/mistermantas)
</p>
> Über fast, backwards compatible (IE8+), tiny, and simple status page built with Hugo. Compatible with Netlify & GitHub Pages.
*This release is a developer preview.*
[**Live demo**](https://cstate.netlify.com)
[**Live demo**](https://themes.gohugo.io/theme/cstate/)
## Contents
......@@ -131,18 +134,6 @@ Time to break that down.
`Affected`. Add the items that were present in the config file which should alter the status of each individual system (component). *(array, required)*
`Section`. This must be `issue`, so that Hugo treats it as one. *(required)*
### Is there an admin panel or some easy way to change the state of each issue?
If you use [Netlify](https://www.netlify.com), you can expect to see Netlify CMS integration very soon. Otherwise, you could fall back to [prose.io](http://prose.io) or something similar.
### How do I make this work on GitHub Pages?
Compile locally (using production instructions), commit changes, and push them out. Using [Netlify](https://www.netlify.com) is recommended as it simplifies the process.
### My question was not answered!
This part of the documentation still needs to finished. [Questions](https://github.com/mistermantas/cstate/issues) are more than welcome and you should get a pretty fast response as well.
## Contribute
+ Glance over the [Code of Conduct](/CODE_OF_CONDUCT.md).
......
......@@ -3,6 +3,7 @@ Title:
Date:
Resolved:
ResolvedWhen:
# down, disrupted, notice
Severity:
Affected:
Section: issue
......
......@@ -37,7 +37,7 @@
# What is your status page called?
# Shows up in the browser bar and meta tags
title: Example Chat App Status
title: Example Status
# What language is this page in?
# Only alters the html[lang] attribute
......@@ -58,52 +58,71 @@ baseURL: /
# +------------------------------------------------------+ #
############################################################
# Should posts, which have a publish date
# from the future, be built? Useful for
# sharing upcoming maintenance, etc.
#
# We recommend to keep this at `true`.
# BOOLEAN; `true`, `false`
buildFuture: true
params:
# These are your systems. Change them to
# change the amount of components.
#
# For help, see the wiki:
# https://github.com/mistermantas/cstate/wiki/Customization
systems:
#-
# name: Client Area
# codename: panel
#-
# name: Minecraft
# codename: mc
#-
# name: Web Hosting
# codename: web
- Gateway
- API
- Media Proxy
-
name: Gateway
-
name: API
description: The guts of the application.
-
name: Media Proxy
description: This is the service responsible for serving images, audio, and video. It is reliant on Fastly.
# partial: custom/metrics
# What header design should we use?
#
# Default: true
# BOOLEAN; `true`, `false`
useLargeHeaderDesign: false
# Should we show the logo or the title
# of the status page?
useLogo: false
#
# Default: false
# BOOLEAN; `true`, `false`
useLogo: true
# Where is the logo located, if one is
# present at all?
#
# Recommended: png or jpg for best
# browser support!
# logo: /logo.png
# Recommended: png is best used for
# images like logos.
#
# Recommended: png, bmp, jpg, or gif
# for best browser support!
logo: /logo.png
# This is the description that is shown
# in the footer and meta tags.
#
# Default: We continuously monitor the status of our services and if there are any interruptions, a note will be posted here.
description: We continuously monitor the status of our services and if there are any interruptions, a note will be posted here.
# Cplors throughout cState
# Tabs on homepage
# Uncomment to enable.
#
# Format:
# customTabs:
# -
# name: Name
# link: https://example.com
# Uptime statistics tab
#
# Shows link to /stats
# (uptime stats)
#
# Default: true
# BOOLEAN; `true`, `false`
showUptime: true
# Colors throughout cState
#
# Defaults:
#
......@@ -117,8 +136,6 @@ params:
disrupted: FF8C00
down: DC143C
notice: 708090
border: dfdfdf
faded: ccc
# If the status page shows that
# there are disruptions or outages
......@@ -131,37 +148,20 @@ params:
# BOOLEAN; `true`, `false`
alwaysKeepBrandColor: true
############################################################
# +------------------------------------------------------+ #
# | Developer | #
# +------------------------------------------------------+ #
############################################################
# Custom CSS file
# If you want to add any
# custom styling, you may
# link to one file with all
# your modifications here.
#
# This has *intentionally*
# been left uncommented,
# as it is not an advanced
# feature for developers.
# Google Analytics tracking code
#
# customCSS: /custom.css
# Custom JavaScript file
# If you want to add any
# custom scripting, you may
# link to one file with all
# your modifications here.
# By default, cState does not use
# Google Analytics. If you choose
# to use it, you may change the
# placeholder code below to your
# own and thereby enable the
# tracking service.
#
# This has *intentionally*
# been left uncommented,
# as it is not an advanced
# feature for developers.
# To disable the analytics, change
# the value to the default:
#
# customJS: /custom.js
# Default: UA-00000000-1
googleAnalytics: UA-00000000-1
############################################################
# +------------------------------------------------------+ #
......@@ -169,13 +169,21 @@ params:
# +------------------------------------------------------+ #
############################################################
# Should posts, which have a publish date
# from the future, be built? Useful for
# sharing upcoming maintenance, etc.
#
# We recommend to keep this at `true`.
# BOOLEAN; `true`, `false`
buildFuture: true
# These options affect the core of cState.
# Please do not change them if you do not
# know what you are doing.
theme: cstate
theme: cstate-dev
# If you are developing locally and want
# to contribute to the cState Git repo,
# please uncomment this option but do not
# forget to re-comment it when
# themesDir: ../..
themesDir: ../..
---
---
<!--
Please keep this file if you wish to enable API access.
-->
---
title: Uptime
description: This page has some information analyzing the downtime that has been reported on this status page.
type: uptime
---
<!--
Please keep this file if you wish to show uptime stats.
-->
This folder can be used to overwrite or add any layouts to your status page.
For more, please [read the documentation](https://github.com/mistermantas/cstate/wiki/Customization).
[build]
command = "hugo"
publish = "public"
functions = "functions"
[build.environment]
HUGO_VERSION = "0.41"
[context.production.environment]
HUGO_ENV = "production"
NODE_ENV = "production"
[context.deploy-preview]
command = "hugo"
This folder can be used to store any static content that you may want to link to on your status page.
You may replace the default favicons by creating icons with these names:
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
You may also replace the Netlify CMS configuration by creating an `admin` folder and placing your own `config.yml` or `index.html` file by following the project's given instructions.
images/screenshot.png

19 KB | W: | H:

images/screenshot.png

46.4 KB | W: | H:

images/screenshot.png
images/screenshot.png
images/screenshot.png
images/screenshot.png
  • 2-up
  • Swipe
  • Onion skin
images/tn.png

11.1 KB | W: | H:

images/tn.png

37.5 KB | W: | H:

images/tn.png
images/tn.png
images/tn.png
images/tn.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -7,4 +7,8 @@
{{ .Render "post" }}
</div>
{{ partial "footer" . }}
{{ partial "js" . }}
{{ partial "footer" . }}
</body>
</html>
......@@ -7,7 +7,7 @@
{{ $isDisrupted := where $active "Params.severity" "=" "disrupted" }}
{{ $isDown := where $active "Params.severity" "=" "down" }}
<body class="status status-{{ if $isDown }}down{{ else }}{{ if $isDisrupted}}disrupted{{ else }}{{ if $isNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }} {{ if not .Site.Params.alwaysKeepBrandColor }}change-header-color{{ end }}">
<body class="status-homepage status-{{ if $isDown }}down{{ else }}{{ if $isDisrupted}}disrupted{{ else }}{{ if $isNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }} {{ if not .Site.Params.alwaysKeepBrandColor }}change-header-color{{ end }}">
{{ partial "header" . }}
<!-- Main -->
......@@ -33,15 +33,16 @@
{{ end }}{{ end }}{{ end }}
</strong>
<span class="status summary__date" onclick="location.reload()"></span>
</div>
<span class="summary__date" onclick="location.reload()"></span>
</div>
{{ if $active }}
<div class="announcement-box">
{{ range $active }}
<div class="padding">
<p><strong>{{ .Title }}</strong></p>
{{ .Content }}
{{ .Content | safeHTML | truncate 500 "…" }}
<p><a href="{{ .Permalink }}">Continue reading</a></p>
</div>
{{ else }}{{ end }}
</div>
......@@ -53,15 +54,26 @@
<div class="components">
{{ $systems := .Site.Params.systems }}
{{ range $index, $systems }}
{{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .) }}
{{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .name) }}
{{ $thisIsNotice := where $activeComponentIssues "Params.severity" "=" "notice" }}
{{ $thisIsDisrupted := where $activeComponentIssues "Params.severity" "=" "disrupted" }}
{{ $thisIsDown := where $activeComponentIssues "Params.severity" "=" "down" }}
<div class="component" data-status="{{ if $thisIsDown }}down{{ else }}{{ if $thisIsDisrupted }}disrupted{{ else }}{{ if $thisIsNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}">
{{ $this := . }}
{{ . }}
{{ $this := .name }}
{{ .name }}
{{ with .description }}
<span class="description">
&nbsp; <span class="faded">(?)</span>
<span class="description__text">
{{ . }}
</span>
</span>
{{ end }}
<span class="component-status">
{{ if $thisIsDown }}
Down
......@@ -75,6 +87,12 @@
Operational
{{ end }}{{ end }}{{ end }}
</span>
{{ with .partial }}
<div>
{{ partial . . }}
</div>
{{ end }}
</div>
{{ end }}
</div>
......@@ -88,9 +106,17 @@
<a href="#incidents" class="tab tab--current">
Incidents
</a>
{{ if .Site.Params.showUptime }}
<a href="/stats" class="tab tab--other">
Uptime
</a>
{{ end }}
{{ range .Site.Params.customTabs }}
<a href="{{ .link }}" class="tab tab--other">
{{ .name }}
</a>
{{ end }}
</div>
</div>
......
......@@ -10,8 +10,16 @@
<body class="status-{{ if $isDown }}down{{ else }}{{ if $isDisrupted}}disrupted{{ else }}{{ if $isNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}">
{{ partial "header" . }}
<div class="contain">
<a href="{{ .Site.BaseURL }}">← Go back</a>
</div>
<div class="contain">
{{ .Render "issue" }}
</div>
{{ partial "footer" . }}
{{ partial "js" . }}
{{ partial "footer" . }}
</body>
</html>
<!--
This file can be used to add custom HTML
to your cState powered status page.
https://github.com/mistermantas/cstate/wiki/Customization
-->
<!--
This file can be used to add custom HTML
to your cState powered status page.
https://github.com/mistermantas/cstate/wiki/Customization
-->
<!--
This file can be used to add custom HTML
to your cState powered status page.
https://github.com/mistermantas/cstate/wiki/Customization
-->
<!--
This file can be used to add custom HTML
to your cState powered status page.
https://github.com/mistermantas/cstate/wiki/Customization
-->
<!--
This file can be used to add custom HTML
to your cState powered status page.
https://github.com/mistermantas/cstate/wiki/Customization
-->
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment