Add config file and text editor + update server

2025-02-08 14:02:16 -05:00
parent 44461ceef8
commit 68dce7ee2a
14 changed files with 722 additions and 166 deletions
--- a/config-server/server.js
+++ b/config-server/server.js
@@ -0,0 +1,69 @@
+const express = require('express')
+const fs = require('fs/promises')
+const path = require('path')
+const yaml = require('js-yaml')
+const cors = require('cors')
+const bodyParser = require('body-parser')
+
+const app = express()
+const PORT = process.env.CONFIG_PORT || 3012
+
+// CORS configuration
+app.use(cors({
+  origin: ['https://start.kent.pw', 'https://auth.kent.pw'],
+  credentials: true,
+  methods: ['GET', 'POST', 'OPTIONS'],
+  allowedHeaders: [
+    'Content-Type',
+    'Authorization',
+    'Remote-User',
+    'Remote-Name',
+    'Remote-Email',
+    'Remote-Groups',
+    'X-Requested-With'
+  ],
+  exposedHeaders: ['Set-Cookie']
+}))
+
+// Options preflight
+app.options('/api/config/update', cors())
+
+// Raw body parser for YAML
+app.use(bodyParser.text({ type: 'text/yaml' }))
+
+// Authentication middleware
+const requireAuth = (req, res, next) => {
+  const user = req.headers['remote-user']
+  if (!user) {
+    return res.status(401).json({ error: 'Unauthorized' })
+  }
+  next()
+}
+
+app.post('/api/config/update', requireAuth, async (req, res) => {
+  try {
+    // Get the raw YAML content from the request body
+    const yamlContent = req.body
+
+    // Validate the YAML by trying to parse it
+    yaml.load(yamlContent)
+
+    // Write to the config file
+    const configPath = path.join('/var/www/html/homepage/public', 'config.yaml')
+    await fs.writeFile(configPath, yamlContent, 'utf8')
+
+    res.status(200).json({ message: 'Configuration updated successfully' })
+  } catch (error) {
+    console.error('Error updating configuration:', error)
+    res.status(500).json({ error: 'Failed to update configuration: ' + error.message })
+  }
+})
+
+// Health check endpoint
+app.get('/health', (req, res) => {
+  res.status(200).json({ status: 'ok' })
+})
+
+app.listen(PORT, () => {
+  console.log(`Config server listening on port ${PORT}`)
+}) 
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/house.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
+    <title>Kent.pw Homepage</title>
  </head>
  <body>
    <div id="root"></div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,12 +8,16 @@
      "name": "homepage",
      "version": "0.0.0",
      "dependencies": {
+        "@monaco-editor/react": "^4.6.0",
+        "@radix-ui/react-dialog": "^1.1.6",
        "@radix-ui/react-dropdown-menu": "^2.1.6",
        "@radix-ui/react-separator": "^1.1.2",
        "@radix-ui/react-slot": "^1.1.2",
        "@radix-ui/react-tooltip": "^1.1.8",
+        "@types/js-yaml": "^4.0.9",
        "class-variance-authority": "^0.7.1",
        "clsx": "^2.1.1",
+        "js-yaml": "^4.1.0",
        "lucide-react": "^0.474.0",
        "next-themes": "^0.4.4",
        "react": "^19.0.0",
@@ -1082,6 +1086,32 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@monaco-editor/loader": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/loader/-/loader-1.4.0.tgz",
+      "integrity": "sha512-00ioBig0x642hytVspPl7DbQyaSWRaolYie/UFNjoTdvoKPzo6xrXLhTk9ixgIKcLH5b5vDOjVNiGyY+uDCUlg==",
+      "license": "MIT",
+      "dependencies": {
+        "state-local": "^1.0.6"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.21.0 < 1"
+      }
+    },
+    "node_modules/@monaco-editor/react": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/@monaco-editor/react/-/react-4.6.0.tgz",
+      "integrity": "sha512-RFkU9/i7cN2bsq/iTkurMWOEErmYcY6JiQI3Jn+WeR/FGISH8JbHERjpS9oRuSOPvDMJI0Z8nJeKkbOs9sBYQw==",
+      "license": "MIT",
+      "dependencies": {
+        "@monaco-editor/loader": "^1.4.0"
+      },
+      "peerDependencies": {
+        "monaco-editor": ">= 0.25.0 < 1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
    "node_modules/@nodelib/fs.scandir": {
      "version": "2.1.5",
      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1212,6 +1242,42 @@
        }
      }
    },
+    "node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.6.tgz",
+      "integrity": "sha512-/IVhJV5AceX620DUJ4uYVMymzsipdKBzo3edo+omeskCKGm9FRHM0ebIdbPnlQVJqyuHbuBltQUOG2mOTq2IYw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.5",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.2",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.4",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.2",
+        "@radix-ui/react-slot": "1.1.2",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/@radix-ui/react-direction": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz",
@@ -2039,6 +2105,12 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/@types/js-yaml": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz",
+      "integrity": "sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==",
+      "license": "MIT"
+    },
    "node_modules/@types/json-schema": {
      "version": "7.0.15",
      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -2411,7 +2483,6 @@
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-      "dev": true,
      "license": "Python-2.0"
    },
    "node_modules/aria-hidden": {
@@ -3464,7 +3535,6 @@
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "argparse": "^2.0.1"
@@ -3648,6 +3718,13 @@
        "node": ">=16 || 14 >=14.17"
      }
    },
+    "node_modules/monaco-editor": {
+      "version": "0.52.2",
+      "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.52.2.tgz",
+      "integrity": "sha512-GEQWEZmfkOGLdd3XK8ryrfWz3AIP8YymVXiPHEdewrUq7mh0qrKrfHLNCXcbB6sTnMLnOZ3ztSiKcciFUkIJwQ==",
+      "license": "MIT",
+      "peer": true
+    },
    "node_modules/ms": {
      "version": "2.1.3",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -4361,6 +4438,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/state-local": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/state-local/-/state-local-1.0.7.tgz",
+      "integrity": "sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w==",
+      "license": "MIT"
+    },
    "node_modules/string-width": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
--- a/package.json
+++ b/package.json
@@ -10,12 +10,16 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@monaco-editor/react": "^4.6.0",
+    "@radix-ui/react-dialog": "^1.1.6",
    "@radix-ui/react-dropdown-menu": "^2.1.6",
    "@radix-ui/react-separator": "^1.1.2",
    "@radix-ui/react-slot": "^1.1.2",
    "@radix-ui/react-tooltip": "^1.1.8",
+    "@types/js-yaml": "^4.0.9",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
+    "js-yaml": "^4.1.0",
    "lucide-react": "^0.474.0",
    "next-themes": "^0.4.4",
    "react": "^19.0.0",
--- a/public/config.yaml
+++ b/public/config.yaml
@@ -0,0 +1,128 @@
+services:
+  - name: "Portainer"
+    description: "Container Management"
+    url: "https://portainer.kent.pw"
+    iconName: "portainer"
+    category: "system"
+
+  - name: "Gitea"
+    description: "Git Server"
+    url: "https://gitea.kent.pw"
+    iconName: "gitea"
+    category: "system"
+
+  - 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"
+
+  - name: "Plex"
+    description: "Media Server"
+    url: "https://plex.kent.pw"
+    iconName: "plex"
+    category: "media"
+
+  - name: "Sonarr"
+    description: "TV Show Management"
+    url: "https://sonarr.kent.pw"
+    iconName: "sonarr"
+    category: "media"
+
+  - 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"
+
+  - name: "Uptime"
+    description: "Service Monitoring"
+    url: "https://uptime.kent.pw"
+    iconName: "uptime-kuma"
+    category: "monitoring"
+    monitorName: "Uptime Kuma"
+
+  - name: "AdGuard"
+    description: "Network Ad Blocking"
+    url: "https://adguard.kent.pw"
+    iconName: "adguard-home"
+    category: "system"
+    monitorName: "Adguard Home"
+
+  - 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"
+
+  - name: "Speedtest"
+    description: "Network Speed Monitor"
+    url: "https://speedtest.kent.pw"
+    iconName: "speedtest-tracker"
+    category: "monitoring"
+    monitorName: "Speedtest Tracker"
+
+  - name: "Netdata"
+    description: "Monitoring Dashboard"
+    url: "https://netdata.kent.pw"
+    iconName: "netdata"
+    category: "monitoring"
+    monitorName: "Netdata"
+
+  - 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"
+
+  - 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"
+
+  - name: "Scrypted"
+    description: "Smart Home Integration"
+    url: "https://scrypted.kent.pw"
+    iconName: "scrypted"
+    category: "home" 
--- a/public/house.svg
+++ b/public/house.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></g></svg>
--- a/public/vite.svg
+++ b/public/vite.svg
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/server/api/config.js
+++ b/server/api/config.js
@@ -0,0 +1,27 @@
+const express = require('express')
+const fs = require('fs/promises')
+const path = require('path')
+const yaml = require('js-yaml')
+
+const router = express.Router()
+
+router.post('/api/config', async (req, res) => {
+  try {
+    // Get the raw YAML content from the request body
+    const yamlContent = req.body
+
+    // Validate the YAML by trying to parse it
+    yaml.load(yamlContent)
+
+    // Write to the config file
+    const configPath = path.join(process.cwd(), 'public', 'config.yaml')
+    await fs.writeFile(configPath, yamlContent, 'utf8')
+
+    res.status(200).json({ message: 'Configuration updated successfully' })
+  } catch (error) {
+    console.error('Error updating configuration:', error)
+    res.status(500).json({ error: 'Failed to update configuration' })
+  }
+})
+
+module.exports = router 
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -5,18 +5,13 @@ import { Moon, Sun, Monitor} from "lucide-react"
 import * as LucideIcons from "lucide-react"
 import { useTheme } from "@/components/theme-provider"
 import { useMetrics } from "./hooks/useMetrics"
+import { useConfig } from "./hooks/useConfig"
 import { ServiceStatus } from "./types/metrics"
+import { ServiceCard } from "./types/services"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
-
-interface ServiceCard {
-  name: string
-  description: string
-  url: string
-  icon?: React.ReactNode
-  iconName?: string
-  category: 'system' | 'media' | 'monitoring' | 'tools' | 'acot' | 'home'
-  monitorName?: string
-}
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
+import { AlertCircle } from "lucide-react"
+import { ConfigEditor } from './components/config-editor'

 const getIconUrl = (name: string | undefined, isDark: boolean = false): string => {
  if (!name) return ''
@@ -75,149 +70,6 @@ function ServiceIcon({ service, isDark }: { service: ServiceCard, isDark: boolea
  return <Icon className="h-6 w-6" />
 }

-const services: ServiceCard[] = [
-  {
-    name: "Portainer",
-    description: "Container Management",
-    url: "https://portainer.kent.pw",
-    iconName: "portainer",
-    category: "system"
-  },
-  {
-    name: "Gitea",
-    description: "Git Server",
-    url: "https://gitea.kent.pw",
-    iconName: "gitea",
-    category: "system"
-  },
-  {
-    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"
-  },
-  {
-    name: "Plex",
-    description: "Media Server",
-    url: "https://plex.kent.pw",
-    iconName: "plex",
-    category: "media"
-  },
-  {
-    name: "Sonarr",
-    description: "TV Show Management",
-    url: "https://sonarr.kent.pw",
-    iconName: "sonarr",
-    category: "media"
-  },
-  {
-    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"
-  },
-  {
-    name: "Uptime",
-    description: "Service Monitoring",
-    url: "https://uptime.kent.pw",
-    iconName: "uptime-kuma",
-    category: "monitoring",
-    monitorName: "Uptime Kuma"
-  },
-  {
-    name: "AdGuard",
-    description: "Network Ad Blocking",
-    url: "https://adguard.kent.pw",
-    iconName: "adguard-home",
-    category: "system",
-    monitorName: "Adguard Home"
-  },
-  {
-    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"
-  },
-  {
-    name: "Speedtest",
-    description: "Network Speed Monitor",
-    url: "https://speedtest.kent.pw",
-    iconName: "speedtest-tracker",
-    category: "monitoring",
-    monitorName: "Speedtest Tracker"
-  },
-  {
-    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"
-  },
-  {
-    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"
-  },
-  {
-    name: "Scrypted",
-    description: "Smart Home Integration",
-    url: "https://scrypted.kent.pw",
-    iconName: "scrypted",
-    category: "home"
-  }
-]
-
 function ThemeToggle() {
  const { theme, setTheme } = useTheme()

@@ -341,6 +193,8 @@ function ServiceSection({ title, services, metrics }: {
                return "bg-emerald-50 dark:bg-emerald-950/30"
              case "Speedtest":
                return "bg-blue-50 dark:bg-blue-950/30"
+              case "Netdata":
+                return "bg-purple-50 dark:bg-purple-950/30"
              default:
                return "bg-gray-50 dark:bg-gray-950/30"
            }
@@ -375,6 +229,8 @@ function ServiceSection({ title, services, metrics }: {
                return "text-emerald-600 dark:text-emerald-400"
              case "Speedtest":
                return "text-blue-600 dark:text-blue-400"
+              case "Netdata":
+                return "text-purple-600 dark:text-purple-400"
              default:
                return "text-gray-600 dark:text-gray-400"
            }
@@ -413,8 +269,12 @@ function ServiceSection({ title, services, metrics }: {
    </div>
  )
 }
+
 function App() {
  const { metrics } = useMetrics()
+  const { config, error, saveConfig } = useConfig()
+  const services = config.services
+
  const systemServices = services.filter(s => s.category === 'system')
  const mediaServices = services.filter(s => s.category === 'media')
  const monitoringServices = services.filter(s => s.category === 'monitoring')
@@ -426,15 +286,41 @@ function App() {
    <div className="min-h-screen p-8 space-y-8">
      <div className="flex justify-between items-center">
        <h1 className="text-4xl font-bold">Kent.pw Homepage</h1>
-        <ThemeToggle />
-      </div>
-      <ServiceSection title="System" services={systemServices} metrics={metrics} />
-      <ServiceSection title="Media" services={mediaServices} metrics={metrics} />
-      <ServiceSection title="Monitoring" services={monitoringServices} metrics={metrics} />
-      <ServiceSection title="Tools" services={toolServices} metrics={metrics} />
-      <ServiceSection title="ACOT" services={acotServices} metrics={metrics} />
-      <ServiceSection title="Home" services={homeServices} metrics={metrics} />
+        <div className="flex items-center gap-2">
+          <ConfigEditor currentConfig={config} onSave={saveConfig} />
+          <ThemeToggle />
+        </div>
      </div>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>
+            Failed to load configuration: {error}
+          </AlertDescription>
+        </Alert>
+      )}
+
+      {services.length > 0 ? (
+        <>
+          <ServiceSection title="System" services={systemServices} metrics={metrics} />
+          <ServiceSection title="Media" services={mediaServices} metrics={metrics} />
+          <ServiceSection title="Monitoring" services={monitoringServices} metrics={metrics} />
+          <ServiceSection title="Tools" services={toolServices} metrics={metrics} />
+          <ServiceSection title="ACOT" services={acotServices} metrics={metrics} />
+          <ServiceSection title="Home" services={homeServices} metrics={metrics} />
+        </>
+      ) : !error && (
+        <Alert>
+          <AlertCircle className="h-4 w-4" />
+          <AlertTitle>Loading</AlertTitle>
+          <AlertDescription>
+            Loading service configuration...
+          </AlertDescription>
+        </Alert>
+      )}
+    </div>
  )
 }

--- a/src/components/config-editor.tsx
+++ b/src/components/config-editor.tsx
@@ -0,0 +1,86 @@
+import { useEffect, useState } from 'react'
+import Editor from '@monaco-editor/react'
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet'
+import { Button } from '@/components/ui/button'
+import { Settings2 } from 'lucide-react'
+import yaml from 'js-yaml'
+import { ServiceCard } from '@/types/services'
+
+interface ConfigEditorProps {
+  currentConfig: { services: ServiceCard[] }
+  onSave: (newConfig: string) => Promise<void>
+}
+
+export function ConfigEditor({ currentConfig, onSave }: ConfigEditorProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [editorContent, setEditorContent] = useState('')
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    try {
+      const yamlString = yaml.dump(currentConfig, { indent: 2 })
+      setEditorContent(yamlString)
+      setError(null)
+    } catch (err) {
+      setError('Failed to convert configuration to YAML')
+      console.error('Error converting config to YAML:', err)
+    }
+  }, [currentConfig])
+
+  const handleSave = async () => {
+    try {
+      // Validate YAML
+      yaml.load(editorContent)
+      
+      // If validation passes, save
+      await onSave(editorContent)
+      setIsOpen(false)
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Invalid YAML format')
+    }
+  }
+
+  return (
+    <Sheet open={isOpen} onOpenChange={setIsOpen}>
+      <SheetTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Settings2 className="h-[1.2rem] w-[1.2rem]" />
+          <span className="sr-only">Edit configuration</span>
+        </Button>
+      </SheetTrigger>
+      <SheetContent className="w-[50vw] sm:max-w-[80vw]">
+        <SheetHeader>
+          <SheetTitle>Edit Configuration</SheetTitle>
+        </SheetHeader>
+        <div className="h-[80vh] mt-4">
+          <Editor
+            height="90%"
+            defaultLanguage="yaml"
+            value={editorContent}
+            onChange={(value) => setEditorContent(value || '')}
+            options={{
+              minimap: { enabled: false },
+              fontSize: 14,
+              lineNumbers: 'on',
+              scrollBeyondLastLine: false,
+              wordWrap: 'on',
+              wrappingIndent: 'indent',
+            }}
+          />
+          {error && (
+            <div className="text-red-500 text-sm mt-2">{error}</div>
+          )}
+          <div className="flex justify-end gap-2 mt-4">
+            <Button variant="outline" onClick={() => setIsOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleSave}>
+              Save Changes
+            </Button>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+} 
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }
--- a/src/components/ui/sheet.tsx
+++ b/src/components/ui/sheet.tsx
@@ -0,0 +1,138 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const Sheet = SheetPrimitive.Root
+
+const SheetTrigger = SheetPrimitive.Trigger
+
+const SheetClose = SheetPrimitive.Close
+
+const SheetPortal = SheetPrimitive.Portal
+
+const SheetOverlay = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+))
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
+
+const sheetVariants = cva(
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        bottom:
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
+  <SheetPortal>
+    <SheetOverlay />
+    <SheetPrimitive.Content
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+)
+SheetHeader.displayName = "SheetHeader"
+
+const SheetFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold text-foreground", className)}
+    {...props}
+  />
+))
+SheetTitle.displayName = SheetPrimitive.Title.displayName
+
+const SheetDescription = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <SheetPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+SheetDescription.displayName = SheetPrimitive.Description.displayName
+
+export {
+  Sheet,
+  SheetPortal,
+  SheetOverlay,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}
--- a/src/hooks/useConfig.ts
+++ b/src/hooks/useConfig.ts
@@ -0,0 +1,65 @@
+import { useState, useEffect } from 'react'
+import yaml from 'js-yaml'
+import { ServiceCard } from '../types/services'
+
+interface Config {
+  services: ServiceCard[]
+}
+
+export function useConfig() {
+  const [config, setConfig] = useState<Config>({ services: [] })
+  const [error, setError] = useState<string | null>(null)
+
+  const loadConfig = async () => {
+    try {
+      const response = await fetch('/config.yaml')
+      if (!response.ok) {
+        throw new Error('Failed to load configuration')
+      }
+      const text = await response.text()
+      const parsed = yaml.load(text) as Config
+      setConfig(parsed)
+      setError(null)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to load configuration')
+      console.error('Error loading configuration:', err)
+    }
+  }
+
+  const saveConfig = async (newConfig: string) => {
+    try {
+      const response = await fetch('/api/config/update', {
+        method: 'POST',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'text/yaml',
+        },
+        body: newConfig,
+      })
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({ error: 'Unknown error' }))
+        throw new Error(errorData.error || 'Failed to save configuration')
+      }
+
+      // Reload the config after saving
+      await loadConfig()
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to save configuration')
+      console.error('Error saving configuration:', err)
+      throw err
+    }
+  }
+
+  useEffect(() => {
+    // Load config immediately
+    loadConfig()
+
+    // Set up polling for config changes in production
+    const interval = setInterval(loadConfig, 30000) // Check every 30 seconds
+
+    return () => clearInterval(interval)
+  }, [])
+
+  return { config, error, saveConfig }
+} 
--- a/src/types/services.ts
+++ b/src/types/services.ts
@@ -0,0 +1,11 @@
+import { ReactNode } from 'react'
+
+export interface ServiceCard {
+  name: string
+  description: string
+  url: string
+  icon?: ReactNode
+  iconName?: string
+  category: 'system' | 'media' | 'monitoring' | 'tools' | 'acot' | 'home'
+  monitorName?: string
+}
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></g></svg>`
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>