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

adjusting width for mobile devices, created included data arrays

Browse source
This commit is contained in:
Dave Lane 2024-09-04 15:53:51 +12:00
parent 143623ddd3
commit 525427c691
8 changed files with 284 additions and 291 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app.css
View file

@ -8,8 +8,8 @@ body {
box-sizing: border-box;
margin: 0 auto;
min-height: 100%;
padding: 2em;
width: 96%;
padding: 1em;
width: 100%;
font-size: 1.2em;
border: double 3px #ddd;
border-top: none;

0
src/colours.js → src/lib/colours.js
View file

112
src/lib/processData.svelte
View file

@ -1,112 +0,0 @@
<script>
// digest and return useful info from the Webservices JSON feed
export function processData(webservices) {
let instances = 0;
let current = [];
let future = [];
// properties of technologies
let category_list = [];
let analogue_list = [];
let license_list = [];
// properties of instances
let status_list = [];
let affiliate_list = [];
let host_list = [];
// actual objects
let hosts = [];
let affiliates = [];
//
// just a trivial reassignment
//let hosts = webservices.hosts;
//
// pull out relevant info in useful chunks.
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 (category_list.hasOwnProperty(category)) category_list[category]++;
else category_list[category] = 1;
});
}
if (tech.hasOwnProperty('analogues') && tech.analogues.constructor === Array) {
tech.analogues.forEach(function (analogue, index) {
if (analogue_list.hasOwnProperty(analogue)) analogue_list[analogue]++;
else analogue_list[analogue] = 1;
});
}
if (tech.hasOwnProperty('license')) {
let license = tech.license;
if (license_list.hasOwnProperty(license)) license_list[license]++;
else license_list[license] = 1;
}
if (hasInstances(tech)) {
tech['name'] = key;
current.push(tech);
//console.log(tech.name + ': ' + tech.instances.length + ' instances...');
tech.instances.forEach(function (instance, i) {
instances++;
if (instance.hasOwnProperty('status')) {
let tag = instance.status;
if (status_list.hasOwnProperty(tag)) status_list[tag]++;
else status_list[tag] = 1;
}
if (instance.hasOwnProperty('affiliation')) {
let tag = instance.affiliation;
if (affiliate_list.hasOwnProperty(tag)) affiliate_list[tag]++;
else affiliate_list[tag] = 1;
}
if (instance.hasOwnProperty('host')) {
let tag = instance.host;
if (host_list.hasOwnProperty(tag)) host_list[tag]++;
else host_list[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')
) {
hosts[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);
affiliates[key] = affiliate;
// if (affiliate.hasOwnProperty('name')) {
// affiliate_data[key] = affiliate;
// }
}
return {
total_instances: instances,
active_services: current,
candidate_services: future,
tech_lists: {
category_list: category_list,
analogue_list: analogue_list,
license_list: license_list
},
instance_lists: {
status_list: status_list,
affiliate_list: affiliate_list,
host_list: host_list
},
hosts: hosts,
affiliates: affiliates
};
}
</script>

154
src/lib/references.js Normal file
View file

@ -0,0 +1,154 @@
export const references = {
// filter technologies based on a subset of categories
full_category_list: [
'App Ecosystem',
'Application Design',
'Asset Management',
'Association Management',
'Association Management System',
'Blog Syndication',
'Book Reviews',
'Calendar',
'Collaborative',
'Collaborative Markdown Editing',
'Collaborative Wiki',
'Content Management Systems',
'Digital Media Sales',
'Document Management',
'Email Marketing Automation',
'Email Services',
'Enterprise Resource Planning',
'Event Management',
'Facial Recognition',
'Facility Booking',
'Federated Messaging',
'Fediverse',
'File Synchronisation',
'Forum',
'Framasoft',
'Home Automation',
'Home Security',
'Image Backup',
'Image Gallery',
'Kanban Project Management',
'Learning Management System',
'Link Ranking',
'Link Sharing',
'Link Shortener',
'Membership Management',
'Messaging Cache',
'Micro-blogging',
'Multi-Domain Server',
'Multimedia',
'Music Discovery',
'Music Streaming',
'Network Infrastructure Monitoring',
'Newsletters',
'Online Forms',
'Password Manager',
'Photos',
'Portfolio Management',
'Privacy',
'Productivity',
'Reading List',
'Remote Desktop Sharing',
'Remote Incremental Encrypted System Backups',
'Reverse Proxy',
'Rich Messaging Client',
'Rich Messaging Server',
'Scheduling',
'Server Monitoring',
'Share Secrets Management',
'Single Sign-On',
'Social Bookmarking',
'Social Media',
'Software Development Forge',
'Software Interface Designer',
'Streaming',
'Surveys',
'TURN/STUN Server',
'Video',
'Video Conferencing',
'Video Surveillance',
'Visualisation of Time Series Data',
'Webmail',
'Webserver',
'Website Analytics'
],
copyleft_list: ['AGPL-3', 'AGPL-3+', 'GPL', 'GPL-2', 'GPL-2+', 'GPL-3', 'GPL-3+', 'LGPL-3'],
category_filter_list: [
'App Ecosystem',
'Application Design',
'Asset Management',
'Association Management',
'Association Management System',
'Blog Syndication',
'Book Reviews',
'Calendar',
'Collaborative',
'Collaborative Markdown Editing',
'Collaborative Wiki',
'Content Management Systems',
'Digital Media Sales',
'Document Management',
'Email Marketing Automation',
'Email Services',
'Enterprise Resource Planning',
'Event Management',
'Facial Recognition',
'Facility Booking',
'Federated Messaging',
'Fediverse',
'File Synchronisation',
'Forum',
'Framasoft',
'Home Automation',
'Home Security',
'Image Backup',
'Image Gallery',
'Kanban Project Management',
'Learning Management System',
'Link Ranking',
'Link Sharing',
'Link Shortener',
'Membership Management',
'Messaging Cache',
'Micro-blogging',
'Multi-Domain Server',
'Multimedia',
'Music Discovery',
'Music Streaming',
'Network Infrastructure Monitoring',
'Newsletters',
'Online Forms',
'Password Manager',
'Photos',
'Portfolio Management',
'Privacy',
'Productivity',
'Reading List',
'Remote Desktop Sharing',
'Remote Incremental Encrypted System Backups',
'Reverse Proxy',
'Rich Messaging Client',
'Rich Messaging Server',
'Scheduling',
'Server Monitoring',
'Share Secrets Management',
'Single Sign-On',
'Social Bookmarking',
'Social Media',
'Software Development Forge',
'Software Interface Designer',
'Streaming',
'Surveys',
'TURN/STUN Server',
'Video',
'Video Conferencing',
'Video Surveillance',
'Visualisation of Time Series Data',
'Webmail',
'Webserver',
'Website Analytics'
]
};

3
src/references.js
View file

@ -1,3 +0,0 @@
const References = {};
export { References };

4
src/routes/+layout.svelte
View file

@ -26,10 +26,10 @@
}
footer {
display: inline-grid;
margin: auto;
margin: 4em, auto, 0, auto;
grid-template-columns: 1fr 1fr 1fr;
}
footer div {
text-align: center;
text-align: left;
}
</style>

294
src/routes/+page.svelte
View file

@ -3,13 +3,123 @@
export let data;
const { webservices } = data;
//import References from '../references.js';
import { colours } from '../colours.js';
import { processData } from '../lib/processData.svelte';
import { references } from '$lib/references.js';
import { colours } from '$lib/colours.js';
console.log('colours: ', colours);
//console.log('colours: ', colours);
//
//function
// digest and return useful info from the Webservices JSON feed
function processData(webservices) {
let instances = 0;
let current = [];
let future = [];
// properties of technologies
let category_list = [];
let analogue_list = [];
let license_list = [];
// properties of instances
let status_list = [];
let affiliate_list = [];
let host_list = [];
// actual objects
let hosts = [];
let affiliates = [];
//
// just a trivial reassignment
//let hosts = webservices.hosts;
//
// pull out relevant info in useful chunks.
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 (category_list.hasOwnProperty(category)) category_list[category]++;
else category_list[category] = 1;
});
}
if (tech.hasOwnProperty('analogues') && tech.analogues.constructor === Array) {
tech.analogues.forEach(function (analogue, index) {
if (analogue_list.hasOwnProperty(analogue)) analogue_list[analogue]++;
else analogue_list[analogue] = 1;
});
}
if (tech.hasOwnProperty('license')) {
let license = tech.license;
if (license_list.hasOwnProperty(license)) license_list[license]++;
else license_list[license] = 1;
}
if (hasInstances(tech)) {
tech['name'] = key;
current.push(tech);
//console.log(tech.name + ': ' + tech.instances.length + ' instances...');
tech.instances.forEach(function (instance, i) {
instances++;
if (instance.hasOwnProperty('status')) {
let tag = instance.status;
if (status_list.hasOwnProperty(tag)) status_list[tag]++;
else status_list[tag] = 1;
}
if (instance.hasOwnProperty('affiliation')) {
let tag = instance.affiliation;
if (affiliate_list.hasOwnProperty(tag)) affiliate_list[tag]++;
else affiliate_list[tag] = 1;
}
if (instance.hasOwnProperty('host')) {
let tag = instance.host;
if (host_list.hasOwnProperty(tag)) host_list[tag]++;
else host_list[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')
) {
hosts[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);
affiliates[key] = affiliate;
// if (affiliate.hasOwnProperty('name')) {
// affiliate_data[key] = affiliate;
// }
}
return {
total_instances: instances,
active_services: current,
candidate_services: future,
tech_lists: {
category_list: category_list,
analogue_list: analogue_list,
license_list: license_list
},
instance_lists: {
status_list: status_list,
affiliate_list: affiliate_list,
host_list: host_list
},
hosts: hosts,
affiliates: affiliates
};
}
// console.log(technologies);
// return true if a tech object includes valid instances
@ -174,6 +284,7 @@
//console.log('categories array: ', results.tech_tags.categories);
//console.log('categories keys: ', categories);
console.log('references: ', references);
console.log('category_list: ', category_list);
//console.log('analogue_list: ', analogue_list);
console.log('license_list: ', license_list);
@ -181,172 +292,11 @@
console.log('affiliate_list: ', affiliate_list);
console.log('hosts_list: ', host_list);
// filter technolologies based on a subset of categories
const full_category_list = [
'App Ecosystem',
'Application Design',
'Asset Management',
'Association Management',
'Association Management System',
'Blog Syndication',
'Book Reviews',
'Calendar',
'Collaborative',
'Collaborative Markdown Editing',
'Collaborative Wiki',
'Content Management Systems',
'Digital Media Sales',
'Document Management',
'Email Marketing Automation',
'Email Services',
'Enterprise Resource Planning',
'Event Management',
'Facial Recognition',
'Facility Booking',
'Federated Messaging',
'Fediverse',
'File Synchronisation',
'Forum',
'Framasoft',
'Home Automation',
'Home Security',
'Image Backup',
'Image Gallery',
'Kanban Project Management',
'Learning Management System',
'Link Ranking',
'Link Sharing',
'Link Shortener',
'Membership Management',
'Messaging Cache',
'Micro-blogging',
'Multi-Domain Server',
'Multimedia',
'Music Discovery',
'Music Streaming',
'Network Infrastructure Monitoring',
'Newsletters',
'Online Forms',
'Password Manager',
'Photos',
'Portfolio Management',
'Privacy',
'Productivity',
'Reading List',
'Remote Desktop Sharing',
'Remote Incremental Encrypted System Backups',
'Reverse Proxy',
'Rich Messaging Client',
'Rich Messaging Server',
'Scheduling',
'Server Monitoring',
'Share Secrets Management',
'Single Sign-On',
'Social Bookmarking',
'Social Media',
'Software Development Forge',
'Software Interface Designer',
'Streaming',
'Surveys',
'TURN/STUN Server',
'Video',
'Video Conferencing',
'Video Surveillance',
'Visualisation of Time Series Data',
'Webmail',
'Webserver',
'Website Analytics'
];
const copyleft_list = [
'AGPL-3',
'AGPL-3+',
'GPL',
'GPL-2',
'GPL-2+',
'GPL-3',
'GPL-3+',
'LGPL-3'
];
const category_filter_list = [
'App Ecosystem',
'Application Design',
'Asset Management',
'Association Management',
'Association Management System',
'Blog Syndication',
'Book Reviews',
'Calendar',
'Collaborative',
'Collaborative Markdown Editing',
'Collaborative Wiki',
'Content Management Systems',
'Digital Media Sales',
'Document Management',
'Email Marketing Automation',
'Email Services',
'Enterprise Resource Planning',
'Event Management',
'Facial Recognition',
'Facility Booking',
'Federated Messaging',
'Fediverse',
'File Synchronisation',
'Forum',
'Framasoft',
'Home Automation',
'Home Security',
'Image Backup',
'Image Gallery',
'Kanban Project Management',
'Learning Management System',
'Link Ranking',
'Link Sharing',
'Link Shortener',
'Membership Management',
'Messaging Cache',
'Micro-blogging',
'Multi-Domain Server',
'Multimedia',
'Music Discovery',
'Music Streaming',
'Network Infrastructure Monitoring',
'Newsletters',
'Online Forms',
'Password Manager',
'Photos',
'Portfolio Management',
'Privacy',
'Productivity',
'Reading List',
'Remote Desktop Sharing',
'Remote Incremental Encrypted System Backups',
'Reverse Proxy',
'Rich Messaging Client',
'Rich Messaging Server',
'Scheduling',
'Server Monitoring',
'Share Secrets Management',
'Single Sign-On',
'Social Bookmarking',
'Social Media',
'Software Development Forge',
'Software Interface Designer',
'Streaming',
'Surveys',
'TURN/STUN Server',
'Video',
'Video Conferencing',
'Video Surveillance',
'Visualisation of Time Series Data',
'Webmail',
'Webserver',
'Website Analytics'
];
const filtered_technologies = filterTechnologiesByCategoryList(
results.active_services,
full_category_list,
// category_filter_list
references.full_category_list,
// references.category_filter_list
);
const technologies = sortTechnologies(filtered_technologies);
</script>
@ -355,12 +305,12 @@
<h1>Web Services</h1>
<div class="introduction">
<p>
This sites exists to provide an 'always-up-to-date', in-depth description of the <a
<p>This sites exists to provide an 'always-up-to-date', in-depth description of the <a
href="https://tech.oeru.org/foss-libresoftware-its-about-clarity-and-values"
title="What do I mean by 'libre' software?">libre software</a> web services <a href="https://davelane.nz" title="Who is this Dave Lane character?">I</a> have set
up and maintain.
</p>
</div>
<div class="summary">
<ul>
@ -511,13 +461,13 @@
.tiles {
display: grid;
grid-gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
/* flip card stuff: https://www.w3schools.com/howto/howto_css_flip_card.asp */
.tile {
height: 515px;
min-width: 270px;
max-width: 330px;
min-width: 240px;
max-width: 300px;
/*width: 290px;*/
overflow: hidden;
box-sizing: border-box;

4
src/routes/about/+page.svelte
View file

@ -1 +1,5 @@
<h1>About this site... </h1>
<p>This simple app is a work-in-progress app that will soon (I hope) include the ability to filter the services using the various vocabularies of tags, like categories of software, libre license used, instance status, which of my roles they're affiliated with, and on which host they reside... </p>
<p>This app is built on a suite of technologies that are largely new to me, but that I wanted to try out, as I see great potential in them. The key technology is a Javascript 'framework' called <a href="https://kid.svelte.dev">SvelteKit</a>, built with <a href="https://svelte.dev">Svelte</a> (a compiled language that generates pure Javascript) and ecosystem of extensions created by the community which provides useful components designed for reuse.
</p>