disabled most debugging, changed nav

src/lib/components/Filters.svelte

@@ -0,0 +1,119 @@
+<script>
+	// the filters
+	import { setFilter, getFilter } from '$lib/components/filter.js';
+	import { Accordions, Accordion, AccordionBody, El } from 'yesvelte';
+	import Filterable from '$lib/components/Filterable.svelte';
+
+	export let categoryFilter;
+	export let results;
+</script>
+
+<Accordions>
+    <Accordion title="Filters">
+        <AccordionBody>
+            <p>
+                You can filter the software services listed below by the following filtering dimensions.
+                Click a tag to remove or re-add it, or use 'select all or none' to select none, or invert your selection if it's more useful.</p>
+            <p><strong>Tip</strong>: if you want to see all technologies tagged with a specific tag, click that tag to <em>deselect</em> it, and then 'invert selection'. You'll see only the technologies that have the resulting tag.
+            </p>
+            <Accordions>
+                <Accordion title="Software Catergory Filter">
+                    <AccordionBody>
+                        <div class="filter-group categories">
+                            <Filterable
+                                filterValues={categoryFilter}
+                                histogram={results.tech_lists.category_list}
+                                context={'categories'}>
+                                <h2 slot="title">Categories</h2>
+                                <p slot="description">
+                                    These are general categories of software which help you understand the sort of software you're looking at, as well as identifying functionally similar software for comparison.
+                                </p>
+                            </Filterable>
+                        </div>
+                    </AccordionBody>
+                </Accordion>
+                <Accordion title="Software Analogue Filter">
+                    <AccordionBody>
+                        <div class="filter-group analogues">
+                            <Filterable
+                                filterValues={analogueFilter}
+                                {tabindex}
+                                histogram={results.tech_lists.analogue_list}
+                                context={'analogues'}>
+                                <h2 slot="title">Analogues</h2>
+                                <p slot="description">
+                                    Because all the software listed here is '<a
+                                        href="https://tech.oeru.org/foss-libresoftware-its-about-clarity-and-values"
+                                        >libre</a
+                                    >', I've included the names of functionally similar but heavily marketed
+                                    <a href="https://davelane.nz/proprietary">proprietary</a> software that is therefore
+                                    better known to the general population, also for the purposes of understanding the
+                                    use of the software shown and to what it can be compared.
+                                </p>
+                            </Filterable>
+                        </div>
+                    </AccordionBody>
+                </Accordion>
+                <Accordion title="License Filter">
+                    <AccordionBody>
+                        <div class="filter-group licenses">
+                            <Filterable
+                                filterValues={licenseFilter}
+                                {tabindex}
+                                histogram={results.tech_lists.license_list}
+                                context={'licenses'}
+                            >
+                                <h2 slot="title">Open Source & Copyleft Licenses</h2>
+                                <p slot="description">
+                                    These are the various '<a href="https://opensource.org/licenses">open source</a
+                                    >' and '<a href="https://copyleft.org">copyleft</a>' licenses that apply to the
+                                    software listed. You can chose
+                                </p>
+                            </Filterable>
+                        </div>
+                    </AccordionBody>
+                </Accordion>
+                <Accordion title="Service Status Filter">
+                    <AccordionBody>
+                        <div class="filter-group statuses">
+                            <Filterable
+                                filterValues={statusFilter}
+                                {tabindex}
+                                histogram={results.instance_lists.status_list}
+                                context={'statuses'}
+                            >
+                                <h2 slot="title">Statuses</h2>
+                                <p slot="description"></p>
+                            </Filterable>
+                        </div>
+                    </AccordionBody>
+                </Accordion>
+                <Accordion title="Service Affiliates Filter">
+                    <AccordionBody>
+                        <div class="filter-group affilates">
+                            <Filterable filterValues={affiliateFilter}
+                                {tabindex} 								histogram={results.instance_lists.affiliate_list}
+                                context={'affiliates'}
+                                colours={affiliate_colours}><h2 slot="title">Affiliates</h2>
+                                <p slot="description"></p>
+                            </Filterable>
+                        </div>
+                    </AccordionBody>
+                </Accordion>
+                <Accordion title="Service Host Filter">
+                    <AccordionBody>
+                        <div class="filter-group hosts">
+                            <Filterable	filterValues={hostFilter}
+                                {tabindex}
+                                histogram={results.instance_lists.host_list}
+                                context={'hosts'}
+                                colours={host_colours}><h2 slot="title">Hosts</h2>
+                                <p slot="description"></p>
+                            </Filterable>
+                        </div>
+                    </AccordionBody>
+                </Accordion>
+            </Accordions>
+        </AccordionBody>
+    </Accordion>
+</Accordions>

src/lib/components/TechnologyTile.svelte

@@ -160,6 +160,7 @@
 		margin-right: 18px;
 		margin-top: 8px;
 		overflow: hidden;
+		/*overflow: visible;*/
 		padding: 0;
 		position: relative;
 		text-align: left;

src/routes/+layout.svelte

@@ -13,7 +13,8 @@
 </svelte:head>
 
 <Navbar theme='light' style="margin-bottom: 2em;">
-    <a href="/"><NavbarItem title="Web Services" /></a>
+    <a href="/"><NavbarItem title="Home" /></a>
+    <a href="/project"><NavbarItem title="Project" /></a>
     <a href="/about"><NavbarItem title="About" /></a>
 </Navbar>
 

src/routes/+page.svelte

@@ -10,6 +10,8 @@
 	import { setFilter, getFilter } from '$lib/components/filter.js';
 	import { Accordions, Accordion, AccordionBody, El } from 'yesvelte';
 	import Filterable from '$lib/components/Filterable.svelte';
+
+	//import Filters from '$lib/components/Filters.svelte';
 	// collapsible sections
 	//import CollapsibleSection from '$lib/components/CollapsibleSection.svelte';
 	import TechnologyTile from '$lib/components/TechnologyTile.svelte';
@@ -368,22 +370,22 @@
 			if (hasInstances(tech)) {
 				//console.log('instances: ', tech.instances);
 				for (let id in tech.instances) {
-					console.log('id = ', id);
+					//console.log('id = ', id);
-					console.log('field = ', field);
+					//console.log('field = ', field);
 					let instance = tech.instances[id];
 					let value = instance[field];
-					console.log('field value = ', value);
+					//console.log('field value = ', value);
-					console.log('list = ', list);
+					//console.log('list = ', list);
 					if (instance.hasOwnProperty(field)) {
 						//const intersection = inCommon([instance[field]], list);
 				        const intersection = inCommon([value], list);
 						if (intersection && intersection.constructor === Array) {
-							console.log('intersection length: ', intersection.length);
+							//console.log('intersection length: ', intersection.length);
 							// if any one instance belonging to the tech is in the set, add the tech.
 							if (intersection.length > 0) {
-								if (instance.hasOwnProperty('domain')) {
+								/*if (instance.hasOwnProperty('domain')) {
 									console.log('setting to include ',instance.domain);
-								}
+								}*/
 								to_include = true;
 							} else {
 								// if an instance doesn't belong in the set, remove it.
@@ -398,7 +400,7 @@
 				}
 			}
 			if (to_include) {
-				console.log('including ', tech.name);
+				//console.log('including ', tech.name);
 				included.push(tech);
 			}
 		});
@@ -455,22 +457,22 @@
 
 	// reactive stuff...
 	$: {
-		console.log(
+		/*console.log(
 			'about to filter technologies by categories - starting with ' +
 				results.active_services.length +
 				' technologies...'
-		);
+		);*/
 		// filter by categories
 		filteredTechnologies = filterTechnologiesByArray(
 			results.active_services,
 			'categories',
 			flattenFilter($categoryFilter)
 		);
-		console.log(
+		/*console.log(
 			'about to filter technologies by analogues - starting with ' +
 				filteredTechnologies.length +
 				' technologies...'
-		);
+		);*/
 		// filter by analogues
 		filteredTechnologies = filterTechnologiesByArray(
 			filteredTechnologies,
@@ -487,11 +489,11 @@
 			'license',
 			flattenFilter($licenseFilter)
 		);
-		console.log(
+		/*console.log(
 			'about to filter technologies by instance status - starting with ' +
 				filteredTechnologies.length +
 				' technologies...'
-		);
+		);*/
 		filteredTechnologies = filterTechnologiesByInstanceValue(
 			filteredTechnologies,
 			'status',
@@ -509,11 +511,11 @@
 		)
 
 		//filteredTechnologies = filterTechnologiesByCategoryList(results.all_services, flattenFilter($categoryFilter));
-		console.log(
+		/*console.log(
 			'about to sort technologies alphabetically - starting with ' +
 				filteredTechnologies.length +
 				' technologies...'
-		);
+		);*/
 		const technologies = sortTechnologies(filteredTechnologies);
 		//console.log('finally have ' + technologies.length + ' technologies left to show...');
 	}
@@ -572,37 +574,19 @@
 		</div>
 		<h1>Web Services</h1>
 		<p>
-			This sites exists to provide an 'always-up-to-date', in-depth description of the
+			This is a list 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 I -                        (<a href="https://davelane.nz" title="Who is this Dave Lane character?">Dave Lane</a>) currently host on behalf of my employer, organisations for whom I provide voluntary services, for consulting customers, and for my own interest and utility.
-			<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 I (<a href="https://davelane.nz"
-			title="Who is this Dave Lane character?">Dave Lane</a>) have set up and maintain.
 		</p>
 		<p>
-			These services are run primarily on commodity Linux Virtual Private Servers, aka 'hosts',
+			Each 'technology tile' below represents a different libre web-based technology for which I actively run a publicly accessible instance either in a day-to-day production capacity or as a trial. Some are developed and run commercially by businesses, some are made available by governments, universities, charitable organisations and foundations, and others by loosely organised collectives and other sorts of communities. All are globally available, under the terms of their selected libre license.
-			which I also maintain. Some systems are also run on real physical hosts either in my home
-			hosting facility or in commercial hosting facilities. These hosts are based in Aotearoa NZ,
-			Singapore, the US, and in Germany. Almost all run an LTS (Long Term Support) version of Ubuntu
-			Linux although a few hosts run Debian Linux.
 		</p>
 		<p>
-			Almost all the hosts are <a href="https://tech.oeru.org/creating-your-own-oer-foundation-style-libre-self-hosting-infrastructure-docker-compose-and-ubuntu">configured in a particular way</a> which allows multiple services to run harmoniously on the same host. I use a set of somewhere
+			Clicking on a tile below will pop up an expanded view of the technology and its details.
-			between one and twenty-one Docker containers (which I run via Docker Compose) for each service,
-			to keep different services, each of which has different software dependencies, from interfering
-			with one another. Each service is made available to the Internet via a 'reverse proxy' (for which
-			I use Nginx) and user interactions with them are secured (encrypted) with Let's Encrypt SSL certificates (which renew automatically).
 		</p>
 		<p>
-			To manage the servers and keep them up-to-date, I use SSH to establish secure encrypted
+			You can also filter the list of technologies shown based on three sets of software criteria: software categories, heavily marketed proprietary alternatives, and the libre (or 'open source') license used.
-			connections to them (via key-based authentication). I run updates of the hosts manually, and
-			update individual services when required (urgently if updates are security-related). Some of
-			the Docker containers I run I have built myself, in other cases I use those supplied by the
-			communities developing the service.
 		</p>
 		<p>
-			One huge advantage of the Docker Compose pattern is that I can rapidly move services between
+			You can also filter technologies based on the active instances, like their current status  (e.g. planned, production, trial, etc.), with which organisation or individual they are affiliated, and on which actual host they reside.
-			different hosts, or even replicate services very rapidly for development or staging purposes.
-			Using them has revolutionised my hosting processes.
 		</p>
 	</div>
 	<Accordions>
@@ -728,7 +712,6 @@
 		{/each}
 	</div>
 </div>
-
 <style>
 	.webservices {
 		display: grid;
@@ -766,6 +749,9 @@
 	.summary .number {
 		color: #000;
 	}
+	.tiles {
+		overflow: hidden;
+	}
 	@media screen and (max-width: 600px) {
 		.summary {
 			float: none;