diff options
| -rw-r--r-- | exampleSite/config.yml | 13 | ||||
| -rw-r--r-- | layouts/partials/index/components.html | 115 | ||||
| -rw-r--r-- | layouts/partials/meta.html | 5 |
3 files changed, 90 insertions, 43 deletions
diff --git a/exampleSite/config.yml b/exampleSite/config.yml index 74d30b4..8b45b9b 100644 --- a/exampleSite/config.yml +++ b/exampleSite/config.yml @@ -99,6 +99,8 @@ baseURL: https://cstate.mnts.lt ############################################################ params: + enableCategories: false + # These are your systems. Change them to # change the amount of components. # @@ -106,10 +108,21 @@ params: # https://github.com/cstate/cstate/wiki/Customization systems: - name: Gateway + category: North Coast - name: API description: The guts of the application. + category: Uncategorized - name: Media Proxy 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? # 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"> - <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"> + <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"> + <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 diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html index 6a6f790..ad4655a 100644 --- a/layouts/partials/meta.html +++ b/layouts/partials/meta.html @@ -27,7 +27,7 @@ margin: 0; background: #fff; color: #4d4d4d; - font: 100%/1.5 BlinkMacSystemFont, -apple-system, "San Francisco Text", "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font: 100%/1.5 'Inter UI', BlinkMacSystemFont, -apple-system, "San Francisco Text", "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0, 0.25); } @@ -64,7 +64,8 @@ h1, h2, h4 { font-weight: normal; color: #000; - font-family: "Segoe UI", BlinkMacSystemFont, -apple-system, "San Francisco Text", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + font-family: 'Inter UI', "Segoe UI", BlinkMacSystemFont, -apple-system, "San Francisco Text", "Roboto", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; + letter-spacing: -1px; } h3 { |