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
|
|
@ -55,6 +55,15 @@ and then run
|
|||
npm i dotenv
|
||||
npm i --save-dev @sveltejs/enhanced-img
|
||||
|
||||
### pnpm installs
|
||||
|
||||
pnpm add -g pnpm
|
||||
source /home/${USER}/.bashrc
|
||||
pnpm setup
|
||||
pnpm add -g pnpm
|
||||
pnpm i -D flowbite-svelte flowbite
|
||||
|
||||
|
||||
### To build a new image
|
||||
|
||||
docker-compose build
|
||||
|
|
|
|||
9612
package-lock.json
generated
9612
package-lock.json
generated
File diff suppressed because it is too large
Load diff
73
package.json
73
package.json
|
|
@ -1,39 +1,38 @@
|
|||
{
|
||||
"name": "webservices",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"test": "vitest",
|
||||
"lint": "prettier --check . && eslint .",
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@sveltejs/adapter-node": "^5.2.2",
|
||||
"@sveltejs/enhanced-img": "^0.3.4",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@types/eslint": "^9.6.0",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-svelte": "^2.36.0",
|
||||
"flowbite": "^2.5.1",
|
||||
"flowbite-svelte": "^0.46.18",
|
||||
"flowbite-svelte-icons": "^1.6.1",
|
||||
"globals": "^15.0.0",
|
||||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-svelte": "^3.1.2",
|
||||
"svelte": "^4.2.7",
|
||||
"vite": "^5.0.3",
|
||||
"vitest": "^2.0.0"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"dotenv": "^16.4.5",
|
||||
"sass": "^1.77.8",
|
||||
"svelte-preprocess": "^6.0.2"
|
||||
}
|
||||
"name": "webservices",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"test": "vitest",
|
||||
"lint": "prettier --check . && eslint .",
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/adapter-auto": "^3.0.0",
|
||||
"@sveltejs/adapter-node": "^5.2.2",
|
||||
"@sveltejs/enhanced-img": "^0.3.4",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@types/eslint": "^9.6.0",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"eslint": "^9.0.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-svelte": "^2.36.0",
|
||||
"globals": "^15.0.0",
|
||||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-svelte": "^3.1.2",
|
||||
"svelte": "^4.2.7",
|
||||
"vite": "^5.0.3",
|
||||
"vitest": "^2.0.0"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"dotenv": "^16.4.5",
|
||||
"sass": "^1.77.8",
|
||||
"svelte-preprocess": "^6.0.2",
|
||||
"yesvelte": "next"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
11
src/app.css
11
src/app.css
|
|
@ -10,7 +10,7 @@ body {
|
|||
min-height: 100%;
|
||||
padding: 1em;
|
||||
width: 100%;
|
||||
font-size: 1.2em;
|
||||
font-size: 1.3em;
|
||||
border: double 3px #ddd;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
|
|
@ -23,5 +23,10 @@ a {
|
|||
color: #4054ad;
|
||||
font-weight: bold;
|
||||
}
|
||||
a:hover { color: #1b2c44; }
|
||||
a:visited { color: #437fad; }
|
||||
a:hover {
|
||||
color: #000;
|
||||
text-decoration: underline;
|
||||
}
|
||||
a:visited {
|
||||
color: #437fad;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
export let context = 'none';
|
||||
export let filterValues;
|
||||
export let histogram; // an array with key = filter value, val = number of technologies
|
||||
export let colours = []; // an array of colour values with
|
||||
export const colours = []; // an array of colour values with
|
||||
//console.log('Filterable contextFilter: ', filterValues);
|
||||
let activeFiltersString = 'None';
|
||||
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
filterText = filterVerbage(isActive);
|
||||
}
|
||||
|
||||
console.log('histogram: ', histogram);
|
||||
//console.log('histogram: ', histogram);
|
||||
</script>
|
||||
|
||||
<slot name="title"><h2>Test Array</h2></slot>
|
||||
|
|
@ -139,14 +139,13 @@
|
|||
word-break: normal;
|
||||
margin: 1.5em 1em 2em 0;
|
||||
}
|
||||
.filter:hover {
|
||||
/* .filter:hover {
|
||||
box-shadow: 6px 6px 5px #aaa;
|
||||
border-color: #222;
|
||||
}
|
||||
.active {
|
||||
background-color: lightblue;
|
||||
/*border-color: blue;*/
|
||||
}
|
||||
} */
|
||||
|
||||
/* instance-specific styles */
|
||||
.filter {
|
||||
|
|
@ -160,8 +159,8 @@
|
|||
box-shadow: 3px 3px 3px #6a6d6a;
|
||||
color: #222;
|
||||
}
|
||||
.filter:hover { box-shadow: 4px 4px 3px #727372; color: #000; }
|
||||
.filter:hover.active { color: #fff;}
|
||||
.filter:hover { box-shadow: 6px 6px 5px #aaa; color: #000; }
|
||||
.filter:active { box-shadow: 0px 0px 3px #727372; color: #fff;}
|
||||
.filter.categories.active {
|
||||
background-color: #9aa34d;
|
||||
color: #eee;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@
|
|||
// a 'technology' object
|
||||
export let technology;
|
||||
export let affiliate_colours;
|
||||
import { Button, Modal, ModalBody, ModalFooter, Popover } from 'yesvelte';
|
||||
|
||||
let showModal = false;
|
||||
|
||||
const formatter = new Intl.ListFormat('en', {
|
||||
style: 'long',
|
||||
|
|
@ -33,15 +36,16 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="tile technology">
|
||||
<div on:click={() => (showModal = !showModal)} class="tile technology">
|
||||
<div class="links">
|
||||
<span class="website"><a href="{technology.website}" title="Project site for {technology.name}">P</a></span>
|
||||
{#if technology.repository}<span class="repository"><a
|
||||
href={technology.repository} title="The source code repository for {technology.name}">R</a></span>{/if}
|
||||
{#if technology.wikipedia}<span class="wikipedia"><a
|
||||
href={technology.wikipedia}
|
||||
title="Wikipedia Page for {technology.name}">W</a></span>{/if}
|
||||
</div>
|
||||
<h2><a href={technology.website}>{technology.name}</a></h2>
|
||||
<h2>{technology.name}</h2>
|
||||
<p class="description">{technology.description}{#if technology.extended_description}<span
|
||||
title={technology.extended_description}>i</span>{/if}
|
||||
</p>
|
||||
|
|
@ -66,6 +70,12 @@
|
|||
{/if}
|
||||
</div>
|
||||
|
||||
<Modal title="{technology.name}" bind:showModal>
|
||||
<ModalBody>
|
||||
Modal stuff...
|
||||
</ModalBody>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
.tile {
|
||||
display: inline-block;
|
||||
|
|
@ -76,7 +86,7 @@
|
|||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 5px 5px 3px #6a6d6a;
|
||||
border: solid 3px #516855;
|
||||
border: solid 3px #3a8ea5;
|
||||
border-radius: 15px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
|
@ -96,6 +106,10 @@
|
|||
.tile:hover {
|
||||
box-shadow: 10px 10px 6px #727372;
|
||||
}
|
||||
.tile:active {
|
||||
box-shadow: 0 0 0;
|
||||
border-color: #000;
|
||||
}
|
||||
.tile p.description {
|
||||
height: 200px;
|
||||
overflow: scroll;
|
||||
|
|
@ -156,15 +170,15 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
.circle {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
background-color: #555;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
.square {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
height: 26px;
|
||||
width: 26px;
|
||||
background-color: #555;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
//import adapter from '@sveltejs/adapter-auto';
|
||||
import adapter from '@sveltejs/adapter-node'; // ref https://medium.com/@loic.joachim/dockerize-sveltekit-with-node-adapter-62c5dc6fc15a
|
||||
|
||||
import sveltePreprocess from 'svelte-preprocess';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
|
|
|
|||
Loading…
Reference in a new issue