From b4e6e27d0ad03f7e9e7b11df2c5262aff95d377b Mon Sep 17 00:00:00 2001
From: Dave Lane <dave@oerfoundation.org>
Date: Sun, 18 Aug 2024 13:56:25 +1200
Subject: [PATCH] WIP

---
 src/routes/+page.svelte | 45 ++++++++++++++++++++++++++++++++---------
 1 file changed, 35 insertions(+), 10 deletions(-)

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index c3c4f3c..8d3d774 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -125,7 +125,7 @@
     const hosts = getKeys(results.instance_tags.hosts);
 
     //console.log('categories array: ', results.tech_tags.categories);
-    console.log('categories keys: ', categories);
+    //console.log('categories keys: ', categories);
 
 </script>
 
@@ -140,25 +140,33 @@
     <div class="filters">
         <div class="tag-list tech">
             <div class="tags tech categories">
-            {#each categories as category}
-                <span class="tag">{category}</span>
+            {#each categories as category}<span class="tag category">{category}</span> {/each}
+            </div>
+            <div class="tags tech analogues">
+            {#each analogues as analogue}
+                <span class="tag analogue">{analogue}</span>
+            {/each}
+            </div>
+            <div class="tags tech licenses">
+            {#each licenses as license}
+                <span class="tag license">{license}</span>
             {/each}
             </div>
         </div>
         <div class="tag-list instance">
             <div class="tags instance statuses">
             {#each statuses as status}
-                <span class="tag">{status}</span>
+                <span class="tag status">{status}</span>
             {/each}
             </div>
             <div class="tags instance affiliates">
             {#each affiliates as affiliate}
-                <span class="tag">{affiliate}</span>
+                <span class="tag affilate">{affiliate}</span>
             {/each}
             </div>
             <div class="tags instance hosts">
             {#each hosts as host}
-                <span class="tag">{host}</span>
+                <span class="tag host">{host}</span>
             {/each}
             </div>
         </div>
@@ -198,18 +206,35 @@
     .summary {
     }
     .filters {
-    }
-    .filters .tags {
-        background-color: #f1ff94;
+        /*background-color: #f1ff94;
         padding: 0.5em;
         border: 3px solid #cbea77;
+        margin: 1em 0;*/
+        margin-bottom: 1em;
+    }
+    .filters .tags {
+        /*padding: 0.5em;*/
         margin: 1em 0;
+        display: block;
+    }
+    .tag-list {
+        white-space: normal;
+        word-break: normal;
+        display: inline;
     }
     .tag {
         font-size: 80%;
         color: #777;
-        margin-right: 1em;
+        margin-right: 0.5em;
+        line-height: 2;
+        background-color: #a369a2;
+        color: #fff;
+        padding: 4px 8px;
+        border-radius: 10px;
+        white-space: nowrap;
+        word-break: keep-all;
     }
+    .tag:after { content: "\00a0"; }
     .tiles {
         display: grid;
         grid-gap: 15px;