src/lib/components/Card.svelte

@@ -1,24 +1,66 @@
 <svelte:options runes={true} />
 
 <script lang="ts">
+    import {OpenInNewWindow} from "radix-icons-svelte";
+    import {quintInOut} from "svelte/easing";
+    import { slide } from "svelte/transition";
+
     let {service} = $props();
+
+    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">
+        <div class="flex flex-row gap-1 items-center" on:mouseover={() => hover.title = true} on:mouseleave={() => hover.title = false}>
-            <h1>ICO</h1>
+            {#if service.icon}
-            <a href={service.href} class="text-accent font-bold hover:text-primary">{service.name}</a>
+                <img width="24px" class="h-6 w-6 cursor-pointer" src={service.icon}>
+            {: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>
 
         <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 text-destructive">{service.warn}</p>
+    <p class="text-sm text-center font-bold text-destructive">{service.warn}</p>
-    <div class="flex flex-row justify-around mt-auto">
+    <div class="grid {service.extLink ? 'grid-cols-2' : 'grid-cols-1'} justify-items-center mt-auto">
-        <a class="text-sm border-x-2 rounded-md px-2 text-accent hover:border-primary hover:text-primary" href={service.href}>Open</a>
+        <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="text-sm border-x-2 rounded-md px-2 text-accent hover:border-primary hover:text-primary" href={service.extLink}>Official Site</a>
+            <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>

src/lib/components/pages.json

@@ -2,7 +2,7 @@
   "services": [
     {
       "name": "Nextcloud",
-      "icon": "/icons/nextcloud-logo.svg",
+      "icon": "/assets/icons/nextcloud-logo.svg",
       "href": "https://nextcloud.neshweb.net/",
       "desc": "Self-hosted Cloud Storage Service",
       "warn": "Note: Registration requires approval",
@@ -11,7 +11,7 @@
     },
     {
       "name": "Kavita",
-      "icon": "/icons/kavita-logo.svg",
+      "icon": "/assets/icons/kavita-logo.svg",
       "href": "https://kavita.neshweb.net",
       "desc": "Self-hosted Manga Library",
       "warn": "Registration via Admin invite",
@@ -19,7 +19,7 @@
     },
     {
       "name": "Images",
-      "icon": "/icons/images-logo.svg",
+      "icon": "/assets/icons/images-logo.svg",
       "href": "https://imgs.neshweb.net/",
       "desc": "Self-hosted Chevereto Image Service",
       "warn": "",
@@ -28,7 +28,7 @@
     },
     {
       "name": "Calibre Web",
-      "icon": "/icons/calibre-logo.ico",
+      "icon": "/assets/icons/calibre-logo.ico",
       "href": "https://calibre.neshweb.net/",
       "desc": "Self-hosted Ebook Library Service",
       "warn": "Note: Registration only via Admin",
@@ -36,7 +36,7 @@
     },
     {
       "name": "PeerTube",
-      "icon": "/icons/peertube-logo.svg",
+      "icon": "/assets/icons/peertube-logo.svg",
       "href": "https://tube.neshweb.net/",
       "desc": "Self-hosted PeerTube Instance",
       "warn": "Note: Registration only via Admin",
@@ -44,7 +44,7 @@
     },
     {
       "name": "Mastodon",
-      "icon": "/icons/mastodon-logo.svg",
+      "icon": "/assets/icons/mastodon-logo.svg",
       "href": "https://mastodon.neshweb.net/",
       "desc": "Self-hosted Mastodon Instance",
       "warn": "Note: Registration requires approval",
@@ -53,7 +53,7 @@
 
     {
       "name": "Vaultwarden",
-      "icon": "/icons/vaultwarden-logo.svg",
+      "icon": "/assets/icons/vaultwarden-logo.svg",
       "href": "https://vault.neshweb.net",
       "desc": "Self-hosted Password Manager",
       "warn": "Note: Invite only",
@@ -61,7 +61,7 @@
     },
     {
       "name": "Jellyfin",
-      "icon": "/icons/jellyfin-logo.svg",
+      "icon": "/assets/icons/jellyfin-logo.svg",
       "href": "https://jellyfin.neshweb.net/",
       "desc": "Open-Source, Self-Hosted Media Platform",
       "warn": "Note: Registration only via Admin",
@@ -69,7 +69,7 @@
     },
     {
       "name": "Navidrome",
-      "icon": "/icons/navidrome-logo.png",
+      "icon": "/assets/icons/navidrome-logo.png",
       "href": "https://navidrome.neshweb.net/",
       "desc": "Open-Source, Self-Hosted Music Streaming Platform",
       "warn": "Note: Registration only via Admin",
@@ -77,7 +77,7 @@
     },
     {
       "name": "Gitlab",
-      "icon": "/icons/gitlab-logo.svg",
+      "icon": "/assets/icons/gitlab-logo.svg",
       "href": "https://gitlab.neshweb.net/",
       "desc": "Self-hosted Git Service",
       "warn": "Note: Registration only via Admin",
@@ -85,7 +85,7 @@
     },
     {
       "name": "Forgejo",
-      "icon": "/icons/forgejo-logo.svg",
+      "icon": "/assets/icons/forgejo-logo.svg",
       "href": "https://forgejo.neshweb.net/",
       "desc": "Self-hosted Git Service",
       "warn": "Note: Registration only via Admin",
@@ -93,7 +93,7 @@
     },
     {
       "name": "Portainer",
-      "icon": "/icons/portainer-logo.png",
+      "icon": "/assets/icons/portainer-logo.png",
       "href": "https://portainer.neshweb.net/",
       "desc": "Docker Container Manager",
       "warn": "Note: Admin Only",
@@ -101,7 +101,7 @@
     },
     {
       "name": "Nginx",
-      "icon": "/icons/npm-logo.png",
+      "icon": "/assets/icons/npm-logo.png",
       "href": "https://nginx.neshweb.net/",
       "desc": "Web-based Nginx Proxy Manager",
       "warn": "Note: Admin Only",
@@ -109,7 +109,7 @@
     },
     {
       "name": "Proxmox",
-      "icon": "/icons/proxmox-logo.png",
+      "icon": "/assets/icons/proxmox-logo.png",
       "href": "https://proxmox.neshweb.net/",
       "desc": "Hypervisor Webinterface",
       "warn": "Note: Admin Only",
@@ -117,7 +117,7 @@
     },
     {
       "name": "Dockge",
-      "icon": "/icons/dockge-logo.png",
+      "icon": "/assets/icons/dockge-logo.png",
       "href": "https://dockge.neshweb.net/",
       "desc": "Docker Compose WebUI",
       "warn": "Note: Admin Only",
@@ -127,19 +127,19 @@
   "games": {
     "minecraft": {
       "name": "Minecraft",
-      "icon": "/icons/minecraft-logo.png",
+      "icon": "/assets/icons/minecraft-logo.png",
       "href": "https://minecraft.neshweb.net/",
       "desc": "View all currently available Minecraft Servers and their mods"
     },
     "ready_or_not": {
       "name": "Ready or Not",
-      "icon": "/icons/ron-logo.png",
+      "icon": "/assets/icons/ron-logo.png",
       "href": "https://readyornot.neshweb.net/",
       "desc": "Collection of Floor Plans for the Game 'Ready or Not'"
     },
     "zomboid": {
       "name": "Zomboid",
-      "icon": "/icons/zomboid-logo.png",
+      "icon": "/assets/icons/zomboid-logo.png",
       "ip": "91.13.248.30",
       "status": "Online"
     },

src/routes/services/+page.svelte

@@ -1,8 +1,10 @@
+<svelte:options runes={true} />
+
 <script lang="ts">
     import pages from '$lib/components/pages.json';
     import Card from "$lib/components/Card.svelte";
 
-    const services = pages.services;
+    const services = $state(pages.services);
 </script>
 
 <title>Services</title>
@@ -10,6 +12,6 @@
 
 <div class="flex flex-row flex-wrap justify-center gap-10 p-8 overflow-auto h-full">
     {#each services as service}
-        <Card {service} />
+        <Card bind:service />
     {/each}
 </div>