adding fonts, a global layout, and Docker deployment stuff.
This commit is contained in:
Dave Lane
parent
e9d8a28901
commit
ab29a8629c
26 changed files with 457 additions and 81 deletions
19
src/app.css
Normal file
19
src/app.css
Normal file
|
|
@ -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; }
|
||||
7
src/routes/+layout.svelte
Normal file
7
src/routes/+layout.svelte
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<script>
|
||||
import '../app.css';
|
||||
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue