cState v5.2 update #211

7 files changed, 54 insertions, 26 deletions

diff --git a/README.md b/README.md
index 4defa63..c131215 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 <p align="center"><img src="images/cstate-logo-bg.svg?sanitize=true" width="500" height="auto" alt="cState example illustration"></p>
 
-> Über fast, backwards compatible (IE8+), tiny, and simple status page built with Hugo. Completely _free_ with Netlify. Comes with Netlify CMS, read-only API, and other useful features.
+> Über fast to load and build, backwards compatible (IE8+), tiny, and simple OSS status page built with Hugo. Completely _free_ with Netlify. Comes with Netlify CMS, read-only API, badges liek from shields.io, and other useful features.
 
 
 <p>
@@ -8,8 +8,10 @@
 <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/cstate/cstate?label=Star%20Repo&style=social">
 <a href="https://github.com/ivbeg/awesome-status-pages"><img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome status page" /></a></p>
 
+**[VISIT THE CSTATE WEBSITE HERE](https://cstate.netlify.app)**
+
+You can support the creator of this project by starring, sharing, using cState and/or [financially supporting the author](https://github.com/sponsors/mistermantas). Thank you!
 
-You can support the creator of this project by **starring, sharing, using cState and/or [financially supporting the author](https://github.com/sponsors/mistermantas)**. Thank you!
 
 ## Examples 🥳
 
@@ -45,29 +47,30 @@ You can support the creator of this project by **starring, sharing, using cState
 
 ## Features 😎
 
-> NEWLY RELEASED: [Embed cState into other pages and take advantage of its API. Alert users of downtime without needing to visit your status page!](https://github.com/cstate/html-embed)
+Fast.
 
-### Purpose / how it works
+* Fast to load. Even on Internet Explorer 8. Incredible browser support. Minimal JS. No CSS dependencies either.
+* Fast to create incidents. Use the command line or setup a CMS like Netlify CMS or Forestry for a no-code experience. See here
+* Stays fast. Hugo & Golang can build a site with thousands of entries in seconds.
 
-You can think of the cState status page as an informational hub. Because the software is static, it cannot directly monitor any services in real time.
+Nice.
 
-However, cState is a perfect option for recording incidents because most of the time your services are functioning, so the status page does not need to be updated. By default, the little bit of JavaScript on the page improves the user experience but is not required to see the most vital information.
+* Focused, adaptable design. Auto dark mode. Easy customization from one file (or settings page). Statistical calculations show the key take-away (e.g., time spent fixing an issue).
+* Fit for any language. With built-in support for English, German, French, Italian, Lithuanian, Macedonian, Dutch, Portuguese, Turkish, and Tagalog. See here
+* All incidents, sorted. Link incidents to systems/categories, let users know how long previous downtime took, and more.
+
+Free.
 
-There are other commercial options that may update faster because of their architecture, have built-in real-time uptime monitoring, send notifications by email or other means, but cState is not supposed to be better than paid solutions, but _good enough_.
+* Free hosting. Host on supported platforms like Netlify or manage cState yourself. See here
+* Free your data. Use RSS or the read-only API to create custom HTML/JS integrations or simply embed the built-in badges/shields.
+* Free for developers to expand upon. Integrate monitoring, link to other systems, change any text or style, create custom pages, and more.
 
-### List of possibilities
+**Please note that with all that cState _can_ do, it cannot do automatic monitoring out of the box. [See this thread](https://github.com/cstate/cstate/issues/124)** You can think of the cState status page as an informational hub. Because the software is static, it cannot directly monitor any services in real time.
+
+However, cState is a perfect option for recording incidents because most of the time your services are functioning, so the status page does not need to be updated. By default, the little bit of JavaScript on the page improves the user experience but is not required to see the most vital information.
 
-**Please note that with all that cState _can_ do, it cannot do automatic monitoring. [See this thread](https://github.com/cstate/cstate/issues/124)**
+There are other commercial options that may update faster because of their architecture, have built-in real-time uptime monitoring, send notifications by email or other means, but cState is not supposed to be better than paid solutions.
 
-| **cState is designed with care**                                                                                         	| **Fast, reliable, and free (even with host)**                                                                            	| **Easy to setup, manage, use**                                                                                                                           	|
-|--------------------------------------------------------------------------------------------------------------------------	|--------------------------------------------------------------------------------------------------------------------------	|----------------------------------------------------------------------------------------------------------------------------------------------------------	|
-| A simple and focused user interface & experience with [instant loading](https://github.com/cstate/cstate/issues/117), suitable for any brand                            	| Built with [Hugo](https://gohugo.io), a hyperfast Golang static site generator (SSG)                                     	| As easy as WordPress: if you don't like getting into the code, try Netlify CMS                                                                           	|
-| cState switches to dark mode automatically, [if told so by your OS and browser settings](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)                                   	| Use the full power of Hugo — flavored Markdown, shortcodes, templates, and more                                          	| Most of the settings are in the `config.yml` file or under _Settings_ in Netlify CMS                                                                           	|
-| Statistical calculations show the key take-away (e.g., time spent fixing an issue)                                       	| Airtight back-end security because cState is built on the [JAMstack](https://jamstack.org/)                              	| Create systems, categories for recording incidents (or even [informational posts](https://github.com/cstate/cstate/releases/tag/v4.0.0) and pages)                                                               	|
-| Great for data manipulation and viewing — cState has RSS, tag-like system feeds                                          	| HTTPS, domain linking, easy setup & high performance with [Netlify & Netlify CMS](#getting-started-) — *absolutely free* 	| Built-in [language files/translations](https://github.com/cstate/cstate/wiki/Translations#available-translations) for English, German, French, Turkish, and Lithuanian                                                                	|
-| Easy [linking to 3rd parties](https://github.com/cstate/cstate/wiki/Customization#tabs), customizable views, colors, HTML, and assets                                                	| You can also use many of the advanced features on platforms such as GitLab Pages & others that support Hugo              	| Extensive documentation on the [wiki](https://github.com/cstate/cstate/wiki)                                                                             	|
-| Very little JavaScript. Responsive CSS that is backwards compatible up to Internet Explorer 8                                                    	| Create your own workflow — cState generates static files that can be hosted literally anywhere (CDN, AWS, GitHub Pages)  	| Feel free to [create an issue](https://github.com/cstate/cstate/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) if you have any questions or feedback 	|
-| [Badges for showing the status on other websites (similiar to shields.io)](https://github.com/cstate/cstate/wiki/Badges) 	| [Read-only API available for even further integration](https://github.com/cstate/cstate/wiki/API)                        	| cState is always improving and the user community is only growing — [you're with good company](#sponsors-)                                                             	|
 
 
 ## Getting started 💻
diff --git a/layouts/index.json b/layouts/index.json
index 2a11077..bf2e62c 100644
--- a/layouts/index.json
+++ b/layouts/index.json
@@ -1,6 +1,6 @@
 {{ $incidents := where .Site.RegularPages "Params.section" "issue" }}{{ $active := where $incidents "Params.resolved" "=" false }}{{ $isNotice := where $active "Params.severity" "=" "notice" }}{{ $isDisrupted := where $active "Params.severity" "=" "disrupted" }}{{ $isDown := where $active "Params.severity" "=" "down" }}{
   "is": "index",
-  "cStateVersion": "5.1",
+  "cStateVersion": "5.2",
   "apiVersion": "2.0",
   "title": "{{ .Site.Title }}",
   "languageCodeHTML": "{{ .Site.LanguageCode }}",
diff --git a/layouts/partials/index/announcements.html b/layouts/partials/index/announcements.html
index 25a1719..e33c262 100644
--- a/layouts/partials/index/announcements.html
+++ b/layouts/partials/index/announcements.html
@@ -1,9 +1,32 @@
 {{ $incidents := where .Site.RegularPages "Params.section" "issue" }}
 {{ $active := where $incidents "Params.resolved" "=" false }}
+{{ $activeIncidents := where $incidents "Params.informational" "=" false }}
+{{ $pinned := where $incidents "Params.pin" "=" true }}
 
-{{ if $active }}
+{{ if or ($activeIncidents) ($pinned) }}
   <div class="announcement-box" style="border-bottom: 0">
-    {{ range $active }}
+    {{ range $activeIncidents }}
+      <div class="padding">
+        <p>
+          <a href="{{ .RelPermalink }}"><strong class="bold">{{ .Title }} →</strong></a>
+        </p>
+
+        <p><small>
+          {{ range .Params.Affected }}
+              
+          <a href="{{ printf "/affected/%s/" (. | urlize) | relURL }}" class="tag no-underline">{{ . }}</a>
+          
+          {{ end }}
+        </small></p>
+
+        {{ .Content | safeHTML | truncate 500 "…" }} <a href="{{ .RelPermalink }}"><b>→</b></a>
+        <p></p>
+      </div>
+      <hr class="clean announcement-box">
+    {{ end }}
+    
+    {{ range $pinned }}
+      {{ if .Params.informational }}
       <div class="padding">
         <p>
           <a href="{{ .RelPermalink }}"><strong class="bold">{{ .Title }} →</strong></a>
@@ -21,6 +44,7 @@
         <p></p>
       </div>
       <hr class="clean announcement-box">
+      {{ end }}
     {{ end }}
   </div>
-{{ end }}
\ No newline at end of file
+{{ end }} 
diff --git a/layouts/partials/index/components.html b/layouts/partials/index/components.html
index acb1aa7..d3d67bd 100644
--- a/layouts/partials/index/components.html
+++ b/layouts/partials/index/components.html
@@ -16,7 +16,7 @@
       <div class="bold padding clicky category__head" onclick="toggleCategoryHead(this)">
         <span class="hide-without-js">
           <span class="category__closed-marker">►</span>
-          <span class="category__open-marker">✕</span>
+          <span class="category__open-marker">▲</span>
         </span>
 
       <b>
@@ -136,4 +136,4 @@
     </div>
   {{ end }}
 
-</div>
\ No newline at end of file
+</div>
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index e11de17..88948df 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -3,7 +3,7 @@
    * Dev toolset
    */
 
-  console.log('cState v5.1 - https://github.com/cstate/cstate');
+  console.log('cState v5.2 - https://github.com/cstate/cstate');
   document.getElementsByTagName('html')[0].className = 'js';
 
   /**
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index 4e7d06e..0e8725b 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -12,7 +12,7 @@
     {{ range .AlternativeOutputFormats -}}
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
     {{ end -}}
-    <meta name="generator" content="cState v5.1 - https://github.com/cstate/cstate">
+    <meta name="generator" content="cState v5.2 - https://github.com/cstate/cstate">
     <meta name="theme-color" content="{{ .Site.Params.brand }}">
     <script>
     var themeBrandColor = '{{ .Site.Params.brand }}';
diff --git a/static/admin/config.yml b/static/admin/config.yml
index e611287..cd31629 100644
--- a/static/admin/config.yml
+++ b/static/admin/config.yml
@@ -57,6 +57,7 @@ collections:
       - {label: "Mark as resolved ✔", name: "resolved", widget: "boolean", required: false, default: false}
       - {label: "Hide this from the site (make it a draft) 👀", name: "draft", widget: "boolean", required: false, default: false}
       - {label: "Mark as informational ℹ", name: "informational", widget: "boolean", required: false, default: false}
+      - {label: "Pin to top of page", name: "pin", widget: "boolean", required: false, default: false}
       - {label: "End date & time (your time) ⌛", name: "resolvedWhen", widget: "datetime", required: false}
       - label: "Affected systems (use exact name, separated by commas) 🧐"
         name: "affected"