Config file fixes

config/config.yaml

@@ -0,0 +1,223 @@
+sections:
+  - id: "system"
+    title: "System"
+    icon: "Server"
+    cardStyle:
+      background: "bg-blue-50 dark:bg-blue-950/30"
+      iconColor: "text-blue-600 dark:text-blue-400"
+
+  - id: "media"
+    title: "Media"
+    icon: "Play"
+    cardStyle:
+      background: "bg-orange-50 dark:bg-orange-950/30"
+      iconColor: "text-orange-600 dark:text-orange-400"
+
+  - id: "monitoring"
+    title: "Monitoring"
+    icon: "Activity"
+    cardStyle:
+      background: "bg-emerald-50 dark:bg-emerald-950/30"
+      iconColor: "text-emerald-600 dark:text-emerald-400"
+
+  - id: "tools"
+    title: "Tools"
+    icon: "Settings"
+    cardStyle:
+      background: "bg-purple-50 dark:bg-purple-950/30"
+      iconColor: "text-purple-600 dark:text-purple-400"
+
+  - id: "acot"
+    title: "ACOT"
+    icon: "LayoutDashboard"
+    cardStyle:
+      background: "bg-sky-50 dark:bg-sky-950/30"
+      iconColor: "text-sky-600 dark:text-sky-400"
+
+  - id: "home"
+    title: "Home"
+    icon: "Home"
+    cardStyle:
+      background: "bg-indigo-50 dark:bg-indigo-950/30"
+      iconColor: "text-indigo-600 dark:text-indigo-400"
+
+services:
+  - name: "Portainer"
+    description: "Container Management"
+    url: "https://portainer.kent.pw"
+    iconName: "portainer"
+    category: "system"
+    cardStyle:
+      background: "bg-blue-50 dark:bg-blue-950/30"
+      iconColor: "text-blue-600 dark:text-blue-400"
+
+  - name: "Gitea"
+    description: "Git Server"
+    url: "https://gitea.kent.pw"
+    iconName: "gitea"
+    category: "system"
+    cardStyle:
+      background: "bg-green-50 dark:bg-green-950/30"
+      iconColor: "text-green-600 dark:text-green-400"
+
+  - name: "Cockpit"
+    description: "Server Management"
+    url: "https://cockpit.kent.pw"
+    iconName: "cockpit"
+    category: "system"
+
+  - name: "DiskStation"
+    description: "Synology NAS"
+    url: "https://diskstation.kent.pw"
+    iconName: "synology"
+    category: "system"
+    monitorName: "Synology Diskstation"
+    cardStyle:
+      background: "bg-slate-50 dark:bg-slate-950/30"
+      iconColor: "text-slate-600 dark:text-slate-400"
+
+  - name: "Plex"
+    description: "Media Server"
+    url: "https://plex.kent.pw"
+    iconName: "plex"
+    category: "media"
+    cardStyle:
+      background: "bg-orange-50 dark:bg-orange-950/30"
+      iconColor: "text-orange-600 dark:text-orange-400"
+
+  - name: "Sonarr"
+    description: "TV Show Management"
+    url: "https://sonarr.kent.pw"
+    iconName: "sonarr"
+    category: "media"
+    cardStyle:
+      background: "bg-blue-50 dark:bg-blue-950/30"
+      iconColor: "text-blue-600 dark:text-blue-400"
+
+  - name: "Jackett"
+    description: "Torrent Indexer"
+    url: "https://jackett.kent.pw"
+    iconName: "jackett"
+    category: "media"
+
+  - name: "Deluge"
+    description: "Torrent Client"
+    url: "https://deluge.kent.pw"
+    iconName: "deluge"
+    category: "media"
+    cardStyle:
+      background: "bg-green-50 dark:bg-green-950/30"
+      iconColor: "text-green-600 dark:text-green-400"
+
+  - name: "Uptime"
+    description: "Service Monitoring"
+    url: "https://uptime.kent.pw"
+    iconName: "uptime-kuma"
+    category: "monitoring"
+    monitorName: "Uptime Kuma"
+    cardStyle:
+      background: "bg-emerald-50 dark:bg-emerald-950/30"
+      iconColor: "text-emerald-600 dark:text-emerald-400"
+
+  - name: "AdGuard"
+    description: "Network Ad Blocking"
+    url: "https://adguard.kent.pw"
+    iconName: "adguard-home"
+    category: "system"
+    monitorName: "Adguard Home"
+    cardStyle:
+      background: "bg-emerald-50 dark:bg-emerald-950/30"
+      iconColor: "text-emerald-600 dark:text-emerald-400"
+
+  - name: "NocoDB"
+    description: "Database Platform"
+    url: "https://noco.kent.pw"
+    iconName: "nocodb"
+    category: "tools"
+    monitorName: "NocoDB"
+
+  - name: "IT Tools"
+    description: "Developer Utilities"
+    url: "https://ittools.kent.pw"
+    iconName: "it-tools"
+    category: "tools"
+    monitorName: "IT Tools"
+
+  - name: "Firefox"
+    description: "Browser Instance"
+    url: "https://firefox.kent.pw"
+    iconName: "firefox"
+    category: "tools"
+    cardStyle:
+      background: "bg-orange-50 dark:bg-orange-950/30"
+      iconColor: "text-orange-600 dark:text-orange-400"
+
+  - name: "Speedtest"
+    description: "Network Speed Monitor"
+    url: "https://speedtest.kent.pw"
+    iconName: "speedtest-tracker"
+    category: "monitoring"
+    monitorName: "Speedtest Tracker"
+    cardStyle:
+      background: "bg-blue-50 dark:bg-blue-950/30"
+      iconColor: "text-blue-600 dark:text-blue-400"
+
+  - name: "Netdata"
+    description: "Monitoring Dashboard"
+    url: "https://netdata.kent.pw"
+    iconName: "netdata"
+    category: "monitoring"
+    monitorName: "Netdata"
+    cardStyle:
+      background: "bg-purple-50 dark:bg-purple-950/30"
+      iconColor: "text-purple-600 dark:text-purple-400"
+      
+  - name: "File Browser"
+    description: "Edit Server Files"
+    url: "https://files.kent.pw"
+    iconName: "file-browser"
+    category: "monitoring"
+    monitorName: "File Browser"
+    cardStyle:
+      background: "bg-blue-50 dark:bg-blue-950/30"
+      iconColor: "text-blue-600 dark:text-blue-400"
+
+  - name: "Drive"
+    description: "File Storage"
+    url: "https://drive.kent.pw"
+    iconName: "synology"
+    category: "tools"
+    monitorName: "Synology Drive"
+
+  - name: "Dashboard"
+    description: "ACOT Dashboard"
+    url: "https://dashboard.kent.pw"
+    iconName: "lucide-layout-dashboard"
+    category: "acot"
+    cardStyle:
+      background: "bg-sky-50 dark:bg-sky-950/30"
+      iconColor: "text-sky-600 dark:text-sky-400"
+
+  - name: "Inventory"
+    description: "ACOT Inventory"
+    url: "https://inventory.kent.pw"
+    iconName: "lucide-box"
+    category: "acot"
+
+  - name: "Homebridge"
+    description: "HomeKit Bridge"
+    url: "https://homebridge.kent.pw"
+    iconName: "homebridge"
+    category: "home"
+    cardStyle:
+      background: "bg-purple-50 dark:bg-purple-950/30"
+      iconColor: "text-purple-600 dark:text-purple-400"
+
+  - name: "Scrypted"
+    description: "Smart Home Integration"
+    url: "https://scrypted.kent.pw"
+    iconName: "scrypted"
+    category: "home"
+    cardStyle:
+      background: "bg-indigo-50 dark:bg-indigo-950/30"
+      iconColor: "text-indigo-600 dark:text-indigo-400" 

src/App.tsx

@@ -166,8 +166,8 @@ function ServiceSection({ section, services, metrics }: {
               rel="noopener noreferrer"
               className="transition-transform hover:scale-105"
             >
-              <Card className={`${style.background} hover:${style.background} overflow-hidden`}>
+              <Card className={`${style.background} hover:${style.background}`}>
-                <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardHeader className={`flex flex-row items-center justify-between space-y-0 pb-2 ${style.background}`}>
                   <div className="flex items-center">
                     <div className={style.iconColor}>
                       <ServiceIcon service={service} section={section} isDark={isDark} />
@@ -180,7 +180,7 @@ function ServiceSection({ section, services, metrics }: {
                     certDaysRemaining={serviceMetrics.certDaysRemaining}
                   />
                 </CardHeader>
-                <CardContent>
+                <CardContent className={style.background}>
                   <CardDescription>{service.description}</CardDescription>
                 </CardContent>
               </Card>

src/hooks/useConfig.ts

@@ -8,31 +8,22 @@ export function useConfig() {
 
   useEffect(() => {
     const loadConfig = async () => {
-      // Try local development path first, then production path
+      try {
-      const paths = ['/config.yaml', '/homepage/config.yaml']
+        const response = await fetch('/config.yaml')
-      
+        if (!response.ok) {
-      for (const path of paths) {
+          throw new Error('Failed to load configuration')
-        try {
-          const response = await fetch(path)
-          if (response.ok) {
-            const text = await response.text()
-            console.log(`Loaded config from ${path}`)
-            console.log('Raw YAML:', text.substring(0, 500) + '...') // Show first 500 chars
-            const parsed = yaml.load(text) as Config
-            console.log('Parsed config sections:', parsed.sections)
-            console.log('First service cardStyle:', parsed.services[0]?.cardStyle)
-            setConfig(parsed)
-            setError(null)
-            return // Successfully loaded config, exit the loop
-          }
-        } catch (err) {
-          console.error(`Failed to load config from ${path}:`, err)
-          // Continue to next path
         }
+        const text = await response.text()
+        console.log('Raw YAML:', text.substring(0, 500) + '...') // Show first 500 chars
+        const parsed = yaml.load(text) as Config
+        console.log('Parsed config sections:', parsed.sections)
+        console.log('First service cardStyle:', parsed.services[0]?.cardStyle)
+        setConfig(parsed)
+        setError(null)
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Failed to load configuration')
+        console.error('Error loading configuration:', err)
       }
-
-      // If we get here, none of the paths worked
-      setError('Failed to load configuration from any location')
     }
 
     // Load config immediately

tailwind.config.js

@@ -5,16 +5,6 @@ export default {
         "./index.html",
         "./src/**/*.{js,ts,jsx,tsx}",
     ],
-    safelist: [
-        {
-            pattern: /^bg-(blue|gray|green|red|yellow|purple|pink|indigo|orange)-(50|100|200|300|400|500|600|700|800|900|950)/,
-            variants: ['hover', 'dark']
-        },
-        {
-            pattern: /^text-(blue|gray|green|red|yellow|purple|pink|indigo|orange)-(50|100|200|300|400|500|600|700|800|900|950)/,
-            variants: ['dark']
-        }
-    ],
     theme: {
         container: {
             center: true,