specify platform to pick runner

.dockerignore

@@ -0,0 +1,40 @@
+# Node modules
+node_modules
+**/node_modules
+
+# Logs
+*.log
+logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build outputs
+build
+dist
+out
+.next
+.cache
+.parcel-cache
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE / Editor folders
+.vscode
+.idea
+*.sublime-workspace
+*.sublime-project
+
+# Temporary files
+*.swp
+*.bak
+*.tmp

.drone.yml

@@ -0,0 +1,72 @@
+---
+kind: pipeline
+type: docker
+name: default
+
+# Platform specification for ARM64 runners
+platform:
+  os: linux
+  arch: arm64
+
+steps:
+  # Step 1: Check if Docker image for current version already exists
+  - name: check-version
+    image: docker:24
+    environment:
+      DOCKER_HOST: unix:///var/run/docker.sock
+    commands:
+      - apk add --no-cache git
+      - git fetch --tags
+      - |
+        # Get the latest Git tag
+        LATEST_TAG=$(git describe --tags --abbrev=0)
+        echo "Latest Git tag: $LATEST_TAG"
+  
+        # Check if Docker image exists
+        if docker image inspect apps/homepage:$LATEST_TAG > /dev/null 2>&1; then
+          echo "Docker image apps/homepage:$LATEST_TAG already exists — skipping build"
+          exit 0
+        else
+          echo "Docker image apps/homepage:$LATEST_TAG not found — building..."
+        fi
+
+  # Step 2: Build Docker image with dynamic Git tag
+  - name: build-image
+    image: docker:24
+    environment:
+      DOCKER_HOST: unix:///var/run/docker.sock
+    commands:
+      - IMAGE_TAG=${DRONE_TAG:-latest}
+      - echo "Building Docker image apps/homepage:$IMAGE_TAG ..."
+      - docker build -t apps/homepage:$IMAGE_TAG .
+
+  # Step 3: Stop old container if exists
+  - name: stop-old
+    image: docker:24
+    environment:
+      DOCKER_HOST: unix:///var/run/docker.sock
+    commands:
+      - IMAGE_TAG=${DRONE_TAG:-latest}
+      - echo "Stopping old container..."
+      - docker rm -f homepage || true
+
+  # Step 4: Run container with dynamic tag
+  - name: run-container
+    image: docker:24
+    environment:
+      DOCKER_HOST: unix:///var/run/docker.sock
+    commands:
+      - IMAGE_TAG=${DRONE_TAG:-latest}
+      - echo "Starting container apps/homepage:$IMAGE_TAG ..."
+      - docker run -d \
+          --name homepage \
+          -p 3001:3000 \
+          -e NODE_ENV=production \
+          apps/homepage:$IMAGE_TAG
+
+# Trigger pipeline on Git tags
+trigger:
+  event:
+    - push
+    - tag
+    - custom

.idea/homepage.iml

@@ -1,7 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <module type="PYTHON_MODULE" version="4">
   <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$" />
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.react-router" />
+    </content>
     <orderEntry type="inheritedJdk" />
     <orderEntry type="sourceFolder" forTests="false" />
   </component>

Dockerfile

@@ -0,0 +1,33 @@
+# Stage 1: Build
+FROM node:20-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json (or yarn.lock)
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy the rest of the app
+COPY . .
+
+# Build the app (React/Next/etc.)
+RUN npm run build
+
+# Stage 2: Production image
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Copy only build output and dependencies
+COPY --from=builder /app/package*.json ./
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/build ./build
+
+# Expose port
+EXPOSE 3000
+
+# Default command
+CMD ["npm", "start"]

app/routes/home.tsx

@@ -6,162 +6,90 @@ 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"},
-        {
-            name: "description",
-            content:
-                "Welcome to Material UI - React Router example in TypeScript!",
-        },
-    ];
+  return [
+    { title: "Aetoskia Hideout" },
+    {
+      name: "description",
+      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,
-        },
-    ],
-    core: [
-        {
-            name: "Gitea",
-            url: "http://gitea.aetoskia.com",
-            desc: "Hosted on Core Server",
-            external: true,
-        },
-    ],
+  media: [
+    { 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 },
+  ],
+  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
-                sx={{
-                    minHeight: "100vh",
-                    backgroundImage: "url('/aetos_sigil.jpg')",
-                    backgroundSize: "cover",
-                    backgroundRepeat: "no-repeat",
-                    backgroundPosition: "center",
-                    display: "flex",
-                    flexDirection: "column",
-                }}
-            >
-                {/* Top section */}
-                <Box sx={{py: 6, textAlign: "center"}}>
-                    <Typography variant="h3" sx={{color: "success.main"}}>
-                        Aetos Hideout
-                    </Typography>
-                </Box>
+  return (
+    <Container maxWidth="lg">
+      <Box
+        sx={{
+          minHeight: "120vh",
+          backgroundImage: "url('/extended_sigil.png')",
+          backgroundSize: "cover",
+          backgroundRepeat: "no-repeat",
+          backgroundPosition: "center",
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <Box sx={{ flex: 1 }} />
 
-                {/* Spacer pushes bottom part down */}
-                <Box sx={{flex: 1}}/>
-
-                {/* Bottom dashboard */}
-                <Container maxWidth="lg" sx={{mb: 4}}>=
-                    <Typography
-                        variant="h5"
-                        align="center"
-                        sx={{color: "warning.main", mt: 4, mb: 2}}
+        <Box sx={{ height: "60vh", overflowY: "auto", p: 2 }}>
+          <Container
+            maxWidth="lg"
+            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 }}
+                >
+                  {sectionName.charAt(0).toUpperCase() + sectionName.slice(1)} Services
+                </Typography>
+                <Grid container spacing={3} justifyContent="center">
+                  {serviceList.map((s) => (
+                    <Paper
+                      key={s.name}
+                      elevation={3}
+                      sx={{ p: 2, textAlign: "center", bgcolor: "#2d2d2d", borderRadius: 2 }}
                     >
-                        Core Services
-                    </Typography>
-                    <Grid container spacing={3} justifyContent="center">
-                        {services.core.map((s) => (
-                            <Grid item xs={12} sm={6} md={4} key={s.name}>
-                                <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>
-                            </Grid>
-                        ))}
-                    </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) => (
-                            <Grid component="div" item xs={12} sm={6} md={4} key={s.name}>
-                                <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>
-                            </Grid>
-                        ))}
-                    </Grid>
-                </Container>
-            </Box>
-        </Container>
-    );
+                      <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>
+                  ))}
+                </Grid>
+              </React.Fragment>
+            ))}
+          </Container>
+        </Box>
+      </Box>
+    </Container>
+  );
 }

docker-compose.yaml

@@ -0,0 +1,13 @@
+services:
+  homepage:
+    build:
+      context: .
+      dockerfile: Dockerfile
+#      network: host
+    container_name: homepage
+    image: apps/homepage:0.0.5
+    ports:
+      - "3001:3000"   # map host port 3000 to container
+    environment:
+      NODE_ENV: production
+    restart: unless-stopped

package.json

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