added Netdata in monitoring services

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

.drone.yml

@@ -0,0 +1,107 @@
+---
+kind: pipeline
+type: docker
+name: default
+
+platform:
+  os: linux
+  arch: arm64
+
+workspace:
+  path: /drone/src
+
+steps:
+  - 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
+
+  - 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
+
+  - 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 .
+
+  - name: push-image
+    image: docker:24
+    environment:
+      DOCKER_HOST: tcp://192.168.1.111:2376
+      REGISTRY_HOST:
+        from_secret: REGISTRY_HOST
+      REGISTRY_USER:
+        from_secret: REGISTRY_USER
+      REGISTRY_PASS:
+        from_secret: REGISTRY_PASS
+    commands:
+      - |
+        IMAGE_TAG=$(cat /drone/src/LATEST_TAG.txt)
+        if [ -z "$IMAGE_TAG" ]; then
+          echo "❌ No tag found in LATEST_TAG.txt — cannot push."
+          exit 1
+        fi
+        echo "🔑 Logging into registry $REGISTRY_HOST ..."
+        echo "$REGISTRY_PASS" | docker login $REGISTRY_HOST -u "$REGISTRY_USER" --password-stdin
+        echo "📤 Pushing apps/homepage:$IMAGE_TAG ..."
+        docker push $REGISTRY_HOST/apps/homepage:$IMAGE_TAG
+        echo "📤 Pushing apps/homepage:latest ..."
+        docker push $REGISTRY_HOST/apps/homepage:latest
+
+  - 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
+
+  - 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 \
+          --restart always \
+          apps/homepage:$IMAGE_TAG
+
+# Trigger rules
+trigger:
+  event:
+    - tag

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

app/components/Copyright.tsx

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import Typography from '@mui/material/Typography';
-import MuiLink from '@mui/material/Link';
-
-export default function Copyright() {
-  return (
-    <Typography
-      variant="body2"
-      align="center"
-      sx={{
-        color: 'text.secondary',
-      }}
-    >
-      {'Copyright © '}
-      <MuiLink color="inherit" href="https://mui.com/">
-        Your Website
-      </MuiLink>{' '}
-      {new Date().getFullYear()}.
-    </Typography>
-  );
-}

app/components/ProTip.tsx

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import Link from '@mui/material/Link';
-import SvgIcon, { type SvgIconProps } from '@mui/material/SvgIcon';
-import Typography from '@mui/material/Typography';
-
-function LightBulbIcon(props: SvgIconProps) {
-  return (
-    <SvgIcon {...props}>
-      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
-    </SvgIcon>
-  );
-}
-
-export default function ProTip() {
-  return (
-    <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
-      <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
-      {'Pro tip: See more '}
-      <Link href="https://mui.com/material-ui/getting-started/templates/">templates</Link>
-      {' in the Material UI documentation.'}
-    </Typography>
-  );
-}

app/components/ServiceList.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import {Grid, Paper, Link, Typography} from '@mui/material';
+
+interface ServiceList {
+  name: string;
+  url: string;
+  desc: string;
+  external?: boolean;
+}
+
+interface ServiceListProps {
+  serviceList: ServiceList[];
+}
+
+const ServiceList: React.FC<ServiceListProps> = ({serviceList}) => {
+  return (
+    <Box
+      sx={{
+        flex: 1,
+        overflowY: 'auto', // ✅ Scroll only inside this
+      }}
+    >
+      <Grid container spacing={3} justifyContent="center">
+        {serviceList.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>
+        ))}
+      </Grid>
+    </Box>
+  );
+};
+
+export default ServiceList;

app/components/Services.tsx

@@ -0,0 +1,265 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Card from '@mui/material/Card';
+import MuiChip from '@mui/material/Chip';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import {styled} from '@mui/material/styles';
+
+import PermMediaIcon from '@mui/icons-material/PermMedia';
+import CodeIcon from '@mui/icons-material/Code';
+import MonitorHeartIcon from '@mui/icons-material/MonitorHeart';
+
+import ServiceList from "~/components/ServiceList";
+
+const items = [
+  {
+    icon: <PermMediaIcon/>,
+    title: 'The Vox Sanctum',
+    serviceList: [
+      {
+        name: "Jellyseerr",
+        url: "https://jellyseerr.aetoskia.com",
+        desc: "Summon films and series from the digital void.",
+        external: true
+      },
+      {
+        name: "Sonarr",
+        url: "https://sonarr.aetoskia.com",
+        desc: "Keep the endless chronicles of TV under iron control.",
+        external: true
+      },
+      {
+        name: "Radarr",
+        url: "https://radarr.aetoskia.com",
+        desc: "Command the legions of cinema, enforce cinematic order.",
+        external: true
+      },
+    ],
+    description:
+      "Behold the archive of visual legends, where the eternal campaigns of film and series march forth in eternal crusade against chaos and forgetfulness.",
+  },
+  {
+    icon: <CodeIcon/>,
+    title: 'The Forge Conclave',
+    serviceList: [
+      {
+        name: "Gitea",
+        url: "https://gitea.aetoskia.com",
+        desc: "Forge and safeguard code like a sacred relic.",
+        external: true
+      },
+      {
+        name: "Registry",
+        url: "https://registry.aetoskia.com",
+        desc: "Monitor core constructs of the digital empire.",
+        external: true
+      },
+      {
+        name: "Drone",
+        url: "https://drone.aetoskia.com",
+        desc: "Automaton architect, building pipelines of perfection.",
+        external: true
+      },
+    ],
+    description:
+      "The bastion of creation — where code is forged in the fires of discipline, guarded like relics, and deployed with unyielding precision to uphold the empire's might.",
+  },
+  {
+    icon: <MonitorHeartIcon/>,
+    title: 'The Vigilant Watch',
+    serviceList: [
+      {
+        name: "Netdata",
+        url: "https://netdata.aetoskia.com",
+        desc: "Watch over the mechanized legions and digital armories with the unblinking eye of the Omnissiah.",
+        external: true
+      },
+      {
+        name: "Portainer",
+        url: "https://portainer.aetoskia.com",
+        desc: "Oversee the fleet of containers with unyielding vigilance.",
+        external: true
+      },
+      {
+        name: "Traefik",
+        url: "https://traefik.aetoskia.com",
+        desc: "Marshal your gateways and protect the flow between realms.",
+        external: true
+      },
+    ],
+    description:
+      "Eyes ever watchful, guarding the realm’s sanctity — these sentinels oversee the flow of life and command the paths between digital dominions.",
+  },
+];
+
+interface ChipProps {
+  selected?: boolean;
+}
+
+const Chip = styled(MuiChip)<ChipProps>(({theme}) => ({
+  variants: [
+    {
+      props: ({selected}) => !!selected,
+      style: {
+        background:
+          'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))',
+        color: 'hsl(0, 0%, 100%)',
+        borderColor: (theme.vars || theme).palette.primary.light,
+        '& .MuiChip-label': {
+          color: 'hsl(0, 0%, 100%)',
+        },
+        ...theme.applyStyles('dark', {
+          borderColor: (theme.vars || theme).palette.primary.dark,
+        }),
+      },
+    },
+  ],
+}));
+
+interface MobileLayoutProps {
+  selectedItemIndex: number;
+  handleItemClick: (index: number) => void;
+  selectedFeature: (typeof items)[0];
+}
+
+export function MobileLayout({
+                               selectedItemIndex,
+                               handleItemClick,
+                               selectedFeature,
+                             }: MobileLayoutProps) {
+  if (!items[selectedItemIndex]) {
+    return null;
+  }
+
+  return (
+    <Box
+      sx={{
+        display: {xs: 'flex', sm: 'none'},
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
+      <Box sx={{display: 'flex', gap: 2, overflow: 'auto'}}>
+        {items.map(({title}, index) => (
+          <Chip
+            size="medium"
+            key={index}
+            label={title}
+            onClick={() => handleItemClick(index)}
+            selected={selectedItemIndex === index}
+          />
+        ))}
+      </Box>
+      <Card variant="outlined">
+        <Box sx={{px: 2, pb: 2}}>
+          <Typography
+            gutterBottom
+            sx={{color: 'text.primary', fontWeight: 'medium'}}
+          >
+            {selectedFeature.title}
+          </Typography>
+          <Typography variant="body2" sx={{color: 'text.secondary', mb: 1.5}}>
+            {selectedFeature.description}
+          </Typography>
+        </Box>
+        <ServiceList serviceList={selectedFeature.serviceList} />
+      </Card>
+    </Box>
+  );
+}
+
+export default function Services() {
+  const [selectedItemIndex, setSelectedItemIndex] = React.useState(0);
+
+  const handleItemClick = (index: number) => {
+    setSelectedItemIndex(index);
+  };
+
+  const selectedFeature = items[selectedItemIndex];
+
+  return (
+    <Container id="features" sx={{bgcolor: "#1a1a1a", borderRadius: 3, p: 3, boxShadow: 6}}>
+      <Box
+        sx={{
+          display: 'flex',
+          flexDirection: {xs: 'column', md: 'row-reverse'},
+          gap: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: {xs: 'none', sm: 'flex'},
+            flexDirection: 'column',
+            gap: 2,
+            height: '100%',
+          }}
+        >
+          {items.map(({icon, title, description}, index) => (
+            <Box
+              key={index}
+              component={Button}
+              onClick={() => handleItemClick(index)}
+              sx={[
+                (theme) => ({
+                  p: 2,
+                  height: '100%',
+                  width: '100%',
+                  '&:hover': {
+                    backgroundColor: (theme.vars || theme).palette.action.hover,
+                  },
+                }),
+                selectedItemIndex === index && {
+                  backgroundColor: 'action.selected',
+                },
+              ]}
+            >
+              <Box
+                sx={[
+                  {
+                    width: '100%',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'left',
+                    gap: 1,
+                    textAlign: 'left',
+                    textTransform: 'none',
+                    color: 'text.secondary',
+                  },
+                  selectedItemIndex === index && {
+                    color: 'text.primary',
+                  },
+                ]}
+              >
+                <Typography variant="h6">{icon} {title}</Typography>
+                <Typography variant="body2">{description}</Typography>
+              </Box>
+            </Box>
+          ))}
+        </Box>
+        <MobileLayout
+          selectedItemIndex={selectedItemIndex}
+          handleItemClick={handleItemClick}
+          selectedFeature={selectedFeature}
+        />
+        <Box
+          sx={{
+            display: {xs: 'none', sm: 'flex'},
+            width: {xs: '100%', md: '70%'},
+          }}
+        >
+          <Card
+            variant="outlined"
+            sx={{
+              display: {xs: 'none', sm: 'flex'},
+              maxHeight: '50vh',
+            }}
+          >
+            <ServiceList serviceList={selectedFeature.serviceList} />
+          </Card>
+        </Box>
+      </Box>
+    </Container>
+  );
+}

app/routes.ts

@@ -2,5 +2,4 @@ import { type RouteConfig, index, route } from '@react-router/dev/routes';
 
 export default [
   index('routes/home.tsx'),
-  route('/about', 'routes/about.tsx'),
 ] satisfies RouteConfig;

app/routes/about.tsx

@@ -1,45 +0,0 @@
-import * as React from 'react';
-import Container from '@mui/material/Container';
-import Typography from '@mui/material/Typography';
-import Box from '@mui/material/Box';
-import Button from '@mui/material/Button';
-import { Link as ReactRouterLink } from 'react-router';
-import ProTip from '~/components/ProTip';
-import Copyright from '~/components/Copyright';
-
-export function meta() {
-  return [
-    { title: 'About' },
-    {
-      name: 'description',
-      content: 'About the project',
-    },
-  ];
-}
-
-export default function About() {
-  return (
-    <Container maxWidth="lg">
-      <Box
-        sx={{
-          my: 4,
-          display: 'flex',
-          flexDirection: 'column',
-          justifyContent: 'center',
-          alignItems: 'center',
-        }}
-      >
-        <Typography variant="h4" component="h1" sx={{ mb: 2 }}>
-          Material UI - Next.js example in TypeScript
-        </Typography>
-        <Box sx={{ maxWidth: 'sm' }}>
-          <Button variant="contained" component={ReactRouterLink} to="/">
-            Go to the home page
-          </Button>
-        </Box>
-        <ProTip />
-        <Copyright />
-      </Box>
-    </Container>
-  );
-}

app/routes/home.tsx

@@ -1,10 +1,7 @@
 import * as React from "react";
 import Container from "@mui/material/Container";
-import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
-import Link from "@mui/material/Link";
-import Grid from "@mui/material/Grid";
-import Paper from "@mui/material/Paper";
+import Services from "~/components/Services";
 
 export function meta() {
   return [
@@ -16,78 +13,26 @@ export function meta() {
   ];
 }
 
-const services = {
-  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: "DCR", url: "http://dcr.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() {
   return (
-    <Container maxWidth="lg">
+    <Container
+      maxWidth={false}
+    >
       <Box
         sx={{
-          minHeight: "120vh",
-          backgroundImage: "url('/extended_sigil.png')",
+          minHeight: "100vh",
+          backgroundImage: "url('/header_sigil.png')",
           backgroundSize: "cover",
           backgroundRepeat: "no-repeat",
-          backgroundPosition: "center",
+          backgroundPosition: "top center",
           display: "flex",
           flexDirection: "column",
         }}
       >
         <Box sx={{ flex: 1 }} />
 
-        <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 }}
-                    >
-                      <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 sx={{ height: "60vh", overflowY: "auto" }}>
+          <Services />
         </Box>
       </Box>
     </Container>

docker-compose.yaml

@@ -5,7 +5,7 @@ services:
       dockerfile: Dockerfile
 #      network: host
     container_name: homepage
-    image: apps/homepage:0.0.2
+    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": {