From 6d3723cc11e0b1034ad7e4e9ae23aa8a9b2c7397 Mon Sep 17 00:00:00 2001
From: Dave Lane <dave@oerfoundation.org>
Date: Mon, 26 Aug 2024 17:00:21 +1200
Subject: [PATCH] WIP, added nav, about & attribution pages, and updated styles
 to ensure tags flow properly

---
 src/routes/+layout.svelte           |   32 +
 src/routes/+page.svelte             | 1236 +++++++++++++++------------
 src/routes/about/+page.svelte       |    1 +
 src/routes/attribution/+page.svelte |    1 +
 4 files changed, 738 insertions(+), 532 deletions(-)
 create mode 100644 src/routes/about/+page.svelte
 create mode 100644 src/routes/attribution/+page.svelte

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 00b7b7e..db6445e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -3,5 +3,37 @@
 
 </script>
 
+<nav>
+    <a href="/">Web Services</a>
+    <a href="/about">About</a>
+</nav>
+
+<!-- content provided by the +page.svelte file in this directory - and sub-directories -->
 <slot />
 
+<footer>
+    <div class="repo"><a href="https://forge.magnificent.nz/lightweight/webservices-app" title="Access the source code repository for this site">Code for this site</a></div>
+    <div class="copyright">Copyleft 2024 by <a href="https://davelane.nz">Dave Lane</a></div>
+    <div class="attribution"><a href="/attribution" title="All images used on this site are made available by their authors under a Creative Commons license">Attribution</a></div>
+</footer>
+
+<style>
+    body {
+        width: 96%;
+        margin: auto;
+    }
+    nav {
+        margin: auto;
+    }
+    nav a {
+        margin-right: 20px;
+    }
+    footer {
+        display: inline-grid;
+        margin: auto;
+        grid-template-columns: 1fr 1fr 1fr;
+    }
+    footer div {
+        text-align: center;
+    }
+</style>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index f346f86..096a56a 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,574 +1,746 @@
 <script>
-    // get the data from the JSON Webservices feed in +page.js
-    export let data;
-    const { webservices } = data;
+	// get the data from the JSON Webservices feed in +page.js
+	export let data;
+	const { webservices } = data;
 
-    // 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" ];
+	// 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'
+	];
 
-    // 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 = [];
+	// 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;
-            }
+		// 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;
-            }
+			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;
+			// }
+		}
 
-        };
-        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
+		};
+	}
 
-        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
+	function hasInstances(tech) {
+		if (
+			tech.hasOwnProperty('instances') &&
+			tech.instances.constructor === Array &&
+			tech.instances.length
+		)
+			return true;
+		return false;
+	}
 
-//    console.log(technologies);
-    // return true if a tech object includes valid instances
-    function hasInstances(tech) {
-        if (tech.hasOwnProperty('instances') && tech.instances.constructor === Array && tech.instances.length) return true;
-        return false;
-    }
+	// return an array of keys from an object
+	function getKeys(ob) {
+		let keys = [];
+		for (let key in ob) {
+			//keys.push(key.replace(/ /g, '\u00a0'));
+			keys.push(key);
+		}
+		return keys;
+	}
 
-    // return an array of keys from an object
-    function getKeys(ob) {
-        let keys = [];
-        for (let key in ob) {
-            keys.push(key);
-        };
-        return keys;
-    }
+	// get intersection: ref https://bobbyhadz.com/blog/javascript-get-intersection-of-two-arrays
+	function getIntersection(a, b) {
+		const set1 = new Set(a);
+		const set2 = new Set(b);
 
-    // get intersection: ref https://bobbyhadz.com/blog/javascript-get-intersection-of-two-arrays
-    function getIntersection(a, b) {
-        const set1 = new Set(a);
-        const set2 = new Set(b);
+		const intersection = [...set1].filter((element) => set2.has(element));
 
-        const intersection = [...set1].filter(
-            element => set2.has(element)
-        );
+		return intersection;
+	}
 
-        return intersection;
-    }
+	// combine an array of terms into a sentence with proper Oxford commas, dealing with the special cases
+	// of one or two elements.
+	function toOxfordCommaString(arr) {
+		if (arr.length == 1) return arr;
+		if (arr.length == 2) return arr.join(' and ');
+		else {
+			var last = arr.pop();
+			return arr.join(', ') + ', and ' + last;
+		}
+	}
 
-    // combine an array of terms into a sentence with proper Oxford commas, dealing with the special cases
-    // of one or two elements.
-    function toOxfordCommaString(arr) {
-        if (arr.length == 1) return arr;
-        if (arr.length == 2) return arr.join(' and ');
-        else {
-            var last = arr.pop();
-            return arr.join(', ') + ', and ' + last;
-        }
-    }
+	// return a singular or plural term depending on the value of 'count'
+	function pluraliser(singular, plural, count) {
+		if (count > 1) return plural;
+		return singular;
+	}
 
-    // return a singular or plural term depending on the value of 'count'
-    function pluraliser(singular, plural, count) {
-        if (count > 1) return plural;
-        return singular;
-    }
+	// assign colours from a set of differentiated colours to a list of tags...
+	// this one is for 'hosts'
+	function hostColours(host_list, colours, hosts) {
+		let host_array = {};
+		let i = 0;
 
-    // assign colours from a set of differentiated colours to a list of tags...
-    // this one is for 'hosts'
-    function hostColours(host_list, colours, hosts) {
-        let host_array = {};
-        let i = 0;
+		//console.log('hosts:', hosts);
 
-        //console.log('hosts:', hosts);
+		host_list.forEach(function (host) {
+			//console.log(host);
+			if (hosts[host].hasOwnProperty('domain') && hosts[host].hasOwnProperty('affiliation')) {
+				host_array[host] = {
+					colour: colours[i++],
+					domain: hosts[host].domain,
+					affiliation: hosts[host].affiliation
+				};
+			}
+		});
+		return host_array;
+	}
 
-        host_list.forEach(function(host) {
-            //console.log(host);
-            if (hosts[host].hasOwnProperty('domain') && hosts[host].hasOwnProperty('affiliation')) {
-                host_array[host] = {
-                    "colour": colours[i++],
-                    "domain": hosts[host].domain,
-                    "affiliation": hosts[host].affiliation
-                }
-            }
-        });
-        return host_array;
-    }
+	// assign colours from a set of differentiated colours to a list of tags...
+	// this one is for 'affiliates'
+	function affiliateColours(affiliate_list, colours, affiliates) {
+		let affiliate_result = {};
+		let i = 0;
 
-    // assign colours from a set of differentiated colours to a list of tags...
-    // this one is for 'affiliates'
-    function affiliateColours(affiliate_list, colours, affiliates) {
-        let affiliate_result = {};
-        let i = 0;
+		//console.log('affiliates:', affiliates);
+		console.log('affiliate_list:', affiliate_list);
 
-        //console.log('affiliates:', affiliates);
-        console.log('affiliate_list:', affiliate_list);
+		for (const affiliate of affiliate_list) {
+			//console.log('affiliate:', affiliate);
+			if (
+				affiliates[affiliate].hasOwnProperty('name') &&
+				affiliates[affiliate].hasOwnProperty('website')
+			) {
+				affiliate_result[affiliate] = {
+					colour: colours[i++],
+					name: affiliates[affiliate].name,
+					website: affiliates[affiliate].website
+				};
+			}
+		}
+		return affiliate_result;
+	}
 
-        for (const affiliate of affiliate_list) {
-            //console.log('affiliate:', affiliate);
-            if (affiliates[affiliate].hasOwnProperty('name') && affiliates[affiliate].hasOwnProperty('website')) {
-                affiliate_result[affiliate] = {
-                    "colour": colours[i++],
-                    "name": affiliates[affiliate].name,
-                    "website": affiliates[affiliate].website
-                }
-            }
-        }
-        return affiliate_result;
-    }
+	// sort technologies alphabetically by name
+	function sortTechnologies(technologies) {
+		return technologies.sort((a, b) => a.name.localeCompare(b.name));
+	}
 
-    // sort technologies alphabetically by name
-    function sortTechnologies(technologies) {
-        return technologies.sort((a,b) => a.name.localeCompare(b.name));
-    }
+	// generic function to find the intersection of two arrays
+	// approach ref: https://bobbyhadz.com/blog/javascript-get-intersection-of-two-arrays
+	function inCommon(a, b) {
+		const set1 = new Set(a);
+		const set2 = new Set(b);
 
-    // generic function to find the intersection of two arrays
-    // approach ref: https://bobbyhadz.com/blog/javascript-get-intersection-of-two-arrays
-    function inCommon(a, b) {
-        const set1 = new Set(a);
-        const set2 = new Set(b);
+		const intersection = [...set1].filter((element) => set2.has(element));
+		console.log('intersection = ', intersection);
+		return intersection;
+	}
 
-        const intersection = [...set1].filter(
-            element => set2.has(element)
-        );
-        console.log('intersection = ', intersection);
-        return intersection;
-    }
+	// filter technologies based on a list of Categories
+	function filterTechnologiesByCategoryList(technologies, list) {
+		console.log('looking for tech in categories: ', list);
+		const included = [];
+		technologies.forEach(function (tech, index) {
+			//console.log('tech(' + index + '): ', tech);
+			if (hasInstances(tech)) {
+				const intersection = inCommon(tech.categories, list);
+				console.log('categories: ', tech.categories);
+				//console.log('list: ', list);
+				console.log('intersection: ', intersection);
+				if (intersection && intersection.constructor === Array) {
+					//console.log('intersection length: '. intersection.length);
+					if (intersection.length > 0) {
+						console.log('including tech: ', tech);
+						included.push(tech);
+					}
+				} else {
+					console.log('intersection not array');
+				}
+			}
+		});
+		console.log('found ' + included.length + ' technologies.');
+		return included;
+	}
 
-    // filter technologies based on a list of Categories
-    function filterTechnologiesByCategoryList(technologies, list) {
-        console.log('looking for tech in categories: ', list);
-        const included = [];
-        technologies.forEach(function(tech, index) {
-            //console.log('tech(' + index + '): ', tech);
-            if (hasInstances(tech)) {
-                const intersection = inCommon(tech.categories, list);
-                console.log('categories: ', tech.categories);
-                //console.log('list: ', list);
-                console.log('intersection: ', intersection);
-                if (intersection && intersection.constructor === Array) {
-                    //console.log('intersection length: '. intersection.length);
-                    if (intersection.length > 0) {
-                        console.log('including tech: ', tech);
-                        included.push(tech);
-                    }
-                } else {
-                    console.log('intersection not array');
-                }
-            }
-        });
-        console.log('found ' + included.length + ' technologies.')
-        return included;
-    }
+	const results = processData(webservices);
+	//console.log('results: ', results);
 
-    const results = processData(webservices);
-    //console.log('results: ', results);
+	//const technologies = webservices.technologies;
+	//console.log(technologies);
 
-    //const technologies = webservices.technologies;
-    //console.log(technologies);
+	const category_list = getKeys(results.tech_lists.category_list).sort();
+	const analogue_list = getKeys(results.tech_lists.analogue_list).sort();
+	const license_list = getKeys(results.tech_lists.license_list).sort();
+	const status_list = getKeys(results.instance_lists.status_list).sort();
+	const affiliate_list = getKeys(results.instance_lists.affiliate_list).sort();
+	const host_list = getKeys(results.instance_lists.host_list).sort();
 
-    const category_list = getKeys(results.tech_lists.category_list).sort();
-    const analogue_list = getKeys(results.tech_lists.analogue_list).sort();
-    const license_list = getKeys(results.tech_lists.license_list).sort();
-    const status_list = getKeys(results.instance_lists.status_list).sort();
-    const affiliate_list = getKeys(results.instance_lists.affiliate_list).sort();
-    const host_list = getKeys(results.instance_lists.host_list).sort();
+	const hosts = results.hosts;
+	//console.log('host_data: ', results.hosts);
+	const affiliates = results.affiliates;
+	//console.log('affiliate_data: ', results.affiliates);
+	const host_colours = hostColours(host_list, colours30, hosts);
+	//console.log('host_colours:', host_colours);
+	colours30.sort();
+	const affiliate_colours = affiliateColours(affiliate_list, colours30, affiliates);
+	//console.log('affiliate_colours:',affiliate_colours);
 
-    const hosts = results.hosts;
-    //console.log('host_data: ', results.hosts);
-    const affiliates = results.affiliates;
-    //console.log('affiliate_data: ', results.affiliates);
-    const host_colours = hostColours(host_list, colours30, hosts);
-    //console.log('host_colours:', host_colours);
-    colours30.sort();
-    const affiliate_colours = affiliateColours(affiliate_list, colours30, affiliates);
-    //console.log('affiliate_colours:',affiliate_colours);
+	//console.log('categories array: ', results.tech_tags.categories);
+	//console.log('categories keys: ', categories);
 
-    //console.log('categories array: ', results.tech_tags.categories);
-    //console.log('categories keys: ', categories);
-
-    console.log('category_list: ', category_list);
-    //console.log('analogue_list: ', analogue_list);
-    console.log('license_list: ', license_list);
-    console.log('status_list: ', status_list);
-    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 = [
-        'Fediverse',
-        '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, category_filter_list);
-    const technologies = sortTechnologies(filtered_technologies);
+	console.log('category_list: ', category_list);
+	//console.log('analogue_list: ', analogue_list);
+	console.log('license_list: ', license_list);
+	console.log('status_list: ', status_list);
+	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,
+		category_filter_list
+	);
+	const technologies = sortTechnologies(filtered_technologies);
 </script>
 
 <div class="webservices">
-    <h1>Web Services</h1>
+	<h1>Web Services</h1>
 
-    <div class="summary">
-        <ul>
-            <li>Total number of services: {results.total_instances}</li>
-        </ul>
-    </div>
-    <div class="filters">
-        <div class="tag-list tech">
-            <div class="tags tech categories">Categories: {#each category_list 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">Licenses: {#each license_list as license}<span class="tag license">{license}</span> {/each}</div>
-        </div>
-        <div class="tag-list instance">
-            <div class="tags instance statuses">Statuses: {#each status_list as status}<span class="tag status">{status}</span> {/each}</div>            <div class="tags instance affiliates">Affiliates: {#each affiliate_list as affiliate}<span class="tag affiliate"><span class="marker circle" style="background-color: {affiliate_colours[affiliate].colour}"></span> {affiliate}</span> {/each}</div>
-            <div class="tags instance hosts">Hosts: {#each host_list as host}<span class="tag host"><span class="marker square" style="background-color: {host_colours[host].colour}"></span> {host}</span> {/each}</div>
-        </div>
-    </div>
-    <div class="tiles">
-        {#each filtered_technologies as technology}
-        <div class="tile technology">
-            <div class="links">
-                {#if (technology.repository)}<span class="repository"><a href="{technology.repository}" title="The source code repository for {technology.name}">R</a></span>{/if}
-                {#if (technology.wikipedia)}<span class="wikipedia"><a href="{technology.wikipedia}" title="Wikipedia Page for {technology.name}">W</a></span>{/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.categories)}<p class="categories">{pluraliser('Category','Categories',technology.categories.length)}: <span class="value">{toOxfordCommaString(technology.categories)}</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"><p>{#each technology.instances as instance}
-                <a href="https://{instance.domain}" title="{technology.name} instance {instance.domain} hosted on '{instance.host}' by {instance.affiliation}"><span class="marker circle" style="background-color: {affiliate_colours[instance.affiliation].colour}"></span></a>{/each}</p>
-            </div>
-            {:else}
-            <div class="instances">
-                Nothing here yet...
-            </div>
-            {/if}
-        </div>
-        {/each}
-    </div>
+	<div class="introduction">
+		<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>
+			<li>Total number of services: {results.total_instances}</li>
+		</ul>
+	</div>
+	<div class="filters">
+		<div class="tag-list tech">
+			<div class="tags tech categories">
+				Categories<br/> {#each category_list as category}<span class="tag category" style="white-space: nowrap; word-break: normal;">{category} xo</span><wbr/>{/each}
+			</div>
+			<!--<div class="tags tech analogues">{#each analogues as analogue}<span class="tag analogue">{analogue}</span> {/each}</div>-->
+			<div class="tags tech licenses">
+				Licenses<br/> {#each license_list as license}<span class="tag license">{license} xo</span><wbr/>{/each}
+			</div>
+		</div>
+		<div class="tag-list instance">
+			<div class="tags instance statuses">
+				Statuses<br/> {#each status_list as status}<span class="tag status">{status} xo</span><wbr/>{/each}
+			</div>
+			<div class="tags instance affiliates">
+				Affiliates<br/> {#each affiliate_list as affiliate}<span class="tag affiliate"><span class="marker circle" style="background-color: {affiliate_colours[affiliate].colour}"></span> {affiliate} xo</span><wbr/>{/each}
+			</div>
+			<div class="tags instance hosts">
+				Hosts<br/> {#each host_list as host}<span class="tag host"><span class="marker square" style="background-color:  {host_colours[host].colour}"></span> {host} xo</span><wbr/>{/each}
+			</div>
+		</div>
+	</div>
+	<div class="tiles">
+		{#each filtered_technologies as technology}
+			<div class="tile technology">
+				<div class="links">
+					{#if technology.repository}<span class="repository"
+							><a
+								href={technology.repository}
+								title="The source code repository for {technology.name}">R</a
+							></span
+						>{/if}
+					{#if technology.wikipedia}<span class="wikipedia"
+							><a href={technology.wikipedia} title="Wikipedia Page for {technology.name}">W</a
+							></span
+						>{/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.categories}<p class="categories">
+						{pluraliser('Category', 'Categories', technology.categories.length)}:
+						<span class="value">{toOxfordCommaString(technology.categories)}</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}{#if technology.extended_description}<span
+							title={technology.extended_description}>i</span
+						>{/if}
+				</p>
+				{#if hasInstances(technology)}
+					<div class="instances">
+						<p>
+							{#each technology.instances as instance}
+								<a
+									href="https://{instance.domain}"
+									title="{technology.name} instance {instance.domain} hosted on '{instance.host}' by {instance.affiliation}"
+									><span
+										class="marker circle"
+										style="background-color: {affiliate_colours[instance.affiliation].colour}"
+									></span></a
+								>{/each}
+						</p>
+					</div>
+				{:else}
+					<div class="instances">Nothing here yet...</div>
+				{/if}
+			</div>
+		{/each}
+	</div>
 </div>
 
 <style>
-    .webservices {
-        display: grid;
-        width: 96%;
-        margin: 0 auto 3em auto;
-        padding: 0;
-    }
-    .summary {
-    }
-    .filters {
-        /*background-color: #f1ff94;
+	.webservices {
+		display: grid;
+		margin: 0 auto 3em auto;
+		padding: 0;
+	}
+	.webservices h1 {
+		padding: 0;
+	}
+	.summary {
+	    background-color: #ccc;
+	    display: block;
+	}
+	.filters {
+		/*background-color: #f1ff94;
         padding: 0.5em;
         border: 3px solid #cbea77;
         margin: 1em 0;*/
-        margin-bottom: 1em;
-    }
-    .filters .tags {
-        /*padding: 0.5em;*/
-        margin: 1em 0;
-        display: block;
-    }
-    .tag-list {
-        white-space: normal;
-        word-break: normal;
-        display: inline;
-    }
-    .tag {
-        font-size: 80%;
-        margin-right: 0.5em;
-        line-height: 2.5;
-        padding: 6px 8px;
-        border-radius: 14px;
-        white-space: nowrap;
-        word-break: keep-all;
-    }
-    .tag:after { content: "\00a0"; }
-    .tag.category {
-        background-color: #a369a2;
-        color: #fff;
-    }
-    .tag.license {
-        background-color: #a369a2;
-        color: #fff;
-    }
-    .tag.status {
-        background-color: #a369a2;
-        color: #fff;
-    }
-    .tag.affiliate {
-        background-color: #fff;
-        color: #000;
-    }
-    .tag.host {
-        background-color: #fff;
-        color: #000;
-    }
-    .tiles {
-        display: grid;
-        grid-gap: 15px;
-        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
-    }
-    /* flip card stuff: https://www.w3schools.com/howto/howto_css_flip_card.asp */
-    .tile {
-        height: 500px;
-        min-width: 270px;
-        max-width: 400px;
-        overflow: hidden;
-        box-sizing: border-box;
-        box-shadow: 5px 5px 3px #71ba71;
-        border: solid 3px #1e6831;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        position: relative;
-        background-color: #eee;
-    }
-    .tile .links {
-        position: absolute;
-        top: 0;
-        right: 0;
-        padding: 2px 6px;
-        font-size: 90%;
-    }
-    .tile .links a { color: #e6c4fc; }
-    .tile .links a:visited { color: #ced0ff; }
-    .tile .links a:hover { color: #fff; }
-    .tile h2 {
-        background-color: #999;
-        text-align: center;
-        padding: 0.5em;
-        margin: 0;
-    }
-    .tile h2 a { color: #e6c4fc; }
-    .tile h2 a:visited { color: #ced0ff; }
-    .tile h2 a:hover { color: #fff; }
-    .tile .description {
-        height: 260px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-    .tile p {
-        padding: 0 1em 0.2em 1em;
-        font-size: 80%;
-        color: #555;
-    }
-    .instances {
-        background-color: #ddd;
-        position: absolute;
-        bottom: 0;
-        height: 3em;
-        width: 100%;
-    }
-    .instances .marker {
-        margin-right: 3px;
-    }
-    .webservices li { list-style-type: none; }
-    .value { font-weight: bold; color: #000; }
-    .marker { vertical-align: middle; }
-   /* .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: 20px;
-        background-color: #555;
-        border-radius: 50%;
-        display: inline-block;
-    }
-    .square {
-        height: 20px;
-        width: 20px;
-        background-color: #555;
-        display: inline-block;
-    }
+		margin-bottom: 1em;
+	}
+	.filters .tags {
+		/*padding: 0.5em;*/
+		margin: 1em 0;
+		display: block;
+	}
+	.tag-list {
+/*		white-space: normal;
+		word-break: normal;
+		display: inline;*/
+	}
+	.tags {
+/*		white-space: normal;
+		word-break: normal;
+	    display: inline;*/
+	}
+	.tag {
+		font-size: 80%;
+		margin-right: 0.5em;
+		line-height: 2.5;
+		padding: 6px 8px;
+		border-radius: 14px;
+		white-space: nowrap;
+		word-break: normal;
+		box-shadow: 3px 3px 3px #71ba71;
+	}
+	.tag:hover { box-shadow: 4px 4px 3px #71ba71;}
+	.tag.category {
+		background-color: #9aa34d;
+		color: #fff;
+	}
+	.tag.license {
+		background-color: #6498a3;
+		color: #fff;
+	}
+	.tag.status {
+		background-color: #a369a2;
+		color: #fff;
+	}
+	.tag.affiliate {
+		background-color: #fff;
+		color: #000;
+	}
+	.tag.host {
+		background-color: #fff;
+		color: #000;
+	}
+	.tiles {
+		display: grid;
+		grid-gap: 15px;
+		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: 400px;
+		overflow: hidden;
+		box-sizing: border-box;
+		box-shadow: 5px 5px 3px #71ba71;
+		border: solid 3px #1e6831;
+		text-overflow: ellipsis;
+		overflow: hidden;
+		position: relative;
+		background-color: #eee;
+	}
+	.tile .links {
+		position: absolute;
+		top: 0;
+		right: 0;
+		padding: 2px 6px;
+		font-size: 90%;
+	}
+	.tile:hover {
+		box-shadow: 10px 10px 6px #71ba71;
+	}
+	.tile .links h2 a {
+		color: #e6c4fc;
+	}
+	.tile .links a:visited {
+		color: #ced0ff;
+	}
+	.tile .links a:hover,
+	.tile:hover h2 a {
+		color: #fff !important;
+	}
+	.tile h2 {
+		background-color: #999;
+		text-align: center;
+		padding: 0.5em;
+		margin: 0;
+	}
+	.tile h2 a {
+		color: #e6c4fc;
+	}
+	.tile h2 a:visited {
+		color: #ced0ff;
+	}
+	.tile h2 a:hover {
+		color: #fff;
+	}
+	.tile .description {
+		height: 260px;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
+	.tile p {
+		padding: 0 1em 0.2em 1em;
+		font-size: 80%;
+		color: #555;
+	}
+	.instances {
+		background-color: #ddd;
+		position: absolute;
+		bottom: 0;
+		height: 3em;
+		width: 100%;
+	}
+	.instances .marker {
+		margin-right: 3px;
+	}
+	.webservices li {
+		list-style-type: none;
+	}
+	.value {
+		font-weight: bold;
+		color: #000;
+	}
+	.marker {
+		vertical-align: middle;
+	}
+	.circle {
+		height: 20px;
+		width: 20px;
+		background-color: #555;
+		border-radius: 50%;
+		display: inline-block;
+	}
+	.square {
+		height: 20px;
+		width: 20px;
+		background-color: #555;
+		display: inline-block;
+	}
 </style>
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
new file mode 100644
index 0000000..d9bc6ec
--- /dev/null
+++ b/src/routes/about/+page.svelte
@@ -0,0 +1 @@
+<h1>About this site... </h1>
diff --git a/src/routes/attribution/+page.svelte b/src/routes/attribution/+page.svelte
new file mode 100644
index 0000000..3e570ea
--- /dev/null
+++ b/src/routes/attribution/+page.svelte
@@ -0,0 +1 @@
+<h1>Attribution for included media</h1>