Adds online / offline indicator

src/config.yml

@@ -17,22 +17,16 @@ services:
       icon: 'fas fa-photo-film'
       items:
           - title: 'Jellyfin'
-            subtitle: 'Media server'
-            target: '_blank'
             url: 'https://eagle.tuleu.me'
             type: jellyfin
             keywords: 'cloud storage files'
 
           - title: 'Sonarr'
-            subtitle: 'Shows tracker'
-            target: '_blank'
             url: 'http://sonarr.lan'
             type: sonarr
             keywords: 'shows tracker torrent usenet'
 
           - title: 'Radarr'
-            subtitle: 'Movie tracker'
-            target: '_blank'
             url: 'http://radarr.lan'
             type: radarr
             keywords: 'movies tracker torrent usenet'
@@ -43,7 +37,6 @@ services:
           - title: 'NAS'
             subtitle: 'Network Attached Storage'
             icon: 'fas fa-hard-drive'
-            target: '_blank'
             url: 'https://owl.tuleu.me'
             keywords: 'cloud nas files storage'
 
@@ -51,8 +44,6 @@ services:
       icon: 'fas fa-network-wired'
       items:
           - title: 'PiHole'
-            subtitle: 'A DNS to send telemetry and ads to the void'
-            target: '_blank'
             url: 'http://pihole.lan/admin'
             type: 'pihole'
             keywords: 'dns ads blocker internet'

src/lib/components/ServiceCard.svelte

@@ -15,24 +15,40 @@
 		}
 		return service;
 	}
+
+	function computeClasses(): string {
+		switch (data.status) {
+			case 'offline':
+				return 'bg-error-400';
+			case 'online':
+				return 'bg-success-400';
+			default:
+				return 'bg-warning-400 animate-pulse';
+		}
+	}
+	$: statusClasses = computeClasses();
 </script>
 
 <a
-	class="min-h-24 flex w-full flex-row gap-2 rounded-2xl bg-neutral-600 bg-opacity-30 p-6 transition-all hover:-translate-y-2 focus:-translate-y-2 focus:outline-none"
+	class="min-h-24 flex w-full flex-col overflow-hidden rounded-2xl bg-neutral-600 bg-opacity-30 p-0 transition-all hover:-translate-y-2 focus:-translate-y-2 focus:outline-none"
 	href={service.url}
 	target={service.target || ''}
 >
-	<div class="flex flex h-12 w-12 flex-row text-4xl">
+	<div class="flex flex-row gap-2 px-6 pt-6">
-		<Brand brand={brand()} />
+		<div class="flex flex h-12 w-12 flex-row text-4xl">
-	</div>
+			<Brand brand={brand()} />
-	<div>
+		</div>
-		<p class="text-xl">{service.title}</p>
+		<div>
-		<p class="text-md">
+			<p class="text-xl">{service.title}</p>
-			{#if component != undefined}
+			<p class="text-md">
-				<svelte:component this={component} {data} />
-			{:else}
 				{service.subtitle}
-			{/if}
+			</p>
-		</p>
+		</div>
 	</div>
+	<div class="mt-2 h-8 w-full px-6">
+		{#if component != undefined}
+			<svelte:component this={component} {data} />
+		{/if}
+	</div>
+	<div class={'h-0.5 w-full ' + statusClasses} />
 </a>

tailwind.config.js

@@ -8,7 +8,10 @@ export default {
 		colors: {
 			primary: colors.teal,
 			secondary: colors.sky,
-			neutral: colors.slate
+			neutral: colors.slate,
+			success: colors.lime,
+			error: colors.red,
+			warning: colors.amber
 		}
 	},
 	plugins: [],