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

This commit is contained in:
Dave Lane 2024-08-15 09:49:01 +12:00
parent 3101bdc033
commit 4c68329850
2 changed files with 107 additions and 58 deletions

View file

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

View file

@ -7,8 +7,10 @@
function processData(webservices) { function processData(webservices) {
let instances = 0; let instances = 0;
let current = {}; let current = {};
let current_status = [];
let future = {}; let future = {};
let affiliates = {}; let affiliates = [];
let analogues = []
// //
// just a trivial reassignment // just a trivial reassignment
let hosts = webservices.hosts; let hosts = webservices.hosts;
@ -17,9 +19,24 @@
webservices.technologies.forEach(function(tech, i) { webservices.technologies.forEach(function(tech, i) {
if (hasInstances(tech)) { if (hasInstances(tech)) {
console.log(tech.name + ': ' + tech.instances.length + ' instances...'); 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 { return {
total_instances: instances, total_instances: instances,
@ -32,9 +49,15 @@
// console.log(technologies); // console.log(technologies);
function hasInstances(tech) { 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; return false;
} }
@ -47,64 +70,90 @@
</script> </script>
<div class="webservices"> <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> </div>
{#each technologies as technology} {#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> </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} {/each}
</div> </div>
<style> <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> </style>