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

disabled most debugging, changed nav

Browse source
This commit is contained in:
Dave Lane 2024-12-10 16:00:28 +13:00
parent 4a6c2003f2
commit 0aedd1f9b0
4 changed files with 148 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

119
src/lib/components/Filters.svelte Normal file
View file

@ -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>

1
src/lib/components/TechnologyTile.svelte
View file

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

3
src/routes/+layout.svelte
View file

@ -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>

66
src/routes/+page.svelte
View file

@ -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('field = ', field);
//console.log('id = ', id);
//console.log('field = ', field);
let instance = tech.instances[id];
let value = instance[field];
console.log('field value = ', value);
console.log('list = ', list);
//console.log('field value = ', value);
//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
<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.
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.
</p>
<p>
These services are run primarily on commodity Linux Virtual Private Servers, aka 'hosts',
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.
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.
</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
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).
Clicking on a tile below will pop up an expanded view of the technology and its details.
</p>
<p>
To manage the servers and keep them up-to-date, I use SSH to establish secure encrypted
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.
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.
</p>
<p>
One huge advantage of the Docker Compose pattern is that I can rapidly move services between
different hosts, or even replicate services very rapidly for development or staging purposes.
Using them has revolutionised my hosting processes.
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.
</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;