Move components around

assets/css/tailwind.css

@@ -21,13 +21,10 @@
   .extra-info {
     @apply text-xs truncate text-secondary;
   }
-  .grid-apps {
-    @apply grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4
-  }
   .hover-effect {
-    @apply no-underline md:hover:underline underline-offset-2 decoration-primary text-sm text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-slate-50 transition-all ease-linear duration-150
+    @apply no-underline md:hover:underline underline-offset-2 decoration-primary text-sm text-slate-700 dark:text-slate-300 hover:text-slate-900 dark:hover:text-slate-50 transition-all ease-linear duration-150;
   }
-  .heading{
+  .heading {
-    @apply text-lg text-secondary select-none truncate underline decoration-primary underline-offset-4
+    @apply text-lg text-secondary select-none truncate underline decoration-primary underline-offset-4;
   }
 }

components/application.templ

@@ -1,11 +1,13 @@
-package application
+package components
 
-import "gitlab.unjx.de/flohoss/godash/services"
+import (
-import "html/template"
+	"gitlab.unjx.de/flohoss/godash/services"
+	"html/template"
+)
 
 var ImageTemplate = template.Must(template.New("bar").Parse("<div class=\"{{ .Background }}img rounded w-8 h-8 bg-contain bg-center bg-origin-content bg-no-repeat opacity-90\" style=\"background-image: url({{ .Icon }})\"></div>"))
 
-type Bar struct {
+type Image struct {
 	Background string
 	Icon       string
 }
@@ -26,7 +28,13 @@ func backgroundColor(config string) string {
 
 templ Application(application services.Application) {
 	<a href={ templ.URL(application.URL) } class="flex items-center hover-effect">
-		@templ.FromGoHTML(ImageTemplate, Bar{Background: backgroundColor(application.Background), Icon: application.Icon})
+		@templ.FromGoHTML(ImageTemplate, Image{Background: backgroundColor(application.Background), Icon: application.Icon})
 		<div class="uppercase truncate ml-2">{ application.Name }</div>
 	</a>
 }
+
+templ Link(link services.Link) {
+	<a href={ templ.URL(link.URL) } class="hover-effect">
+		<div class="truncate">{ link.Name }</div>
+	</a>
+}

components/link/link.templ

@@ -1,11 +0,0 @@
-package link
-
-import (
-	"gitlab.unjx.de/flohoss/godash/services"
-)
-
-templ Link(link services.Link) {
-	<a href={ templ.URL(link.URL) } class="hover-effect">
-		<div class="uppercase truncate">{ link.Name }</div>
-	</a>
-}

components/system.templ

@@ -1,9 +1,30 @@
-package uptime
+package components
 
-import "gitlab.unjx.de/flohoss/godash/services"
+import (
-import "gitlab.unjx.de/flohoss/godash/components/system"
+	"html/template"
-import "fmt"
+	"gitlab.unjx.de/flohoss/godash/services"
-import "html/template"
+	"fmt"
+)
+
+var BarTemplate = template.Must(template.New("bar").Parse("<div id=\"{{ .Id }}\" class=\"progress-bar\" style=\"width: {{ .Percentage }}%\"></div>"))
+
+type Bar struct {
+	Id         string
+	Percentage float64
+}
+
+templ System(icon string, infoPre string, infoPost string, extraInfo string, percentageId string, valueId string, percentage float64) {
+	<div class="flex items-center">
+		<span class={ "system-icon", icon }></span>
+		<div class="w-full truncate">
+			<div class="extra-info">{ extraInfo }</div>
+			<div class="truncate"><span id={ valueId }>{ infoPre }</span>{ infoPost }</div>
+			<div class="progress-bar-wrapper">
+				@templ.FromGoHTML(BarTemplate, Bar{Id:percentageId, Percentage:percentage})
+			</div>
+		</div>
+	</div>
+}
 
 var countDownTemplate = template.Must(template.New("countdown").Parse("<span id=\"{{ .Id }}\" style=\"--value: {{ .Value }};\"></span>"))
 
@@ -32,7 +53,7 @@ templ Uptime(extraInfo string, id string, uptime services.Uptime) {
 				</div>
 			</div>
 			<div class="progress-bar-wrapper">
-				@templ.FromGoHTML(system.BarTemplate, system.Bar{Id:id, Percentage:float64(uptime.Percentage)})
+				@templ.FromGoHTML(BarTemplate, Bar{Id:id, Percentage:float64(uptime.Percentage)})
 			</div>
 		</div>
 	</div>

components/system/system.templ

@@ -1,23 +0,0 @@
-package system
-
-import "html/template"
-
-var BarTemplate = template.Must(template.New("bar").Parse("<div id=\"{{ .Id }}\" class=\"progress-bar\" style=\"width: {{ .Percentage }}%\"></div>"))
-
-type Bar struct {
-	Id         string
-	Percentage float64
-}
-
-templ System(icon string, infoPre string, infoPost string, extraInfo string, percentageId string, valueId string, percentage float64) {
-	<div class="flex items-center">
-		<span class={ "system-icon", icon }></span>
-		<div class="w-full truncate">
-			<div class="extra-info">{ extraInfo }</div>
-			<div class="truncate"><span id={ valueId }>{ infoPre }</span>{ infoPost }</div>
-			<div class="progress-bar-wrapper">
-				@templ.FromGoHTML(BarTemplate, Bar{Id:percentageId, Percentage:percentage})
-			</div>
-		</div>
-	</div>
-}

components/weather.templ

@@ -0,0 +1,160 @@
+package components
+
+import (
+	"gitlab.unjx.de/flohoss/godash/services"
+	"fmt"
+)
+
+func getIcon(icon string) string {
+	switch icon {
+	case "01d":
+		return "icon-[bi--sun-fill]"
+	case "01n":
+		return "icon-[bi--moon-fill]"
+	case "02d":
+		return "icon-[bi--cloud-sun-fill]"
+	case "02n":
+		return "icon-[bi--cloud-moon-fill]"
+	case "03d", "03n":
+		return "icon-[bi--cloud-fill]"
+	case "04d", "04n":
+		return "icon-[bi--clouds-fill]"
+	case "09d", "09n":
+		return "icon-[bi--cloud-rain-heavy-fill]"
+	case "10d", "10n":
+		return "icon-[bi--cloud-drizzle-fill]"
+	case "11d", "11n":
+		return "icon-[bi--cloud-lightning-rain-fill]"
+	case "13d", "13n":
+		return "icon-[bi--cloud-snow-fill]"
+	case "50d", "50n":
+		return "icon-[bi--cloud-fog2-fill]"
+	default:
+		return ""
+	}
+}
+
+templ Weather(weather *services.OpenWeather) {
+	<div class="flex items-center select-none">
+		<span id="watherIcon" class={ "extra-icon h-12 w-12 shrink-0 mr-4 md:w-14 md:h-14", getIcon(weather.Icon) }></span>
+		<div>
+			<div class="text-4xl md:text-4xl"><span id="weatherTemp">{ fmt.Sprintf("%0.2f",weather.Temp) }</span> { weather.Units }</div>
+			<div class="flex items-center gap-5 text-xs">
+				<div class="flex items-center">
+					<span class="extra-icon icon-[bi--chat-quote]"></span>
+					<div id="weatherDescription" class="extra-info">{ weather.Description }</div>
+				</div>
+				<div class="flex items-center">
+					<span class="extra-icon icon-[bi--droplet]"></span>
+					<div id="weatherHumidity" class="extra-info">{ fmt.Sprintf("%d %%",weather.Humidity) }</div>
+				</div>
+				<div class="hidden sm:flex items-center">
+					<span class="extra-icon icon-[bi--sunrise]"></span>
+					<div id="weatherSunrise" class="extra-info">{ weather.Sunrise }</div>
+				</div>
+				<div class="hidden sm:flex items-center">
+					<span class="extra-icon icon-[bi--sunset]"></span>
+					<div id="weatherSunset" class="extra-info">{ weather.Sunset }</div>
+				</div>
+			</div>
+		</div>
+	</div>
+}
+
+templ WeatherScript() {
+	<script>
+		let systemSSESource = null;
+    	let weatherSSESource = null;
+		addEventListener('beforeunload', () => {
+			systemSSESource && systemSSESource.close();
+      		weatherSSESource && weatherSSESource.close();
+		});
+		systemSSESource = new EventSource('/sse?stream=system');
+		systemSSESource.onmessage = (e) => {
+			const parsed = JSON.parse(e.data);
+			replaceSystem(parsed);
+		};
+		weatherSSESource = new EventSource('/sse?stream=weather');
+		weatherSSESource.onmessage = (e) => {
+			const parsed = JSON.parse(e.data);
+			replaceWeather(parsed);
+		};
+
+
+		// weather elements
+		const weatherIcon = document.getElementById('weatherIcon');
+		const weatherTemp = document.getElementById('weatherTemp');
+		const weatherDescription = document.getElementById('weatherDescription');
+		const weatherHumidity = document.getElementById('weatherHumidity');
+		const weatherSunrise = document.getElementById('weatherSunrise');
+		const weatherSunset = document.getElementById('weatherSunset');
+
+		// system elements
+		const systemCpuPercentage = document.getElementById('systemCpuPercentage');
+		const systemRamPercentage = document.getElementById('systemRamPercentage');
+		const systemRamValue = document.getElementById('systemRamValue');
+		const systemDiskPercentage = document.getElementById('systemDiskPercentage');
+		const systemDiskValue = document.getElementById('systemDiskValue');
+		const systemUptimePercentage = document.getElementById('systemUptimePercentage');
+		const uptimeDays = document.getElementById('uptimeDays');
+		const uptimeHours = document.getElementById('uptimeHours');
+		const uptimeMinutes = document.getElementById('uptimeMinutes');
+		const uptimeSeconds = document.getElementById('uptimeSeconds');
+
+		function weatherClass(icon){
+			switch (icon) {
+			case "01d":
+				return "icon-[bi--sun-fill]"
+			case "01n":
+				return "icon-[bi--moon-fill]"
+			case "02d":
+				return "icon-[bi--cloud-sun-fill]"
+			case "02n":
+				return "icon-[bi--cloud-moon-fill]"
+			case "03d", "03n":
+				return "icon-[bi--cloud-fill]"
+			case "04d", "04n":
+				return "icon-[bi--clouds-fill]"
+			case "09d", "09n":
+				return "icon-[bi--cloud-rain-heavy-fill]"
+			case "10d", "10n":
+				return "icon-[bi--cloud-drizzle-fill]"
+			case "11d", "11n":
+				return "icon-[bi--cloud-lightning-rain-fill]"
+			case "13d", "13n":
+				return "icon-[bi--cloud-snow-fill]"
+			case "50d", "50n":
+				return "icon-[bi--cloud-fog2-fill]"
+			default:
+				return ""
+			}
+		}
+
+		function replaceWeather(parsed) {
+			weatherIcon.className.split(' ').forEach(function(className) {
+				if (className.startsWith('icon-')) {
+					weatherIcon.classList.remove(className);
+				}
+			});
+			weatherIcon.classList.add(weatherClass(parsed.icon));
+			weatherTemp.innerText = parsed.temp;
+			weatherDescription.innerText = parsed.description;
+			weatherHumidity.innerText = parsed.humidity + '%';
+			weatherSunrise.innerText = parsed.sunrise;
+			weatherSunset.innerText = parsed.sunset;
+		}
+
+		function replaceSystem(parsed) {
+			systemCpuPercentage.style = 'width:' + parsed.cpu + '%';
+			systemRamPercentage.style = 'width:' + parsed.ram.percentage + '%';
+			systemRamValue.innerText = parsed.ram.value;
+			systemDiskPercentage.style = 'width:' + parsed.disk.percentage + '%';
+			systemDiskValue.innerText = parsed.disk.value;
+			systemUptimePercentage.style = 'width:' + parsed.uptime.percentage + '%';
+			uptimeDays.style = '--value:' + parsed.uptime.days;
+			uptimeHours.style = '--value:' + parsed.uptime.hours;
+			uptimeMinutes.style = '--value:' + parsed.uptime.minutes;
+			uptimeSeconds.style = '--value:' + parsed.uptime.seconds;
+		}
+  	</script>
+}

services/bookmark.services.go

@@ -43,33 +43,6 @@ func NewBookmarkService() *BookmarkService {
 	return &bs
 }
 
-type BookmarkService struct {
-	bookmarks Bookmarks
-}
-
-type Bookmarks struct {
-	Links []struct {
-		Category string
-		Entries  []Link
-	}
-	Applications []struct {
-		Category string
-		Entries  []Application
-	}
-}
-
-type Link struct {
-	Name string
-	URL  string
-}
-
-type Application struct {
-	Name       string
-	Icon       string
-	Background string
-	URL        string
-}
-
 func (bs *BookmarkService) GetAllBookmarks() *Bookmarks {
 	return &bs.bookmarks
 }

services/bookmark.types.go

@@ -0,0 +1,28 @@
+package services
+
+type BookmarkService struct {
+	bookmarks Bookmarks
+}
+
+type Bookmarks struct {
+	Links []struct {
+		Category string
+		Entries  []Link
+	}
+	Applications []struct {
+		Category string
+		Entries  []Application
+	}
+}
+
+type Link struct {
+	Name string
+	URL  string
+}
+
+type Application struct {
+	Name       string
+	Icon       string
+	Background string
+	URL        string
+}

views/home/home.templ

@@ -1,73 +1,20 @@
 package home
 
-import "gitlab.unjx.de/flohoss/godash/services"
+import (
-import "gitlab.unjx.de/flohoss/godash/views/layout"
+	"gitlab.unjx.de/flohoss/godash/services"
-import "gitlab.unjx.de/flohoss/godash/components/system"
+	"gitlab.unjx.de/flohoss/godash/views/layout"
-import "gitlab.unjx.de/flohoss/godash/components/uptime"
+	"fmt"
-import "gitlab.unjx.de/flohoss/godash/components/application"
+	"gitlab.unjx.de/flohoss/godash/components"
-import "gitlab.unjx.de/flohoss/godash/components/link"
+)
-import "fmt"
-
-func getIcon(icon string) string {
-	switch icon {
-	case "01d":
-		return "icon-[bi--sun-fill]"
-	case "01n":
-		return "icon-[bi--moon-fill]"
-	case "02d":
-		return "icon-[bi--cloud-sun-fill]"
-	case "02n":
-		return "icon-[bi--cloud-moon-fill]"
-	case "03d", "03n":
-		return "icon-[bi--cloud-fill]"
-	case "04d", "04n":
-		return "icon-[bi--clouds-fill]"
-	case "09d", "09n":
-		return "icon-[bi--cloud-rain-heavy-fill]"
-	case "10d", "10n":
-		return "icon-[bi--cloud-drizzle-fill]"
-	case "11d", "11n":
-		return "icon-[bi--cloud-lightning-rain-fill]"
-	case "13d", "13n":
-		return "icon-[bi--cloud-snow-fill]"
-	case "50d", "50n":
-		return "icon-[bi--cloud-fog2-fill]"
-	default:
-		return ""
-	}
-}
 
 templ Home(title string, bookmarks *services.Bookmarks, static *services.StaticInformation, live *services.LiveInformation, weather *services.OpenWeather) {
 	<section class="grid gap-10">
-		<div class="flex items-center select-none">
+		@components.Weather(weather)
-			<span id="watherIcon" class={ "extra-icon h-12 w-12 shrink-0 mr-4 md:w-14 md:h-14", getIcon(weather.Icon) }></span>
-			<div>
-				<div class="text-4xl md:text-4xl"><span id="weatherTemp">{ fmt.Sprintf("%0.2f",weather.Temp) }</span> { weather.Units }</div>
-				<div class="flex items-center gap-5 text-xs">
-					<div class="flex items-center">
-						<span class="extra-icon icon-[bi--chat-quote]"></span>
-						<div id="weatherDescription" class="extra-info">{ weather.Description }</div>
-					</div>
-					<div class="flex items-center">
-						<span class="extra-icon icon-[bi--droplet]"></span>
-						<div id="weatherHumidity" class="extra-info">{ fmt.Sprintf("%d %%",weather.Humidity) }</div>
-					</div>
-					<div class="hidden sm:flex items-center">
-						<span class="extra-icon icon-[bi--sunrise]"></span>
-						<div id="weatherSunrise" class="extra-info">{ weather.Sunrise }</div>
-					</div>
-					<div class="hidden sm:flex items-center">
-						<span class="extra-icon icon-[bi--sunset]"></span>
-						<div id="weatherSunset" class="extra-info">{ weather.Sunset }</div>
-					</div>
-				</div>
-			</div>
-		</div>
 		<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3 select-none">
-			@system.System("icon-[bi--cpu]",static.CPU.Name,"",static.CPU.Threads,"systemCpuPercentage","",live.CPU)
+			@components.System("icon-[bi--cpu]",static.CPU.Name,"",static.CPU.Threads,"systemCpuPercentage","",live.CPU)
-			@system.System("icon-[bi--nvme]",live.Disk.Value,fmt.Sprintf(" | %s", static.Disk.Total),static.Disk.Partitions,"systemDiskPercentage","systemDiskValue",live.Disk.Percentage)
+			@components.System("icon-[bi--nvme]",live.Disk.Value,fmt.Sprintf(" | %s", static.Disk.Total),static.Disk.Partitions,"systemDiskPercentage","systemDiskValue",live.Disk.Percentage)
-			@system.System("icon-[bi--memory]",live.Ram.Value,fmt.Sprintf(" | %s", static.Ram.Total),static.Ram.Swap,"systemRamPercentage","systemRamValue",live.Ram.Percentage)
+			@components.System("icon-[bi--memory]",live.Ram.Value,fmt.Sprintf(" | %s", static.Ram.Total),static.Ram.Swap,"systemRamPercentage","systemRamValue",live.Ram.Percentage)
-			@uptime.Uptime(static.Host.Architecture,"systemUptimePercentage",live.Uptime)
+			@components.Uptime(static.Host.Architecture,"systemUptimePercentage",live.Uptime)
 		</div>
 		<div class="grid gap-4">
 			for _, a := range bookmarks.Applications {
@@ -77,120 +24,28 @@ templ Home(title string, bookmarks *services.Bookmarks, static *services.StaticI
 					}
 					<div class="grid-apps">
 						for _, entry := range a.Entries {
-							@application.Application(entry)
+							@components.Application(entry)
 						}
 					</div>
 				</div>
 			}
 		</div>
-		<div class="grid-apps">
+		<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
 			for _, l := range bookmarks.Links {
 				<div class="flex flex-col gap-2">
 					if l.Category != "" {
 						<div class="heading">{ l.Category }</div>
+					} else {
+						<div class="my-[0.9rem]"></div>
 					}
 					for _, entry := range l.Entries {
-						@link.Link(entry)
+						@components.Link(entry)
 					}
 				</div>
 			}
 		</div>
+		@components.WeatherScript()
 	</section>
-	<script>
-		let systemSSESource = null;
-    	let weatherSSESource = null;
-		addEventListener('beforeunload', () => {
-			systemSSESource && systemSSESource.close();
-      		weatherSSESource && weatherSSESource.close();
-		});
-		systemSSESource = new EventSource('/sse?stream=system');
-		systemSSESource.onmessage = (e) => {
-			const parsed = JSON.parse(e.data);
-			replaceSystem(parsed);
-		};
-		weatherSSESource = new EventSource('/sse?stream=weather');
-		weatherSSESource.onmessage = (e) => {
-			const parsed = JSON.parse(e.data);
-			replaceWeather(parsed);
-		};
-
-
-		// weather elements
-		const weatherIcon = document.getElementById('weatherIcon');
-		const weatherTemp = document.getElementById('weatherTemp');
-		const weatherDescription = document.getElementById('weatherDescription');
-		const weatherHumidity = document.getElementById('weatherHumidity');
-		const weatherSunrise = document.getElementById('weatherSunrise');
-		const weatherSunset = document.getElementById('weatherSunset');
-
-		// system elements
-		const systemCpuPercentage = document.getElementById('systemCpuPercentage');
-		const systemRamPercentage = document.getElementById('systemRamPercentage');
-		const systemRamValue = document.getElementById('systemRamValue');
-		const systemDiskPercentage = document.getElementById('systemDiskPercentage');
-		const systemDiskValue = document.getElementById('systemDiskValue');
-		const systemUptimePercentage = document.getElementById('systemUptimePercentage');
-		const uptimeDays = document.getElementById('uptimeDays');
-		const uptimeHours = document.getElementById('uptimeHours');
-		const uptimeMinutes = document.getElementById('uptimeMinutes');
-		const uptimeSeconds = document.getElementById('uptimeSeconds');
-
-		function weatherClass(icon){
-			switch (icon) {
-			case "01d":
-				return "icon-[bi--sun-fill]"
-			case "01n":
-				return "icon-[bi--moon-fill]"
-			case "02d":
-				return "icon-[bi--cloud-sun-fill]"
-			case "02n":
-				return "icon-[bi--cloud-moon-fill]"
-			case "03d", "03n":
-				return "icon-[bi--cloud-fill]"
-			case "04d", "04n":
-				return "icon-[bi--clouds-fill]"
-			case "09d", "09n":
-				return "icon-[bi--cloud-rain-heavy-fill]"
-			case "10d", "10n":
-				return "icon-[bi--cloud-drizzle-fill]"
-			case "11d", "11n":
-				return "icon-[bi--cloud-lightning-rain-fill]"
-			case "13d", "13n":
-				return "icon-[bi--cloud-snow-fill]"
-			case "50d", "50n":
-				return "icon-[bi--cloud-fog2-fill]"
-			default:
-				return ""
-			}
-		}
-
-		function replaceWeather(parsed) {
-			weatherIcon.className.split(' ').forEach(function(className) {
-				if (className.startsWith('icon-')) {
-					weatherIcon.classList.remove(className);
-				}
-			});
-			weatherIcon.classList.add(weatherClass(parsed.icon));
-			weatherTemp.innerText = parsed.temp;
-			weatherDescription.innerText = parsed.description;
-			weatherHumidity.innerText = parsed.humidity + '%';
-			weatherSunrise.innerText = parsed.sunrise;
-			weatherSunset.innerText = parsed.sunset;
-		}
-
-		function replaceSystem(parsed) {
-			systemCpuPercentage.style = 'width:' + parsed.cpu + '%';
-			systemRamPercentage.style = 'width:' + parsed.ram.percentage + '%';
-			systemRamValue.innerText = parsed.ram.value;
-			systemDiskPercentage.style = 'width:' + parsed.disk.percentage + '%';
-			systemDiskValue.innerText = parsed.disk.value;
-			systemUptimePercentage.style = 'width:' + parsed.uptime.percentage + '%';
-			uptimeDays.style = '--value:' + parsed.uptime.days;
-			uptimeHours.style = '--value:' + parsed.uptime.hours;
-			uptimeMinutes.style = '--value:' + parsed.uptime.minutes;
-			uptimeSeconds.style = '--value:' + parsed.uptime.seconds;
-		}
-  	</script>
 }
 
 templ HomeIndex(