adding fonts, a global layout, and Docker deployment stuff.

.dockerignore

@@ -0,0 +1,16 @@
+# .dockerignore
+
+node_modules
+
+.git
+.gitattributes
+
+.eslintignore
+.eslintrc.cjs
+
+.prettierrc
+.pretieriignore
+
+README.md
+
+Dockerfile

Dockerfile

@@ -0,0 +1,15 @@
+# Dockerfile
+
+FROM node:16-alpine
+
+RUN npm install -g pnpm
+
+WORKDIR /app
+COPY package.json pnpm-lock.yaml ./
+RUN pnpm install --frozen-lockfile
+
+COPY . .
+RUN pnpm build
+
+EXPOSE 3000
+CMD ["node", "build"]

src/app.css

@@ -0,0 +1,19 @@
+@import '../static/fonts.css';
+
+
+html { background-color: ; }
+body {
+    font-family: "Moderustic";
+    background-color: #d4fad4;
+    box-sizing: border-box;
+    margin: 0 auto;
+    min-height: 100%;
+    padding: 2em;
+    min-width: 100%px;
+    font-size: 1.2em;
+    border: double 3px #ddd;
+    border-top: none;
+    border-bottom: none;
+}
+h1 { padding-left: 0.5em; }
+a { text-decoration: none; }

src/routes/+layout.svelte

@@ -0,0 +1,7 @@
+<script>
+    import '../app.css';
+
+</script>
+
+<slot />
+

src/routes/+page.svelte

@@ -9,41 +9,81 @@
         let current = {};
         let current_status = [];
         let future = {};
+        // properties of technologies
+        let categories = [];
+        let analogues = [];
+        let licenses = [];
+        // properties of instances
+        let statuses = [];
         let affiliates = [];
-        let analogues = []
+        let hosts = [];
         //
         // just a trivial reassignment
-        let hosts = webservices.hosts;
+        //let hosts = webservices.hosts;
         //
         // pull out relevant info in useful chunks.
         webservices.technologies.forEach(function(tech, i) {
+            if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array ) {
+                tech.categories.forEach(function(category, index) {
+                    if (categories.hasOwnProperty(category)) categories[category]++;
+                    else categories[category] = 1;
+                });
+            }
+            if (tech.hasOwnProperty('analogues') && tech.analogues.constructor === Array ) {
+                tech.analogues.forEach(function(analogue, index) {
+                    if (analogues.hasOwnProperty(analogue)) analogues[analogue]++;
+                    else analogues[analogue] = 1;
+                });
+            }
+            if (tech.hasOwnProperty('license')) {
+                let license = tech.license;
+                if (licenses.hasOwnProperty(license)) licenses[license]++;
+                else licenses[license] = 1;
+            }
+
             if (hasInstances(tech)) {
                 console.log(tech.name + ': ' + tech.instances.length + ' instances...');
                 tech.instances.forEach(function(instance, i) {
-                    if (hasAffiliation(instance)) {
+                    if (instance.hasOwnProperty('status')) {
+                        let tag = instance.status;
+                        if (statuses.hasOwnProperty(tag)) statuses[tag]++;
+                        else statuses[tag] = 1;
+                    }
+                    if (instance.hasOwnProperty('affiliation')) {
                         let tag = instance.affiliation;
-                        affiliates[tag] += 1;
-                        console.log('added tag: ' + tag);
+                        if (affiliates.hasOwnProperty(tag)) affiliates[tag]++;
+                        else affiliates[tag] = 1;
+                    }
+                    if (instance.hasOwnProperty('host')) {
+                        let tag = instance.host;
+                        if (hosts.hasOwnProperty(tag)) hosts[tag]++;
+                        else hosts[tag] = 1;
                     }
                 });
             }
-           /* getAnalogues(analogues, tech) {
-                single =
-                if
-                analogues = analogues.concat(local);
-            }*/
+
         });
-        /*affiliates.forEach(function(num, tag) {
-            console.log(tag + ': ' + num);
-        });*/
+        console.log('categories: ', categories);
+        console.log('analogues: ', analogues);
+        console.log('licenses: ', licenses);
+        console.log('statuses: ', statuses);
         console.log('affiliates: ', affiliates);
+        console.log('hosts: ', hosts);
 
         return {
             total_instances: instances,
             active_services: current,
             candidate_services: future,
-            affiliates: affiliates,
-            hosts: hosts
+            tech_tags: {
+               categories: categories,
+               analogues: analogues,
+               licenses: licenses
+            },
+            instance_tags: {
+                statuses: statuses,
+                affiliates: affiliates,
+                hosts: hosts
+            }
         };
     }
 
@@ -52,17 +92,9 @@
         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;
-    }
 
-    let stats = processData(webservices);
-    console.log('stats = ' + stats.total_instances);
+    const results = processData(webservices);
+    console.log('stats = ' + results.total_instances);
 
     const technologies = webservices.technologies;
     const hosts = webservices.hosts;
@@ -70,80 +102,97 @@
 </script>
 
 <div class="webservices">
-    <h1>Dave Web Services</h1>
+    <h1>Web Services</h1>
 
-    <div class="summary cell-2">
+    <div class="summary">
         <ul>
-            <li>Total number of services: {stats.total_instances}</li>
+            <li>Total number of services: {results.total_instances}</li>
         </ul>
     </div>
-
-    {#each technologies as 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 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>
+    <div class="filters">
+        <div class="tags tech">
+            <div class="tags tech catergories">
+            {#each results.tech_tags.categories as category}
+                <span>{category}</span>
             {/each}
-        </ul>
+            </div>
+        </div>
+        <div class="tags instance">
+            <div class="tags instance statuses">
+            {#each results.instance_tags.statuses as status}
+                <span>{status}</span>
+            {/each}
+            </div>
+            <div class="tags instance affiliates">
+            {#each results.instance_tags.affiliates as affiliate}
+                <span>{affiliate}</span>
+            {/each}
+            </div>
+            <div class="tags instance hosts">
+            {#each results.instance_tags.hosts as host}
+                <span>{host}</span>
+            {/each}
+            </div>
+        </div>
     </div>
-    {:else}
-    <div class="instances cell">
-        <ul class="instances">
-            <li>Nothing here yet...</li>
-        </ul>
+    <div class="tiles">
+        {#each technologies as technology}
+        <div class="tile technology">
+            <h2><a href="{technology.website}">{technology.name}</a></h2>
+            <!--<p>{technology.description}</p>-->
+            {#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 cell">
+                <ul class="instances">
+                    <li>Nothing here yet...</li>
+                </ul>
+            </div>
+            {/if}
+        </div>
+        {/each}
     </div>
-    {/if}
-    {/each}
 </div>
 
-<style lang="scss">
-    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; }
+<style>
     .webservices {
-        display: flex;
-        flex-wrap: wrap;
-        background-color: #efefef;
-        width: 60%;
+        display: grid;
+        width: 90%;
         margin: 0 auto 3em auto;
         padding: 0;
     }
-    .cell {
+    .summary {
+    }
+    .filters {
+    }
+    .tiles {
+        display: grid;
+        grid-gap: 15px;
+        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    }
+    .tile {
         box-sizing: border-box;
-        flex-grow: 1;
-        width: 100%;
+        box-shadow: 5px 5px 3px #71ba71;
+        min-width: 250px;
+        max-width: 400px;
         padding: 0.8em 1.2em;
         overflow: hidden;
-        border: solid 3px white;
+        border: solid 3px #1e6831;
+        background-color: #fff;
     }
-    .webservices > .cell {
-        width: 50%;
-    }
-    .technology {
-        background-color: #efefef;
+/*    .technology {
+        background-color: #fff;
     }
     .instances {
-        background-color: #eee;
-    }
+        background-color: #ddd;
+    } */
     .webservices li { list-style-type: none; }
-    .cell > h1, .cell > h2, .cell > h3, .cell > h4, .cell > h5 { margin: 0; }
     /*
      * Breakpoints
      */
@@ -151,7 +200,7 @@
         .collapse { display: block; }
         .collapse > .cell { width: 100% !important; }
     }
-    .no-flexbox .webservices {
+  /*  .no-flexbox .webservices {
         display: block;
         .no-flexbox .webservices > cell { width: 100%; }
     }
@@ -159,6 +208,6 @@
         h2 {
             color: green;
         }
-    }
+    }*/
 
 </style>

static/fonts.css

@@ -0,0 +1,16 @@
+/* fonts.css */
+
+@font-face {
+    font-family: 'Moderustic';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: local('Moderustic'), local('moderustic'), url('/fonts/Moderustic/Moderustic-Regular.ttf') format('truetype');
+}
+/*@font-face {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+    src: local('Lato'), local('lato'), url('/fonts/Lato/Lato-Regular.ttf') format('truetype');
+}*/

static/fonts/Lato/OFL.txt

@@ -0,0 +1,93 @@
+Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

static/fonts/Moderustic/OFL.txt

@@ -0,0 +1,93 @@
+Copyright 2023 The Moderustic Project Authors (https://github.com/Tural/Moderustic)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://openfontlicense.org
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

static/fonts/Moderustic/README.txt

@@ -0,0 +1,68 @@
+Moderustic Variable Font
+========================
+
+This download contains Moderustic as both a variable font and static fonts.
+
+Moderustic is a variable font with this axis:
+  wght
+
+This means all the styles are contained in a single file:
+  Moderustic/Moderustic-VariableFont_wght.ttf
+
+If your app fully supports variable fonts, you can now pick intermediate styles
+that aren’t available as static fonts. Not all apps support variable fonts, and
+in those cases you can use the static font files for Moderustic:
+  Moderustic/static/Moderustic-Light.ttf
+  Moderustic/static/Moderustic-Regular.ttf
+  Moderustic/static/Moderustic-Medium.ttf
+  Moderustic/static/Moderustic-SemiBold.ttf
+  Moderustic/static/Moderustic-Bold.ttf
+  Moderustic/static/Moderustic-ExtraBold.ttf
+
+Get started
+-----------
+
+1. Install the font files you want to use
+
+2. Use your app's font picker to view the font family and all the
+available styles
+
+Learn more about variable fonts
+-------------------------------
+
+  https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
+  https://variablefonts.typenetwork.com
+  https://medium.com/variable-fonts
+
+In desktop apps
+
+  https://theblog.adobe.com/can-variable-fonts-illustrator-cc
+  https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
+
+Online
+
+  https://developers.google.com/fonts/docs/getting_started
+  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
+  https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
+
+Installing fonts
+
+  MacOS: https://support.apple.com/en-us/HT201749
+  Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
+  Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
+
+Android Apps
+
+  https://developers.google.com/fonts/docs/android
+  https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
+
+License
+-------
+Please read the full license text (OFL.txt) to understand the permissions,
+restrictions and requirements for usage, redistribution, and modification.
+
+You can use them in your products & projects – print or digital,
+commercial or otherwise.
+
+This isn't legal advice, please consider consulting a lawyer and see the full
+license for all details.