lightweight/webservices-app
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip, all messy

Browse source
This commit is contained in:
Dave Lane 2024-08-18 22:56:20 +12:00
parent 83b028f881
commit 29c3d48da6
4 changed files with 222 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
Notes.md
View file

@ -1,2 +1,61 @@
# My notes...
colours20 = {
"dimgray": "#696969",
"seagreen": "#2e8b57",
"darkred": "#8b0000",
"olive": "#808000",
"darkblue": "#00008b",
"maroon3": "#b03060",
"orangered": "#ff4500",
"orange": "#ffa500",
"lime": "#00ff00",
"mediumorchid": "#ba55d3",
"darksalmon": "#e9967a",
"aqua": "#00ffff",
"blue": "#0000ff",
"fuchsia": "#ff00ff",
"dodgerblue": "#1e90ff",
"palegoldenrod": "#eee8aa",
"laserlemon": "#ffff54",
"plum": "#dda0dd",
"palegreen": "#98fb98",
"lightskyblue": "#87cefa"
}
const colours20 = [ "#696969", "#2e8b57", "#8b0000", "#808000", "#00008b", "#b03060", "#ff4500", "#ffa500", "#00ff00", "#ba55d3", "#e9967a", "#00ffff", "#0000ff", "#ff00ff", "#1e90ff", "#eee8aa", "#ffff54", "#dda0dd", "#98fb98", "#87cefa" ];
colours30 = {
"gray": "#808080",
"maroon2": "#7f0000",
"darkgreen": "#006400",
"olive": "#808000",
"darkslateblue": "#483d8b",
"darkcyan": "#008b8b",
"peru": "#cd853f",
"darkblue": "#00008b",
"purple2": "#7f007f",
"darkseagreen": "#8fbc8f",
"maroon3": "#b03060",
"red": "#ff0000",
"darkorange": "#ff8c00",
"lime": "#00ff00",
"darkviolet": "#9400d3",
"springgreen": "#00ff7f",
"crimson": "#dc143c",
"aqua": "#00ffff",
"deepskyblue": "#00bfff",
"blue": "#0000ff",
"lightcoral": "#f08080",
"greenyellow": "#adff2f",
"dodgerblue": "#1e90ff",
"laserlemon": "#ffff54",
"lightgreen": "#90ee90",
"lightblue": "#add8e6",
"deeppink": "#ff1493",
"mediumslateblue": "#7b68ee",
"violet": "#ee82ee",
"moccasin": "#ffe4b5"
}
const colours30 = [ "#808080", "#7f0000", "#006400", "#808000", "#483d8b", "#008b8b", "#cd853f", "#00008b", "#7f007f", "#8fbc8f", "#b03060", "#ff0000", "#ff8c00", "#00ff00", "#9400d3", "#00ff7f", "#dc143c", "#00ffff", "#00bfff", "#0000ff", "#f08080", "#adff2f", "#1e90ff", "#ffff54", "#90ee90", "#add8e6", "#ff1493", "#7b68ee", "#ee82ee", "#ffe4b5" ];

8
package-lock.json generated
View file

@ -23,6 +23,7 @@
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.7",
"svelte-popover": "^2.0.8",
"vite": "^5.0.3",
"vitest": "^2.0.0"
}
@ -3111,6 +3112,13 @@
"svelte": "^3.19.0 || ^4.0.0"
}
},
"node_modules/svelte-popover": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/svelte-popover/-/svelte-popover-2.0.8.tgz",
"integrity": "sha512-Yvz4FpvvXc5aBGyIE/TlGlqULLKkcfc7N0MoaqNXHMRVXxla+sc7G1xSCCURP3VqP0nZ5cIyPWOLLWFXuJjTRA==",
"dev": true,
"license": "ISC"
},
"node_modules/svelte-preprocess": {
"version": "6.0.2",
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-6.0.2.tgz",

1
package.json
View file

@ -22,6 +22,7 @@
"prettier": "^3.1.1",
"prettier-plugin-svelte": "^3.1.2",
"svelte": "^4.2.7",
"svelte-popover": "^2.0.8",
"vite": "^5.0.3",
"vitest": "^2.0.0"
},

239
src/routes/+page.svelte
View file

@ -2,13 +2,17 @@
export let data;
const { webservices } = data;
console.log('orig affiliates:', webservices.affiliates);
console.log('orig hosts:', webservices.hosts);
// source: https://mokole.com/palette.html 20 colors with default settings otherwise
const colours30 = [ "#808080", "#7f0000", "#006400", "#808000", "#483d8b", "#008b8b", "#cd853f", "#00008b", "#7f007f", "#8fbc8f", "#b03060", "#ff0000", "#ff8c00", "#00ff00", "#9400d3", "#00ff7f", "#dc143c", "#00ffff", "#00bfff", "#0000ff", "#f08080", "#adff2f", "#1e90ff", "#ffff54", "#90ee90", "#add8e6", "#ff1493", "#7b68ee", "#ee82ee", "#ffe4b5" ];
function processData(webservices) {
let instances = 0;
let current = {};
let current = [];
let current_status = [];
let future = {};
let future = [];
// properties of technologies
let categories = [];
let analogues = [];
@ -18,12 +22,15 @@
let affiliates = [];
let hosts = [];
let host_data = [];
let affiliate_data = [];
//
// just a trivial reassignment
//let hosts = webservices.hosts;
//
// pull out relevant info in useful chunks.
webservices.technologies.forEach(function(tech, i) {
for (let key in webservices.technologies) {
let tech = webservices.technologies[key];
if (tech.hasOwnProperty('categories') && tech.categories.constructor === Array ) {
tech.categories.forEach(function(category, index) {
if (categories.hasOwnProperty(category)) categories[category]++;
@ -43,6 +50,8 @@
}
if (hasInstances(tech)) {
tech['name'] = key;
current.push(tech);
//console.log(tech.name + ': ' + tech.instances.length + ' instances...');
tech.instances.forEach(function(instance, i) {
instances++;
@ -62,9 +71,30 @@
else hosts[tag] = 1;
}
});
} else {
future[key] = tech;
}
});
};
for (let key in webservices.hosts) {
//console.log('key: ', key);
let host = webservices.hosts[key];
host['name'] = key;
//console.log('host: ', host);
if (host.hasOwnProperty('domain') && !(host.hasOwnProperty('status') && host.status == 'retired')) {
host_data[key] = host;
}
}
console.log('webservices.affiliates: ', webservices.affiliates);
for (let key in webservices.affiliates) {
console.log('key: ', key);
let affiliate = webservices.affiliates[key];
console.log('affiliate assignment: ', affiliate);
affiliate_data[key] = affiliate;
// if (affiliate.hasOwnProperty('name')) {
// affiliate_data[key] = affiliate;
// }
}
//console.log('categories: ', categories);
//console.log('analogues: ', analogues);
//console.log('licenses: ', licenses);
@ -85,13 +115,15 @@
statuses: statuses,
affiliates: affiliates,
hosts: hosts
}
},
hosts: host_data,
affiliates: affiliate_data
};
}
// console.log(technologies);
function hasInstances(tech) {
if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array) return true;
if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array && tech.instances.length) return true;
return false;
}
@ -112,28 +144,67 @@
}
}
const results = processData(webservices);
// console.log('results: ', results);
/*console.log('stats = ' + results.total_instances);
console.log('tech_tags: ', results.tech_tags);
console.log('instance_tags: ', results.instance_tags);*/
function hostColours(hosts, colours, host_data) {
let host_array = {};
let i = 0;
//console.log('host_data:', host_data);
hosts.forEach(function(host) {
//console.log(host);
if (host_data[host].hasOwnProperty('domain') && host_data[host].hasOwnProperty('affiliation')) {
host_array[host] = {
"colour": colours[i++],
"domain": host_data[host].domain,
"affiliation": host_data[host].affiliation
}
}
});
return host_array;
}
function affiliateColours(affiliates, colours, affiliate_data) {
let affiliate_array = {};
console.log('affiliate_data_full:', affiliate_data);
for (const affiliate of affiliates) {
console.log('affiliate:', affiliate);
if (affiliate_data[affiliate].hasOwnProperty('name') && affiliate_data[affiliate].hasOwnProperty('website')) {
affiliate_array[affiliate] = {
"colour": colours[i++],
"name": affiliate_data[affiliate].name,
"website": affiliate_data[affiliate].website
}
}
}
return affiliate_array;
}
const results = processData(webservices);
//console.log('results: ', results);
//const technologies = webservices.technologies;
const technologies = results.active_services;
//console.log(technologies);
const technologies = webservices.technologies;
//const hosts = webservices.hosts;
/*const categories = results.tech_tags.categories);
const analogues = results.tech_tags.analogues);
const licenses = results.tech_tags.licenses);
const statuses = results.instance_tags.statuses);
const affiliates = results.instance_tags.affiliates);
const hosts = results.instance_tags.hosts);*/
const categories = getKeys(results.tech_tags.categories).sort();
//const categories = results.tech_tags.categories);
const analogues = getKeys(results.tech_tags.analogues).sort();
const licenses = getKeys(results.tech_tags.licenses).sort();
const statuses = getKeys(results.instance_tags.statuses).sort();
const affiliates = getKeys(results.instance_tags.affiliates).sort();
const hosts = getKeys(results.instance_tags.hosts).sort();
const host_data = results.hosts;
//console.log('host_data: ', results.hosts);
const affiliate_data = results.affiliates;
console.log('affiliate_data: ', results.affiliates);
const host_colours = hostColours(hosts, colours30, host_data);
//console.log('host_colours:', host_colours);
const affiliate_colours = affiliateColours(affiliates, colours30, affiliate_data);
console.log('affiliate_colours:',affiliate_colours);
//console.log('categories array: ', results.tech_tags.categories);
//console.log('categories keys: ', categories);
@ -149,43 +220,37 @@
</div>
<div class="filters">
<div class="tag-list tech">
<div class="tags tech categories">{#each categories as category}<span class="tag category">{category}</span> {/each}</div>
<div class="tags tech categories">Categories: {#each categories as category}<span class="tag category">{category}</span> {/each}</div>
<!--<div class="tags tech analogues">{#each analogues as analogue}<span class="tag analogue">{analogue}</span> {/each}</div>-->
<div class="tags tech licenses">{#each licenses as license}<span class="tag license">{license}</span> {/each}</div>
<div class="tags tech licenses">Licenses: {#each licenses as license}<span class="tag license">{license}</span> {/each}</div>
</div>
<div class="tag-list instance">
<div class="tags instance statuses">{#each statuses as status}<span class="tag status">{status}</span> {/each}</div> <div class="tags instance affiliates">{#each affiliates as affiliate}<span class="tag affilate">{affiliate}</span> {/each}</div>
<div class="tags instance hosts">{#each hosts as host}<span class="tag host">{host}</span> {/each}</div>
<div class="tags instance statuses">Statuses: {#each statuses as status}<span class="tag status">{status}</span> {/each}</div> <div class="tags instance affiliates">Affiliates: {#each affiliates as affiliate}<span class="tag affilate">{affiliate}</span> {/each}</div>
<div class="tags instance hosts">Hosts: {#each hosts as host}<span class="tag host">{host}</span> {/each}</div>
</div>
</div>
<div class="tiles">
{#each technologies as technology}
<div class="tile technology">
<div class="tile-inner">
<div class="tile-front">
<h2><a href="{technology.website}">{technology.name}</a></h2>
{#if (technology.license)}<p class="license" title="The libre license for this project">License: <span class="value">{technology.license}</span></p>{/if}
{#if (technology.analogues)}<p class="analogues">Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
<p class="description">{technology.description}</p>
</div>
<div class="tile-back">
{#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>
<h2><a href="{technology.website}">{technology.name}</a></h2>
{#if (technology.license)}<p class="license" title="The libre license for this project is {technology.license}">License: <span class="value">{technology.license}</span></p>{/if}
{#if (technology.analogues)}<p class="analogues">Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
<p class="description">{technology.description}</p>
{#if hasInstances(technology)}
<div class="instances">
<ul class="instances">
{#each technology.instances as instance}
<li><a href="https://{instance.domain}"><span style="{affiliate_colours[instance.affiliate]}.colour"></span></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>
@ -194,7 +259,7 @@
<style>
.webservices {
display: grid;
width: 90%;
width: 96%;
margin: 0 auto 3em auto;
padding: 0;
}
@ -237,60 +302,64 @@
}
/* flip card stuff: https://www.w3schools.com/howto/howto_css_flip_card.asp */
.tile {
height: 460px;
height: 400px;
min-width: 250px;
max-width: 400px;
/*padding: 0.8em 1.2em;*/
overflow: hidden;
perspective: 1000px; /* remove to remove 3D effect */
}
.tile-inner {
position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;
}
/* .tile:hover .tile-inner {
transform: rotateY(180deg);
} */
.tile-front, .tile-back {
position: absolute;
top: 30px;
width: 100%;
height: 90%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
box-sizing: border-box;
box-shadow: 5px 5px 3px #71ba71;
border: solid 3px #1e6831;
background-color: #fff;
}
.tile-front {
background-color: #ddd;
text-overflow: ellipsis;
overflow: hidden;
position: relative;
}
.tile-back {
background-color: #3b559;
transform: rotateY(180deg);
}
.tile-front h2 {
.tile h2 {
background-color: #999;
text-align: center;
padding: 0.5em;
margin: 0;
}
.tile-front h2 a { color: #eee; }
.tile-front h2 a:visited { color: #ddd; }
.tile-front .description {
.tile h2 a { color: #e6c4fc; }
.tile h2 a:visited { color: #ced0ff; }
.tile h2 a:hover { color: #fff; }
.tile .description {
height: 200px;
text-overflow: ellipsis;
overflow: hidden;
height: 100%;
}
.tile-front p {
.tile p {
padding: 0 1em 0.2em 1em;
font-size: 80%;
color: #555;
}
.tile .instances {
background-color: #c2e6c2;
position: absolute;
bottom: 0;
height: 3em;
width: 100%;
}
.tile .instances ul {
margin-bottom: 0px;
}
.webservices li { list-style-type: none; }
.value { font-weight: bold; }
.value { font-weight: bold; color: #000; }
.triangle {
--side-size: 20px;
border-left: var(--side-size) solid transparent;
border-right: var(--side-size) solid transparent;
border-bottom: calc(2 * var(--side-size) * 0.866) solid green;
border-top: var(--side-size) solid transparent;
display: inline-block;
}
.circle {
height: 20px;
width: 50px;
background-color: #555;
border-radius: 50%;
}
.square {
height: 20px;
width: 50px;
}
</style>