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

further refactoring with TechnologyTile component. More refinements to styling and layout

Browse source
This commit is contained in:
Dave Lane 2024-09-25 10:12:16 +12:00
parent ef93b55b19
commit 01d648eb46
4 changed files with 91 additions and 84 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app.css
View file

@ -20,4 +20,8 @@ h1 {
} }
a { a {
text-decoration: none; text-decoration: none;
color: #4054ad;
font-weight: bold;
} }
a:hover { color: #1b2c44; }
a:visited { color: #437fad; }

5
src/lib/components/Filterable.svelte
View file

@ -7,6 +7,7 @@
export let context = 'none'; export let context = 'none';
export let filterValues; export let filterValues;
export let histogram; // an array with key = filter value, val = number of technologies export let histogram; // an array with key = filter value, val = number of technologies
export let colours = []; // an array of colour values with
//console.log('Filterable contextFilter: ', filterValues); //console.log('Filterable contextFilter: ', filterValues);
let activeFiltersString = 'None'; let activeFiltersString = 'None';
@ -78,8 +79,8 @@
console.log('histogram: ', histogram); console.log('histogram: ', histogram);
</script> </script>
<slot name="h2"><h2>Test Array</h2></slot> <slot name="title"><h2>Test Array</h2></slot>
<slot name="description"><p>Test Description</p></slot>
<div class="actions"> <div class="actions">
<span class="allNone" role="button" tabindex={tabindex++} on:click={() => allNoneActive()} <span class="allNone" role="button" tabindex={tabindex++} on:click={() => allNoneActive()}
on:keypress={() => allNoneActive()}>select all/none</span><wbr/> on:keypress={() => allNoneActive()}>select all/none</span><wbr/>

52
src/lib/components/Tile.svelte → src/lib/components/TechnologyTile.svelte
View file

@ -35,48 +35,30 @@
<div class="tile technology"> <div class="tile technology">
<div class="links"> <div class="links">
{#if technology.repository}<span class="repository" {#if technology.repository}<span class="repository"><a
><a href={technology.repository} title="The source code repository for {technology.name}">R</a></span>{/if}
href={technology.repository} {#if technology.wikipedia}<span class="wikipedia"><a
title="The source code repository for {technology.name}">R</a href={technology.wikipedia}
></span title="Wikipedia Page for {technology.name}">W</a></span>{/if}
>{/if}
{#if technology.wikipedia}<span class="wikipedia"
><a href={technology.wikipedia} title="Wikipedia Page for {technology.name}">W</a
></span
>{/if}
</div> </div>
<h2><a href={technology.website}>{technology.name}</a></h2> <h2><a href={technology.website}>{technology.name}</a></h2>
<p class="description"> <p class="description">{technology.description}{#if technology.extended_description}<span
{technology.description}{#if technology.extended_description}<span title={technology.extended_description}>i</span>{/if}
title={technology.extended_description}>i</span
>{/if}
</p> </p>
{#if technology.categories}<p class="categories"> {#if technology.categories}<p class="categories">{pluraliser('Category',
{pluraliser('Category', 'Categories', technology.categories.length)}: 'Categories', technology.categories.length)}: <span class="value">{toOxfordCommaString(technology.categories)}</span></p>{/if}
<span class="value">{toOxfordCommaString(technology.categories)}</span> {#if technology.analogues}<p class="analogues">Alternative to <span
</p>{/if} class="value">{toOxfordCommaString(technology.analogues)}</span></p>{/if}
{#if technology.analogues}<p class="analogues"> {#if technology.license}<p class="license"
Alternative to <span class="value">{toOxfordCommaString(technology.analogues)}</span> title="The libre license for this project is {technology.license}">License: <span
</p>{/if} class="value">{technology.license}</span></p>{/if}
{#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 hasInstances(technology)} {#if hasInstances(technology)}
<div class="instances"> <div class="instances">
<p> <p>{#each technology.instances as instance}<a
{#each technology.instances as instance}
<a
href="https://{instance.domain}" href="https://{instance.domain}"
title="{technology.name} instance {instance.domain} hosted on '{instance.host}' by {instance.affiliation}" 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}" style="background-color: {affiliate_colours[instance.affiliation].colour}"
></span></a ></span></a>{/each}
>{/each}
</p> </p>
</div> </div>
{:else} {:else}

102
src/routes/+page.svelte
View file

@ -11,9 +11,9 @@
import Filterable from '$lib/components/Filterable.svelte'; import Filterable from '$lib/components/Filterable.svelte';
// collapsible sections // collapsible sections
import CollapsibleSection from '$lib/components/CollapsibleSection.svelte'; import CollapsibleSection from '$lib/components/CollapsibleSection.svelte';
import Tile from '$lib/components/Tile.svelte'; import TechnologyTile from '$lib/components/TechnologyTile.svelte';
//console.log('colours: ', colours); let tabindex = 0; // a counter which facilitates keyboard navigation.
// //
// digest and return useful info from the Webservices JSON feed // digest and return useful info from the Webservices JSON feed
@ -333,76 +333,88 @@
</script> </script>
<div class="webservices"> <div class="webservices">
<div class="header">
<div class="introduction"> <div class="introduction">
<h1>Web Services</h1> <div class="summary-wrapper">
<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"> <div class="summary">
<h2>Statistics</h2> <h2>Statistics</h2>
<ul> <ul>
<li>Number of individual services: {results.stats.instances}</li> <li><span class="label">Number of individual services: <span class="number">{results.stats.instances}</span></li>
<li>Number of individual technologies: {results.stats.current}</li> <li><span class="label">Number of individual technologies: <span class="number">{results.stats.current}</span></li>
<li>Number of new technologies to be added: {results.stats.future}</li> <li><span class="label">Number of new technologies to be added: <span class="number">{results.stats.future}</span></li>
<li>Number of libre licenses used by these technologies: {results.stats.licenses}</li> <li><span class="label">Number of libre licenses used by these technologies: <span class="number">{results.stats.licenses}</span>
<li>&nbsp;&nbsp;'weak' corporate-exploitation-friendly open source licenses : {results.stats.weak}</li> <ul>
<li>&nbsp;&nbsp;'strong' user-protecting copyleft licenses: {results.stats.copyleft}</li> <li><span class="label">'weak' corporate-exploitation-friendly open source licenses : <span class="number">{results.stats.weak}</span></li>
<li>Total number of services: {results.stats.instances}</li> <li><span class="label">'strong' user-protecting copyleft licenses: <span class="number">{results.stats.copyleft}</span></li>
</ul>
</li>
<li><span class="label">Total number of services: <span class="number">{results.stats.instances}</span></li>
</ul> </ul>
</div> </div>
</div> </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.
</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.</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).
</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.</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.</p>
</div>
<CollapsibleSection headerText={'Filters'}> <CollapsibleSection headerText={'Filters'}>
<div class="filters"> <div class="filters">
<CollapsibleSection headerText={'Software Catergory Filter'}> <CollapsibleSection headerText={'Software Catergory Filter'}>
<div class="filter-group categories"> <div class="filter-group categories">
<Filterable filterValues={categoryFilter} <Filterable filterValues={categoryFilter}
histogram={results.tech_lists.category_list} context={'categories'}> histogram={results.tech_lists.category_list} context={'categories'}>
<h2 slot="h2">Categories</h2> <h2 slot="title">Categories</h2>
</Filterable> </Filterable>
</div> </div>
</CollapsibleSection> </CollapsibleSection>
<CollapsibleSection headerText={'Software Analogue Filter'}> <CollapsibleSection headerText={'Software Analogue Filter'}>
<div class="filter-group analogues"> <div class="filter-group analogues">
<Filterable filterValues={analogueFilter} <Filterable filterValues={analogueFilter}
tabindex={tabindex}
histogram={results.tech_lists.analogue_list} context={'analogues'}> histogram={results.tech_lists.analogue_list} context={'analogues'}>
<h2 slot="h2">Analogues</h2> <h2 slot="title">Analogues</h2>
</Filterable> </Filterable>
</div> </div>
</CollapsibleSection> </CollapsibleSection>
<CollapsibleSection headerText={'License Filter'}> <CollapsibleSection headerText={'License Filter'}>
<div class="filter-group licenses"> <div class="filter-group licenses">
<Filterable filterValues={licenseFilter} <Filterable filterValues={licenseFilter}
tabindex={tabindex}
histogram={results.tech_lists.license_list} context={'licenses'}> histogram={results.tech_lists.license_list} context={'licenses'}>
<h2 slot="h2">Open Source & Copyleft Licenses</h2> <h2 slot="title">Open Source & Copyleft Licenses</h2>
</Filterable> </Filterable>
</div> </div>
</CollapsibleSection> </CollapsibleSection>
<CollapsibleSection headerText={'Service Status Filter'}> <CollapsibleSection headerText={'Service Status Filter'}>
<div class="filter-group statuses"> <div class="filter-group statuses">
<Filterable filterValues={statusFilter} <Filterable filterValues={statusFilter}
tabindex={tabindex}
histogram={results.instance_lists.status_list} context={'statuses'}> histogram={results.instance_lists.status_list} context={'statuses'}>
<h2 slot="h2">Statuses</h2> <h2 slot="title">Statuses</h2>
</Filterable> </Filterable>
</div> </div>
</CollapsibleSection> </CollapsibleSection>
<CollapsibleSection headerText={'Service Affiliates Filter'}> <CollapsibleSection headerText={'Service Affiliates Filter'}>
<div class="filter-group affilates"> <div class="filter-group affilates">
<Filterable filterValues={affiliateFilter} <Filterable filterValues={affiliateFilter}
histogram={results.instance_lists.affiliate_list} context={'affiliates'}> tabindex={tabindex}
<h2 slot="h2">Affiliates</h2> histogram={results.instance_lists.affiliate_list}
context={'affiliates'}><h2 slot="title">Affiliates</h2>
</Filterable> </Filterable>
</div> </div>
</CollapsibleSection> </CollapsibleSection>
<CollapsibleSection headerText={'Service Host filter'}> <CollapsibleSection headerText={'Service Host filter'}>
<div class="filter-group hosts"> <div class="filter-group hosts">
<Filterable filterValues={hostFilter} <Filterable filterValues={hostFilter}
tabindex={tabindex}
histogram={results.instance_lists.host_list} context={'hosts'}> histogram={results.instance_lists.host_list} context={'hosts'}>
<h2 slot="h2">Hosts</h2> <h2 slot="title">Hosts</h2>
</Filterable> </Filterable>
</div> </div>
</CollapsibleSection> </CollapsibleSection>
@ -410,7 +422,7 @@
</CollapsibleSection> </CollapsibleSection>
<div class="tiles"> <div class="tiles">
{#each filteredTechnologies as technology} {#each filteredTechnologies as technology}
<Tile technology={technology} affiliate_colours={affiliate_colours} /> <TechnologyTile technology={technology} affiliate_colours={affiliate_colours} />
{/each} {/each}
</div> </div>
</div> </div>
@ -423,28 +435,36 @@
position: relative; position: relative;
} }
.introduction { .introduction {
width: 50%; width: 100%;
}
.summary-wrapper {
content: '';
display: block;
float: right;
padding: 0;
margin: 0;
} }
.summary { .summary {
border-radius: 15px; border-radius: 15px;
/*position: absolute; float: right;
right: 20px;*/ clear: both;
/*display: block;*/
background-color: #ccc; background-color: #ccc;
/*display: block;*/ /*display: block;*/
width: 50%; max-width: 30%;
min-width: 30em;
border: 2px #aaa solid; border: 2px #aaa solid;
margin: 0; margin: 0 15px 20px 6px;
padding: 0 20px; padding: 0 20px;
box-shadow: 6px 6px 20px #999;
}
.summary .label { color: #666; }
.summary .number { color: #000; }
@media screen and (max-width: 600px) {
.summary {
float: none;
width: 90%;
margin: auto;
} }
/* .filters { margin-bottom: 1em;}
.filters .tags {
margin: 1em 0;
display: block;
}*/
.tiles {
/*display: grid;
grid-gap: 15px;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));*/
/*grid-template-columns: repeat(auto-fit);*/
} }
</style> </style>