wip for laying out and processing webservices.json data

src/routes/+page.js

@@ -0,0 +1,14 @@
+// for multiple async fetches: https://youtu.be/EQy-AYhZIlE?si=FwyAPUjbixSUlc9q&t=490
+export const load = async ({ fetch }) => {
+    const webservicesResult = await fetch('https://static.magnificent.nz/webservices/webservices.json');
+    const webservicesData = await webservicesResult.json();
+
+    console.log(webservicesData);
+    return {
+        webservices: {
+            technologies: webservicesData.technologies,
+            hosts: webservicesData.hosts
+        }
+    };
+}
+

src/routes/+page.svelte

@@ -1,2 +1,110 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
+<script>
+    export let data;
+    const { webservices } = data;
+    //console.log(webservices);
+
+
+    function processData(webservices) {
+        let instances = 0;
+        let current = {};
+        let future = {};
+        let affiliates = {};
+        //
+        // just a trivial reassignment
+        let hosts = webservices.hosts;
+        //
+        // pull out relevant info in useful chunks.
+        webservices.technologies.forEach(function(tech, i) {
+            if (hasInstances(tech)) {
+                console.log(tech.name + ': ' + tech.instances.length + ' instances...');
+                instances += tech.instances.length;
+            }
+        })
+
+        return {
+            total_instances: instances,
+            active_services: current,
+            candidate_services: future,
+            affiliates: affiliates,
+            hosts: hosts
+        };
+    }
+
+//    console.log(technologies);
+    function hasInstances(tech) {
+        if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array) {
+            return true;
+        }
+        return false;
+    }
+
+    let stats = processData(webservices);
+    console.log('stats = ' + stats.total_instances);
+
+    const technologies = webservices.technologies;
+    const hosts = webservices.hosts;
+
+</script>
+
+<div class="webservices">
+    <div class="row">
+        <h1>Dave Web Services</h1>
+
+        <div class="summary">
+            <ul>
+                <li>Total number of services: {stats.total_instances}</li>
+            </ul>
+        </div>
+    </div>
+
+    {#each technologies as technology}
+    <div class="row">
+        <div class="technology">
+            <h2><a href="{technology.website}">{technology.name}</a></h2>
+        </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>
+    {/each}
+</div>
+
+<style>
+  body { bg-color: #eee; }
+  h1 { padding-left: 0.5em; }
+  a { text-decoration: none; }
+  .webservices {
+      display: table;
+      gap: 6px;
+      background-color: #efefef;
+      width: 90%;
+      margin: 0 auto;
+  }
+  .row {
+      display: table-row;
+      box-shadow: 5px 5px 4px #ccc;
+      padding: 5px;
+      margin-bottom: 10px;
+  }
+  .technology {
+      background-color: #fff;
+      display: table-cell;
+  }
+  .instances {
+      background-color: #fff;
+      display: table-cell;
+  }
+  .webservices li { list-style-type: none; }
+</style>