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) {
+        if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array) return true;
-            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,64 +70,90 @@
 </script>
 
 <div class="webservices">
-    <div class="row">
+    <h1>Dave Web Services</h1>
-        <h1>Dave Web Services</h1>
 
-        <div class="summary">
+    <div class="summary cell-2">
-            <ul>
+        <ul>
-                <li>Total number of services: {stats.total_instances}</li>
+            <li>Total number of services: {stats.total_instances}</li>
-            </ul>
+        </ul>
-        </div>
     </div>
 
     {#each technologies as technology}
-    <div class="row">
+    <div class="technology cell">
-        <div class="technology">
+        <h2><a href="{technology.website}">{technology.name}</a></h2>
-            <h2><a href="{technology.website}">{technology.name}</a></h2>
+        <p>{technology.description}</p>
-        </div>
-        {#if hasInstances(technology)}
-        <div class="instances">
-            <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>
-                {/each}
-            </ul>
-        </div>
-        {:else}
-         <div class="instances">
-            <ul class="instances">
-                <li>Nothing here yet...</li>
-            </ul>
-        </div>
-        {/if}
     </div>
+    {#if hasInstances(technology)}
+    <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>
+            {/each}
+        </ul>
+    </div>
+    {:else}
+    <div class="instances cell">
+        <ul class="instances">
+            <li>Nothing here yet...</li>
+        </ul>
+    </div>
+    {/if}
     {/each}
 </div>
 
 <style>
-  body { bg-color: #eee; }
+    html { background-color: #eee; }
-  h1 { padding-left: 0.5em; }
+    body {
-  a { text-decoration: none; }
+        background-color: #fff;
-  .webservices {
+        box-sizing: border-box;
-      display: table;
+        margin: 0 auto;
-      gap: 6px;
+        min-height: 100%;
-      background-color: #efefef;
+        padding: 2em;
-      width: 90%;
+        max-width: 800px;
-      margin: 0 auto;
+        font-size: 1.2em;
-  }
+        border: double 3px #ddd;
-  .row {
+        border-top: none;
-      display: table-row;
+        border-bottom: none;
-      box-shadow: 5px 5px 4px #ccc;
+    }
-      padding: 5px;
+    h1 { padding-left: 0.5em; }
-      margin-bottom: 10px;
+    a { text-decoration: none; }
-  }
+    .webservices {
-  .technology {
+        display: flex;
-      background-color: #fff;
+        flex-wrap: wrap;
-      display: table-cell;
+        background-color: #efefef;
-  }
+        width: 60%;
-  .instances {
+        margin: 0 auto 3em auto;
-      background-color: #fff;
+        padding: 0;
-      display: table-cell;
+    }
-  }
+    .cell {
-  .webservices li { list-style-type: none; }
+        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: #efefef;
+    }
+    .instances {
+        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>