slashroot-cc

Welcom to my web blog deployment https://slashroot.cc

AMG Petronas green themed personal blog built with Astro.

Stack

• Astro 4 — static site framework
• MDX — blog posts in Markdown with component support
• Content Collections — typed blog frontmatter
• GSAP (optional) — parallax scroll
• Zero CSS frameworks — all custom, CSS variables

Quick Start (WSL / Debian)

cd sysadmin-blog
npm install
npm run dev
# → http://localhost:4321

File Structure

src/
├── components/
│   ├── ParallaxHero.astro    ← rack corridor parallax landing hero
│   ├── RecentPosts.astro     ← last 3 blog posts (auto-fetched)
│   └── HomelabStatus.astro   ← live metrics widget (demo + real API)
│
├── content/
│   ├── config.ts             ← blog collection schema
│   └── blog/
│       ├── day-001-*.md      ← Day 1 entry
│       ├── day-002-*.md      ← Day 2 entry
│       └── day-003-*.md      ← Day 3 entry
│
├── layouts/
│   ├── BaseLayout.astro      ← nav + footer wrapper
│   └── PostLayout.astro      ← blog post with TOC sidebar
│
├── pages/
│   ├── index.astro           ← landing (hero + posts + homelab)
│   ├── blog/
│   │   ├── index.astro       ← all posts listing
│   │   └── [slug].astro      ← dynamic post page
│   ├── homelab.astro         ← architecture diagram + live metrics
│   ├── hardware.astro        ← full hardware inventory
│   └── 404.astro
│
└── styles/
    └── global.css            ← all CSS variables, typography, base

Writing a New Blog Post

Create src/content/blog/day-NNN-your-title.md:

---
title: "Day 4 — Setting Up the Monitoring Stack"
description: "Netdata → VictoriaMetrics → Grafana"
pubDate: 2024-11-22
day: 4
tags: ["monitoring", "grafana", "victoriametrics", "netdata"]
---

Your content here...

The day field is optional — use it for the numbered series entries.

Connecting Live Homelab Metrics

In src/components/HomelabStatus.astro and src/pages/homelab.astro:

1. Set USE_DEMO = false
2. Set NETDATA_BASE to your Netdata URL (e.g. http://netdata.int.h0melab.uk)
3. The fetch calls use the Netdata REST API v1 — adapt to your endpoint structure

For a custom FastAPI endpoint (like your FC Porto fixture scraper pattern):

// Example: GET /api/homelab/status
const data = await fetch("https://api.h0melab.uk/homelab/status").then((r) =>
  r.json(),
);

Colour Variables

All theme colours live in src/styles/global.css:

--petronas-teal: #00d2be --petronas-green: #00a19c --petronas-dark: #007a76
  --bg-void: #050a0a;

Deployment

npm run build   # outputs to dist/
# Deploy dist/ to any static host: Cloudflare Pages, Netlify, Vercel, nginx

For Cloudflare Pages (recommended for rcosta.uk):

• Build command: npm run build
• Output directory: dist