diff options
| -rw-r--r-- | exampleSite/config.yml | 41 | ||||
| -rw-r--r-- | layouts/partials/index/components.html | 13 | ||||
| -rw-r--r-- | layouts/partials/index/summary.html | 2 | ||||
| -rw-r--r-- | layouts/partials/meta.html | 29 |
4 files changed, 63 insertions, 22 deletions
diff --git a/exampleSite/config.yml b/exampleSite/config.yml index 8b45b9b..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. @@ -109,6 +136,8 @@ params: systems: - name: Gateway category: North Coast + - name: Backup Gateway + category: East Coast - name: API description: The guts of the application. category: Uncategorized @@ -116,14 +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: 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 392acb7..803c44f 100644 --- a/layouts/partials/index/components.html +++ b/layouts/partials/index/components.html @@ -11,12 +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" style="margin: 12px 0"> - {{ 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"> 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..1acf474 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> @@ -109,6 +111,24 @@ .right { text-align: right; } .padding-s { padding: 6px; } .padding { padding: 12px; } + .clicky { cursor: pointer; } + + + /** + * 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; } + /** * UI elements @@ -182,11 +202,6 @@ color: #fff; } - .summary__date { - display: block; - cursor: pointer; - } - .summary__date:hover { color: #ccc; } @@ -268,8 +283,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; } |