WIP commit - just about to set up new 'tile' approach to formatting

src/routes/+page.js

@@ -3,7 +3,7 @@ export const load = async ({ fetch }) => {
     const webservicesResult = await fetch('https://static.magnificent.nz/webservices/webservices.json');
     const webservicesData = await webservicesResult.json();
 
-    console.log(webservicesData);
+    //console.log(webservicesData);
     return {
         webservices: {
             technologies: webservicesData.technologies,

src/routes/+page.svelte

@@ -7,8 +7,10 @@
     function processData(webservices) {
         let instances = 0;
         let current = {};
+        let current_status = [];
         let future = {};
-        let affiliates = {};
+        let affiliates = [];
+        let analogues = []
         //
         // just a trivial reassignment
         let hosts = webservices.hosts;
@@ -17,9 +19,24 @@
         webservices.technologies.forEach(function(tech, i) {
             if (hasInstances(tech)) {
                 console.log(tech.name + ': ' + tech.instances.length + ' instances...');
-                instances += tech.instances.length;
+                tech.instances.forEach(function(instance, i) {
+                    if (hasAffiliation(instance)) {
+                        let tag = instance.affiliation;
+                        affiliates[tag] += 1;
+                        console.log('added tag: ' + tag);
                     }
-        })
+                });
+            }
+            getAnalogues(analogues, tech) {
+                single =
+                if
+                analogues = analogues.concat(local);
+            }
+        });
+        /*affiliates.forEach(function(num, tag) {
+            console.log(tag + ': ' + num);
+        });*/
+        console.log('affiliates: ', affiliates);
 
         return {
             total_instances: instances,
@@ -32,9 +49,15 @@
 
 //    console.log(technologies);
     function hasInstances(tech) {
-        if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array) {
-            return true;
+        if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array) return true;
+        return false;
     }
+    function hasAffiliation(instance) {
+        if (instance.hasOwnProperty('affiliation')) return true;
+        return false;
+    }
+    function hasStatus(instance) {
+        if (instance.hasOwnProperty('status')) return true;
         return false;
     }
 
@@ -47,23 +70,21 @@
 </script>
 
 <div class="webservices">
-    <div class="row">
     <h1>Dave Web Services</h1>
 
-        <div class="summary">
+    <div class="summary cell-2">
         <ul>
             <li>Total number of services: {stats.total_instances}</li>
         </ul>
     </div>
-    </div>
 
     {#each technologies as technology}
-    <div class="row">
-        <div class="technology">
+    <div class="technology cell">
         <h2><a href="{technology.website}">{technology.name}</a></h2>
+        <p>{technology.description}</p>
     </div>
     {#if hasInstances(technology)}
-        <div class="instances">
+    <div class="instances cell">
         <ul class="instances">
             {#each technology.instances as instance}
             <li><a href="https://{instance.domain}">{instance.domain}</a> <span class="affiliation {instance.affiliation}">{instance.affiliation}</span></li>
@@ -71,40 +92,68 @@
         </ul>
     </div>
     {:else}
-         <div class="instances">
+    <div class="instances cell">
         <ul class="instances">
             <li>Nothing here yet...</li>
         </ul>
     </div>
     {/if}
-    </div>
     {/each}
 </div>
 
 <style>
-  body { bg-color: #eee; }
+    html { background-color: #eee; }
+    body {
+        background-color: #fff;
+        box-sizing: border-box;
+        margin: 0 auto;
+        min-height: 100%;
+        padding: 2em;
+        max-width: 800px;
+        font-size: 1.2em;
+        border: double 3px #ddd;
+        border-top: none;
+        border-bottom: none;
+    }
     h1 { padding-left: 0.5em; }
     a { text-decoration: none; }
     .webservices {
-      display: table;
-      gap: 6px;
+        display: flex;
+        flex-wrap: wrap;
         background-color: #efefef;
-      width: 90%;
-      margin: 0 auto;
+        width: 60%;
+        margin: 0 auto 3em auto;
+        padding: 0;
     }
-  .row {
-      display: table-row;
-      box-shadow: 5px 5px 4px #ccc;
-      padding: 5px;
-      margin-bottom: 10px;
+    .cell {
+        box-sizing: border-box;
+        flex-grow: 1;
+        width: 100%;
+        padding: 0.8em 1.2em;
+        overflow: hidden;
+        border: solid 3px white;
+    }
+    .webservices > .cell {
+        width: 50%;
     }
     .technology {
-      background-color: #fff;
-      display: table-cell;
+        background-color: #efefef;
     }
     .instances {
-      background-color: #fff;
-      display: table-cell;
+        background-color: #eee;
     }
     .webservices li { list-style-type: none; }
+    .cell > h1, .cell > h2, .cell > h3, .cell > h4, .cell > h5 { margin: 0; }
+    /*
+     * Breakpoints
+     */
+    @media all and (max-width: 500px) {
+        .collapse { display: block; }
+        .collapse > .cell { width: 100% !important; }
+    }
+   /* .no-flexbox .webservices {
+        display: block;
+        .no-flexbox .webservices > cell { width: 100%; }
+    } */
+
 </style>