Adding badges with status colors to service definitions

content/services/gitea.da.md

@@ -3,12 +3,13 @@ layout: page
 title: Gitea
 service_badges:
   stability: positive
-  connection_security: positive
-  connection_anonymous: partial
-  storage_encrypted: negative
+  secure_connection: positive
+  anonymity: partial
+  encrypted_storage: negative
   zero_knowledge: negative
-  storage_backup: positive
+  backup: positive
   logging: negative
 ---
 
 Skriver du kode eller anden tekst som du gerne vil holde under versionsstyring, kan du gemme det her.
+

data/badges/da/badges.yaml

@@ -1,3 +1,13 @@
+# This determines which badges are active and the order to display them in
+active_badges:
+ - stability
+ - secure_connection
+ - encrypted_storage
+ - zero_knowledge
+ - backup
+ - logging
+ - anonymity
+
 badges:
 
   stability:

i18n/da.toml

@@ -12,3 +12,13 @@ other = "Status"
 
 [tagline]
 other = "<u>vores</u> data i <u>vores</u> hænder"
+
+[service_badge_stability]
+other = "Stabilitet"
+
+[service_badges_status_positive]
+other = "positiv"
+[service_badges_status_negative]
+other = "negativ"
+[service_badges_status_partial]
+other = "delvis"

themes/datacoop2020/assets/static/css/style.scss

@@ -280,6 +280,29 @@ dl.dl-services,
    
 }
 
+.service-badges {
+    display             : grid;
+    column-gap          : 2rem;
+    grid-template-columns: 1fr 1.5fr auto;
+    .badge-icon {
+      grid-column-start   : 1;
+      grid-column-end     : 2;
+    }
+    .badge-name {
+      grid-column-start   : 2;
+      grid-column-end     : 3;
+      font-weight         : bold;
+      margin-top: 20px;
+    }
+    .badge-description {
+      grid-column-start   : 3;
+      grid-column-end     : 4;
+      p {
+        margin-top: 20px;
+      }
+    }
+}
+
 .badge-status {
   width: 75px;
   height: 75px;

themes/datacoop2020/layouts/partials/badges.html

@@ -1,7 +1,9 @@
 <h2>{{ i18n "badges_headline" }}</h2>
 
 <section class="badge-definitions">
-{{ range $badge_key, $badge := $.Site.Data.badges.da.badges.badges }}
+{{/* TODO: This needs to be sensitive to current language */}}
+{{- $translated_badges := index $.Site.Data.badges .Lang }}
+{{ range $badge_key, $badge := $translated_badges.badges.badges }}
 
   <div class="badge-icon">
   {{$svg := printf "static/static/img/badges/%s" .icon}}

themes/datacoop2020/layouts/services/single.html

@@ -4,80 +4,37 @@
 
 {{ .Content }}
 
-<table>
+{{- $page_params := .Params }}
+{{- $translated_badges := index $.Site.Data.badges .Lang }}
 
-  <tr>
-    <th>
-      {{ i18n "service_badge_stability" }}
-    </th>
-    <td>
-      {{ with .Params.service_badges.stability | printf "service_badges_status_%s" }}
-        {{ i18n . }}
-      {{ end }}
-    </td>
-  </tr>
-  <tr>
-    <th>
-      {{ i18n "service_badge_connection_security" }}
-    </th>
-    <td>
-      {{ with .Params.service_badges.connection_security | printf "service_badges_status_%s" }}
-        {{ i18n . }}
-      {{ end }}
-    </td>
-  </tr>
-  <tr>
-    <th>
-      {{ i18n "service_badge_connection_anonymous" }}
-    </th>
-    <td>
-      {{ with .Params.service_badges.connection_anonymous | printf "service_badges_status_%s" }}
-        {{ i18n . }}
-      {{ end }}
-    </td>
-  </tr>
-  <tr>
-    <th>
-      {{ i18n "service_badge_storage_encrypted" }}
-    </th>
-    <td>
-      {{ with .Params.service_badges.storage_encrypted | printf "service_badges_status_%s" }}
-        {{ i18n . }}
-      {{ end }}
-    </td>
-  </tr>
-  <tr>
-    <th>
-      {{ i18n "service_badge_zero_knowledge" }}
-    </th>
-    <td>
-      {{ with .Params.service_badges.zero_knowledge | printf "service_badges_status_%s" }}
-        {{ i18n . }}
-      {{ end }}
-    </td>
-  </tr>
-  <tr>
-    <th>
-      {{ i18n "service_badge_storage_backup" }}
-    </th>
-    <td>
-      {{ with .Params.service_badges.storage_backup | printf "service_badges_status_%s" }}
-        {{ i18n . }}
-      {{ end }}
-    </td>
-  </tr>
-  <tr>
-    <th>
-      {{ i18n "service_badge_logging" }}
-    </th>
-    <td>
-      {{ with .Params.service_badges.logging | printf "service_badges_status_%s" }}
-        {{ i18n . }}
-      {{ end }}
-    </td>
-  </tr>
+<div class="service-badges">
+{{ range $translated_badges.badges.active_badges }}
 
-</table>
+  {{- $badge := index $translated_badges.badges.badges . }}
+  {{- $status := index $page_params.service_badges . -}}
+  <div class="badge-icon badge-status-{{ $status }}">
+    {{ $svg := printf "static/static/img/badges/%s" $badge.icon }}
+    {{ $svg  | readFile | safeHTML }}
+  </div>
+  
+  <div class="badge-name">
+    {{ title $badge.name }}<br>
+    = {{ i18n ($status | printf "service_badges_status_%s") }}
+  </div>
+  
+  
+  <div class="badge-description">
+    {{- $markdown := $badge.description | markdownify -}}
 
+    {{ if not ( findRE "<[h|p][^>]*>" $markdown ) }}
+        <p>{{ $markdown }}</p>
+    {{ else }}
+        {{ $markdown }}
+    {{ end }}
+
+  </div>
+
+{{ end }}
+</div>
 
 {{- end -}}