replaced flowbite-svelte with yesvelte UI library
This commit is contained in:
Dave Lane
parent
1ce925a95d
commit
6e191c16e6
9 changed files with 5094 additions and 4843 deletions
|
|
@ -1,7 +1,21 @@
|
|||
<script>
|
||||
import '../app.css';
|
||||
import tabler from 'yesvelte/css/tabler.min.css?url';
|
||||
import daisyui from 'yesvelte/css/daisyui.min.css?url';
|
||||
|
||||
// you can change theme of your project from here.
|
||||
let theme = 'tabler';
|
||||
// let theme = 'daisyui';
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{#if theme === 'tabler'}
|
||||
<link rel="stylesheet" href={tabler} />
|
||||
{:else}
|
||||
<link rel="stylesheet" href={daisyui} />
|
||||
{/if}
|
||||
</svelte:head>
|
||||
|
||||
<nav>
|
||||
<a href="/">Web Services</a>
|
||||
<a href="/about">About</a>
|
||||
|
|
@ -18,15 +32,15 @@
|
|||
|
||||
<style>
|
||||
/* global styles are in ../app.css */
|
||||
nav {
|
||||
margin: auto;
|
||||
}
|
||||
nav a {
|
||||
margin-right: 20px;
|
||||
nav { margin: auto; }
|
||||
nav a { margin-right: 20px; }
|
||||
nav a:hover {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
footer {
|
||||
display: inline-grid;
|
||||
margin: 4em, auto, 0, auto;
|
||||
margin: 4em auto 0 auto;
|
||||
grid-template-columns: 2fr 3fr 1fr;
|
||||
}
|
||||
footer div {
|
||||
|
|
|
|||
|
|
@ -8,9 +8,10 @@
|
|||
|
||||
// the filters
|
||||
import { setFilter, getFilter } from '$lib/components/filter.js';
|
||||
import { Accordions, Accordion, AccordionBody } from 'yesvelte';
|
||||
import Filterable from '$lib/components/Filterable.svelte';
|
||||
// collapsible sections
|
||||
import CollapsibleSection from '$lib/components/CollapsibleSection.svelte';
|
||||
//import CollapsibleSection from '$lib/components/CollapsibleSection.svelte';
|
||||
import TechnologyTile from '$lib/components/TechnologyTile.svelte';
|
||||
|
||||
let tabindex = 0; // a counter which facilitates keyboard navigation.
|
||||
|
|
@ -180,8 +181,8 @@
|
|||
let host_array = {};
|
||||
let i = 0;
|
||||
|
||||
console.log('hosts:', hosts);
|
||||
console.log('host_list:', host_list);
|
||||
//console.log('hosts:', hosts);
|
||||
//console.log('host_list:', host_list);
|
||||
|
||||
for (let index in host_list) {
|
||||
console.log(host_list[index]);
|
||||
|
|
@ -204,7 +205,7 @@
|
|||
let i = 0;
|
||||
|
||||
//console.log('affiliates:', affiliates);
|
||||
console.log('affiliate_list:', affiliate_list);
|
||||
//console.log('affiliate_list:', affiliate_list);
|
||||
|
||||
for (let index in affiliate_list) {
|
||||
//console.log('affiliate:', affiliate);
|
||||
|
|
@ -256,7 +257,7 @@
|
|||
let arr = tech[field]
|
||||
const intersection = inCommon(arr, list);
|
||||
if (intersection && intersection.constructor === Array) {
|
||||
console.log('intersection length: ', intersection.length);
|
||||
//console.log('intersection length: ', intersection.length);
|
||||
if (intersection.length > 0) {
|
||||
included.push(tech);
|
||||
}
|
||||
|
|
@ -275,7 +276,7 @@
|
|||
let arr = [tech[field]];
|
||||
const intersection = inCommon(arr, list);
|
||||
if (intersection && intersection.constructor === Array) {
|
||||
console.log('intersection length: ', intersection.length);
|
||||
//console.log('intersection length: ', intersection.length);
|
||||
if (intersection.length > 0) {
|
||||
included.push(tech);
|
||||
}
|
||||
|
|
@ -318,14 +319,14 @@
|
|||
$hostFilter = getSortedFilter(results.instance_lists.host_list);
|
||||
|
||||
const hosts = results.hosts;
|
||||
console.log('host_data: ', results.hosts);
|
||||
//console.log('host_data: ', results.hosts);
|
||||
const affiliates = results.affiliates;
|
||||
console.log('affiliate_data: ', 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);
|
||||
|
||||
let filteredTechnologies;
|
||||
let technologies;
|
||||
|
|
@ -379,63 +380,79 @@
|
|||
<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'}>
|
||||
<div class="filters">
|
||||
<CollapsibleSection headerText={'Software Catergory Filter'}>
|
||||
<div class="filter-group categories">
|
||||
<Filterable filterValues={categoryFilter}
|
||||
histogram={results.tech_lists.category_list} context={'categories'}>
|
||||
<h2 slot="title">Categories</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
<CollapsibleSection headerText={'Software Analogue Filter'}>
|
||||
<div class="filter-group analogues">
|
||||
<Filterable filterValues={analogueFilter}
|
||||
tabindex={tabindex}
|
||||
histogram={results.tech_lists.analogue_list} context={'analogues'}>
|
||||
<h2 slot="title">Analogues</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
<CollapsibleSection headerText={'License Filter'}>
|
||||
<div class="filter-group licenses">
|
||||
<Filterable filterValues={licenseFilter}
|
||||
tabindex={tabindex}
|
||||
histogram={results.tech_lists.license_list} context={'licenses'}>
|
||||
<h2 slot="title">Open Source & Copyleft Licenses</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
<CollapsibleSection headerText={'Service Status Filter'}>
|
||||
<div class="filter-group statuses">
|
||||
<Filterable filterValues={statusFilter}
|
||||
tabindex={tabindex}
|
||||
histogram={results.instance_lists.status_list} context={'statuses'}>
|
||||
<h2 slot="title">Statuses</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
<CollapsibleSection headerText={'Service Affiliates Filter'}>
|
||||
<div class="filter-group affilates">
|
||||
<Filterable filterValues={affiliateFilter}
|
||||
tabindex={tabindex}
|
||||
histogram={results.instance_lists.affiliate_list}
|
||||
context={'affiliates'}><h2 slot="title">Affiliates</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
<CollapsibleSection headerText={'Service Host filter'}>
|
||||
<div class="filter-group hosts">
|
||||
<Filterable filterValues={hostFilter}
|
||||
tabindex={tabindex}
|
||||
histogram={results.instance_lists.host_list} context={'hosts'}>
|
||||
<h2 slot="title">Hosts</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
</div>
|
||||
</CollapsibleSection>
|
||||
<Accordions>
|
||||
<Accordion title="Filters">
|
||||
<AccordionBody>
|
||||
<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>
|
||||
</Filterable>
|
||||
</div>
|
||||
</AccordionBody>
|
||||
</Accordion>
|
||||
<Accordion title="Software Analogue Filter">
|
||||
<AccordionBody>
|
||||
<div class="filter-group analogues">
|
||||
<Filterable filterValues={analogueFilter}
|
||||
tabindex={tabindex}
|
||||
histogram={results.tech_lists.analogue_list} context={'analogues'}>
|
||||
<h2 slot="title">Analogues</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</AccordionBody>
|
||||
</Accordion>
|
||||
<Accordion title="License Filter">
|
||||
<AccordionBody>
|
||||
<div class="filter-group licenses">
|
||||
<Filterable filterValues={licenseFilter}
|
||||
tabindex={tabindex}
|
||||
histogram={results.tech_lists.license_list} context={'licenses'}>
|
||||
<h2 slot="title">Open Source & Copyleft Licenses</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</AccordionBody>
|
||||
</Accordion>
|
||||
<Accordion title="Service Status Filter">
|
||||
<AccordionBody>
|
||||
<div class="filter-group statuses">
|
||||
<Filterable filterValues={statusFilter}
|
||||
tabindex={tabindex}
|
||||
histogram={results.instance_lists.status_list} context={'statuses'}>
|
||||
<h2 slot="title">Statuses</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</AccordionBody>
|
||||
</Accordion>
|
||||
<Accordion title="Service Affiliates Filter">
|
||||
<AccordionBody>
|
||||
<div class="filter-group affilates">
|
||||
<Filterable filterValues={affiliateFilter}
|
||||
tabindex={tabindex}
|
||||
histogram={results.instance_lists.affiliate_list}
|
||||
context={'affiliates'}><h2 slot="title">Affiliates</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</AccordionBody>
|
||||
</Accordion>
|
||||
<Accordion title="Service Host Filter">
|
||||
<AccordionBody>
|
||||
<div class="filter-group hosts">
|
||||
<Filterable filterValues={hostFilter}
|
||||
tabindex={tabindex}
|
||||
histogram={results.instance_lists.host_list} context={'hosts'}>
|
||||
<h2 slot="title">Hosts</h2>
|
||||
</Filterable>
|
||||
</div>
|
||||
</AccordionBody>
|
||||
</Accordion>
|
||||
</Accordions>
|
||||
</AccordionBody>
|
||||
</Accordion>
|
||||
</Accordions>
|
||||
<div class="tiles">
|
||||
{#each filteredTechnologies as technology}
|
||||
<TechnologyTile technology={technology} affiliate_colours={affiliate_colours} />
|
||||
|
|
@ -476,6 +493,19 @@
|
|||
}
|
||||
.summary .label { color: #666; }
|
||||
.summary .number { color: #000; }
|
||||
/* .accordion-item {
|
||||
width: 30em;
|
||||
display: flex;
|
||||
text-align: left;
|
||||
}
|
||||
.accordion-item h2 {
|
||||
display: inline;
|
||||
}
|
||||
.accordion-item svg {
|
||||
width: 12px;
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}*/
|
||||
@media screen and (max-width: 600px) {
|
||||
.summary {
|
||||
float: none;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue