Update .drone.yml

using LATEST_TAG instead of DRONE_TAG which not be present if the push itsn't for tag push

.drone.yml

@@ -0,0 +1,90 @@
+---
+kind: pipeline
+type: docker
+name: default
+
+# ARM64 platform (for your Pi runner)
+platform:
+  os: linux
+  arch: arm64
+
+workspace:
+  path: /drone/src
+
+steps:
+  # Step 1a: Git fetch tags locally
+  - name: fetch-tags
+    image: docker:24
+    environment:
+      DOCKER_HOST: unix:///var/run/docker.sock   # local Docker, if needed
+    commands:
+      - apk add --no-cache git
+      - git fetch --tags
+      - |
+        LATEST_TAG=$(git describe --tags --abbrev=0)
+        echo "Latest Git tag fetched: $LATEST_TAG"
+        # Save to file to share with next step
+        echo $LATEST_TAG > /drone/src/LATEST_TAG.txt
+
+  # Step 1b: Check if image exists on remote LAN Docker
+  - name: check-remote-image
+    image: docker:24
+    environment:
+      DOCKER_HOST: tcp://192.168.1.111:2376   # remote Docker
+    commands:
+      - IMAGE_TAG=$(cat /drone/src/LATEST_TAG.txt)
+      - echo "Checking if apps/homepage:$IMAGE_TAG exists on remote Docker..."
+      - |
+        if docker image inspect apps/homepage:$IMAGE_TAG > /dev/null 2>&1; then
+          echo "✅ Docker image apps/homepage:$IMAGE_TAG already exists — skipping build";
+          exit 78;   # stop pipeline gracefully
+        else
+          echo "⚙️ Docker image apps/homepage:$IMAGE_TAG not found — proceeding to build...";
+        fi
+
+  # Step 2: Build Docker image (dynamic tag)
+  - name: build-image
+    image: docker:24
+    environment:
+      DOCKER_HOST: tcp://192.168.1.111:2376
+    commands:
+      - |
+        IMAGE_TAG=$(cat /drone/src/LATEST_TAG.txt)
+        if [ -z "$IMAGE_TAG" ]; then
+          echo "❌ No tag found in LATEST_TAG.txt — cannot build."
+          exit 1
+        fi
+        echo "🔨 Building Docker image apps/homepage:$IMAGE_TAG ..."
+        docker build --network=host -t apps/homepage:$IMAGE_TAG -t apps/homepage:latest 
+
+  # Step 3: Stop old container (if exists)
+  - name: stop-old
+    image: docker:24
+    environment:
+      DOCKER_HOST: tcp://192.168.1.111:2376
+    commands:
+      - |
+        echo "🛑 Stopping old container..."
+        docker rm -f homepage || true
+
+  # Step 4: Run container
+  - name: run-container
+    image: docker:24
+    environment:
+      DOCKER_HOST: tcp://192.168.1.111:2376
+    commands:
+      - |
+        IMAGE_TAG=$(cat /drone/src/LATEST_TAG.txt)
+        echo "🚀 Starting container apps/homepage:$IMAGE_TAG ..."
+        docker run -d \
+          --name homepage \
+          -p 3001:3000 \
+          -e NODE_ENV=production \
+          apps/homepage:$IMAGE_TAG
+
+# Trigger rules
+trigger:
+  event:
+    - push
+    - tag
+    - custom

app/routes/home.tsx

@@ -6,64 +6,34 @@ import Link from "@mui/material/Link";
 import Grid from "@mui/material/Grid";
 import Paper from "@mui/material/Paper";
 
-
 export function meta() {
   return [
-        {title: "Material UI - React Router example in TypeScript"},
+    { title: "Aetoskia Hideout" },
     {
       name: "description",
-            content:
-                "Welcome to Material UI - React Router example in TypeScript!",
+      content: "Welcome to Aetoskia's Hideout!",
     },
   ];
 }
 
 const services = {
   media: [
-        {
-            name: "Jellyseerr",
-            url: "http://jellyseerr.aetoskia.com",
-            desc: "Request movies & TV shows",
-        },
-        // {
-        //   name: "Ombi",
-        //   url: "http://ombi.aetoskia.com",
-        //   desc: "Request movies & TV shows",
-        // },
-        {
-            name: "Sonarr",
-            url: "http://sonarr.aetoskia.com",
-            desc: "TV series management",
-        },
-        {
-            name: "Radarr",
-            url: "http://radarr.aetoskia.com",
-            desc: "Movie management",
-        },
-        // {
-        //     name: "Prowlarr",
-        //     url: "http://prowlarr.aetoskia.com",
-        //     desc: "Indexer management",
-        // },
-        {
-            name: "qBittorrent",
-            url: "http://qbit.aetoskia.com",
-            desc: "Download client & torrent manager",
-            external: true,
-        },
+    { name: "Jellyseerr", url: "http://jellyseerr.aetoskia.com", desc: "Summon films and series from the digital void.", external: true },
+    { name: "Sonarr", url: "http://sonarr.aetoskia.com", desc: "Keep the endless chronicles of TV under iron control.", external: true },
+    { name: "Radarr", url: "http://radarr.aetoskia.com", desc: "Command the legions of cinema, enforce cinematic order.", external: true },
+    { name: "qBit", url: "http://qbit.aetoskia.com", desc: "Torrent war engine, fetching data across the nether realms.", external: true },
   ],
-    core: [
-        {
-            name: "Gitea",
-            url: "http://gitea.aetoskia.com",
-            desc: "Hosted on Core Server",
-            external: true,
-        },
+  codebase: [
+    { name: "Gitea", url: "http://gitea.aetoskia.com", desc: "Forge and safeguard code like a sacred relic.", external: true },
+    { name: "Registry", url: "http://registry.aetoskia.com", desc: "Monitor core constructs of the digital empire.", external: true },
+    { name: "Drone", url: "http://drone.aetoskia.com", desc: "Automaton architect, building pipelines of perfection.", external: true },
+  ],
+  monitoring: [
+    { name: "Portainer", url: "http://portainer.aetoskia.com", desc: "Oversee the fleet of containers with unyielding vigilance.", external: true },
   ],
 };
 
 export default function Home() {
-    // @ts-ignore
   return (
     <Container maxWidth="lg">
       <Box
@@ -77,97 +47,49 @@ export default function Home() {
           flexDirection: "column",
         }}
       >
-                {/* Spacer pushes bottom part down */}
-                <Box sx={{flex: 1}}/>
+        <Box sx={{ flex: 1 }} />
 
-                {/* Bottom dashboard: only 50% height of viewport */}
-                <Box
-                    sx={{
-                        height: "60vh", // 50% of viewport height
-                        overflowY: "auto", // scroll if content overflows
-                        p: 2,
-                    }}
-                >
+        <Box sx={{ height: "60vh", overflowY: "auto", p: 2 }}>
           <Container
             maxWidth="lg"
-                        sx={{
-                            bgcolor: "#1a1a1a", // dark background
-                            borderRadius: 3,
-                            p: 3,
-                            boxShadow: 6,
-                        }}
+            sx={{ bgcolor: "#1a1a1a", borderRadius: 3, p: 3, boxShadow: 6 }}
           >
+            {Object.entries(services).map(([sectionName, serviceList]) => (
+              <React.Fragment key={sectionName}>
                 <Typography
                   variant="h5"
                   align="center"
-                            sx={{color: "warning.main", mt: 4, mb: 2}}
+                  sx={{ color: "warning.main", mt: 4, mb: 2 }}
                 >
-                            Core Services
+                  {sectionName.charAt(0).toUpperCase() + sectionName.slice(1)} Services
                 </Typography>
                 <Grid container spacing={3} justifyContent="center">
-                            {services.core.map((s) => (
+                  {serviceList.map((s) => (
                     <Paper
+                      key={s.name}
                       elevation={3}
-                                    sx={{
-                                        p: 2,
-                                        textAlign: "center",
-                                        bgcolor: "#2d2d2d",
-                                        borderRadius: 2,
-                                    }}
+                      sx={{ p: 2, textAlign: "center", bgcolor: "#2d2d2d", borderRadius: 2 }}
                     >
                       <Link
                         href={s.url}
                         target={s.external ? "_blank" : undefined}
                         rel="noopener"
                         underline="none"
-                                        sx={{fontSize: 18, fontWeight: "bold", color: "success.main"}}
+                        sx={{ fontSize: 18, fontWeight: "bold", color: "success.main" }}
                       >
                         {s.name}
                       </Link>
-                                    <Typography variant="body2" sx={{mt: 1, color: "#ccc"}}>
+                      <Typography variant="body2" sx={{ mt: 1, color: "#ccc" }}>
                         {s.desc}
                       </Typography>
                     </Paper>
                   ))}
                 </Grid>
-
-                        <Typography
-                            variant="h5"
-                            align="center"
-                            sx={{color: "warning.main", mt: 4, mb: 2}}
-                        >
-                            Media Services
-                        </Typography>
-                        <Grid container spacing={3} justifyContent="center">
-                            {services.media.map((s) => (
-                                <Paper
-                                    elevation={3}
-                                    sx={{
-                                        p: 2,
-                                        textAlign: "center",
-                                        bgcolor: "#2d2d2d",
-                                        borderRadius: 2,
-                                    }}
-                                >
-                                    <Link
-                                        href={s.url}
-                                        target={s.external ? "_blank" : undefined}
-                                        rel="noopener"
-                                        underline="none"
-                                        sx={{fontSize: 18, fontWeight: "bold", color: "success.main"}}
-                                    >
-                                        {s.name}
-                                    </Link>
-                                    <Typography variant="body2" sx={{mt: 1, color: "#ccc"}}>
-                                        {s.desc}
-                                    </Typography>
-                                </Paper>
+              </React.Fragment>
             ))}
-                        </Grid>
           </Container>
         </Box>
       </Box>
     </Container>
-
   );
 }

docker-compose.yaml

@@ -5,7 +5,7 @@ services:
       dockerfile: Dockerfile
 #      network: host
     container_name: homepage
-    image: apps/homepage:0.0.1
+    image: apps/homepage:0.0.5
     ports:
       - "3001:3000"   # map host port 3000 to container
     environment:

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "material-ui-react-router-ts",
+  "name": "homepage",
   "private": true,
   "type": "module",
   "scripts": {