v2-dev2

README.md

-# 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).

archetypes/default.md

@@ -3,6 +3,7 @@ Title:
 Date:
 Resolved:
 ResolvedWhen:
+# down, disrupted, notice
 Severity:
 Affected:
 Section: issue

exampleSite/config.yml

@@ -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: ../..

exampleSite/content/api.html

+---
+---
+
+<!--
+Please keep this file if you wish to enable API access.
+-->

exampleSite/content/stats.html

 ---
 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.
+-->

exampleSite/layouts/README.md

+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).

exampleSite/netlify.toml

+[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"

exampleSite/static/README.md

+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.

layouts/_default/single.html

@@ -7,4 +7,8 @@
       {{ .Render "post" }}
     </div>
 
-{{ partial "footer" . }}
+
+    {{ partial "js" . }}
+    {{ partial "footer" . }}
+  </body>
+</html>

layouts/index.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>
 

layouts/issues/single.html

@@ -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>

layouts/partials/custom/above-footer.html

+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->

layouts/partials/custom/above-header.html

+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->

layouts/partials/custom/below-footer.html

+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->

layouts/partials/custom/below-header.html

+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->

layouts/partials/custom/meta.html

+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->