From 81b078a04d0555de9658898d4da73e0ac83bd31c Mon Sep 17 00:00:00 2001
From: Mantas <11616378+mistermantas@users.noreply.github.com>
Date: Tue, 7 May 2019 22:29:51 +0300
Subject: First working example of categories

---
 layouts/partials/index/components.html | 115 +++++++++++++++++++++------------
 1 file changed, 74 insertions(+), 41 deletions(-)

(limited to 'layouts/partials/index/components.html')

diff --git a/layouts/partials/index/components.html b/layouts/partials/index/components.html
index 128b887..392acb7 100644
--- a/layouts/partials/index/components.html
+++ b/layouts/partials/index/components.html
@@ -5,49 +5,82 @@
 {{ $isDisrupted := where $active "Params.severity" "=" "disrupted" }}
 {{ $isDown := where $active "Params.severity" "=" "down" }}
 
-<div class="components">
-    {{ $systems := .Site.Params.systems }}
-    {{ range $systems }}
-      {{ $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 }}">
-        <a href="/affected/{{ .name | urlize }}" class="no-underline">
-          {{ .name }}
-        </a>
-
-        {{ with .description }}
-          <span class="tooltip tooltip--small">
-            &nbsp; <span class="faded">(?)</span>
-
-            <span class="tooltip__text">
-              {{ . }}
-            </span>
+<!-- Individual info -->
+<div class="categories">
+  {{ $systems := .Site.Params.systems }}
+  {{ $categories := .Site.Params.categories }}
+
+  {{ range $categories }}
+    <div class="category">
+      {{ if not .untitled }}
+      <div class="bold" style="margin: 12px 0">
+      {{ if .closed }}⯈{{ else }}⯆{{ end }}
+
+      <b>{{ .name }}</b>
+      
+      {{ with .description }}
+        <span class="tooltip tooltip--small">
+          &nbsp; <span class="faded">(?)</span>
+
+          <span class="tooltip__text">
+            {{ . }}
           </span>
-        {{ end }}
-
-        <span class="component-status">
-          {{ if $thisIsDown }}
-            <b>{{ T "thisIsDown" }}</b>
-          {{ else }}
-          {{ if $thisIsDisrupted }}
-            <b>{{ T "thisIsDisrupted" }}</b>
-          {{ else }}
-          {{ if $thisIsNotice }}
-            <b>{{ T "thisIsNotice" }}</b>
-          {{ else }}
-            {{ T "thisIsOk" }}
-          {{ end }}{{ end }}{{ end }}
         </span>
+      {{ end }}
+
+      </div>
+      {{ else }}
+      <div class="padding"></div>
+      {{ end }}
+
+      {{ $categorySystems := where $systems "category" "=" .name }}
+
+      <div class="components">
+      {{ range $categorySystems }}
+        {{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .name) }}
 
-        {{ with .partial }}
-        <div>
-          {{ partial . . }}
+        {{ $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 }}">
+          <a href="/affected/{{ .name | urlize }}" class="no-underline">
+            {{ .name }}
+          </a>
+
+          {{ with .description }}
+            <span class="tooltip tooltip--small">
+              &nbsp; <span class="faded">(?)</span>
+
+              <span class="tooltip__text">
+                {{ . }}
+              </span>
+            </span>
+          {{ end }}
+
+          <span class="component-status">
+            {{ if $thisIsDown }}
+              {{ T "thisIsDown" }}
+            {{ else }}
+            {{ if $thisIsDisrupted }}
+              {{ T "thisIsDisrupted" }}
+            {{ else }}
+            {{ if $thisIsNotice }}
+              {{ T "thisIsNotice" }}
+            {{ else }}
+              {{ T "thisIsOk" }}
+            {{ end }}{{ end }}{{ end }}
+          </span>
+
+          {{ with .partial }}
+          <div>
+            {{ partial . . }}
+          </div>
+          {{ end }}
         </div>
-        {{ end }}
+      {{ end }}
       </div>
-    {{ end }}
-  </div>
\ No newline at end of file
+    </div>
+  {{ end }}
+
+</div>
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From f8b0da97d84c043576418b9d28f5d75d94d611aa Mon Sep 17 00:00:00 2001
From: Mantas <11616378+mistermantas@users.noreply.github.com>
Date: Wed, 8 May 2019 22:16:24 +0300
Subject: Categories working except for the arrow

---
 exampleSite/config.yml                 |  6 +++++-
 layouts/partials/index/components.html |  8 +++++---
 layouts/partials/index/summary.html    |  2 +-
 layouts/partials/meta.html             | 26 +++++++++++++++++++-------
 4 files changed, 30 insertions(+), 12 deletions(-)

(limited to 'layouts/partials/index/components.html')

diff --git a/exampleSite/config.yml b/exampleSite/config.yml
index 8b45b9b..a45d06d 100644
--- a/exampleSite/config.yml
+++ b/exampleSite/config.yml
@@ -109,6 +109,8 @@ params:
   systems:
     - name: Gateway
       category: North Coast
+    - name: Backup Gateway
+      category: East Coast
     - name: API
       description: The guts of the application.
       category: Uncategorized
@@ -119,10 +121,12 @@ params:
   categories:
     - name: North Coast
       description: The worst one. Or the best one.
-      closed: true      
+      closed: true
+    - name: East Coast      
     - name: Uncategorized
       untitled: true
     
+    
 
   # What date format to use?
   #
diff --git a/layouts/partials/index/components.html b/layouts/partials/index/components.html
index 392acb7..47da96c 100644
--- a/layouts/partials/index/components.html
+++ b/layouts/partials/index/components.html
@@ -13,8 +13,10 @@
   {{ range $categories }}
     <div class="category">
       {{ if not .untitled }}
-      <div class="bold" style="margin: 12px 0">
-      {{ if .closed }}⯈{{ else }}⯆{{ end }}
+      <div class="bold padding clicky category__head" onclick="document.querySelector('#{{ .name | urlize }}').classList.toggle('hidden'); document.querySelector('#{{ .name | urlize }}-toggle').classList.toggle('hidden')">
+        <span class="hide-without-js" id="{{ .name | urlize }}-toggle">
+          {{ if .closed }}⯈{{ else }}⯆{{ end }}
+        </span>
 
       <b>{{ .name }}</b>
       
@@ -35,7 +37,7 @@
 
       {{ $categorySystems := where $systems "category" "=" .name }}
 
-      <div class="components">
+      <div class="components {{ if .closed }}hidden{{ end }}" id="{{ .name | urlize }}">
       {{ range $categorySystems }}
         {{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .name) }}
 
diff --git a/layouts/partials/index/summary.html b/layouts/partials/index/summary.html
index d8e3108..de6bceb 100644
--- a/layouts/partials/index/summary.html
+++ b/layouts/partials/index/summary.html
@@ -20,5 +20,5 @@
     {{ end }}{{ end }}{{ end }}
   </strong>
 
-  <span class="summary__date float-right" onclick="location.reload()"></span>
+  <div class="summary__date clicky float-right" onclick="location.reload()"></div>
 </div>
\ No newline at end of file
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index ad4655a..9acc554 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -20,6 +20,8 @@
     var themeNoticeColor = '#{{ .Site.Params.notice }}';
     var themeDisruptedColor = '#{{ .Site.Params.disrupted }}';
     var themeDownColor = '#{{ .Site.Params.down }}';
+
+
     </script>
     <!-- Sources -->
     <style>
@@ -110,6 +112,21 @@
     .padding-s { padding: 6px; }
     .padding { padding: 12px; }
 
+    .clicky { cursor: pointer; }
+    .hidden { display: none; }
+    
+
+
+    /**
+     * Categories
+     */
+
+
+    .hide-without-js { display: none; }
+    .js span.hide-without-js { display: inline; }
+    .js div.hide-without-js { display: block; }
+
+
     /**
      * UI elements
      */
@@ -182,11 +199,6 @@
       color: #fff;
     }
 
-    .summary__date {
-      display: block;
-      cursor: pointer;
-    }
-
     .summary__date:hover {
       color: #ccc;
     }
@@ -268,8 +280,8 @@
      */
 
     .issue { display: block; padding: 14px 24px; }
-    .issue:hover { background: #f5f5f5; }
-    .issue:active { background: #eee; }
+    .issue:hover, .category__head:hover { background: #f5f5f5; }
+    .issue:active, .category__head:active { background: #eee; }
 
     .issue h3 { line-height: 1.25; }
 
-- 
cgit v1.2.3-70-g09d2


From d64bc9eb93d842739671c0de8b6266e787531085 Mon Sep 17 00:00:00 2001
From: Mantas <11616378+mistermantas@users.noreply.github.com>
Date: Thu, 9 May 2019 20:00:36 +0300
Subject: Categories FULLY WORKING

---
 exampleSite/config.yml                 | 41 ++++++++++++++++++++++++----------
 layouts/partials/index/components.html | 15 ++++++++-----
 layouts/partials/meta.html             |  9 +++++---
 3 files changed, 44 insertions(+), 21 deletions(-)

(limited to 'layouts/partials/index/components.html')

diff --git a/exampleSite/config.yml b/exampleSite/config.yml
index a45d06d..5df05d8 100644
--- a/exampleSite/config.yml
+++ b/exampleSite/config.yml
@@ -83,7 +83,7 @@ defaultContentLanguage: en
 # What is the hostname or path to the root?
 # Where is the site hosted?
 #
-# 💥 cState & Hugo don’t support '/' in
+# ❗ cState & Hugo don’t support '/' in
 # production use. It will break RSS
 # feeds and breaks permalinks since
 # version 3. If you are just testing,
@@ -99,7 +99,34 @@ baseURL: https://cstate.mnts.lt
 ############################################################
 
 params:
-  enableCategories: false
+  # Before setting up your systems, you need
+  # to first define at least one category.
+  #
+  # Categories are shown in the order that
+  # you define in this config file.
+  #
+  # Categories can have a:
+  # - name
+  # - description
+  # - closed boolean `closed: true`
+  #   That would collapse the category upon first load
+  #   and the user can expand by clicking on the category
+  #   (Requires JavaScript.)
+  # - untitled boolean `untitled: true`
+  #   This would complerely hide the name of the category.
+  #   This is useful, if you do not want to use categories
+  #   because you need to set an 'Uncategorized' category.
+  #   Or it can be used alongside other categories.
+  #
+  # For help, see the wiki:
+  # https://github.com/cstate/cstate/wiki/Customization
+  categories:
+    - name: North Coast
+      description: The main servers are located here.
+      closed: true
+    - name: East Coast      
+    - name: Uncategorized
+      untitled: true
 
   # These are your systems. Change them to
   # change the amount of components.
@@ -118,16 +145,6 @@ params:
       description: This is the service responsible for serving images, audio, and video. It is reliant on our CDN.
       category: Uncategorized
 
-  categories:
-    - name: North Coast
-      description: The worst one. Or the best one.
-      closed: true
-    - name: East Coast      
-    - name: Uncategorized
-      untitled: true
-    
-    
-
   # What date format to use?
   #
   # Hugo formatting docs:
diff --git a/layouts/partials/index/components.html b/layouts/partials/index/components.html
index 47da96c..803c44f 100644
--- a/layouts/partials/index/components.html
+++ b/layouts/partials/index/components.html
@@ -11,14 +11,17 @@
   {{ $categories := .Site.Params.categories }}
 
   {{ range $categories }}
-    <div class="category">
+    <div class="category {{ if .closed }}category--closed{{ else }}category--open{{ end }}" id="{{ .name | urlize }}">
       {{ if not .untitled }}
-      <div class="bold padding clicky category__head" onclick="document.querySelector('#{{ .name | urlize }}').classList.toggle('hidden'); document.querySelector('#{{ .name | urlize }}-toggle').classList.toggle('hidden')">
-        <span class="hide-without-js" id="{{ .name | urlize }}-toggle">
-          {{ if .closed }}⯈{{ else }}⯆{{ end }}
+      <div class="bold padding clicky category__head" onclick="this.parentNode.classList.toggle('category--closed'); this.parentNode.classList.toggle('category--open')">
+        <span class="hide-without-js">
+          <span class="category__closed-marker">⯈</span>
+          <span class="category__open-marker">⯆</span>
         </span>
 
-      <b>{{ .name }}</b>
+      <b>
+        {{ .name }}
+      </b>
       
       {{ with .description }}
         <span class="tooltip tooltip--small">
@@ -37,7 +40,7 @@
 
       {{ $categorySystems := where $systems "category" "=" .name }}
 
-      <div class="components {{ if .closed }}hidden{{ end }}" id="{{ .name | urlize }}">
+      <div class="components">
       {{ range $categorySystems }}
         {{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .name) }}
 
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index 9acc554..1acf474 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -111,17 +111,20 @@
     .right { text-align: right; }
     .padding-s { padding: 6px; }
     .padding { padding: 12px; }
-
     .clicky { cursor: pointer; }
-    .hidden { display: none; }
-    
 
 
     /**
      * Categories
      */
 
+    /* Categories themselves */
+    .js .category--open .category__closed-marker { display: none; }
+    .js .category--closed .components { display: none; }
+    .js .category--closed .category__open-marker { display: none; }
 
+    /* Markers */
+    .js .hidden-with-js { display: none; }
     .hide-without-js { display: none; }
     .js span.hide-without-js { display: inline; }
     .js div.hide-without-js { display: block; }
-- 
cgit v1.2.3-70-g09d2


From 7faf0860dfe7e6110669cda0963a7f0d60ce0dda Mon Sep 17 00:00:00 2001
From: Mantas <11616378+mistermantas@users.noreply.github.com>
Date: Sun, 12 May 2019 12:14:10 +0300
Subject: IE8+ JavaScript

---
 layouts/partials/index/components.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'layouts/partials/index/components.html')

diff --git a/layouts/partials/index/components.html b/layouts/partials/index/components.html
index 803c44f..135349a 100644
--- a/layouts/partials/index/components.html
+++ b/layouts/partials/index/components.html
@@ -10,10 +10,20 @@
   {{ $systems := .Site.Params.systems }}
   {{ $categories := .Site.Params.categories }}
 
+  <script>
+  function toggleCategoryHead(el) {
+    if (el.parentNode.className == 'category category--open') {
+      el.parentNode.className = 'category category--closed';
+    } else {
+      el.parentNode.className = 'category category--open';
+    }
+  }
+  </script>
+
   {{ range $categories }}
     <div class="category {{ if .closed }}category--closed{{ else }}category--open{{ end }}" id="{{ .name | urlize }}">
       {{ if not .untitled }}
-      <div class="bold padding clicky category__head" onclick="this.parentNode.classList.toggle('category--closed'); this.parentNode.classList.toggle('category--open')">
+      <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>
-- 
cgit v1.2.3-70-g09d2