Rewrite page in Svelte 5 #49
11 changed files with 556 additions and 526 deletions
|
|
@ -7,9 +7,9 @@
|
|||
%sveltekit.head%
|
||||
</head>
|
||||
<body
|
||||
data-sveltekit-preload-data="hover"
|
||||
style="background-image: url('/assets/background.avif')"
|
||||
class="overflow-hidden h-screen"
|
||||
data-sveltekit-preload-data="hover"
|
||||
style="background-image: url('/assets/background.avif')"
|
||||
class="h-screen overflow-hidden"
|
||||
>
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
|
|
|
|||
196
src/app.pcss
196
src/app.pcss
|
|
@ -1,115 +1,115 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 72.2% 50.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--ring: hsl(212.7,26.8%,83.9);
|
||||
}
|
||||
:root {
|
||||
--background: 0 0% 100%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
|
||||
.nordlys {
|
||||
--background: 0 0% 0%; /* #000000 */
|
||||
--foreground: 173 80% 40%; /* #14b8a6 */
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--muted: 183 100% 96%; /* #ecfeff */
|
||||
--muted-foreground: 176 61% 19%; /* #134e4a */
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--popover: 0 0% 0%; /* #000000 */
|
||||
--popover-foreground: 173 80% 40%; /* #14b8a6 */
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--card: 0 0% 0%; /* #000000 */
|
||||
--card-foreground: 173 80% 40%; /* #14b8a6 */
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
|
||||
--border: 183 100% 96%; /* #ecfeff */
|
||||
--input: 183 100% 96%; /* #ecfeff */
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--primary: 173 80% 40%; /* #14b8a6 */
|
||||
--primary-foreground: 221 39% 11%; /* #111827 */
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 183 100% 96%; /* #ecfeff */
|
||||
--secondary-foreground: 173 80% 40%; /* #14b8a6 */
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--accent: 183 100% 96%; /* #ecfeff */
|
||||
--accent-foreground: 173 80% 40%; /* #14b8a6 */
|
||||
--destructive: 0 72.2% 50.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 70% 35%; /* #991b1b */
|
||||
--destructive-foreground: 173 80% 40%; /* #14b8a6 */
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
--offline: var(--destructive);
|
||||
--online: 142 76% 36%; /* #16a34a */
|
||||
--pending: 25 95% 53%; /* #f97316 */
|
||||
--maintenance: 224 76% 48%; /* #1d4ed8 */
|
||||
--radius: 0.5rem;
|
||||
}
|
||||
|
||||
/* that border thingy when you tab through stuff */
|
||||
--ring: hsl(168 84% 78%); /* #99f6e4 */
|
||||
}
|
||||
.dark {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 98%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 98%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 98%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
|
||||
--primary: 210 40% 98%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 98%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--ring: hsl(212.7, 26.8%, 83.9);
|
||||
}
|
||||
|
||||
.nordlys {
|
||||
--background: 0 0% 0%; /* #000000 */
|
||||
--foreground: 173 80% 40%; /* #14b8a6 */
|
||||
|
||||
--muted: 183 100% 96%; /* #ecfeff */
|
||||
--muted-foreground: 176 61% 19%; /* #134e4a */
|
||||
|
||||
--popover: 0 0% 0%; /* #000000 */
|
||||
--popover-foreground: 173 80% 40%; /* #14b8a6 */
|
||||
|
||||
--card: 0 0% 0%; /* #000000 */
|
||||
--card-foreground: 173 80% 40%; /* #14b8a6 */
|
||||
|
||||
--border: 183 100% 96%; /* #ecfeff */
|
||||
--input: 183 100% 96%; /* #ecfeff */
|
||||
|
||||
--primary: 173 80% 40%; /* #14b8a6 */
|
||||
--primary-foreground: 221 39% 11%; /* #111827 */
|
||||
|
||||
--secondary: 183 100% 96%; /* #ecfeff */
|
||||
--secondary-foreground: 173 80% 40%; /* #14b8a6 */
|
||||
|
||||
--accent: 183 100% 96%; /* #ecfeff */
|
||||
--accent-foreground: 173 80% 40%; /* #14b8a6 */
|
||||
|
||||
--destructive: 0 70% 35%; /* #991b1b */
|
||||
--destructive-foreground: 173 80% 40%; /* #14b8a6 */
|
||||
|
||||
--offline: var(--destructive);
|
||||
--online: 142 76% 36%; /* #16a34a */
|
||||
--pending: 25 95% 53%; /* #f97316 */
|
||||
--maintenance: 224 76% 48%; /* #1d4ed8 */
|
||||
|
||||
/* that border thingy when you tab through stuff */
|
||||
--ring: hsl(168 84% 78%); /* #99f6e4 */
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,66 +1,100 @@
|
|||
<svelte:options runes={true} />
|
||||
|
||||
<script lang="ts">
|
||||
import {OpenInNewWindow} from "radix-icons-svelte";
|
||||
import {quintInOut} from "svelte/easing";
|
||||
import { slide } from "svelte/transition";
|
||||
import { OpenInNewWindow } from 'radix-icons-svelte';
|
||||
import { quintInOut } from 'svelte/easing';
|
||||
import { slide } from 'svelte/transition';
|
||||
|
||||
let {service} = $props();
|
||||
let { service } = $props();
|
||||
|
||||
let hover = $state({
|
||||
title: false,
|
||||
link: false,
|
||||
ext: false
|
||||
})
|
||||
let hover = $state({
|
||||
title: false,
|
||||
link: false,
|
||||
ext: false
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col border-t-4 rounded-xl bg-black/55 border-maintenance p-4 gap-y-2 w-[30rem] h-48">
|
||||
<div class="flex flex-row justify-between pb-4">
|
||||
<div class="flex flex-row gap-1 items-center" on:mouseover={() => hover.title = true} on:mouseleave={() => hover.title = false}>
|
||||
{#if service.icon}
|
||||
<img width="24px" class="h-6 w-6 cursor-pointer" src={service.icon} alt="{service.name} Logo">
|
||||
{:else}
|
||||
{/if}
|
||||
<a href={service.href} class="text-accent font-bold {hover.title ? 'text-primary': 'text-secondary'}">{service.name}</a>
|
||||
{#if hover.title}
|
||||
<div transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }} class="grid items-center">
|
||||
<OpenInNewWindow color={ hover.title ? "hsl(var(--primary))" : "hsl(var(--secondary)"} class="self-center"/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
class="flex h-48 w-[30rem] flex-col gap-y-2 rounded-xl border-t-4 border-maintenance bg-black/55 p-4"
|
||||
>
|
||||
<div class="flex flex-row justify-between pb-4">
|
||||
<div
|
||||
class="flex flex-row items-center gap-1"
|
||||
on:mouseover={() => (hover.title = true)}
|
||||
on:mouseleave={() => (hover.title = false)}
|
||||
>
|
||||
{#if service.icon}
|
||||
<img
|
||||
width="24px"
|
||||
class="h-6 w-6 cursor-pointer"
|
||||
src={service.icon}
|
||||
alt="{service.name} Logo"
|
||||
/>
|
||||
{:else}{/if}
|
||||
<a
|
||||
href={service.href}
|
||||
class="font-bold text-accent {hover.title ? 'text-primary' : 'text-secondary'}"
|
||||
>{service.name}</a
|
||||
>
|
||||
{#if hover.title}
|
||||
<div
|
||||
transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
|
||||
class="grid items-center"
|
||||
>
|
||||
<OpenInNewWindow
|
||||
color={hover.title ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
|
||||
class="self-center"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<h1 class="border-b-2 rounded-md text-sm text-center w-16 text-maintenance border-maintenance">Loading</h1>
|
||||
</div>
|
||||
<p class="text-sm text-center text-accent text-wrap">{service.desc}</p>
|
||||
<p class="text-sm text-center font-bold text-destructive">{service.warn}</p>
|
||||
<div class="grid {service.extLink ? 'grid-cols-2' : 'grid-cols-1'} justify-items-center mt-auto">
|
||||
<a
|
||||
class="flex flex-row text-sm border-x-2 rounded-md px-2 text-accent hover:border-primary hover:text-primary"
|
||||
href={service.href}
|
||||
on:mouseover={() => hover.link = true}
|
||||
on:mouseleave={() => hover.link = false}
|
||||
>
|
||||
Open
|
||||
{#if hover.link}
|
||||
<div transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }} class="pl-1 pr-0 grid items-center">
|
||||
<OpenInNewWindow color={ hover.link ? "hsl(var(--primary))" : "hsl(var(--secondary)"} class="self-center"/>
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
{#if service.extLink}
|
||||
<a
|
||||
class="flex flex-row text-sm border-x-2 rounded-md px-2 text-accent hover:border-primary hover:text-primary"
|
||||
href={service.extLink}
|
||||
on:mouseover={() => hover.ext = true}
|
||||
on:mouseleave={() => hover.ext = false}
|
||||
>
|
||||
Official Site
|
||||
{#if hover.ext}
|
||||
<div transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }} class="pl-1 pr-0 grid items-center">
|
||||
<OpenInNewWindow color={ hover.ext ? "hsl(var(--primary))" : "hsl(var(--secondary)"} class="self-center"/>
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="w-16 rounded-md border-b-2 border-maintenance text-center text-sm text-maintenance">
|
||||
Loading
|
||||
</h1>
|
||||
</div>
|
||||
<p class="text-wrap text-center text-sm text-accent">{service.desc}</p>
|
||||
<p class="text-center text-sm font-bold text-destructive">{service.warn}</p>
|
||||
<div class="grid {service.extLink ? 'grid-cols-2' : 'grid-cols-1'} mt-auto justify-items-center">
|
||||
<a
|
||||
class="flex flex-row rounded-md border-x-2 px-2 text-sm text-accent hover:border-primary hover:text-primary"
|
||||
href={service.href}
|
||||
on:mouseover={() => (hover.link = true)}
|
||||
on:mouseleave={() => (hover.link = false)}
|
||||
>
|
||||
Open
|
||||
{#if hover.link}
|
||||
<div
|
||||
transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
|
||||
class="grid items-center pl-1 pr-0"
|
||||
>
|
||||
<OpenInNewWindow
|
||||
color={hover.link ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
|
||||
class="self-center"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
{#if service.extLink}
|
||||
<a
|
||||
class="flex flex-row rounded-md border-x-2 px-2 text-sm text-accent hover:border-primary hover:text-primary"
|
||||
href={service.extLink}
|
||||
on:mouseover={() => (hover.ext = true)}
|
||||
on:mouseleave={() => (hover.ext = false)}
|
||||
>
|
||||
Official Site
|
||||
{#if hover.ext}
|
||||
<div
|
||||
transition:slide={{ delay: 100, duration: 200, easing: quintInOut, axis: 'x' }}
|
||||
class="grid items-center pl-1 pr-0"
|
||||
>
|
||||
<OpenInNewWindow
|
||||
color={hover.ext ? 'hsl(var(--primary))' : 'hsl(var(--secondary)'}
|
||||
class="self-center"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,155 +1,155 @@
|
|||
{
|
||||
"services": [
|
||||
{
|
||||
"name": "Nextcloud",
|
||||
"icon": "/assets/icons/nextcloud-logo.svg",
|
||||
"href": "https://nextcloud.neshweb.net/",
|
||||
"desc": "Self-hosted Cloud Storage Service",
|
||||
"warn": "Note: Registration requires approval",
|
||||
"extLink": "https://nextcloud.com/",
|
||||
"id": 7
|
||||
},
|
||||
{
|
||||
"name": "Kavita",
|
||||
"icon": "/assets/icons/kavita-logo.svg",
|
||||
"href": "https://kavita.neshweb.net",
|
||||
"desc": "Self-hosted Manga Library",
|
||||
"warn": "Registration via Admin invite",
|
||||
"id": 5
|
||||
},
|
||||
{
|
||||
"name": "Images",
|
||||
"icon": "/assets/icons/images-logo.svg",
|
||||
"href": "https://imgs.neshweb.net/",
|
||||
"desc": "Self-hosted Chevereto Image Service",
|
||||
"warn": "",
|
||||
"extLink": "https://chevereto.com/",
|
||||
"id": 4
|
||||
},
|
||||
{
|
||||
"name": "Calibre Web",
|
||||
"icon": "/assets/icons/calibre-logo.avif",
|
||||
"href": "https://calibre.neshweb.net/",
|
||||
"desc": "Self-hosted Ebook Library Service",
|
||||
"warn": "Note: Registration only via Admin",
|
||||
"id": 6
|
||||
},
|
||||
{
|
||||
"name": "PeerTube",
|
||||
"icon": "/assets/icons/peertube-logo.svg",
|
||||
"href": "https://tube.neshweb.net/",
|
||||
"desc": "Self-hosted PeerTube Instance",
|
||||
"warn": "Note: Registration only via Admin",
|
||||
"id": 8
|
||||
},
|
||||
{
|
||||
"name": "Mastodon",
|
||||
"icon": "/assets/icons/mastodon-logo.svg",
|
||||
"href": "https://mastodon.neshweb.net/",
|
||||
"desc": "Self-hosted Mastodon Instance",
|
||||
"warn": "Note: Registration requires approval",
|
||||
"id": 3
|
||||
},
|
||||
"services": [
|
||||
{
|
||||
"name": "Nextcloud",
|
||||
"icon": "/assets/icons/nextcloud-logo.svg",
|
||||
"href": "https://nextcloud.neshweb.net/",
|
||||
"desc": "Self-hosted Cloud Storage Service",
|
||||
"warn": "Note: Registration requires approval",
|
||||
"extLink": "https://nextcloud.com/",
|
||||
"id": 7
|
||||
},
|
||||
{
|
||||
"name": "Kavita",
|
||||
"icon": "/assets/icons/kavita-logo.svg",
|
||||
"href": "https://kavita.neshweb.net",
|
||||
"desc": "Self-hosted Manga Library",
|
||||
"warn": "Registration via Admin invite",
|
||||
"id": 5
|
||||
},
|
||||
{
|
||||
"name": "Images",
|
||||
"icon": "/assets/icons/images-logo.svg",
|
||||
"href": "https://imgs.neshweb.net/",
|
||||
"desc": "Self-hosted Chevereto Image Service",
|
||||
"warn": "",
|
||||
"extLink": "https://chevereto.com/",
|
||||
"id": 4
|
||||
},
|
||||
{
|
||||
"name": "Calibre Web",
|
||||
"icon": "/assets/icons/calibre-logo.avif",
|
||||
"href": "https://calibre.neshweb.net/",
|
||||
"desc": "Self-hosted Ebook Library Service",
|
||||
"warn": "Note: Registration only via Admin",
|
||||
"id": 6
|
||||
},
|
||||
{
|
||||
"name": "PeerTube",
|
||||
"icon": "/assets/icons/peertube-logo.svg",
|
||||
"href": "https://tube.neshweb.net/",
|
||||
"desc": "Self-hosted PeerTube Instance",
|
||||
"warn": "Note: Registration only via Admin",
|
||||
"id": 8
|
||||
},
|
||||
{
|
||||
"name": "Mastodon",
|
||||
"icon": "/assets/icons/mastodon-logo.svg",
|
||||
"href": "https://mastodon.neshweb.net/",
|
||||
"desc": "Self-hosted Mastodon Instance",
|
||||
"warn": "Note: Registration requires approval",
|
||||
"id": 3
|
||||
},
|
||||
|
||||
{
|
||||
"name": "Vaultwarden",
|
||||
"icon": "/assets/icons/vaultwarden-logo.svg",
|
||||
"href": "https://vault.neshweb.net",
|
||||
"desc": "Self-hosted Password Manager",
|
||||
"warn": "Note: Invite only",
|
||||
"id": 9
|
||||
},
|
||||
{
|
||||
"name": "Jellyfin",
|
||||
"icon": "/assets/icons/jellyfin-logo.svg",
|
||||
"href": "https://jellyfin.neshweb.net/",
|
||||
"desc": "Open-Source, Self-Hosted Media Platform",
|
||||
"warn": "Note: Registration only via Admin",
|
||||
"id": 37
|
||||
},
|
||||
{
|
||||
"name": "Navidrome",
|
||||
"icon": "/assets/icons/navidrome-logo.avif",
|
||||
"href": "https://navidrome.neshweb.net/",
|
||||
"desc": "Open-Source, Self-Hosted Music Streaming Platform",
|
||||
"warn": "Note: Registration only via Admin",
|
||||
"id": 10
|
||||
},
|
||||
{
|
||||
"name": "Gitlab",
|
||||
"icon": "/assets/icons/gitlab-logo.svg",
|
||||
"href": "https://gitlab.neshweb.net/",
|
||||
"desc": "Self-hosted Git Service",
|
||||
"warn": "Note: Registration only via Admin",
|
||||
"id": 2
|
||||
},
|
||||
{
|
||||
"name": "Forgejo",
|
||||
"icon": "/assets/icons/forgejo-logo.svg",
|
||||
"href": "https://forgejo.neshweb.net/",
|
||||
"desc": "Self-hosted Git Service",
|
||||
"warn": "Note: Registration only via Admin",
|
||||
"id": 36
|
||||
},
|
||||
{
|
||||
"name": "Portainer",
|
||||
"icon": "/assets/icons/portainer-logo.avif",
|
||||
"href": "https://portainer.neshweb.net/",
|
||||
"desc": "Docker Container Manager",
|
||||
"warn": "Note: Admin Only",
|
||||
"id": 34
|
||||
},
|
||||
{
|
||||
"name": "Nginx",
|
||||
"icon": "/assets/icons/npm-logo.avif",
|
||||
"href": "https://nginx.neshweb.net/",
|
||||
"desc": "Web-based Nginx Proxy Manager",
|
||||
"warn": "Note: Admin Only",
|
||||
"id": 31
|
||||
},
|
||||
{
|
||||
"name": "Proxmox",
|
||||
"icon": "/assets/icons/proxmox-logo.avif",
|
||||
"href": "https://proxmox.neshweb.net/",
|
||||
"desc": "Hypervisor Webinterface",
|
||||
"warn": "Note: Admin Only",
|
||||
"id": 33
|
||||
},
|
||||
{
|
||||
"name": "Dockge",
|
||||
"icon": "/assets/icons/dockge-logo.avif",
|
||||
"href": "https://dockge.neshweb.net/",
|
||||
"desc": "Docker Compose WebUI",
|
||||
"warn": "Note: Admin Only",
|
||||
"id": 35
|
||||
}
|
||||
],
|
||||
"games": {
|
||||
"minecraft": {
|
||||
"name": "Minecraft",
|
||||
"icon": "/assets/icons/minecraft-logo.avif",
|
||||
"href": "https://minecraft.neshweb.net/",
|
||||
"desc": "View all currently available Minecraft Servers and their mods"
|
||||
},
|
||||
"ready_or_not": {
|
||||
"name": "Ready or Not",
|
||||
"icon": "/assets/icons/ron-logo.avif",
|
||||
"href": "https://readyornot.neshweb.net/",
|
||||
"desc": "Collection of Floor Plans for the Game 'Ready or Not'"
|
||||
},
|
||||
"zomboid": {
|
||||
"name": "Zomboid",
|
||||
"icon": "/assets/icons/zomboid-logo.avif",
|
||||
"ip": "91.13.248.30",
|
||||
"status": "Online"
|
||||
},
|
||||
"factorio": {
|
||||
"name": "Factorio",
|
||||
"status": "Online"
|
||||
},
|
||||
"space_engineers": {
|
||||
"name": "Space Engineers",
|
||||
"status": "Online"
|
||||
}
|
||||
}
|
||||
{
|
||||
"name": "Vaultwarden",
|
||||
"icon": "/assets/icons/vaultwarden-logo.svg",
|
||||
"href": "https://vault.neshweb.net",
|
||||
"desc": "Self-hosted Password Manager",
|
||||
"warn": "Note: Invite only",
|
||||
"id": 9
|
||||
},
|
||||
{
|
||||
"name": "Jellyfin",
|
||||
"icon": "/assets/icons/jellyfin-logo.svg",
|
||||
"href": "https://jellyfin.neshweb.net/",
|
||||
"desc": "Open-Source, Self-Hosted Media Platform",
|
||||
"warn": "Note: Registration only via Admin",
|
||||
"id": 37
|
||||
},
|
||||
{
|
||||
"name": "Navidrome",
|
||||
"icon": "/assets/icons/navidrome-logo.avif",
|
||||
"href": "https://navidrome.neshweb.net/",
|
||||
"desc": "Open-Source, Self-Hosted Music Streaming Platform",
|
||||
"warn": "Note: Registration only via Admin",
|
||||
"id": 10
|
||||
},
|
||||
{
|
||||
"name": "Gitlab",
|
||||
"icon": "/assets/icons/gitlab-logo.svg",
|
||||
"href": "https://gitlab.neshweb.net/",
|
||||
"desc": "Self-hosted Git Service",
|
||||
"warn": "Note: Registration only via Admin",
|
||||
"id": 2
|
||||
},
|
||||
{
|
||||
"name": "Forgejo",
|
||||
"icon": "/assets/icons/forgejo-logo.svg",
|
||||
"href": "https://forgejo.neshweb.net/",
|
||||
"desc": "Self-hosted Git Service",
|
||||
"warn": "Note: Registration only via Admin",
|
||||
"id": 36
|
||||
},
|
||||
{
|
||||
"name": "Portainer",
|
||||
"icon": "/assets/icons/portainer-logo.avif",
|
||||
"href": "https://portainer.neshweb.net/",
|
||||
"desc": "Docker Container Manager",
|
||||
"warn": "Note: Admin Only",
|
||||
"id": 34
|
||||
},
|
||||
{
|
||||
"name": "Nginx",
|
||||
"icon": "/assets/icons/npm-logo.avif",
|
||||
"href": "https://nginx.neshweb.net/",
|
||||
"desc": "Web-based Nginx Proxy Manager",
|
||||
"warn": "Note: Admin Only",
|
||||
"id": 31
|
||||
},
|
||||
{
|
||||
"name": "Proxmox",
|
||||
"icon": "/assets/icons/proxmox-logo.avif",
|
||||
"href": "https://proxmox.neshweb.net/",
|
||||
"desc": "Hypervisor Webinterface",
|
||||
"warn": "Note: Admin Only",
|
||||
"id": 33
|
||||
},
|
||||
{
|
||||
"name": "Dockge",
|
||||
"icon": "/assets/icons/dockge-logo.avif",
|
||||
"href": "https://dockge.neshweb.net/",
|
||||
"desc": "Docker Compose WebUI",
|
||||
"warn": "Note: Admin Only",
|
||||
"id": 35
|
||||
}
|
||||
],
|
||||
"games": {
|
||||
"minecraft": {
|
||||
"name": "Minecraft",
|
||||
"icon": "/assets/icons/minecraft-logo.avif",
|
||||
"href": "https://minecraft.neshweb.net/",
|
||||
"desc": "View all currently available Minecraft Servers and their mods"
|
||||
},
|
||||
"ready_or_not": {
|
||||
"name": "Ready or Not",
|
||||
"icon": "/assets/icons/ron-logo.avif",
|
||||
"href": "https://readyornot.neshweb.net/",
|
||||
"desc": "Collection of Floor Plans for the Game 'Ready or Not'"
|
||||
},
|
||||
"zomboid": {
|
||||
"name": "Zomboid",
|
||||
"icon": "/assets/icons/zomboid-logo.avif",
|
||||
"ip": "91.13.248.30",
|
||||
"status": "Online"
|
||||
},
|
||||
"factorio": {
|
||||
"name": "Factorio",
|
||||
"status": "Online"
|
||||
},
|
||||
"space_engineers": {
|
||||
"name": "Space Engineers",
|
||||
"status": "Online"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,15 @@
|
|||
<script lang="ts">
|
||||
import { Button as ButtonPrimitive } from "bits-ui";
|
||||
import { cn } from "$lib/utils";
|
||||
import { buttonVariants, type Props, type Events } from ".";
|
||||
import { Button as ButtonPrimitive } from 'bits-ui';
|
||||
import { cn } from '$lib/utils';
|
||||
import { buttonVariants, type Props, type Events } from '.';
|
||||
|
||||
type $$Props = Props;
|
||||
type $$Events = Events;
|
||||
|
||||
let className: $$Props["class"] = undefined;
|
||||
export let variant: $$Props["variant"] = "default";
|
||||
export let size: $$Props["size"] = "default";
|
||||
export let builders: $$Props["builders"] = [];
|
||||
let className: $$Props['class'] = undefined;
|
||||
export let variant: $$Props['variant'] = 'default';
|
||||
export let size: $$Props['size'] = 'default';
|
||||
export let builders: $$Props['builders'] = [];
|
||||
export { className as class };
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,37 +1,34 @@
|
|||
import type { Button as ButtonPrimitive } from "bits-ui";
|
||||
import { tv, type VariantProps } from "tailwind-variants";
|
||||
import Root from "./button.svelte";
|
||||
import type { Button as ButtonPrimitive } from 'bits-ui';
|
||||
import { tv, type VariantProps } from 'tailwind-variants';
|
||||
import Root from './button.svelte';
|
||||
|
||||
const buttonVariants = tv({
|
||||
base: "inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
|
||||
base: 'inline-flex items-center justify-center rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
"bg-primary text-primary-foreground shadow hover:bg-primary/90",
|
||||
destructive:
|
||||
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
|
||||
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
||||
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
||||
outline:
|
||||
"border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
|
||||
secondary:
|
||||
"bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
|
||||
ghost: "hover:bg-accent hover:text-accent-foreground",
|
||||
link: "text-primary underline-offset-4 hover:underline"
|
||||
'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground',
|
||||
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||
link: 'text-primary underline-offset-4 hover:underline'
|
||||
},
|
||||
size: {
|
||||
default: "h-9 px-4 py-2",
|
||||
sm: "h-8 rounded-md px-3 text-xs",
|
||||
lg: "h-10 rounded-md px-8",
|
||||
icon: "h-9 w-9"
|
||||
default: 'h-9 px-4 py-2',
|
||||
sm: 'h-8 rounded-md px-3 text-xs',
|
||||
lg: 'h-10 rounded-md px-8',
|
||||
icon: 'h-9 w-9'
|
||||
}
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default"
|
||||
variant: 'default',
|
||||
size: 'default'
|
||||
}
|
||||
});
|
||||
|
||||
type Variant = VariantProps<typeof buttonVariants>["variant"];
|
||||
type Size = VariantProps<typeof buttonVariants>["size"];
|
||||
type Variant = VariantProps<typeof buttonVariants>['variant'];
|
||||
type Size = VariantProps<typeof buttonVariants>['size'];
|
||||
|
||||
type Props = ButtonPrimitive.Props & {
|
||||
variant?: Variant;
|
||||
|
|
|
|||
|
|
@ -1,62 +1,56 @@
|
|||
import { type ClassValue, clsx } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
import { cubicOut } from "svelte/easing";
|
||||
import type { TransitionConfig } from "svelte/transition";
|
||||
import { type ClassValue, clsx } from 'clsx';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import { cubicOut } from 'svelte/easing';
|
||||
import type { TransitionConfig } from 'svelte/transition';
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
|
||||
type FlyAndScaleParams = {
|
||||
y?: number;
|
||||
x?: number;
|
||||
start?: number;
|
||||
duration?: number;
|
||||
y?: number;
|
||||
x?: number;
|
||||
start?: number;
|
||||
duration?: number;
|
||||
};
|
||||
|
||||
export const flyAndScale = (
|
||||
node: Element,
|
||||
params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
|
||||
node: Element,
|
||||
params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 150 }
|
||||
): TransitionConfig => {
|
||||
const style = getComputedStyle(node);
|
||||
const transform = style.transform === "none" ? "" : style.transform;
|
||||
const style = getComputedStyle(node);
|
||||
const transform = style.transform === 'none' ? '' : style.transform;
|
||||
|
||||
const scaleConversion = (
|
||||
valueA: number,
|
||||
scaleA: [number, number],
|
||||
scaleB: [number, number]
|
||||
) => {
|
||||
const [minA, maxA] = scaleA;
|
||||
const [minB, maxB] = scaleB;
|
||||
const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
|
||||
const [minA, maxA] = scaleA;
|
||||
const [minB, maxB] = scaleB;
|
||||
|
||||
const percentage = (valueA - minA) / (maxA - minA);
|
||||
const valueB = percentage * (maxB - minB) + minB;
|
||||
const percentage = (valueA - minA) / (maxA - minA);
|
||||
const valueB = percentage * (maxB - minB) + minB;
|
||||
|
||||
return valueB;
|
||||
};
|
||||
return valueB;
|
||||
};
|
||||
|
||||
const styleToString = (
|
||||
style: Record<string, number | string | undefined>
|
||||
): string => {
|
||||
return Object.keys(style).reduce((str, key) => {
|
||||
if (style[key] === undefined) return str;
|
||||
return str + `${key}:${style[key]};`;
|
||||
}, "");
|
||||
};
|
||||
const styleToString = (style: Record<string, number | string | undefined>): string => {
|
||||
return Object.keys(style).reduce((str, key) => {
|
||||
if (style[key] === undefined) return str;
|
||||
return str + `${key}:${style[key]};`;
|
||||
}, '');
|
||||
};
|
||||
|
||||
return {
|
||||
duration: params.duration ?? 200,
|
||||
delay: 0,
|
||||
css: (t) => {
|
||||
const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
|
||||
const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
|
||||
const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
|
||||
return {
|
||||
duration: params.duration ?? 200,
|
||||
delay: 0,
|
||||
css: (t) => {
|
||||
const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
|
||||
const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
|
||||
const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
|
||||
|
||||
return styleToString({
|
||||
transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
|
||||
opacity: t
|
||||
});
|
||||
},
|
||||
easing: cubicOut
|
||||
};
|
||||
};
|
||||
return styleToString({
|
||||
transform: `${transform} translate3d(${x}px, ${y}px, 0) scale(${scale})`,
|
||||
opacity: t
|
||||
});
|
||||
},
|
||||
easing: cubicOut
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import '../app.pcss';
|
||||
import Header from "./Header.svelte";
|
||||
import Header from './Header.svelte';
|
||||
</script>
|
||||
|
||||
<Header />
|
||||
|
|
|
|||
|
|
@ -1,86 +1,86 @@
|
|||
<div class="overflow-auto h-full">
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<div class="h-full overflow-auto">
|
||||
<h1>Welcome to SvelteKit</h1>
|
||||
<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
<p>gap</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,47 +1,53 @@
|
|||
<script lang="ts">
|
||||
import {page} from "$app/stores";
|
||||
import { Button } from "$lib/components/ui/button";
|
||||
|
||||
const button = "border-t-2 bg-black/55 hover:bg-black/70 hover:border-primary w-28";
|
||||
import { page } from '$app/stores';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
|
||||
const button = 'border-t-2 bg-black/55 hover:bg-black/70 hover:border-primary w-28';
|
||||
</script>
|
||||
|
||||
|
||||
<ul class="w-full h-16 border-b sticky flex flex-row items-center justify-center gap-3 backdrop-blur-sm bg-black/40">
|
||||
<li>
|
||||
<Button
|
||||
variant="ghost"
|
||||
href="/"
|
||||
class="{button} + {$page.url.pathname == '/' ? 'border-primary text-primary' : 'text-accent'}"
|
||||
>
|
||||
Home
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant="ghost"
|
||||
href="/servers"
|
||||
class="{button} + {$page.url.pathname.startsWith('/servers') ? 'border-primary text-primary' : 'text-accent'}"
|
||||
>
|
||||
Servers
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant="ghost"
|
||||
href="/services"
|
||||
class="{button} + {$page.url.pathname.startsWith('/services') ? 'border-primary text-primary' : 'text-accent'}"
|
||||
>
|
||||
Services
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant="ghost"
|
||||
href="/about"
|
||||
class="{button} + {$page.url.pathname.startsWith('/about') ? 'border-primary text-primary' : 'text-accent'}"
|
||||
>
|
||||
About
|
||||
</Button>
|
||||
</li>
|
||||
</ul>
|
||||
<ul
|
||||
class="sticky flex h-16 w-full flex-row items-center justify-center gap-3 border-b bg-black/40 backdrop-blur-sm"
|
||||
>
|
||||
<li>
|
||||
<Button
|
||||
variant="ghost"
|
||||
href="/"
|
||||
class="{button} + {$page.url.pathname === '/' ? 'border-primary text-primary' : 'text-accent'}"
|
||||
>
|
||||
Home
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant="ghost"
|
||||
href="/servers"
|
||||
class="{button} + {$page.url.pathname.startsWith('/servers')
|
||||
? 'border-primary text-primary'
|
||||
: 'text-accent'}"
|
||||
>
|
||||
Servers
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant="ghost"
|
||||
href="/services"
|
||||
class="{button} + {$page.url.pathname.startsWith('/services')
|
||||
? 'border-primary text-primary'
|
||||
: 'text-accent'}"
|
||||
>
|
||||
Services
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant="ghost"
|
||||
href="/about"
|
||||
class="{button} + {$page.url.pathname.startsWith('/about')
|
||||
? 'border-primary text-primary'
|
||||
: 'text-accent'}"
|
||||
>
|
||||
About
|
||||
</Button>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,19 @@
|
|||
<svelte:options runes={true} />
|
||||
|
||||
<script lang="ts">
|
||||
import pages from '$lib/components/pages.json';
|
||||
import Card from "$lib/components/Card.svelte";
|
||||
import pages from '$lib/components/pages.json';
|
||||
import Card from '$lib/components/Card.svelte';
|
||||
|
||||
const services = $state(pages.services);
|
||||
const services = $state(pages.services);
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Services</title>
|
||||
<meta name="description" content="Overview of Services running on neshweb.net">
|
||||
<title>Services</title>
|
||||
<meta name="description" content="Overview of Services running on neshweb.net" />
|
||||
</svelte:head>
|
||||
|
||||
|
||||
<div class="flex flex-row flex-wrap justify-center gap-10 p-8 overflow-auto h-full">
|
||||
{#each services as service}
|
||||
<Card {service} />
|
||||
{/each}
|
||||
</div>
|
||||
<div class="flex h-full flex-row flex-wrap justify-center gap-10 overflow-auto p-8">
|
||||
{#each services as service}
|
||||
<Card {service} />
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue