added Netdata in monitoring services

.drone.yml

@@ -3,7 +3,6 @@ kind: pipeline
 type: docker
 name: default
 
-# ARM64 platform (for your Pi runner)
 platform:
   os: linux
   arch: arm64
@@ -12,7 +11,6 @@ workspace:
   path: /drone/src
 
 steps:
-  # Step 1a: Git fetch tags locally
   - name: fetch-tags
     image: docker:24
     environment:
@@ -26,7 +24,6 @@ steps:
         # 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:
@@ -42,7 +39,6 @@ steps:
           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:
@@ -57,7 +53,30 @@ steps:
         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: 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:
@@ -67,7 +86,6 @@ steps:
         echo "🛑 Stopping old container..."
         docker rm -f homepage || true
 
-  # Step 4: Run container
   - name: run-container
     image: docker:24
     environment:
@@ -80,11 +98,10 @@ steps:
           --name homepage \
           -p 3001:3000 \
           -e NODE_ENV=production \
+          --restart always \
           apps/homepage:$IMAGE_TAG
 
 # Trigger rules
 trigger:
   event:
-    - push
     - tag
-    - custom

.idea/codeStyles/codeStyleConfig.xml

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

app/components/ServiceList.tsx

@@ -1,41 +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;
+  name: string;
+  url: string;
+  desc: string;
+  external?: boolean;
 }
 
 interface ServiceListProps {
-    serviceList: ServiceList[];
+  serviceList: ServiceList[];
 }
 
 const ServiceList: React.FC<ServiceListProps> = ({serviceList}) => {
-    return (
-        <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>
-    );
+  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

@@ -5,7 +5,7 @@ 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 {styled} from '@mui/material/styles';
 
 import PermMediaIcon from '@mui/icons-material/PermMedia';
 import CodeIcon from '@mui/icons-material/Code';
@@ -15,33 +15,79 @@ import ServiceList from "~/components/ServiceList";
 
 const items = [
   {
-    icon: <PermMediaIcon />,
+    icon: <PermMediaIcon/>,
     title: 'The Vox Sanctum',
     serviceList: [
-      { 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: "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 />,
+    icon: <CodeIcon/>,
     title: 'The Forge Conclave',
     serviceList: [
-      { 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 },
+      {
+        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 />,
+    icon: <MonitorHeartIcon/>,
     title: 'The Vigilant Watch',
     serviceList: [
-      { name: "Portainer", url: "http://portainer.aetoskia.com", desc: "Oversee the fleet of containers with unyielding vigilance.", external: true },
-      { name: "Traefik", url: "http://traefik.aetoskia.com", desc: "Marshal your gateways and protect the flow between realms.", external: true },
+      {
+        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.",
@@ -52,10 +98,10 @@ interface ChipProps {
   selected?: boolean;
 }
 
-const Chip = styled(MuiChip)<ChipProps>(({ theme }) => ({
+const Chip = styled(MuiChip)<ChipProps>(({theme}) => ({
   variants: [
     {
-      props: ({ selected }) => !!selected,
+      props: ({selected}) => !!selected,
       style: {
         background:
           'linear-gradient(to bottom right, hsl(210, 98%, 48%), hsl(210, 98%, 35%))',
@@ -79,10 +125,10 @@ interface MobileLayoutProps {
 }
 
 export function MobileLayout({
-  selectedItemIndex,
-  handleItemClick,
-  selectedFeature,
-}: MobileLayoutProps) {
+                               selectedItemIndex,
+                               handleItemClick,
+                               selectedFeature,
+                             }: MobileLayoutProps) {
   if (!items[selectedItemIndex]) {
     return null;
   }
@@ -90,13 +136,13 @@ export function MobileLayout({
   return (
     <Box
       sx={{
-        display: { xs: 'flex', sm: 'none' },
+        display: {xs: 'flex', sm: 'none'},
         flexDirection: 'column',
         gap: 2,
       }}
     >
-      <Box sx={{ display: 'flex', gap: 2, overflow: 'auto' }}>
-        {items.map(({ title }, index) => (
+      <Box sx={{display: 'flex', gap: 2, overflow: 'auto'}}>
+        {items.map(({title}, index) => (
           <Chip
             size="medium"
             key={index}
@@ -107,14 +153,14 @@ export function MobileLayout({
         ))}
       </Box>
       <Card variant="outlined">
-        <Box sx={{ px: 2, pb: 2 }}>
+        <Box sx={{px: 2, pb: 2}}>
           <Typography
             gutterBottom
-            sx={{ color: 'text.primary', fontWeight: 'medium' }}
+            sx={{color: 'text.primary', fontWeight: 'medium'}}
           >
             {selectedFeature.title}
           </Typography>
-          <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1.5 }}>
+          <Typography variant="body2" sx={{color: 'text.secondary', mb: 1.5}}>
             {selectedFeature.description}
           </Typography>
         </Box>
@@ -134,84 +180,83 @@ export default function Services() {
   const selectedFeature = items[selectedItemIndex];
 
   return (
-    <Container id="features" sx={{ bgcolor: "#1a1a1a", borderRadius: 3, p: 3, boxShadow: 6 }}>
+    <Container id="features" sx={{bgcolor: "#1a1a1a", borderRadius: 3, p: 3, boxShadow: 6}}>
       <Box
         sx={{
           display: 'flex',
-          flexDirection: { xs: 'column', md: 'row-reverse' },
+          flexDirection: {xs: 'column', md: 'row-reverse'},
           gap: 2,
         }}
       >
-        <div>
-          <Box
-            sx={{
-              display: { xs: 'none', sm: 'flex' },
-              flexDirection: 'column',
-              gap: 2,
-              height: '100%',
-            }}
-          >
-            {items.map(({ icon, title, description }, index) => (
+        <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
-                key={index}
-                component={Button}
-                onClick={() => handleItemClick(index)}
                 sx={[
-                  (theme) => ({
-                    p: 2,
-                    height: '100%',
+                  {
                     width: '100%',
-                    '&:hover': {
-                      backgroundColor: (theme.vars || theme).palette.action.hover,
-                    },
-                  }),
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'left',
+                    gap: 1,
+                    textAlign: 'left',
+                    textTransform: 'none',
+                    color: 'text.secondary',
+                  },
                   selectedItemIndex === index && {
-                    backgroundColor: 'action.selected',
+                    color: 'text.primary',
                   },
                 ]}
               >
-                <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>
+                <Typography variant="h6">{icon} {title}</Typography>
+                <Typography variant="body2">{description}</Typography>
               </Box>
-            ))}
-          </Box>
-          <MobileLayout
-            selectedItemIndex={selectedItemIndex}
-            handleItemClick={handleItemClick}
-            selectedFeature={selectedFeature}
-          />
-        </div>
+            </Box>
+          ))}
+        </Box>
+        <MobileLayout
+          selectedItemIndex={selectedItemIndex}
+          handleItemClick={handleItemClick}
+          selectedFeature={selectedFeature}
+        />
         <Box
           sx={{
-            display: { xs: 'none', sm: 'flex' },
-            width: { xs: '100%', md: '70%' },
+            display: {xs: 'none', sm: 'flex'},
+            width: {xs: '100%', md: '70%'},
           }}
         >
           <Card
             variant="outlined"
             sx={{
-              display: { xs: 'none', sm: 'flex' },
+              display: {xs: 'none', sm: 'flex'},
+              maxHeight: '50vh',
             }}
           >
-          <ServiceList serviceList={selectedFeature.serviceList} />
+            <ServiceList serviceList={selectedFeature.serviceList} />
           </Card>
         </Box>
       </Box>

app/routes/home.tsx

@@ -13,23 +13,6 @@ 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: "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() {
   return (
     <Container