added docker-compose.yaml

.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

.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

@@ -40,11 +40,11 @@ const services = {
             url: "http://radarr.aetoskia.com",
             desc: "Movie management",
         },
-        {
-            name: "Prowlarr",
-            url: "http://prowlarr.aetoskia.com",
-            desc: "Indexer management",
-        },
+        // {
+        //     name: "Prowlarr",
+        //     url: "http://prowlarr.aetoskia.com",
+        //     desc: "Indexer management",
+        // },
         {
             name: "qBittorrent",
             url: "http://qbit.aetoskia.com",
@@ -68,8 +68,8 @@ export default function Home() {
         <Container maxWidth="lg">
             <Box
                 sx={{
-                    minHeight: "100vh",
-                    backgroundImage: "url('/aetos_sigil.jpg')",
+                    minHeight: "120vh",
+                    backgroundImage: "url('/extended_sigil.png')",
                     backgroundSize: "cover",
                     backgroundRepeat: "no-repeat",
                     backgroundPosition: "center",
@@ -77,28 +77,35 @@ export default function Home() {
                     flexDirection: "column",
                 }}
             >
-                {/* Top section */}
-                <Box sx={{py: 6, textAlign: "center"}}>
-                    <Typography variant="h3" sx={{color: "success.main"}}>
-                        Aetos Hideout
-                    </Typography>
-                </Box>
-
                 {/* 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}}
+                {/* Bottom dashboard: only 50% height of viewport */}
+                <Box
+                    sx={{
+                        height: "60vh", // 50% of viewport height
+                        overflowY: "auto", // scroll if content overflows
+                        p: 2,
+                    }}
+                >
+                    <Container
+                        maxWidth="lg"
+                        sx={{
+                            bgcolor: "#1a1a1a", // dark background
+                            borderRadius: 3,
+                            p: 3,
+                            boxShadow: 6,
+                        }}
                     >
-                        Core Services
-                    </Typography>
-                    <Grid container spacing={3} justifyContent="center">
-                        {services.core.map((s) => (
-                            <Grid item xs={12} sm={6} md={4} key={s.name}>
+                        <Typography
+                            variant="h5"
+                            align="center"
+                            sx={{color: "warning.main", mt: 4, mb: 2}}
+                        >
+                            Core Services
+                        </Typography>
+                        <Grid container spacing={3} justifyContent="center">
+                            {services.core.map((s) => (
                                 <Paper
                                     elevation={3}
                                     sx={{
@@ -121,20 +128,18 @@ export default function Home() {
                                         {s.desc}
                                     </Typography>
                                 </Paper>
-                            </Grid>
-                        ))}
-                    </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}>
+                        <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={{
@@ -157,11 +162,12 @@ export default function Home() {
                                         {s.desc}
                                     </Typography>
                                 </Paper>
-                            </Grid>
-                        ))}
-                    </Grid>
-                </Container>
+                            ))}
+                        </Grid>
+                    </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.1
+    ports:
+      - "3001:3000"   # map host port 3000 to container
+    environment:
+      NODE_ENV: production
+    restart: unless-stopped