Categories FULLY WORKING

3 files changed, 44 insertions, 21 deletions

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; }