WIP just need to fix the filtering of technologies based on instance properties

Plans.md

@@ -1,8 +1,24 @@
 # Plans for Webservices App
 
-High priority:
+I've got quite a few plans for this app... here's a rough sketch of what I'm planning.
+
+First release:
 
 * filtering of all properties like Categories, Analogues, Licenses, Statuses, Hosts, and Affiliations.
+* modal showing each technology in more detail. DONE
+* split out all constants (arrays) into separate files. ~DONE
+* split out functions into svelte components.
+
+Future versions:
+
+* upgrade to Svelte 5
 * a 'Technology' view (overlay), addressable by URL (i.e. going to, say, http://localhost:5173/ServiceName brings up the site with ServiceName shown in 'Technology' view, allowing people to reference a specific technology of interest to others).
-* split out all constants (arrays) into separate files.
+* ability to go 'prev' or 'next' in modals within filtered set of technologies.
-* split out functions into svelte modules.
+* ability to select a Hosts and view all Technologies with instances on that Host
+* ability to see the status (via UptimeKuma API) of each instance.
+
+Possibly, eventually:
+
+* move data into a database (rather than a fragile hand-crafted JSON file) with integrity checking.
+* Authentication for administration
+* CRUD interface for Technologies, Licenses, Hosts, and Affiliations.

src/app.css

@@ -28,7 +28,7 @@ a:hover {
 	text-decoration: underline;
 }
 a:visited {
-	color: #437fad;
+	color: #325f81;
 }
 .y-accordions,
 .y-accordion-header-button {
@@ -44,9 +44,14 @@ a:visited {
 	border-radius: 15px;
 	box-shadow: 5px 5px 3px #6a6d6a;
 	width: 90%;
-	margin: auto auto;
+	margin: 1em auto;
-	max-width: none;
+	max-width: 40em;
 	height: auto;
+	padding: 0;
+}
+.y-modal .y-modal-container .y-modal-content {
+	width: 100%;
+	border-width: 0;
 }
 .y-modal .y-modal-container .y-modal-header {
 	text-align: center;
@@ -57,3 +62,34 @@ a:visited {
 	font-size: 1.5em;
 	margin: auto;
 }
+.y-modal .y-modal-container .y-modal-body {
+	background-color: #eee;
+}
+.y-modal .y-modal-container div.instances {
+	background-color: #ddd;
+	width: 100%;
+	padding: 20px;
+	margin-bottom: 0;
+}
+
+.y-modal .y-modal-container p.instances,
+.y-modal .y-modal-container li p {
+	padding: 0;
+	margin-bottom: 0;
+}
+
+/* end modals */
+/* popover styles */
+.y-popover {
+	z-index: 10000;
+}
+.y-popover a {
+	font-size: 110%;
+}
+.y-popover a:hover {
+	color: #000;
+	text-decoration: underline;
+}
+.y-popover a:visited {
+	color: #325f81;
+}

src/lib/components/CollapsibleSection.svelte

@@ -1,70 +0,0 @@
-<script>
-    // Ref: https://svelte.dev/repl/a5f4d395b15a44d48a6b2239ef705fc4?version=3.35.0
-    // based on suggestions from:
-    // Inclusive Components by Heydon Pickering https://inclusive-components.design/collapsible-sections/
-    export let headerText;
-
-    let expanded = false;
-</script>
-
-<div class="collapsible">
-    <h3>
-        <button aria-expanded={expanded} on:click={() => expanded = !expanded}>{headerText}
-            <svg class="indicator" viewBox="0 0 20 20" fill="none" >
-                <path class="vert" d="M10 1V19" stroke="black" stroke-width="2"/>
-                <path d="M1 10L19 10" stroke="black" stroke-width="2"/>
-            </svg>
-        </button>
-    </h3>
-<!--    <div class='tree' hidden={!expanded}>
-        <svg viewBox="0 0 60 60" fill="#ccc">
-            <path class="open" d="M40 1 V69" stroke="#444" stroke-width="4" />
-        </svg>
-    </div> -->
-    <div class='contents' hidden={!expanded}>
-        <slot></slot>
-    </div>
-</div>
-
-<style>
-    .collapsible {
-        margin: 8px 0 4px 0;
-    }
-    .collapsible .collapsible h3 button {
-        padding-left: 20px;
-    }
-    .tree { float: left; }
-    .contents {
-        float: left;
-        clear: both;
-        width: 100%;
-        border-bottom: dashed #aaa 1px;
-        padding-bottom: 1em;
-        margin-bottom: 1em;
-    }
-    h3 {
-        margin: 0;
-    }
-    button {
-        background-color: var(--background, #fff);
-        color: var(--gray-darkest, #282828);
-        display: flex;
-        justify-content: space-between;
-        border: 1px #aaa solid;
-        margin-left: 0px;
-        padding: 0.7em 0.7em;
-    }
-    button[aria-expanded="true"] { border-bottom: 2px solid var(--gray-light, #eee); }
-    button[aria-expanded="true"] .vert { display: none; }
-    button:focus svg { outline: 1firtpx solid; }
-    button[aria-expanded="true"] rect { fill: currentColor; }
-    svg.indicator {
-        height: 1.0em;
-        width: 1.0em;
-        margin-left: 6px;
-        margin-right: 6px;
-        margin-top: 4px;;
-    }
-    .tree:hover svg { outline: 1firtpx solid; }
-
-</style>

src/lib/components/TechnologyTile.svelte

@@ -1,10 +1,12 @@
 <script>
     // a 'technology' object
     export let technology;
+    export let licenses;
     export let affiliate_colours;
-    import { Button, ButtonGroup, El, Modal, ModalBody, ModalFooter, ModalHeader, ModalTitle, Popover } from 'yesvelte';
+    import { Button, ButtonGroup, El, Modal, ModalBody, ModalFooter,
+		ModalHeader, ModalTitle, Popover, PopoverBody, PopoverHeader } from 'yesvelte';
 
-    let showModal = false;
+    export let showModal = false;
 
 	const formatter = new Intl.ListFormat('en', {
 	  style: 'long',
@@ -44,12 +46,23 @@
 <button on:click={() => (showModal = !showModal)} tabindex=0 class="tile technology" col>
     <h2>{technology.name}</h2>
     <div class="links">
-		<span class="website"><a href="{technology.website}" title="Project site for {technology.name}">P</a></span>
+		<span class="website">P</span>
-        {#if technology.repository}<span class="repository"><a
+		<Popover trigger="hover">
-			href={technology.repository} title="The source code repository for {technology.name}">C</a></span>{/if}
+			<PopoverHeader><strong>Project website</strong> for {technology.name}</PopoverHeader>
-        {#if technology.wikipedia}<span class="wikipedia"><a
+			<PopoverBody><a href="{technology.website}">{technology.website}</a></PopoverBody>
-			href={technology.wikipedia}
+		</Popover>
-			title="Wikipedia Page for {technology.name}">W</a></span>{/if}
+        {#if technology.repository}<span class="repository">S</span>
+			<Popover trigger="hover">
+				<PopoverHeader><strong>Source code</strong> repository for {technology.name}</PopoverHeader>
+				<PopoverBody><a href={technology.repository}>{technology.repository}</a></PopoverBody>
+			</Popover>
+		{/if}
+        {#if technology.wikipedia}<span class="wikipedia">W</span>
+			<Popover trigger="hover">
+				<PopoverHeader><strong>Wikipedia entry</strong> for {technology.name}</PopoverHeader>
+				<PopoverBody><a href={technology.wikipedia}>{technology.wikipedia}</a></PopoverBody>
+			</Popover>
+		{/if}
     </div>
 
     <p class="description">{technology.description}{#if technology.extended_description}<span
@@ -66,11 +79,16 @@
 	</div>
     {#if hasInstances(technology)}
         <div class="instances">
-            <p>{#each technology.instances as instance}<a
+            <p>
-				href="https://{instance.domain}"
+            {#each technology.instances as instance}
-				title="{technology.name} instance {instance.domain} hosted on '{instance.host}' by {instance.affiliation}"><span class="marker circle"
+				<span class="marker circle"
 				style="background-color: {affiliate_colours[instance.affiliation].colour}"
-				></span></a>{/each}
+				></span>
+				<Popover trigger="hover">
+					<PopoverHeader>{technology.name} Instance</PopoverHeader>
+					<PopoverBody><a href="https://{instance.domain}">https://{instance.domain}</a> hosted on '{instance.host}' by {instance.affiliation}</PopoverBody>
+				</Popover>
+			{/each}
             </p>
         </div>
     {:else}
@@ -100,36 +118,32 @@
 			class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
 		{#if technology.license}<p class="property license"
 			title="The libre license for this project is {technology.license}">License: <span
-			class="value">{technology.license}</span></p>{/if}
+			class="value"><a href="{licenses[technology.license].url}">{licenses[technology.license].name}</a></span></p>{/if}
 		</div>
-		{#if hasInstances(technology)}
-			<div class="instances">
-				<p class="instances">Instances of {technology.name}:</p>
-			    <ol>
-			    {#each technology.instances as instance}
-			        <li>
-						<p class="instance"><a href="https://{instance.domain}">{instance.domain}</a>  hosted on '{instance.host}' <span class="marker circle" style="background-color: {affiliate_colours[instance.affiliation].colour}"/> by {instance.affiliation}".
-						</p>
-					</li>
-				{/each}
-				</ol>
-			</div>
-		{:else}
-			<div class="instances">Nothing here yet...</div>
-		{/if}
 	</ModalBody>
-	<ModalFooter>
+	{#if hasInstances(technology)}
+		<div class="instances">
+			<p class="instances">Instances of {technology.name}:</p>
+			<ol>
+			{#each technology.instances as instance}
+				<li>
+					<p class="instance"><a href="https://{instance.domain}">{instance.domain}</a>  hosted on '{instance.host}' <span class="marker circle" style="background-color: {affiliate_colours[instance.affiliation].colour}"/> by {instance.affiliation}".
+					</p>
+				</li>
+			{/each}
+			</ol>
+		</div>
+	{:else}
+		<div class="instances">Nothing here yet...</div>
+	{/if}
+	<!--<ModalFooter>
 		Previous and Next buttons to go here.
-	</ModalFooter>
+	</ModalFooter>-->
 </Modal>
 
 <style>
 	.tile.technology {
-		/*background: none;
+
-		border: none;
-		outline: none;
-		box-shadow: none;
-		appearance: none !important; */
 		background-color: #eee;
 		border: solid 3px #3a8ea5;
 		border-radius: 15px;
@@ -142,6 +156,7 @@
 		margin-right: 18px;
 		margin-top: 8px;
 		overflow: hidden;
+		padding: 0;
 		position: relative;
 		text-align: left;
 		text-overflow: ellipsis;
@@ -152,7 +167,6 @@
 		position: absolute;
 		top: 0;
 		right: 0;
-		/*float: right;*/
 		padding: 2px 6px;
 		font-size: 90%;
 	}
@@ -228,9 +242,6 @@
 	.tile.technology .instances .marker {
 		margin-right: 3px;
 	}
-	/*.webservices li {
-		list-style-type: none;
-	}*/
 	.value {
 		font-weight: bold;
 		color: #000;
@@ -249,11 +260,4 @@
 	.circle:hover {
 		border: 1px solid #000;
 	}
-	/*.square {
-		height: 20px;
-		width: 20px;
-		background-color: #555;
-		display: inline-block;
-	}*/
-
 </style>

src/routes/+page.js

@@ -1,15 +1,17 @@
 // for multiple async fetches: https://youtu.be/EQy-AYhZIlE?si=FwyAPUjbixSUlc9q&t=490
 export const load = async ({ fetch }) => {
-    const webservicesResult = await fetch('https://static.magnificent.nz/webservices/webservices.json');
+	const webservicesResult = await fetch(
-    const webservicesData = await webservicesResult.json();
+		'https://static.magnificent.nz/webservices/webservices.json'
-
+	);
-    //console.log(webservicesData);
+	const webservicesData = await webservicesResult.json();
-    return {
-        webservices: {
-            technologies: webservicesData.technologies,
-            affiliates: webservicesData.affiliates,
-            hosts: webservicesData.hosts
-        }
-    };
-}
 
+	//console.log(webservicesData);
+	return {
+		webservices: {
+			technologies: webservicesData.technologies,
+			affiliates: webservicesData.affiliates,
+			hosts: webservicesData.hosts,
+			licenses: webservicesData.licenses
+		}
+	};
+};

src/routes/+page.svelte

@@ -17,7 +17,7 @@
 	import { page } from '$app/stores';
 
 	let tabindex = 0; // a counter which facilitates keyboard navigation.
-
+	let showModal = true; // use to make a technology modal show when rendered
 
 	// return the % a is of b
 	function percent(a, b) {
@@ -43,6 +43,7 @@
 		// actual objects
 		let hosts = [];
 		let affiliates = [];
+		let licenses = [];
 
 		//
 		// just a trivial reassignment
@@ -119,6 +120,10 @@
 			let affiliate = webservices.affiliates[key];
 			affiliates[key] = affiliate;
 		}
+		for (let key in webservices.licenses) {
+			let license = webservices.licenses[key];
+			licenses[key] = license;
+		}
 
 		// assign stats based on gathered data...
 		stats.current = current.length;
@@ -150,7 +155,8 @@
 				host_list: host_list
 			},
 			hosts: hosts,
-			affiliates: affiliates
+			affiliates: affiliates,
+			licenses: licenses
 		};
 	}
 
@@ -281,6 +287,8 @@
 		return technologies.sort((a, b) => a.name.localeCompare(b.name));
 	}
 
+	// set previous and next on each technology
+
 	// 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) {
@@ -391,6 +399,7 @@
 	//
 	// process the data received by the web request!
 	const results = processData(webservices);
+	const licenses = results.licenses;
 
 	//const technologies = webservices.technologies;
 	//console.log(technologies);
@@ -424,10 +433,12 @@
 	const affiliates = results.affiliates;
 	//console.log('affiliate_data: ', results.affiliates);
 	const host_colours = hostColours($hostFilter, colours, hosts);
-	console.log('host_colours:', host_colours);
+	//console.log('host_colours:', host_colours);
 	colours.sort();
 	const affiliate_colours = affiliateColours($affiliateFilter, colours, affiliates);
-	console.log('affiliate_colours:',affiliate_colours);
+	//console.log('affiliate_colours:',affiliate_colours);
+
+	//console.log('licenses:',licenses );
 
 	let filteredTechnologies;
 	let technologies;
@@ -466,16 +477,16 @@
 			'license',
 			flattenFilter($licenseFilter)
 		);
-		/*console.log(
+		console.log(
-			'about to sort technologies alphabetically - starting with ' +
+			'about to filter technologies by instance status - starting with ' +
 				filteredTechnologies.length +
 				' technologies...'
-		);*/
+		);
 		/*filteredTechnologies = filterTechnologiesByInstanceValue(
 			filteredTechnologies,
 			'status',
 			flattenFilter($statusFilter)
-		)*/
+		)
 		/*filteredTechnologies = filterTechnologiesByInstanceValue(
 			filteredTechnologies,
 			'affiliate',
@@ -488,8 +499,13 @@
 		)*/
 
 		//filteredTechnologies = filterTechnologiesByCategoryList(results.all_services, flattenFilter($categoryFilter));
+		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...');
+		//console.log('finally have ' + technologies.length + ' technologies left to show...');
 	}
 </script>
 
@@ -597,9 +613,7 @@
 									context={'categories'}>
 									<h2 slot="title">Categories</h2>
 									<p slot="description">
-										You can These are general categories of software which help you understand the
+										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.
-										sort of software you're looking at, as well as identifying functionally similar
-										software for comparison.
 									</p>
 								</Filterable>
 							</div>
@@ -691,10 +705,16 @@
 		</Accordion>
 	</Accordions>
 	<p>Showing {filteredTechnologies.length} technology tiles.</p>
-	<p>Current URL: {$page.url}...</p>
+	<!--<p>Current URL: {$page.url}...</p>-->
 	<div class="tiles">
-		{#each filteredTechnologies as technology}
+		{#each filteredTechnologies as technology, index}
-			<TechnologyTile {technology} {affiliate_colours} />
+			<!--{#if (index != 1) }-->
+				<TechnologyTile {technology} {affiliate_colours} {licenses}/>
+			<!--{:else}
+				<TechnologyTile {technology} {affiliate_colours} {licenses} {showModal}/>
+			{/if}-->
+		{:else}
+			<p class='no-tiles'>No technologies are selected</p>
 		{/each}
 	</div>
 </div>