# 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)

```bash
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`:

```markdown
---
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):

```typescript
// 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`:

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

## Deployment

```bash
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`