From 407eceb81cca1f30fc99c6315ec9fc38ac48384d Mon Sep 17 00:00:00 2001
From: Benjamin Bach <benjamin@overtag.dk>
Date: Mon, 6 Mar 2023 19:37:48 +0100
Subject: [PATCH] Adding badges with status colors to service definitions

---
 content/services/gitea.da.md                  |   9 +-
 data/badges/da/badges.yaml                    |  10 ++
 i18n/da.toml                                  |  10 ++
 .../datacoop2020/assets/static/css/style.scss |  23 ++++
 .../datacoop2020/layouts/partials/badges.html |   4 +-
 .../datacoop2020/layouts/services/single.html | 101 +++++-------------
 6 files changed, 80 insertions(+), 77 deletions(-)

diff --git a/content/services/gitea.da.md b/content/services/gitea.da.md
index 795ca56..b2d790e 100644
--- a/content/services/gitea.da.md
+++ b/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.
+
diff --git a/data/badges/da/badges.yaml b/data/badges/da/badges.yaml
index d6055ef..ede97f6 100644
--- a/data/badges/da/badges.yaml
+++ b/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:
diff --git a/i18n/da.toml b/i18n/da.toml
index 7d5dd74..ae7a532 100644
--- a/i18n/da.toml
+++ b/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"
diff --git a/themes/datacoop2020/assets/static/css/style.scss b/themes/datacoop2020/assets/static/css/style.scss
index 8fb16ee..9611914 100644
--- a/themes/datacoop2020/assets/static/css/style.scss
+++ b/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;
diff --git a/themes/datacoop2020/layouts/partials/badges.html b/themes/datacoop2020/layouts/partials/badges.html
index f0a9d49..0d7ae93 100644
--- a/themes/datacoop2020/layouts/partials/badges.html
+++ b/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}}
diff --git a/themes/datacoop2020/layouts/services/single.html b/themes/datacoop2020/layouts/services/single.html
index aad5ee5..6ee3023 100644
--- a/themes/datacoop2020/layouts/services/single.html
+++ b/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 -}}