RC: (upload) astro initial structure
This commit is contained in:
Raul Costa
53
.gitea/workflows/deploy.yaml
Normal file
53
.gitea/workflows/deploy.yaml
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
name: Build and Update Flux
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- main
|
||||||
|
paths-ignore:
|
||||||
|
# CRITICAL: Do not trigger this action if we are just updating the Helm chart,
|
||||||
|
# otherwise it will create an infinite loop!
|
||||||
|
- "helm/**"
|
||||||
|
|
||||||
|
env:
|
||||||
|
REGISTRY: git.h0melab.uk
|
||||||
|
IMAGE_NAME: git.h0melab.uk/rgcosta/slashroot-cc
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build-push-update:
|
||||||
|
runs-on: gitea-runner-docker
|
||||||
|
steps:
|
||||||
|
- name: Checkout Code
|
||||||
|
uses: actions/checkout@v3
|
||||||
|
with:
|
||||||
|
fetch-depth: 0
|
||||||
|
|
||||||
|
- name: Log in to Gitea Container Registry
|
||||||
|
uses: docker/login-action@v2
|
||||||
|
with:
|
||||||
|
registry: ${{ env.REGISTRY }}
|
||||||
|
username: ${{ gitea.actor }}
|
||||||
|
password: ${{ secrets.REGISTRY_TOKEN }}
|
||||||
|
|
||||||
|
- name: Build and Push Docker Image
|
||||||
|
uses: docker/build-push-action@v4
|
||||||
|
with:
|
||||||
|
context: .
|
||||||
|
push: true
|
||||||
|
tags: |
|
||||||
|
${{ env.IMAGE_NAME }}:${{ gitea.sha }}
|
||||||
|
${{ env.IMAGE_NAME }}:latest
|
||||||
|
|
||||||
|
- name: Update Helm values.yaml for Flux
|
||||||
|
run: |
|
||||||
|
# 1. Update the image tag in your local Helm chart using sed
|
||||||
|
sed -i "s/tag: .*/tag: ${{ gitea.sha }}/g" charts/slashroot/values.yaml
|
||||||
|
|
||||||
|
# 2. Configure the Gitea Bot to commit the change
|
||||||
|
git config user.name "Gitea Actions Bot"
|
||||||
|
git config user.email "actions@gitea.local"
|
||||||
|
|
||||||
|
# 3. Commit and push the updated values.yaml back to the main branch
|
||||||
|
git add charts/slashroot/values.yaml
|
||||||
|
git commit -m "chore: update slashroot image tag to ${{ gitea.sha }} [skip ci]"
|
||||||
|
git push
|
||||||
25
.gitignore
vendored
Normal file
25
.gitignore
vendored
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
# build output
|
||||||
|
dist/
|
||||||
|
# generated types
|
||||||
|
.astro/
|
||||||
|
|
||||||
|
# dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# logs
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
|
||||||
|
# environment variables
|
||||||
|
.env
|
||||||
|
.env.production
|
||||||
|
|
||||||
|
# macOS-specific files
|
||||||
|
.DS_Store
|
||||||
|
|
||||||
|
# jetbrains setting folder
|
||||||
|
.idea/
|
||||||
|
.vscode/
|
||||||
16
Dockerfile
Normal file
16
Dockerfile
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
# Stage 1: Build the Astro project
|
||||||
|
FROM node:22-alpine AS builder
|
||||||
|
WORKDIR /app
|
||||||
|
COPY package*.json ./
|
||||||
|
RUN npm ci
|
||||||
|
COPY . .
|
||||||
|
RUN npm run build
|
||||||
|
|
||||||
|
# Stage 2: Serve with Nginx
|
||||||
|
FROM nginx:alpine
|
||||||
|
RUN rm -rf /usr/share/nginx/html/*
|
||||||
|
# Copy the Astro output from the builder stage
|
||||||
|
COPY --from=builder /app/dist /usr/share/nginx/html
|
||||||
|
# Expose port 80 for your Helm chart / Traefik to pick up
|
||||||
|
EXPOSE 80
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
108
README.md
Normal file
108
README.md
Normal file
@@ -0,0 +1,108 @@
|
|||||||
|
# rack::log — Sysadmin Blog
|
||||||
|
|
||||||
|
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`
|
||||||
8
astro.config.mjs
Normal file
8
astro.config.mjs
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
import { defineConfig } from 'astro/config';
|
||||||
|
import mdx from '@astrojs/mdx';
|
||||||
|
import sitemap from '@astrojs/sitemap';
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
site: 'https://slashroot.cc',
|
||||||
|
integrations: [mdx(), sitemap()],
|
||||||
|
});
|
||||||
5546
package-lock.json
generated
Normal file
5546
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
20
package.json
Normal file
20
package.json
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"name": "sysadmin-blog",
|
||||||
|
"type": "module",
|
||||||
|
"version": "0.0.1",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "astro dev",
|
||||||
|
"build": "astro build",
|
||||||
|
"preview": "astro preview",
|
||||||
|
"astro": "astro"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"astro": "^4.15.0",
|
||||||
|
"@astrojs/mdx": "^3.1.0",
|
||||||
|
"@astrojs/sitemap": "^3.1.0",
|
||||||
|
"gsap": "^3.12.5"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"typescript": "^5.5.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
16
public/favicon.svg
Normal file
16
public/favicon.svg
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||||
|
<rect width="32" height="32" rx="6" fill="#050A0A"/>
|
||||||
|
<rect x="5" y="4" width="22" height="24" rx="2" fill="none" stroke="#00D2BE" stroke-width="1.5"/>
|
||||||
|
<!-- rack units -->
|
||||||
|
<rect x="7" y="7" width="18" height="3" rx="1" fill="#0D1E1C"/>
|
||||||
|
<rect x="7" y="7" width="3" height="3" rx="1" fill="#00D2BE"/>
|
||||||
|
<rect x="7" y="12" width="18" height="3" rx="1" fill="#0D1E1C"/>
|
||||||
|
<rect x="7" y="12" width="3" height="3" rx="1" fill="#007A76"/>
|
||||||
|
<rect x="7" y="17" width="18" height="3" rx="1" fill="#0D1E1C"/>
|
||||||
|
<rect x="7" y="17" width="3" height="3" rx="1" fill="#00D2BE" opacity="0.6"/>
|
||||||
|
<rect x="7" y="22" width="18" height="3" rx="1" fill="#0D1E1C"/>
|
||||||
|
<rect x="7" y="22" width="3" height="3" rx="1" fill="#004F4D"/>
|
||||||
|
<!-- LED dot -->
|
||||||
|
<circle cx="22" cy="8.5" r="1.2" fill="#00D2BE" opacity="0.9"/>
|
||||||
|
<circle cx="22" cy="13.5" r="1.2" fill="#00D2BE" opacity="0.5"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 948 B |
BIN
public/image_zb1c25zb1c25zb1c.png
Normal file
BIN
public/image_zb1c25zb1c25zb1c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 505 KiB |
BIN
public/image_zb1c25zb1c25zb1c.pngZone.Identifier
Normal file
BIN
public/image_zb1c25zb1c25zb1c.pngZone.Identifier
Normal file
Binary file not shown.
BIN
public/image_zb1c2e65feww76x.png
Normal file
BIN
public/image_zb1c2e65feww76x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 880 KiB |
338
src/components/HomelabStatus.astro
Normal file
338
src/components/HomelabStatus.astro
Normal file
@@ -0,0 +1,338 @@
|
|||||||
|
---
|
||||||
|
// HomelabStatus.astro
|
||||||
|
// Set USE_DEMO=false and API_URL to your actual endpoint once deployed.
|
||||||
|
---
|
||||||
|
|
||||||
|
<section class="section homelab-status" id="homelab-status">
|
||||||
|
<div class="container">
|
||||||
|
<div class="hl-header">
|
||||||
|
<div>
|
||||||
|
<div class="accent-line"></div>
|
||||||
|
<h2>Homelab <span class="text-accent">Status</span></h2>
|
||||||
|
<p class="font-mono text-muted" style="font-size:0.82rem;margin-top:0.4rem">
|
||||||
|
Proxmox · pve-node-01 ·
|
||||||
|
<span id="hl-ts" class="text-accent" style="font-size:0.75rem">connecting...</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<a href="/homelab" class="btn btn-primary">Full overview →</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hl-grid" id="hl-grid">
|
||||||
|
<div class="hl-card skeleton"></div>
|
||||||
|
<div class="hl-card skeleton"></div>
|
||||||
|
<div class="hl-card skeleton"></div>
|
||||||
|
<div class="hl-card skeleton"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hl-detail card" id="hl-detail" style="margin-top:1.5rem;display:none">
|
||||||
|
<div class="hl-detail-grid">
|
||||||
|
<div class="hl-spark-block">
|
||||||
|
<span class="hl-spark-label font-mono">CPU history (1 min)</span>
|
||||||
|
<div class="spark-bars" id="bars-cpu"></div>
|
||||||
|
</div>
|
||||||
|
<div class="hl-spark-block">
|
||||||
|
<span class="hl-spark-label font-mono">Load history (1 min)</span>
|
||||||
|
<div class="spark-bars" id="bars-load"></div>
|
||||||
|
</div>
|
||||||
|
<div class="hl-spark-block">
|
||||||
|
<span class="hl-spark-label font-mono">Network RX/TX (1 min)</span>
|
||||||
|
<div class="spark-bars" id="bars-net"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<script is:inline>
|
||||||
|
// ── CONFIG ────────────────────────────────────────────────────────────
|
||||||
|
const API_URL = 'http://pve.int:8080/api/homelab'; // Or use raw IP
|
||||||
|
const SPARK_H = 48; // Pixel height of .spark-bars
|
||||||
|
|
||||||
|
// ── FALLBACK ROLLING BUFFERS ──────────────────────────────────────────
|
||||||
|
let fallbackCpu = Array(60).fill(0);
|
||||||
|
let fallbackLoad = Array(60).fill(0);
|
||||||
|
let fallbackRx = Array(60).fill(0);
|
||||||
|
let fallbackTx = Array(60).fill(0);
|
||||||
|
|
||||||
|
// ── DATA PARSER ───────────────────────────────────────────────────────
|
||||||
|
function parseData(d, isLive, timestamp = null) {
|
||||||
|
const cCpu = Math.round(d.cpu || 0);
|
||||||
|
const cRam = Math.round(d.ram?.percent ?? d.ram ?? 0);
|
||||||
|
const cLoad = d.load_avg ? d.load_avg[0] : 0;
|
||||||
|
const cRx = d.rx_mb || 0;
|
||||||
|
const cTx = d.tx_mb || 0;
|
||||||
|
|
||||||
|
function roll(buf, hist, val) {
|
||||||
|
if (hist && hist.length > 0) return hist;
|
||||||
|
buf.shift(); buf.push(val);
|
||||||
|
return [...buf];
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
isLive,
|
||||||
|
timestamp,
|
||||||
|
cpu: cCpu,
|
||||||
|
ram_used: cRam,
|
||||||
|
root_disk: Math.round(d.root_disk_pct || 0),
|
||||||
|
rx_mb: cRx,
|
||||||
|
tx_mb: cTx,
|
||||||
|
cpu_hist: roll(fallbackCpu, d.cpu_hist, cCpu),
|
||||||
|
load_hist: roll(fallbackLoad, d.load_hist, cLoad),
|
||||||
|
rx_hist: roll(fallbackRx, d.rx_hist, cRx),
|
||||||
|
tx_hist: roll(fallbackTx, d.tx_hist, cTx),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── CACHED FETCH LOGIC ────────────────────────────────────────────────
|
||||||
|
async function fetchLive() {
|
||||||
|
try {
|
||||||
|
// 1. Try to fetch the live data
|
||||||
|
const res = await fetch(API_URL, { signal: AbortSignal.timeout(4000) });
|
||||||
|
const d = await res.json();
|
||||||
|
if (d.error) throw new Error(d.error);
|
||||||
|
|
||||||
|
// 2. If successful, save it to the browser's Local Storage!
|
||||||
|
localStorage.setItem('homelab_cache', JSON.stringify(d));
|
||||||
|
localStorage.setItem('homelab_ts', Date.now());
|
||||||
|
|
||||||
|
return parseData(d, true);
|
||||||
|
|
||||||
|
} catch (e) {
|
||||||
|
console.warn('API fetch failed, attempting to load from cache...', e);
|
||||||
|
|
||||||
|
// 3. If it fails, pull the last known good data from memory
|
||||||
|
const cachedData = localStorage.getItem('homelab_cache');
|
||||||
|
const cachedTime = localStorage.getItem('homelab_ts');
|
||||||
|
|
||||||
|
if (cachedData) {
|
||||||
|
return parseData(JSON.parse(cachedData), false, parseInt(cachedTime));
|
||||||
|
} else {
|
||||||
|
throw new Error("No cache available and API is offline.");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── RENDER ────────────────────────────────────────────────────────────
|
||||||
|
function bar(pct) {
|
||||||
|
const c = pct > 85 ? '#FF4444' : pct > 70 ? '#FFB800' : '#00D2BE';
|
||||||
|
return `<div class="hl-bar-track"><div class="hl-bar-fill" style="width:${pct}%;background:${c}"></div></div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderCards(d) {
|
||||||
|
const cards = [
|
||||||
|
{ label: 'CPU', value: `${d.cpu}%`, sub: 'overall usage', pct: d.cpu, icon: '⬡' },
|
||||||
|
{ label: 'RAM', value: `${d.ram_used}%`, sub: 'used of total', pct: d.ram_used, icon: '▣' },
|
||||||
|
{ label: 'Disk', value: `${d.root_disk}%`, sub: '/ partition usage', pct: d.root_disk, icon: '⛁' },
|
||||||
|
{ label: 'Network', value: `↓${d.rx_mb} ↑${d.tx_mb}`, sub: 'Mbps rx / tx', pct: null, icon: '⇅' },
|
||||||
|
];
|
||||||
|
|
||||||
|
const grid = document.getElementById('hl-grid');
|
||||||
|
if (grid) {
|
||||||
|
grid.innerHTML = cards.map(c => `
|
||||||
|
<div class="hl-card card ${d.isLive ? '' : 'offline-card'}">
|
||||||
|
<div class="hl-card-top">
|
||||||
|
<span class="hl-icon">${c.icon}</span>
|
||||||
|
<span class="hl-label font-mono">${c.label}</span>
|
||||||
|
</div>
|
||||||
|
<div class="hl-value font-display">${c.value}</div>
|
||||||
|
<div class="hl-sub text-muted">${c.sub}</div>
|
||||||
|
${c.pct !== null ? bar(c.pct) : ''}
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderSparks(d) {
|
||||||
|
document.getElementById('hl-detail').style.display = '';
|
||||||
|
renderSparkBars('bars-cpu', d.cpu_hist, '#00D2BE');
|
||||||
|
renderSparkBars('bars-load', d.load_hist, '#00A19C');
|
||||||
|
renderSparkBars('bars-net', d.rx_hist, '#007A76', d.tx_hist);
|
||||||
|
}
|
||||||
|
|
||||||
|
// BULLETPROOF SVG RENDERER
|
||||||
|
function renderSparkBars(id, series, color, series2) {
|
||||||
|
const el = document.getElementById(id);
|
||||||
|
if (!el || !series.length) return;
|
||||||
|
|
||||||
|
const W = 240;
|
||||||
|
const H = SPARK_H;
|
||||||
|
const max = Math.max(...series, ...(series2 || []), 0.05);
|
||||||
|
|
||||||
|
let rects = '';
|
||||||
|
const step = W / series.length;
|
||||||
|
const barW = series2 ? 1.5 : 3;
|
||||||
|
|
||||||
|
series.forEach((v, i) => {
|
||||||
|
const x = i * step;
|
||||||
|
const h1 = Math.max(1, (v / max) * H);
|
||||||
|
const y1 = H - h1;
|
||||||
|
|
||||||
|
if (series2) {
|
||||||
|
const h2 = Math.max(1, ((series2[i] || 0) / max) * H);
|
||||||
|
const y2 = H - h2;
|
||||||
|
rects += `<rect x="${x}" y="${y1}" width="${barW}" height="${h1}" fill="${color}" opacity="0.9"/>`;
|
||||||
|
rects += `<rect x="${x + barW}" y="${y2}" width="${barW}" height="${h2}" fill="#005F5D" opacity="0.7"/>`;
|
||||||
|
} else {
|
||||||
|
rects += `<rect x="${x}" y="${y1}" width="${barW}" height="${h1}" fill="${color}"/>`;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
el.innerHTML = `<svg viewBox="0 0 ${W} ${H}" preserveAspectRatio="none" style="width:100%; height:${H}px; display:block; ${series2 ? '' : 'opacity: 0.8;'}">${rects}</svg>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function render() {
|
||||||
|
const ts = document.getElementById('hl-ts');
|
||||||
|
try {
|
||||||
|
const data = await fetchLive();
|
||||||
|
renderCards(data);
|
||||||
|
renderSparks(data);
|
||||||
|
|
||||||
|
// Update the timestamp based on live/offline status
|
||||||
|
if (data.isLive) {
|
||||||
|
ts.style.color = 'var(--petronas-teal)';
|
||||||
|
ts.textContent = 'updated ' + new Date().toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||||
|
} else {
|
||||||
|
ts.style.color = '#FFB800'; // Warning Orange
|
||||||
|
const oldTime = new Date(data.timestamp).toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
|
||||||
|
ts.textContent = `offline · last seen ${oldTime}`;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
// Only happens if the API is dead AND there is no cache
|
||||||
|
if (ts) {
|
||||||
|
ts.style.color = '#FF4444'; // Error Red
|
||||||
|
ts.textContent = 'API unreachable · no cache found';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render();
|
||||||
|
// refresh every 10 sec
|
||||||
|
setInterval(render, 10000);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.homelab-status { padding-top: 4rem; }
|
||||||
|
|
||||||
|
.hl-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hl-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hl-card {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.35rem;
|
||||||
|
min-height: 130px;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Make cards look slightly faded when offline */
|
||||||
|
.offline-card {
|
||||||
|
opacity: 0.6;
|
||||||
|
filter: grayscale(40%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hl-card.skeleton {
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: 12px;
|
||||||
|
animation: skeleton-pulse 1.8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes skeleton-pulse {
|
||||||
|
0%, 100% { opacity: 0.4; }
|
||||||
|
50% { opacity: 0.8; }
|
||||||
|
}
|
||||||
|
|
||||||
|
.hl-card-top {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hl-icon {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--petronas-teal);
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hl-label {
|
||||||
|
font-size: 0.68rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hl-value {
|
||||||
|
font-size: 2.2rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--petronas-teal);
|
||||||
|
line-height: 1;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hl-sub {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hl-bar-track {
|
||||||
|
height: 3px;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border-radius: 2px;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-top: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hl-bar-fill {
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 2px;
|
||||||
|
transition: width 0.9s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sparklines */
|
||||||
|
.hl-detail-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 2rem;
|
||||||
|
padding: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hl-spark-block {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hl-spark-label {
|
||||||
|
font-size: 0.68rem;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.spark-bars {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.hl-grid { grid-template-columns: 1fr 1fr; }
|
||||||
|
.hl-detail-grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.hl-grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
334
src/components/ParallaxHero.astro
Normal file
334
src/components/ParallaxHero.astro
Normal file
@@ -0,0 +1,334 @@
|
|||||||
|
---
|
||||||
|
// ParallaxHero.astro — Osmo-style multi-layer GSAP parallax, Petronas theme
|
||||||
|
---
|
||||||
|
|
||||||
|
<div class="parallax">
|
||||||
|
<section class="parallax__header">
|
||||||
|
<div class="parallax__visuals">
|
||||||
|
|
||||||
|
<div data-parallax-layers class="parallax__layers">
|
||||||
|
|
||||||
|
<!-- LAYER 1 — bg photo (slowest, most travel) -->
|
||||||
|
<img
|
||||||
|
src="/image_zb1c2e65feww76x.png"
|
||||||
|
loading="eager"
|
||||||
|
data-parallax-layer="1"
|
||||||
|
alt=""
|
||||||
|
class="parallax__layer-img"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- LAYER 2 — teal colour grade (follows bg) -->
|
||||||
|
<div data-parallax-layer="2" class="parallax__layer-tint"></div>
|
||||||
|
|
||||||
|
<!-- LAYER 3 — title (mid speed) -->
|
||||||
|
<div data-parallax-layer="3" class="parallax__layer-title">
|
||||||
|
|
||||||
|
<h1 class="parallax__title">
|
||||||
|
<span class="parallax__title-accent">/</span>slashroot
|
||||||
|
</h1>
|
||||||
|
<!-- <div class="parallax__eyebrow font-mono">
|
||||||
|
<span style="color:var(--petronas-teal)">$</span> cat /var/log/adventures.log
|
||||||
|
</div> -->
|
||||||
|
<div class="parallax__cta">
|
||||||
|
<a href="/blog" class="btn btn-primary">Read the logs</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- LAYER 4 — figure foreground PNG (barely moves = pops forward) -->
|
||||||
|
<div data-parallax-layer="4" class="parallax__layer-figure" aria-hidden="true">
|
||||||
|
<img
|
||||||
|
src="/image_zb1c25zb1c25zb1c.png"
|
||||||
|
alt=""
|
||||||
|
class="parallax__figure-img"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Bottom fade -->
|
||||||
|
<div class="parallax__fade"></div>
|
||||||
|
|
||||||
|
<!-- Scroll hint inside header for absolute positioning -->
|
||||||
|
<div class="parallax__scroll-hint" id="scroll-hint" aria-hidden="true">
|
||||||
|
<span class="font-mono">scroll</span>
|
||||||
|
<div class="scroll-line"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js" is:inline></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js" is:inline></script>
|
||||||
|
<script src="https://cdn.jsdelivr.net/npm/lenis@1.1.13/dist/lenis.min.js" is:inline></script>
|
||||||
|
|
||||||
|
<script is:inline>
|
||||||
|
if (history.scrollRestoration) {
|
||||||
|
history.scrollRestoration = "manual";
|
||||||
|
}
|
||||||
|
document.addEventListener("DOMContentLoaded", () => {
|
||||||
|
gsap.registerPlugin(ScrollTrigger);
|
||||||
|
|
||||||
|
document.querySelectorAll('[data-parallax-layers]').forEach((trigger) => {
|
||||||
|
const header = trigger.closest('.parallax__header');
|
||||||
|
const tl = gsap.timeline({
|
||||||
|
scrollTrigger: {
|
||||||
|
trigger: header,
|
||||||
|
start: "top top",
|
||||||
|
end: "bottom top",
|
||||||
|
scrub: 0,
|
||||||
|
invalidateOnRefresh: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// tl.to('[data-parallax-layer="1"]', { yPercent: 40, ease: "none" }, 0)
|
||||||
|
tl.fromTo('[data-parallax-layer="1"]',
|
||||||
|
{ yPercent: 0 }, // FORCE the start position
|
||||||
|
{ yPercent: 40, ease: "none" }, // The end position
|
||||||
|
0 // Keep your 0 position parameter
|
||||||
|
)
|
||||||
|
.to('[data-parallax-layer="2"]', { yPercent: 40, ease: "none" }, 0)
|
||||||
|
.to('[data-parallax-layer="3"]', { yPercent: 20, ease: "none" }, 0)
|
||||||
|
.to('[data-parallax-layer="4"]', { yPercent: 6, ease: "none" }, 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Lenis smooth scroll
|
||||||
|
const lenis = new Lenis();
|
||||||
|
lenis.on('scroll', ScrollTrigger.update);
|
||||||
|
gsap.ticker.add((time) => { lenis.raf(time * 1000); });
|
||||||
|
gsap.ticker.lagSmoothing(0);
|
||||||
|
|
||||||
|
// Fade scroll hint
|
||||||
|
const hint = document.getElementById('scroll-hint');
|
||||||
|
if (hint) {
|
||||||
|
ScrollTrigger.create({
|
||||||
|
start: 60,
|
||||||
|
onEnter: () => gsap.to(hint, { opacity: 0, duration: 0.4 }),
|
||||||
|
onLeaveBack: () => gsap.to(hint, { opacity: 1, duration: 0.4 }),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Entrance animation
|
||||||
|
const intro = gsap.timeline({ defaults: { ease: "power2.out" } });
|
||||||
|
intro
|
||||||
|
.from('.parallax__eyebrow', { opacity: 0, y: 20, duration: 0.8 }, 0.3)
|
||||||
|
.from('.parallax__title', { opacity: 0, y: 32, duration: 1.0 }, 0.5)
|
||||||
|
.from('.parallax__subtitle', { opacity: 0, y: 16, duration: 0.8 }, 0.72)
|
||||||
|
.from('.parallax__cta', { opacity: 0, y: 12, duration: 0.7 }, 0.92)
|
||||||
|
.from('.parallax__figure-img', { opacity: 0, y: 24, duration: 1.0 }, 0.25);
|
||||||
|
|
||||||
|
window.addEventListener('load', () => {
|
||||||
|
ScrollTrigger.refresh();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.parallax {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Osmo natural height — no 200vh hack */
|
||||||
|
.parallax__header {
|
||||||
|
min-height: 100svh;
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Osmo: absolute + 120% height, no sticky */
|
||||||
|
.parallax__visuals {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 110%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__layers {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Osmo magic offset — pulled up so it has room to scroll down */
|
||||||
|
.parallax__layer-img {
|
||||||
|
position: absolute;
|
||||||
|
top: -20.5%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 117.5%;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center 30%;
|
||||||
|
display: block;
|
||||||
|
filter: saturate(0.25) brightness(0.45);
|
||||||
|
pointer-events: none;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Layer 2 — teal tint, same geometry as bg */
|
||||||
|
.parallax__layer-tint {
|
||||||
|
position: absolute;
|
||||||
|
top: -17.5%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 117.5%;
|
||||||
|
background:
|
||||||
|
radial-gradient(ellipse 65% 50% at 50% 60%, rgba(0,210,190,0.13) 0%, transparent 65%),
|
||||||
|
linear-gradient(to bottom,
|
||||||
|
rgba(5,10,10,0.65) 0%,
|
||||||
|
transparent 20%,
|
||||||
|
transparent 65%,
|
||||||
|
rgba(5,10,10,0.85) 100%
|
||||||
|
),
|
||||||
|
linear-gradient(to right,
|
||||||
|
rgba(5,10,10,0.5) 0%,
|
||||||
|
transparent 25%,
|
||||||
|
transparent 75%,
|
||||||
|
rgba(5,10,10,0.5) 100%
|
||||||
|
);
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Layer 3 — title: same top offset as bg, centred vertically */
|
||||||
|
.parallax__layer-title {
|
||||||
|
position: absolute;
|
||||||
|
top: -20.5%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 117.5%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
padding-bottom: 12vh;
|
||||||
|
text-align: center;
|
||||||
|
z-index: 1;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__eyebrow {
|
||||||
|
font-size: clamp(0.68rem, 1.4vw, 0.88rem);
|
||||||
|
color: var(--text-muted);
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__title {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: clamp(4rem, 13vw, 11rem);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
line-height: 0.92;
|
||||||
|
color: var(--text-primary);
|
||||||
|
text-shadow:
|
||||||
|
0 0 120px rgba(0,210,190,0.2),
|
||||||
|
0 4px 60px rgba(0,0,0,0.95);
|
||||||
|
margin-bottom: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__title-accent { color: var(--petronas-teal); }
|
||||||
|
|
||||||
|
.parallax__subtitle {
|
||||||
|
font-size: clamp(0.72rem, 1.8vw, 0.95rem);
|
||||||
|
color: var(--text-muted);
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-bottom: 2.5rem;
|
||||||
|
max-width: 54ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__cta {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
width: 120%;
|
||||||
|
gap: 2rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__cta-ghost {
|
||||||
|
font-size: 0.88rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
transition: color 150ms;
|
||||||
|
}
|
||||||
|
.parallax__cta-ghost:hover { color: var(--petronas-teal); }
|
||||||
|
|
||||||
|
/* Layer 4 — figure: same Osmo offset as bg so GSAP travel is consistent.
|
||||||
|
SVG is constrained with max-width so it doesn't fill the whole container. */
|
||||||
|
.parallax__layer-figure {
|
||||||
|
position: absolute;
|
||||||
|
top: -9.5%;
|
||||||
|
left: 0;
|
||||||
|
width: 120%;
|
||||||
|
height: 105.5%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding-bottom: 2vh;
|
||||||
|
z-index: 2;
|
||||||
|
pointer-events: none;
|
||||||
|
will-change: transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
.parallax__figure-img {
|
||||||
|
width: clamp(200px, 50vh, 650px);
|
||||||
|
height: 70vh;
|
||||||
|
display: block;
|
||||||
|
flex-shrink: 0;
|
||||||
|
object-fit: contain;
|
||||||
|
object-position: bottom center;
|
||||||
|
filter: drop-shadow(0 -8px 24px rgba(0,210,190,0.15));
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Bottom fade ─────────────────────────────────────────────── */
|
||||||
|
.parallax__fade {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 180px;
|
||||||
|
background: linear-gradient(to bottom, transparent, var(--bg-void));
|
||||||
|
z-index: 10;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scroll hint — absolute inside the 100svh header */
|
||||||
|
.parallax__scroll-hint {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 2.5rem;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
z-index: 30;
|
||||||
|
font-size: 0.62rem;
|
||||||
|
letter-spacing: 0.18em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-line {
|
||||||
|
width: 1px;
|
||||||
|
height: 48px;
|
||||||
|
background: linear-gradient(to bottom, var(--petronas-teal), transparent);
|
||||||
|
transform-origin: top;
|
||||||
|
animation: scroll-grow 2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scroll-grow {
|
||||||
|
0% { transform: scaleY(0); opacity: 1; }
|
||||||
|
65% { transform: scaleY(1); opacity: 1; }
|
||||||
|
100% { transform: scaleY(1); opacity: 0; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.parallax__figure-svg { width: 110px; }
|
||||||
|
.parallax__cta { gap: 1rem; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
131
src/components/RecentPosts.astro
Normal file
131
src/components/RecentPosts.astro
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
---
|
||||||
|
import { getCollection } from 'astro:content';
|
||||||
|
|
||||||
|
const posts = (await getCollection('blog'))
|
||||||
|
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf())
|
||||||
|
.slice(0, 3);
|
||||||
|
---
|
||||||
|
<section class="section recent-posts" id="recent-posts">
|
||||||
|
<div class="container">
|
||||||
|
<div class="section-header">
|
||||||
|
<div class="accent-line"></div>
|
||||||
|
<h2>Recent <span class="text-accent">Entries</span></h2>
|
||||||
|
<p class="text-muted font-mono" style="margin-top:0.5rem;font-size:0.85rem">
|
||||||
|
latest dispatches from the terminal
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="posts-grid">
|
||||||
|
{posts.map((post, i) => (
|
||||||
|
<article class="card post-card" class:list={[{ featured: i === 0 }]}>
|
||||||
|
<a href={`/blog/${post.id}`} class="post-link">
|
||||||
|
<div class="post-card-inner">
|
||||||
|
{post.data.day && (
|
||||||
|
<div class="post-day font-mono">entry_{String(post.data.day).padStart(3,'0')}</div>
|
||||||
|
)}
|
||||||
|
<h3 class="post-card-title">{post.data.title}</h3>
|
||||||
|
<p class="post-card-desc text-muted">{post.data.description}</p>
|
||||||
|
<div class="post-card-meta">
|
||||||
|
<time class="font-mono text-muted" style="font-size:0.72rem">
|
||||||
|
{post.data.pubDate.toLocaleDateString('en-GB', { day:'numeric', month:'short', year:'numeric' })}
|
||||||
|
</time>
|
||||||
|
<div class="post-card-tags">
|
||||||
|
{(post.data.tags ?? []).slice(0,3).map((t: string) => (
|
||||||
|
<span class="tag">{t}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="post-card-cta text-accent font-mono">
|
||||||
|
cat post.md <span class="cta-arrow">→</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="text-align:center;margin-top:3rem">
|
||||||
|
<a href="/blog" class="btn btn-primary">View all entries →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.recent-posts {
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
padding-top: 15rem; }
|
||||||
|
|
||||||
|
.section-header { margin-bottom: 3rem; }
|
||||||
|
|
||||||
|
.posts-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card { padding: 0; overflow: hidden; }
|
||||||
|
|
||||||
|
.post-card.featured {
|
||||||
|
border-color: rgba(0, 210, 190, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-link {
|
||||||
|
display: block;
|
||||||
|
color: inherit;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-link:hover .post-card-title { color: var(--petronas-teal); }
|
||||||
|
.post-link:hover .cta-arrow { transform: translateX(4px); }
|
||||||
|
|
||||||
|
.post-card-inner {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 1.75rem;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-day {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: var(--petronas-teal);
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-title {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
line-height: 1.3;
|
||||||
|
transition: color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-desc {
|
||||||
|
font-size: 0.88rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-card-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; }
|
||||||
|
|
||||||
|
.post-card-cta {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cta-arrow {
|
||||||
|
display: inline-block;
|
||||||
|
transition: transform var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.posts-grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
16
src/content.config.ts
Normal file
16
src/content.config.ts
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import { defineCollection, z } from 'astro:content';
|
||||||
|
import { glob } from 'astro/loaders';
|
||||||
|
|
||||||
|
const blog = defineCollection({
|
||||||
|
loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
|
||||||
|
schema: z.object({
|
||||||
|
title: z.string(),
|
||||||
|
description: z.string(),
|
||||||
|
pubDate: z.coerce.date(),
|
||||||
|
tags: z.array(z.string()).optional().default([]),
|
||||||
|
day: z.number().optional(),
|
||||||
|
draft: z.boolean().optional().default(false),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const collections = { blog };
|
||||||
63
src/content/blog/day-001-why-i-built-a-homelab.md
Normal file
63
src/content/blog/day-001-why-i-built-a-homelab.md
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
---
|
||||||
|
title: "Day 1 — Why I Built a Homelab (and Why You Probably Should Too)"
|
||||||
|
description: "Where it all starts. The hardware decisions, the philosophy, and the dangerous moment I decided a Proxmox cluster was a \"good idea\"."
|
||||||
|
pubDate: 2024-11-01
|
||||||
|
day: 1
|
||||||
|
tags: ["homelab", "proxmox", "hardware", "why"]
|
||||||
|
---
|
||||||
|
|
||||||
|
## The Itch
|
||||||
|
|
||||||
|
Every sysadmin eventually gets the itch. You spend your days wrangling production HPC clusters — ARCHER2 nodes, Cirrus compute, InfiniBand fabric — and you come home and think: *I want something like this, but mine*.
|
||||||
|
|
||||||
|
Not a VM on a cloud provider. Not a Raspberry Pi running Pi-hole. A proper stack — compute, storage, networking — that I control end to end, where breaking things at 2am is a learning experience rather than a P1 incident.
|
||||||
|
|
||||||
|
This is Day 1 of that journey.
|
||||||
|
|
||||||
|
## The Philosophy First
|
||||||
|
|
||||||
|
Before buying a single piece of hardware, I wrote down what I actually wanted from a homelab:
|
||||||
|
|
||||||
|
- **Failure should be cheap, not catastrophic.** Real redundancy, snapshots, backups.
|
||||||
|
- **Everything as code.** If I can't reproduce the setup from a Git repo, it doesn't exist.
|
||||||
|
- **Dogfood the tools I use at work.** Ansible, Terraform, monitoring stacks — use them at home so they're muscle memory at EPCC.
|
||||||
|
- **No cloud vendor lock-in.** Self-hosted or bust.
|
||||||
|
|
||||||
|
## Hardware — What I Picked and Why
|
||||||
|
|
||||||
|
### Compute
|
||||||
|
|
||||||
|
I went with a used server chassis from eBay rather than consumer NUCs. The reasoning was simple: ECC RAM, IPMI, and PCIe slots worth having. The power draw penalty is real, but I'm not running this 24/7 at full load.
|
||||||
|
|
||||||
|
> The most expensive homelab decision is the one you make twice. Buy the thing that gives you headroom.
|
||||||
|
|
||||||
|
### Storage
|
||||||
|
|
||||||
|
ZFS from day one. I'd seen enough production storage corruption at work to know that data integrity checksums aren't optional. I spec'd the pool conservatively — RAIDZ2 across four drives — knowing I could expand later when ZFS 2.2's RAIDZ expansion landed properly.
|
||||||
|
|
||||||
|
Pool name: `zfs-oporto`. Obviously.
|
||||||
|
|
||||||
|
### Networking
|
||||||
|
|
||||||
|
OPNsense on a dedicated box. No consumer router running some vendor's locked-down firmware between me and the internet. VLANs from the start, even when it felt like overkill — because it always feels like overkill until it isn't.
|
||||||
|
|
||||||
|
## The Software Stack (Day 1 Vision)
|
||||||
|
|
||||||
|
```
|
||||||
|
[ OPNsense ] ← router/firewall/VLANs
|
||||||
|
|
|
||||||
|
[ Proxmox VE ] ← hypervisor
|
||||||
|
├── Kubernetes cluster (k3s initially, then full k8s)
|
||||||
|
├── NAS VM → ZFS pool
|
||||||
|
└── Utility VMs (monitoring, DNS, etc.)
|
||||||
|
```
|
||||||
|
|
||||||
|
The monitoring story was left deliberately vague on Day 1. Spoiler: it took many iterations and a lot of wrong turns before landing on Netdata → VictoriaMetrics → Grafana.
|
||||||
|
|
||||||
|
## What Actually Happened
|
||||||
|
|
||||||
|
I had everything racked and powered by midnight. The first Proxmox install took 20 minutes. The first networking misconfiguration locked me out of the management interface for two hours.
|
||||||
|
|
||||||
|
Standard.
|
||||||
|
|
||||||
|
See you on [Day 2 →](/blog/day-002-proxmox-cluster-and-first-vms) where we get Proxmox clustered and first VMs running.
|
||||||
39
src/content/blog/day-002-proxmox-cluster-and-first-vms.md
Normal file
39
src/content/blog/day-002-proxmox-cluster-and-first-vms.md
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
---
|
||||||
|
title: "Day 2 — Proxmox Cluster, VLANs, and the First Real Mistake"
|
||||||
|
description: "Getting Proxmox VE into a proper cluster, carving VLANs in OPNsense, and the routing loop that ate an hour of my evening."
|
||||||
|
pubDate: 2024-11-08
|
||||||
|
day: 2
|
||||||
|
tags: ["proxmox", "networking", "opnsense", "vlans"]
|
||||||
|
---
|
||||||
|
|
||||||
|
## Proxmox Cluster
|
||||||
|
|
||||||
|
With two nodes up, it was time to cluster them. Proxmox's cluster setup is deceptively straightforward in the happy path. The catch is Corosync — it's very opinionated about network latency and quorum, and if you misconfigure which interface carries cluster traffic, you will have a bad time.
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# On node 1:
|
||||||
|
pvecm create homelab-cluster
|
||||||
|
|
||||||
|
# On node 2:
|
||||||
|
pvecm add <node1-ip>
|
||||||
|
```
|
||||||
|
|
||||||
|
## VLAN Design
|
||||||
|
|
||||||
|
I settled on a simple scheme early and stuck to it:
|
||||||
|
|
||||||
|
| VLAN | Purpose | Subnet |
|
||||||
|
|------|--------------------------|-----------------|
|
||||||
|
| 10 | Management (IPMI, etc.) | 10.0.10.0/24 |
|
||||||
|
| 20 | Proxmox hosts | 10.0.20.0/24 |
|
||||||
|
| 30 | Kubernetes pods | 10.0.30.0/24 |
|
||||||
|
| 40 | Media / untrusted VMs | 10.0.40.0/24 |
|
||||||
|
| 50 | IoT | 10.0.50.0/24 |
|
||||||
|
|
||||||
|
The management VLAN is firewalled hard — nothing from VLAN 40 or 50 touches it.
|
||||||
|
|
||||||
|
## The Mistake
|
||||||
|
|
||||||
|
I fat-fingered a firewall rule in OPNsense that accidentally allowed VLAN 40 to reach the Proxmox management interface. I only noticed because I was testing my GeoIP block rules and a route showed up that shouldn't have existed.
|
||||||
|
|
||||||
|
Lesson: always add a deny-all rule at the bottom of every VLAN's outbound chain, even when it feels redundant. Explicit beats implicit.
|
||||||
63
src/content/blog/day-003-kubernetes-flux-gitops.md
Normal file
63
src/content/blog/day-003-kubernetes-flux-gitops.md
Normal file
@@ -0,0 +1,63 @@
|
|||||||
|
---
|
||||||
|
title: "Day 3 — Kubernetes on Bare Metal, Flux GitOps, and Why I Stopped Using k3s"
|
||||||
|
description: "Graduating from k3s to full kubeadm, setting up Flux CD for GitOps, and the first taste of what Longhorn storage actually means."
|
||||||
|
pubDate: 2024-11-15
|
||||||
|
day: 3
|
||||||
|
tags: ["kubernetes", "flux", "gitops", "longhorn", "k8s"]
|
||||||
|
---
|
||||||
|
|
||||||
|
## Why Not k3s Forever?
|
||||||
|
|
||||||
|
k3s is excellent. I used it for two months and it worked fine. I moved to full Kubernetes (kubeadm) for one reason: I wanted the experience to transfer directly to production environments. At work we don't run k3s. The extra complexity of kubeadm is the point.
|
||||||
|
|
||||||
|
## The Install
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# kubeadm init on control plane
|
||||||
|
sudo kubeadm init \
|
||||||
|
--pod-network-cidr=10.244.0.0/16 \
|
||||||
|
--control-plane-endpoint="k8s-control.int.h0melab.uk"
|
||||||
|
|
||||||
|
# CNI — went with Cilium over Flannel for eBPF goodness
|
||||||
|
helm install cilium cilium/cilium --namespace kube-system
|
||||||
|
```
|
||||||
|
|
||||||
|
## Flux GitOps
|
||||||
|
|
||||||
|
This was the decision that changed everything. Instead of `kubectl apply`-ing manifests, every change goes through Git:
|
||||||
|
|
||||||
|
```
|
||||||
|
homelab-k8s/
|
||||||
|
├── clusters/homelab/
|
||||||
|
│ ├── flux-system/ ← Flux's own manifests
|
||||||
|
│ ├── infrastructure/ ← Traefik, Longhorn, cert-manager
|
||||||
|
│ └── apps/ ← Actual workloads
|
||||||
|
```
|
||||||
|
|
||||||
|
The golden rule I established here: **Chart.yaml version bumps are required for Flux to pick up Helm chart changes.** Forgot this approximately 15 times before it became instinct.
|
||||||
|
|
||||||
|
## Longhorn
|
||||||
|
|
||||||
|
Distributed block storage across three worker nodes. The UI is surprisingly good. The first time I watched a volume replica heal itself after a node reboot, I understood why people write blog posts about storage.
|
||||||
|
|
||||||
|
```yaml
|
||||||
|
# The PVC pattern I use for everything
|
||||||
|
apiVersion: v1
|
||||||
|
kind: PersistentVolumeClaim
|
||||||
|
metadata:
|
||||||
|
name: app-data
|
||||||
|
annotations:
|
||||||
|
helm.sh/resource-policy: keep # ← never delete this on helm uninstall
|
||||||
|
spec:
|
||||||
|
storageClassName: longhorn
|
||||||
|
accessModes: [ReadWriteOnce]
|
||||||
|
resources:
|
||||||
|
requests:
|
||||||
|
storage: 10Gi
|
||||||
|
```
|
||||||
|
|
||||||
|
The `helm.sh/resource-policy: keep` annotation saved my data at least twice when I was iterating on Helm releases.
|
||||||
|
|
||||||
|
## What's Next
|
||||||
|
|
||||||
|
Day 4 covers the monitoring stack — Netdata agents, VictoriaMetrics as the TSDB, and getting Grafana to look like something I'd actually want to stare at during an incident.
|
||||||
15
src/content/config.ts
Normal file
15
src/content/config.ts
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
import { defineCollection, z } from 'astro:content';
|
||||||
|
|
||||||
|
const blog = defineCollection({
|
||||||
|
type: 'content',
|
||||||
|
schema: z.object({
|
||||||
|
title: z.string(),
|
||||||
|
description: z.string(),
|
||||||
|
pubDate: z.coerce.date(),
|
||||||
|
tags: z.array(z.string()).optional().default([]),
|
||||||
|
day: z.number().optional(), // Day 1, Day 2, etc.
|
||||||
|
draft: z.boolean().optional().default(false),
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
export const collections = { blog };
|
||||||
302
src/layouts/BaseLayout.astro
Normal file
302
src/layouts/BaseLayout.astro
Normal file
@@ -0,0 +1,302 @@
|
|||||||
|
---
|
||||||
|
import '../styles/global.css';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
description?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title, description = 'HPC Sysadmin blog — ARCHER2, Cirrus & homelab adventures' } = Astro.props;
|
||||||
|
const pathname = new URL(Astro.request.url).pathname;
|
||||||
|
|
||||||
|
const navLinks = [
|
||||||
|
{ href: '/#recent-posts', label: 'Home' },
|
||||||
|
{ href: '/blog', label: 'Blog' },
|
||||||
|
// { href: '/homelab', label: 'Homelab' },
|
||||||
|
// { href: '/hardware', label: 'Hardware' },
|
||||||
|
];
|
||||||
|
---
|
||||||
|
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<meta name="description" content={description} />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||||
|
<title>{title} | slashroot.cc</title>
|
||||||
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<!-- ── Nav ─────────────────────────────────────────────── -->
|
||||||
|
<header id="site-nav">
|
||||||
|
<nav class="nav-inner container">
|
||||||
|
<a href="/" class="nav-logo">
|
||||||
|
<span class="nav-logo-bracket">/</span>slashroot<span class="nav-logo-accent">.</span>cc
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<ul class="nav-links">
|
||||||
|
{navLinks.map(({ href, label }) => (
|
||||||
|
<li>
|
||||||
|
<a
|
||||||
|
href={href}
|
||||||
|
class:list={['nav-link', { active: pathname === '/' || (href !== '/' && pathname.startsWith(href.split('#')[0])) }]}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<!-- Uptime Kuma live status badge -->
|
||||||
|
<div class="nav-status" id="nav-uptime">
|
||||||
|
<span class="status-dot" id="status-dot"></span>
|
||||||
|
<span class="font-mono nav-status-text" id="status-text">checking…</span>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- ── Page content ─────────────────────────────────────── -->
|
||||||
|
<main>
|
||||||
|
<slot />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<!-- ── Footer ───────────────────────────────────────────── -->
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container footer-inner">
|
||||||
|
<div class="footer-brand">
|
||||||
|
<span class="font-display" style="font-size:1.1rem">/slashroot<span class="text-accent">.</span>cc</span>
|
||||||
|
<p class="text-muted" style="font-size:0.8rem;margin-top:0.4rem">
|
||||||
|
Built with Astro by Raul 💙
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="footer-links">
|
||||||
|
<a href="https://git.h0melab.uk" target="_blank" rel="noopener" class="text-muted footer-link">Gitea</a>
|
||||||
|
<a href="/blog" class="text-muted footer-link">Blog</a>
|
||||||
|
<a href="/hardware" class="text-muted footer-link">Hardware</a>
|
||||||
|
</div>
|
||||||
|
<p class="footer-copy text-muted font-mono">
|
||||||
|
© 2025 - {new Date().getFullYear()} · slashroot.cc
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<!-- Nav scroll behaviour + Uptime Kuma status -->
|
||||||
|
<script is:inline>
|
||||||
|
const UPTIME_URL = 'https://uptime.int.h0melab.uk/api/status-page/heartbeat/homelab';
|
||||||
|
const dot = document.getElementById('status-dot');
|
||||||
|
const text = document.getElementById('status-text');
|
||||||
|
|
||||||
|
async function fetchStatus() {
|
||||||
|
try {
|
||||||
|
const res = await fetch(`${UPTIME_URL}?t=${Date.now()}`, {
|
||||||
|
signal: AbortSignal.timeout(5000)
|
||||||
|
});
|
||||||
|
const data = await res.json();
|
||||||
|
|
||||||
|
const monitorIds = Object.keys(data.heartbeatList || {});
|
||||||
|
let overallState = 'up';
|
||||||
|
let label = 'all systems nominal';
|
||||||
|
|
||||||
|
if (monitorIds.length === 0) {
|
||||||
|
overallState = 'unknown';
|
||||||
|
label = 'no data';
|
||||||
|
} else {
|
||||||
|
// Single loop to determine status
|
||||||
|
for (const id of monitorIds) {
|
||||||
|
const history = data.heartbeatList[id];
|
||||||
|
const latest = history[history.length - 1];
|
||||||
|
|
||||||
|
// Status Codes: 0=Down, 1=Up, 2=Pending, 3=Maintenance
|
||||||
|
if (latest.status === 0) {
|
||||||
|
overallState = 'down';
|
||||||
|
label = 'system degraded';
|
||||||
|
break; // Priority 1: If anything is down, we are down
|
||||||
|
} else if (latest.status === 2) {
|
||||||
|
overallState = 'pending';
|
||||||
|
label = 'checking...';
|
||||||
|
} else if (latest.status !== 1 && overallState !== 'pending') {
|
||||||
|
overallState = 'unknown';
|
||||||
|
label = 'status unknown';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setStatus(overallState, label);
|
||||||
|
} catch (err) {
|
||||||
|
// THIS WILL PRINT THE EXACT ERROR TO YOUR BROWSER CONSOLE (F12)
|
||||||
|
console.error('DETAILED ERROR:', err);
|
||||||
|
setStatus('unknown', 'status unknown');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setStatus(state, label) {
|
||||||
|
if (!dot || !text) return;
|
||||||
|
text.textContent = label;
|
||||||
|
dot.setAttribute('data-state', state);
|
||||||
|
|
||||||
|
// Pulse/Glow logic
|
||||||
|
if (state === 'down') {
|
||||||
|
dot.style.boxShadow = '0 0 10px #ff4444';
|
||||||
|
dot.style.background = '#ff4444';
|
||||||
|
} else if (state === 'up') {
|
||||||
|
dot.style.boxShadow = '0 0 8px var(--petronas-teal)';
|
||||||
|
dot.style.background = 'var(--petronas-teal)';
|
||||||
|
} else {
|
||||||
|
dot.style.boxShadow = '0 0 8px #FFB800';
|
||||||
|
dot.style.background = '#FFB800';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initial call and interval
|
||||||
|
fetchStatus();
|
||||||
|
setInterval(fetchStatus, 60000);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* Nav */
|
||||||
|
#site-nav {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
inset-inline: 0;
|
||||||
|
z-index: 100;
|
||||||
|
padding: 1.25rem 0;
|
||||||
|
transition: background var(--transition-med), backdrop-filter var(--transition-med), padding var(--transition-med), border-color var(--transition-med);
|
||||||
|
border-bottom: 1px solid transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
#site-nav.scrolled {
|
||||||
|
background: rgba(5, 10, 10, 0.85);
|
||||||
|
backdrop-filter: blur(16px);
|
||||||
|
padding: 0.75rem 0;
|
||||||
|
border-bottom-color: var(--border-subtle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-inner {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-logo {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--text-primary);
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
.nav-logo-bracket { color: var(--petronas-teal); font-weight: 400; }
|
||||||
|
.nav-logo-accent { color: var(--petronas-teal); }
|
||||||
|
|
||||||
|
.nav-links {
|
||||||
|
display: flex;
|
||||||
|
list-style: none;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-link {
|
||||||
|
display: block;
|
||||||
|
padding: 0.35rem 0.85rem;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: color var(--transition-fast), background var(--transition-fast);
|
||||||
|
}
|
||||||
|
.nav-link:hover { color: var(--text-primary); background: var(--bg-surface); }
|
||||||
|
.nav-link.active { color: var(--petronas-teal); }
|
||||||
|
|
||||||
|
.nav-status {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-status-text {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
transition: color 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Status dot — colour driven by data-state attribute set by JS */
|
||||||
|
.status-dot {
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
background: var(--petronas-teal);
|
||||||
|
box-shadow: 0 0 8px var(--petronas-teal);
|
||||||
|
animation: pulse-dot 2.5s ease-in-out infinite;
|
||||||
|
transition: background 0.4s, box-shadow 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* up = teal (default) */
|
||||||
|
.status-dot[data-state="up"] {
|
||||||
|
background: var(--petronas-teal);
|
||||||
|
box-shadow: 0 0 8px var(--petronas-teal);
|
||||||
|
}
|
||||||
|
/* down = red */
|
||||||
|
.status-dot[data-state="down"] {
|
||||||
|
background: #FF4444;
|
||||||
|
box-shadow: 0 0 8px #FF4444;
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
/* pending / unknown = amber */
|
||||||
|
.status-dot[data-state="pending"],
|
||||||
|
.status-dot[data-state="unknown"] {
|
||||||
|
background: #FFB800;
|
||||||
|
box-shadow: 0 0 8px #FFB800;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes pulse-dot {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.35; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.site-footer {
|
||||||
|
border-top: 1px solid var(--border-subtle);
|
||||||
|
padding: 3rem 0;
|
||||||
|
margin-top: 6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-inner {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto auto;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-links {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.3rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-link {
|
||||||
|
font-size: 0.90rem;
|
||||||
|
transition: color var(--transition-fast);
|
||||||
|
}
|
||||||
|
.footer-link:hover { color: var(--petronas-teal); }
|
||||||
|
|
||||||
|
.footer-copy { font-size: 0.90rem; }
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.nav-status { display: none; }
|
||||||
|
.nav-link { padding: 0.3rem 0.5rem; font-size: 0.90rem; }
|
||||||
|
.footer-inner { grid-template-columns: 1fr; text-align: center; }
|
||||||
|
.footer-links { justify-content: center; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
128
src/layouts/PostLayout.astro
Normal file
128
src/layouts/PostLayout.astro
Normal file
@@ -0,0 +1,128 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from './BaseLayout.astro';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
pubDate: Date;
|
||||||
|
tags?: string[];
|
||||||
|
day?: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
const { title, description, pubDate, tags = [], day } = Astro.props;
|
||||||
|
|
||||||
|
const formatted = pubDate.toLocaleDateString('en-GB', {
|
||||||
|
day: 'numeric', month: 'long', year: 'numeric'
|
||||||
|
});
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title={title} description={description}>
|
||||||
|
<article class="post-wrapper">
|
||||||
|
<div class="post-hero container">
|
||||||
|
{day && (
|
||||||
|
<div class="day-badge font-mono">
|
||||||
|
<span class="text-muted">entry_</span>{String(day).padStart(3, '0')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<h1 class="post-title">{title}</h1>
|
||||||
|
<p class="post-description text-muted">{description}</p>
|
||||||
|
<div class="post-meta">
|
||||||
|
<time class="font-mono text-muted" datetime={pubDate.toISOString()}>{formatted}</time>
|
||||||
|
<div class="post-tags">
|
||||||
|
{tags.map(tag => <span class="tag">{tag}</span>)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<hr class="glow-divider" />
|
||||||
|
|
||||||
|
<div class="post-body container">
|
||||||
|
<div class="prose">
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
|
<aside class="post-sidebar">
|
||||||
|
<div class="card sidebar-card">
|
||||||
|
<p class="font-display" style="font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1rem">On this page</p>
|
||||||
|
<div id="toc-placeholder" class="font-mono text-muted" style="font-size:0.78rem">
|
||||||
|
<!-- populated by JS -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{tags.length > 0 && (
|
||||||
|
<div class="card sidebar-card" style="margin-top:1rem">
|
||||||
|
<p class="font-display" style="font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.75rem">Tags</p>
|
||||||
|
<div style="display:flex;flex-wrap:wrap;gap:0.4rem">
|
||||||
|
{tags.map(tag => <span class="tag">{tag}</span>)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<a href="/blog" class="btn btn-primary" style="margin-top:1rem;width:100%;justify-content:center">← All posts</a>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</BaseLayout>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// Auto-generate TOC from headings
|
||||||
|
const toc = document.getElementById('toc-placeholder');
|
||||||
|
if (toc) {
|
||||||
|
const headings = document.querySelectorAll('.prose h2, .prose h3');
|
||||||
|
if (headings.length === 0) {
|
||||||
|
toc.textContent = '—';
|
||||||
|
} else {
|
||||||
|
headings.forEach((h, i) => {
|
||||||
|
if (!h.id) h.id = `heading-${i}`;
|
||||||
|
const a = document.createElement('a');
|
||||||
|
a.href = `#${h.id}`;
|
||||||
|
a.textContent = (h.tagName === 'H3' ? ' · ' : '') + h.textContent;
|
||||||
|
a.style.cssText = 'display:block;color:var(--text-muted);margin-bottom:0.4rem;font-size:0.75rem;transition:color 150ms';
|
||||||
|
a.addEventListener('mouseenter', () => a.style.color = 'var(--petronas-teal)');
|
||||||
|
a.addEventListener('mouseleave', () => a.style.color = 'var(--text-muted)');
|
||||||
|
toc.appendChild(a);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.post-wrapper { padding-top: 8rem; padding-bottom: 4rem; }
|
||||||
|
|
||||||
|
.post-hero { max-width: 900px; }
|
||||||
|
|
||||||
|
.day-badge {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--petronas-teal);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-title { margin-bottom: 1rem; }
|
||||||
|
|
||||||
|
.post-description {
|
||||||
|
font-size: 1.15rem;
|
||||||
|
max-width: 65ch;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; }
|
||||||
|
|
||||||
|
.post-body {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 260px;
|
||||||
|
gap: 4rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-card { position: sticky; top: 6rem; }
|
||||||
|
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
.post-body { grid-template-columns: 1fr; }
|
||||||
|
.post-sidebar { display: none; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
29
src/pages/404.astro
Normal file
29
src/pages/404.astro
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title="404">
|
||||||
|
<div class="not-found container">
|
||||||
|
<div class="accent-line"></div>
|
||||||
|
<div class="err-code font-mono">exit code 404</div>
|
||||||
|
<h1>Node <span class="text-accent">Not Found</span></h1>
|
||||||
|
<p class="text-muted" style="margin:1.5rem 0 2.5rem;font-family:var(--font-mono);font-size:0.9rem">
|
||||||
|
$ ping {Astro.url.pathname} — <span class="text-accent">100% packet loss</span>
|
||||||
|
</p>
|
||||||
|
<a href="/" class="btn btn-primary">← back to /</a>
|
||||||
|
</div>
|
||||||
|
</BaseLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.not-found {
|
||||||
|
padding-top: 14rem;
|
||||||
|
padding-bottom: 8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.err-code {
|
||||||
|
font-size: 0.75rem;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
25
src/pages/blog/[slug].astro
Normal file
25
src/pages/blog/[slug].astro
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
---
|
||||||
|
import { getCollection, render } from 'astro:content';
|
||||||
|
import PostLayout from '../../layouts/PostLayout.astro';
|
||||||
|
|
||||||
|
export async function getStaticPaths() {
|
||||||
|
const posts = await getCollection('blog', ({ data }) => !data.draft);
|
||||||
|
return posts.map(post => ({
|
||||||
|
params: { slug: post.id },
|
||||||
|
props: { post },
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
|
||||||
|
const { post } = Astro.props;
|
||||||
|
const { Content } = await render(post);
|
||||||
|
---
|
||||||
|
|
||||||
|
<PostLayout
|
||||||
|
title={post.data.title}
|
||||||
|
description={post.data.description}
|
||||||
|
pubDate={post.data.pubDate}
|
||||||
|
tags={post.data.tags}
|
||||||
|
day={post.data.day}
|
||||||
|
>
|
||||||
|
<Content />
|
||||||
|
</PostLayout>
|
||||||
131
src/pages/blog/index.astro
Normal file
131
src/pages/blog/index.astro
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../../layouts/BaseLayout.astro';
|
||||||
|
import { getCollection } from 'astro:content';
|
||||||
|
|
||||||
|
const allPosts = (await getCollection('blog', ({ data }) => !data.draft))
|
||||||
|
.sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
|
||||||
|
|
||||||
|
// Group by tags for sidebar
|
||||||
|
const allTags = [...new Set(allPosts.flatMap(p => p.data.tags ?? []))].sort();
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title="Blog" description="Sysadmin chronicles — HPC, homelab, and everything in between">
|
||||||
|
<div class="blog-page">
|
||||||
|
<div class="blog-hero container">
|
||||||
|
<div class="accent-line"></div>
|
||||||
|
<h1>The <span class="text-accent">Log</span></h1>
|
||||||
|
<p class="text-muted font-mono" style="font-size:0.9rem;margin-top:0.5rem">
|
||||||
|
{allPosts.length} entries · HPC · homelab · infra · ops
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="blog-layout container">
|
||||||
|
<!-- Post list -->
|
||||||
|
<div class="post-list">
|
||||||
|
{allPosts.map((post, i) => (
|
||||||
|
<article class="post-row card">
|
||||||
|
<a href={`/blog/${post.id}`} class="post-row-link">
|
||||||
|
<div class="post-row-left">
|
||||||
|
{post.data.day && (
|
||||||
|
<div class="font-mono" style="font-size:0.7rem;color:var(--petronas-teal);letter-spacing:0.1em;margin-bottom:0.3rem">
|
||||||
|
entry_{String(post.data.day).padStart(3,'0')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<h2 class="post-row-title">{post.data.title}</h2>
|
||||||
|
<p class="text-muted post-row-desc">{post.data.description}</p>
|
||||||
|
<div class="post-row-meta">
|
||||||
|
<time class="font-mono text-muted" style="font-size:0.72rem">
|
||||||
|
{post.data.pubDate.toLocaleDateString('en-GB', {day:'numeric',month:'short',year:'numeric'})}
|
||||||
|
</time>
|
||||||
|
<div style="display:flex;gap:0.35rem;flex-wrap:wrap">
|
||||||
|
{(post.data.tags ?? []).map((t: string) => <span class="tag">{t}</span>)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="post-row-arrow text-accent font-display">→</div>
|
||||||
|
</a>
|
||||||
|
</article>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Sidebar -->
|
||||||
|
<aside class="blog-sidebar">
|
||||||
|
<div class="card" style="position:sticky;top:5.5rem">
|
||||||
|
<p class="font-display" style="font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1rem">Tags</p>
|
||||||
|
<div style="display:flex;flex-wrap:wrap;gap:0.4rem">
|
||||||
|
{allTags.map(t => <span class="tag">{t}</span>)}
|
||||||
|
</div>
|
||||||
|
<hr class="glow-divider" style="margin:1.5rem 0" />
|
||||||
|
<p class="font-display" style="font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.75rem">Navigate</p>
|
||||||
|
<div style="display:flex;flex-direction:column;gap:0.35rem">
|
||||||
|
<a href="/" class="text-muted font-mono" style="font-size:0.8rem">← Home</a>
|
||||||
|
<a href="/homelab" class="text-muted font-mono" style="font-size:0.8rem">Homelab status</a>
|
||||||
|
<a href="/hardware" class="text-muted font-mono" style="font-size:0.8rem">Hardware list</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</aside>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</BaseLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.blog-page { padding-top: 8rem; }
|
||||||
|
|
||||||
|
.blog-hero { margin-bottom: 3.5rem; }
|
||||||
|
|
||||||
|
.blog-layout {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 240px;
|
||||||
|
gap: 3rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-list { display: flex; flex-direction: column; gap: 1rem; }
|
||||||
|
|
||||||
|
.post-row { padding: 0; }
|
||||||
|
|
||||||
|
.post-row-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 1.5rem;
|
||||||
|
padding: 1.5rem;
|
||||||
|
color: inherit;
|
||||||
|
transition: background var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-row:hover .post-row-title { color: var(--petronas-teal); }
|
||||||
|
|
||||||
|
.post-row-left { flex: 1; }
|
||||||
|
|
||||||
|
.post-row-title {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
transition: color var(--transition-fast);
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-row-desc {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
line-height: 1.55;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-row-meta {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.post-row-arrow {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
opacity: 0.3;
|
||||||
|
transition: opacity var(--transition-fast), transform var(--transition-fast);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.post-row:hover .post-row-arrow { opacity: 1; transform: translateX(4px); }
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.blog-layout { grid-template-columns: 1fr; }
|
||||||
|
.blog-sidebar { display: none; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
331
src/pages/hardware.astro
Normal file
331
src/pages/hardware.astro
Normal file
@@ -0,0 +1,331 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
|
|
||||||
|
// ── Hardware data — edit this as your inventory grows ──────────
|
||||||
|
const hardware = {
|
||||||
|
compute: [
|
||||||
|
{
|
||||||
|
name: 'Proxmox Node 01',
|
||||||
|
model: 'Dell PowerEdge R730',
|
||||||
|
specs: ['2× Intel Xeon E5-2680v4 (28C/56T total)', '256GB DDR4 ECC LRDIMM', '2× 10GbE SFP+', 'iDRAC8 Enterprise', 'H730 RAID (passthrough)'],
|
||||||
|
role: 'Primary Proxmox hypervisor · VM host',
|
||||||
|
status: 'online',
|
||||||
|
location: 'homelab rack · U4',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Proxmox Node 02',
|
||||||
|
model: 'Dell PowerEdge R720',
|
||||||
|
specs: ['2× Intel Xeon E5-2670 (16C/32T total)', '128GB DDR3 ECC RDIMM', '2× 1GbE', 'iDRAC7 Enterprise'],
|
||||||
|
role: 'Secondary Proxmox node · backup workloads',
|
||||||
|
status: 'online',
|
||||||
|
location: 'homelab rack · U6',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Raspberry Pi 4 (8GB)',
|
||||||
|
model: 'Raspberry Pi 4 Model B',
|
||||||
|
specs: ['Broadcom BCM2711 (4× Cortex-A72)', '8GB LPDDR4', '2× USB 3.0, Gigabit Ethernet', '64GB Samsung Pro Endurance microSD'],
|
||||||
|
role: 'PXE boot server · ISC26 cluster deployment',
|
||||||
|
status: 'online',
|
||||||
|
location: 'desk · USB-C powered',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
storage: [
|
||||||
|
{
|
||||||
|
name: 'ZFS NAS — zfs-oporto',
|
||||||
|
model: 'Custom Proxmox VM → ZFS passthrough',
|
||||||
|
specs: ['4× Seagate IronWolf 8TB (RAIDZ2)', '2× Samsung 870 EVO 1TB (SSD special class vdev)', 'ZFS 2.2 — RAIDZ expansion capable', '~20TB usable raw (RAIDZ2 overhead)'],
|
||||||
|
role: 'Primary NAS · NFS exports to K8s · Immich storage',
|
||||||
|
status: 'online',
|
||||||
|
location: 'pve-01 · RAIDZ2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Longhorn Cluster Storage',
|
||||||
|
model: 'Distributed across k8s-worker1/2',
|
||||||
|
specs: ['2× 500GB NVMe (worker1)', '2× 500GB NVMe (worker2)', '3-replica default policy'],
|
||||||
|
role: 'Kubernetes persistent volumes · Longhorn CSI',
|
||||||
|
status: 'online',
|
||||||
|
location: 'k8s-worker1 / k8s-worker2',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
networking: [
|
||||||
|
{
|
||||||
|
name: 'OPNsense Firewall',
|
||||||
|
model: 'Protectli VP2420',
|
||||||
|
specs: ['Intel Celeron J6413', '8GB DDR4', '4× 2.5GbE Intel i226', '64GB eMMC', 'OPNsense 26.1'],
|
||||||
|
role: 'Edge router · Firewall · WireGuard VPN · Unbound DNS · GeoIP blocks',
|
||||||
|
status: 'online',
|
||||||
|
location: 'homelab rack · U1',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Core Switch',
|
||||||
|
model: 'Cisco SG300-28PP',
|
||||||
|
specs: ['24× PoE+ 1GbE', '2× 1GbE combo SFP', 'Layer 3 managed', '375W PoE budget'],
|
||||||
|
role: 'Core VLAN switch · LAG to hypervisors',
|
||||||
|
status: 'online',
|
||||||
|
location: 'homelab rack · U2',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'AP',
|
||||||
|
model: 'Ubiquiti U6-Lite',
|
||||||
|
specs: ['WiFi 6 (802.11ax)', '2.4 + 5GHz', 'PoE powered'],
|
||||||
|
role: 'Wireless · separate IoT SSID on VLAN50',
|
||||||
|
status: 'online',
|
||||||
|
location: 'ceiling mount',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
work_hpc: [
|
||||||
|
{
|
||||||
|
name: 'ARCHER2 (EPCC)',
|
||||||
|
model: 'HPE Cray EX — AMD EPYC 7742',
|
||||||
|
specs: ['5,860 compute nodes', '2× AMD EPYC 7742 (128C/node)', '256GB DDR4 ECC/node', 'HPE Slingshot 11 100Gb/s HSN', '14.1 PiB Lustre storage'],
|
||||||
|
role: 'UK National HPC facility · sysadmin',
|
||||||
|
status: 'production',
|
||||||
|
location: 'EPCC · Edinburgh',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Cirrus (EPCC)',
|
||||||
|
model: 'SGI ICE XA / HPE ProLiant XL230a',
|
||||||
|
specs: ['280 compute nodes', '2× Intel Xeon E5-2695v4 (36C/node)', '256GB DDR4/node', 'Intel OmniPath HSN', 'Cirrus EX GPU partition: HPE Cray EX235n'],
|
||||||
|
role: 'EPCC Tier-2 HPC · sysadmin · GPU partition admin',
|
||||||
|
status: 'production',
|
||||||
|
location: 'EPCC · Edinburgh',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'ISC26 Competition Cluster',
|
||||||
|
model: 'Atos BullSequana XH2000',
|
||||||
|
specs: ['1× BullSequana XD670 GPU node (4× NVIDIA H100 80GB)', '8× BullSequana XD2000 CPU nodes', 'NDR 400Gb/s InfiniBand fabric (Cornelis)', 'Raspberry Pi 4 PXE deployment server'],
|
||||||
|
role: 'ISC26 Student Cluster Competition — Hamburg 2026',
|
||||||
|
status: 'building',
|
||||||
|
location: 'EPCC · Edinburgh',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
peripherals: [
|
||||||
|
{
|
||||||
|
name: 'Main Monitor',
|
||||||
|
model: 'LG 27UK850-W',
|
||||||
|
specs: ['27" 4K IPS', 'USB-C 60W PD', 'HDR400', 'USB-C + HDMI + DP'],
|
||||||
|
role: 'Primary display',
|
||||||
|
status: 'online',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '3D Printer',
|
||||||
|
model: 'Anycubic Kobra S1',
|
||||||
|
specs: ['FDM · 220×220×250mm build volume', 'Auto-levelling', 'Direct drive'],
|
||||||
|
role: 'Printing rack accessories, cable guides, custom mounts',
|
||||||
|
status: 'idle',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Laser Printer',
|
||||||
|
model: 'Kyocera ECOSYS M2135dn',
|
||||||
|
specs: ['A4 mono laser MFP', 'Duplex · LAN · ADF', '35ppm'],
|
||||||
|
role: 'Documents · printing homelab diagrams',
|
||||||
|
status: 'idle',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
const categories = [
|
||||||
|
{ key: 'compute', label: 'Compute', icon: '▣' },
|
||||||
|
{ key: 'storage', label: 'Storage', icon: '◈' },
|
||||||
|
{ key: 'networking', label: 'Networking', icon: '⇅' },
|
||||||
|
{ key: 'work_hpc', label: 'Work / HPC', icon: '⬡' },
|
||||||
|
{ key: 'peripherals',label: 'Peripherals & Misc', icon: '◎' },
|
||||||
|
];
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title="Hardware" description="Full hardware inventory — homelab and work HPC systems">
|
||||||
|
<div class="hardware-page">
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<div class="page-hero container">
|
||||||
|
<div class="accent-line"></div>
|
||||||
|
<h1>Hardware <span class="text-accent">Inventory</span></h1>
|
||||||
|
<p class="text-muted font-mono" style="font-size:0.88rem;margin-top:0.5rem">
|
||||||
|
Everything physical I touch, rack and bench · last updated 2025
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Jump nav -->
|
||||||
|
<div class="container jump-nav">
|
||||||
|
{categories.map(cat => (
|
||||||
|
<a href={`#${cat.key}`} class="jump-chip">
|
||||||
|
<span class="text-accent">{cat.icon}</span>
|
||||||
|
<span>{cat.label}</span>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Category sections -->
|
||||||
|
{categories.map(cat => (
|
||||||
|
<section class="section container hw-section" id={cat.key}>
|
||||||
|
<div class="hw-section-header">
|
||||||
|
<span class="hw-icon text-accent">{cat.icon}</span>
|
||||||
|
<h2>{cat.label}</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="hw-grid">
|
||||||
|
{(hardware as any)[cat.key].map((item: any) => (
|
||||||
|
<div class="card hw-card">
|
||||||
|
<div class="hw-card-header">
|
||||||
|
<div>
|
||||||
|
<div class="hw-name font-display">{item.name}</div>
|
||||||
|
<div class="hw-model font-mono">{item.model}</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
class="hw-status tag"
|
||||||
|
style={
|
||||||
|
item.status === 'online' ? '' :
|
||||||
|
item.status === 'production' ? 'color:#00D2BE;border-color:#00D2BE;background:rgba(0,210,190,0.08)' :
|
||||||
|
item.status === 'building' ? 'color:#FFB800;border-color:#FFB800;background:rgba(255,184,0,0.08)' :
|
||||||
|
'color:var(--text-muted);border-color:var(--border-subtle);background:transparent'
|
||||||
|
}
|
||||||
|
>{item.status}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="hw-specs">
|
||||||
|
{item.specs.map((s: string) => (
|
||||||
|
<li class="hw-spec">
|
||||||
|
<span class="spec-bullet text-accent">▸</span>
|
||||||
|
<span>{s}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<div class="hw-footer">
|
||||||
|
<span class="hw-role text-muted">{item.role}</span>
|
||||||
|
{item.location && (
|
||||||
|
<span class="hw-location font-mono">{item.location}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<!-- Total count footer -->
|
||||||
|
<div class="container hw-totals">
|
||||||
|
<div class="card" style="padding:1.5rem;text-align:center">
|
||||||
|
<p class="font-mono text-muted" style="font-size:0.8rem">
|
||||||
|
{Object.values(hardware).flat().length} items catalogued ·
|
||||||
|
<span class="text-accent">rack::log hardware registry</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</BaseLayout>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.hardware-page { padding-top: 8rem; padding-bottom: 4rem; }
|
||||||
|
|
||||||
|
.page-hero { margin-bottom: 2.5rem; }
|
||||||
|
|
||||||
|
/* Jump nav */
|
||||||
|
.jump-nav {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-bottom: 4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.jump-chip {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.4rem;
|
||||||
|
padding: 0.35rem 0.9rem;
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: 20px;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
background: var(--bg-surface);
|
||||||
|
transition: all var(--transition-fast);
|
||||||
|
}
|
||||||
|
.jump-chip:hover {
|
||||||
|
border-color: var(--border-glow);
|
||||||
|
color: var(--petronas-teal);
|
||||||
|
background: var(--petronas-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section header */
|
||||||
|
.hw-section { padding-top: 3rem; padding-bottom: 1rem; }
|
||||||
|
|
||||||
|
.hw-section-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
margin-bottom: 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hw-icon { font-size: 1.4rem; }
|
||||||
|
|
||||||
|
/* Cards */
|
||||||
|
.hw-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hw-card { display: flex; flex-direction: column; gap: 1rem; }
|
||||||
|
|
||||||
|
.hw-card-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hw-name {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hw-model {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: var(--petronas-teal);
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hw-status { white-space: nowrap; flex-shrink: 0; }
|
||||||
|
|
||||||
|
/* Specs list */
|
||||||
|
.hw-specs {
|
||||||
|
list-style: none;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.35rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hw-spec {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.83rem;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
line-height: 1.4;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spec-bullet { font-size: 0.6rem; flex-shrink: 0; margin-top: 0.15rem; }
|
||||||
|
|
||||||
|
/* Footer */
|
||||||
|
.hw-footer {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
padding-top: 0.75rem;
|
||||||
|
border-top: 1px solid var(--border-subtle);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hw-role { font-size: 0.8rem; }
|
||||||
|
.hw-location { font-size: 0.68rem; color: var(--text-muted); }
|
||||||
|
|
||||||
|
/* Totals */
|
||||||
|
.hw-totals { margin-top: 4rem; }
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
.hw-grid { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
506
src/pages/homelab.astro
Normal file
506
src/pages/homelab.astro
Normal file
@@ -0,0 +1,506 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title="Homelab" description="Live status and architecture of my homelab — h0melab.uk">
|
||||||
|
<div class="homelab-page">
|
||||||
|
|
||||||
|
<!-- Hero -->
|
||||||
|
<div class="page-hero container">
|
||||||
|
<div class="accent-line"></div>
|
||||||
|
<h1>Homelab <span class="text-accent">Status</span></h1>
|
||||||
|
<p class="text-muted font-mono" style="font-size:0.88rem;margin-top:0.5rem">
|
||||||
|
h0melab.uk · Edinburgh ·
|
||||||
|
<span id="uptime-badge" class="text-accent">fetching uptime…</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Architecture diagram -->
|
||||||
|
<section class="section container">
|
||||||
|
<h2 class="section-title">Architecture</h2>
|
||||||
|
<div class="arch-diagram card">
|
||||||
|
<div class="arch-grid" id="arch-grid">
|
||||||
|
|
||||||
|
<!-- Tier: Internet -->
|
||||||
|
<div class="arch-tier">
|
||||||
|
<div class="tier-label font-mono">internet</div>
|
||||||
|
<div class="arch-node node-external">
|
||||||
|
<span class="node-icon">☁</span>
|
||||||
|
<span class="node-name">Cloudflare</span>
|
||||||
|
<span class="node-detail font-mono">rcosta.uk · DNS · Email routing</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arch-arrow">↓</div>
|
||||||
|
|
||||||
|
<!-- Tier: Edge -->
|
||||||
|
<div class="arch-tier">
|
||||||
|
<div class="tier-label font-mono">edge</div>
|
||||||
|
<div class="arch-node node-router">
|
||||||
|
<span class="node-icon">⬡</span>
|
||||||
|
<span class="node-name">OPNsense</span>
|
||||||
|
<span class="node-detail font-mono">26.1 · GeoIP · WireGuard · Unbound</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arch-arrow">↓</div>
|
||||||
|
|
||||||
|
<!-- Tier: Core -->
|
||||||
|
<div class="arch-tier">
|
||||||
|
<div class="tier-label font-mono">core</div>
|
||||||
|
<div class="arch-row">
|
||||||
|
<div class="arch-node node-compute">
|
||||||
|
<span class="node-icon">▣</span>
|
||||||
|
<span class="node-name">Proxmox VE</span>
|
||||||
|
<span class="node-detail font-mono">2-node cluster · VLAN trunk</span>
|
||||||
|
</div>
|
||||||
|
<div class="arch-node node-storage">
|
||||||
|
<span class="node-icon">◈</span>
|
||||||
|
<span class="node-name">ZFS · zfs-oporto</span>
|
||||||
|
<span class="node-detail font-mono">RAIDZ2 · 4×HDD · NFS exports</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arch-arrow">↓</div>
|
||||||
|
|
||||||
|
<!-- Tier: K8s -->
|
||||||
|
<div class="arch-tier">
|
||||||
|
<div class="tier-label font-mono">kubernetes</div>
|
||||||
|
<div class="arch-row">
|
||||||
|
<div class="arch-node node-k8s">
|
||||||
|
<span class="node-icon">◎</span>
|
||||||
|
<span class="node-name">Control Plane</span>
|
||||||
|
<span class="node-detail font-mono">kubeadm · Cilium CNI</span>
|
||||||
|
</div>
|
||||||
|
<div class="arch-node node-k8s">
|
||||||
|
<span class="node-icon">◎</span>
|
||||||
|
<span class="node-name">Worker ×2</span>
|
||||||
|
<span class="node-detail font-mono">Longhorn · Flux GitOps</span>
|
||||||
|
</div>
|
||||||
|
<div class="arch-node node-k8s">
|
||||||
|
<span class="node-icon">◎</span>
|
||||||
|
<span class="node-name">Ingress</span>
|
||||||
|
<span class="node-detail font-mono">Traefik · Authelia · cert-manager</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="arch-arrow">↓</div>
|
||||||
|
|
||||||
|
<!-- Tier: Services -->
|
||||||
|
<div class="arch-tier">
|
||||||
|
<div class="tier-label font-mono">services</div>
|
||||||
|
<div class="arch-services">
|
||||||
|
{[
|
||||||
|
['Grafana', 'monitoring'],
|
||||||
|
['VictoriaMetrics', 'metrics'],
|
||||||
|
['Netdata', 'telemetry'],
|
||||||
|
['Paperless', 'documents'],
|
||||||
|
['Immich', 'photos'],
|
||||||
|
['Linkwarden', 'bookmarks'],
|
||||||
|
['Jellyfin', 'media'],
|
||||||
|
['Gitea', 'git'],
|
||||||
|
['Authelia', 'SSO'],
|
||||||
|
['Homepage', 'dashboard'],
|
||||||
|
['ntfy', 'notifications'],
|
||||||
|
['Stalwart', 'mail (paused)'],
|
||||||
|
].map(([name, role]) => (
|
||||||
|
<div class="service-chip">
|
||||||
|
<span class="chip-name">{name}</span>
|
||||||
|
<span class="chip-role font-mono">{role}</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr class="glow-divider container" />
|
||||||
|
|
||||||
|
<!-- Live metrics -->
|
||||||
|
<section class="section container" id="metrics">
|
||||||
|
<h2 class="section-title">Live Metrics</h2>
|
||||||
|
<p class="text-muted font-mono" style="font-size:0.8rem;margin-bottom:2rem">
|
||||||
|
Auto-refreshes every 30s ·
|
||||||
|
<span id="metrics-ts">–</span>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- Summary row -->
|
||||||
|
<div class="metrics-summary" id="metrics-summary">
|
||||||
|
<!-- JS populated -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Per-node detail table -->
|
||||||
|
<div class="node-table-wrapper card" style="margin-top:2rem">
|
||||||
|
<table class="node-table" id="node-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th class="font-mono">HOST</th>
|
||||||
|
<th class="font-mono">ROLE</th>
|
||||||
|
<th class="font-mono">CPU</th>
|
||||||
|
<th class="font-mono">RAM</th>
|
||||||
|
<th class="font-mono">LOAD</th>
|
||||||
|
<th class="font-mono">STATUS</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="node-tbody">
|
||||||
|
<!-- JS populated -->
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Network I/O -->
|
||||||
|
<div style="margin-top:2rem">
|
||||||
|
<h3 class="section-title" style="font-size:1.1rem;margin-bottom:1rem">
|
||||||
|
Network I/O <span class="text-muted font-mono" style="font-size:0.75rem">(last 5 min average)</span>
|
||||||
|
</h3>
|
||||||
|
<div class="network-grid" id="network-grid">
|
||||||
|
<!-- JS populated -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<hr class="glow-divider container" />
|
||||||
|
|
||||||
|
<!-- Domain / service map -->
|
||||||
|
<section class="section container">
|
||||||
|
<h2 class="section-title">Service Map</h2>
|
||||||
|
<p class="text-muted font-mono" style="font-size:0.8rem;margin-bottom:2rem">
|
||||||
|
All services live under <span class="text-accent">*.int.h0melab.uk</span> · Authelia SSO on everything external-facing
|
||||||
|
</p>
|
||||||
|
<div class="service-map-grid">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
domain: 'auth.h0melab.uk',
|
||||||
|
name: 'Authelia',
|
||||||
|
desc: 'SSO / 2FA gateway',
|
||||||
|
public: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
domain: 'grafana.int.h0melab.uk',
|
||||||
|
name: 'Grafana',
|
||||||
|
desc: 'Dashboards · VictoriaMetrics source',
|
||||||
|
public: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
domain: 'netdata.int.h0melab.uk',
|
||||||
|
name: 'Netdata',
|
||||||
|
desc: 'Per-node real-time telemetry',
|
||||||
|
public: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
domain: 'immich.int.h0melab.uk',
|
||||||
|
name: 'Immich',
|
||||||
|
desc: 'Photo backup & browse',
|
||||||
|
public: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
domain: 'paperless.int.h0melab.uk',
|
||||||
|
name: 'Paperless-ngx',
|
||||||
|
desc: 'Document archive · OIDC auth',
|
||||||
|
public: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
domain: 'chatai.h0melab.uk',
|
||||||
|
name: 'Open WebUI',
|
||||||
|
desc: 'Local LLM · Ollama backend',
|
||||||
|
public: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
domain: 'git.int.h0melab.uk',
|
||||||
|
name: 'Gitea',
|
||||||
|
desc: 'Internal Git repos',
|
||||||
|
public: false,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
domain: 'home.h0melab.uk',
|
||||||
|
name: 'Homepage',
|
||||||
|
desc: 'Dashboard · FC Porto widget',
|
||||||
|
public: false,
|
||||||
|
},
|
||||||
|
].map(svc => (
|
||||||
|
<div class="card svc-card">
|
||||||
|
<div class="svc-header">
|
||||||
|
<span class="svc-name font-display">{svc.name}</span>
|
||||||
|
{svc.public
|
||||||
|
? <span class="tag" style="color:#FFB800;border-color:#FFB800;background:rgba(255,184,0,0.08)">public</span>
|
||||||
|
: <span class="tag">internal</span>
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<code class="svc-domain font-mono">{svc.domain}</code>
|
||||||
|
<p class="svc-desc text-muted">{svc.desc}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</BaseLayout>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// ── Demo / live data (same pattern as HomelabStatus component) ──
|
||||||
|
const USE_DEMO = true;
|
||||||
|
|
||||||
|
const DEMO = {
|
||||||
|
nodes: [
|
||||||
|
{ name: 'pve-01', role: 'Proxmox', cpu: 41, ram: 72, load: '3.2', status: 'online', rx: '1.2 Mb/s', tx: '0.8 Mb/s' },
|
||||||
|
{ name: 'pve-02', role: 'Proxmox', cpu: 28, ram: 65, load: '2.1', status: 'online', rx: '0.9 Mb/s', tx: '0.4 Mb/s' },
|
||||||
|
{ name: 'k8s-control', role: 'K8s control', cpu: 12, ram: 55, load: '0.9', status: 'online', rx: '0.3 Mb/s', tx: '0.2 Mb/s' },
|
||||||
|
{ name: 'k8s-worker1', role: 'K8s worker', cpu: 28, ram: 61, load: '2.4', status: 'online', rx: '2.1 Mb/s', tx: '1.8 Mb/s' },
|
||||||
|
{ name: 'k8s-worker2', role: 'K8s worker', cpu: 19, ram: 58, load: '1.7', status: 'online', rx: '1.4 Mb/s', tx: '1.1 Mb/s' },
|
||||||
|
{ name: 'zfs-oporto', role: 'NAS / ZFS', cpu: 5, ram: 22, load: '0.3', status: 'online', rx: '3.2 Mb/s', tx: '4.1 Mb/s' },
|
||||||
|
{ name: 'opnsense', role: 'Router', cpu: 8, ram: 31, load: '0.6', status: 'online', rx: '8.4 Mb/s', tx: '6.2 Mb/s' },
|
||||||
|
{ name: 'stalwart-mail',role: 'Mail (paused)', cpu: 0, ram: 0, load: '–', status: 'offline', rx: '–', tx: '–' },
|
||||||
|
],
|
||||||
|
summary: { cpu: 20, ram: 58, storage: 61, network: '2.4 Gb/s' },
|
||||||
|
uptime: '47d 12h 34m',
|
||||||
|
};
|
||||||
|
|
||||||
|
function bar(pct) {
|
||||||
|
if (typeof pct !== 'number') return '<span class="text-muted font-mono" style="font-size:0.75rem">–</span>';
|
||||||
|
const c = pct > 85 ? '#FF4444' : pct > 70 ? '#FFB800' : '#00D2BE';
|
||||||
|
return `<div style="display:flex;align-items:center;gap:0.5rem">
|
||||||
|
<div style="flex:1;height:4px;background:var(--bg-surface);border-radius:2px;overflow:hidden">
|
||||||
|
<div style="width:${pct}%;height:100%;background:${c};transition:width 0.8s ease"></div>
|
||||||
|
</div>
|
||||||
|
<span class="font-mono" style="font-size:0.72rem;color:var(--text-muted);min-width:2.5rem">${pct}%</span>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function statusBadge(s) {
|
||||||
|
const c = s === 'online' ? '#00D2BE' : '#FF4444';
|
||||||
|
return `<span style="display:inline-flex;align-items:center;gap:0.35rem;font-family:var(--font-mono);font-size:0.72rem;color:${c}">
|
||||||
|
<span style="width:6px;height:6px;border-radius:50%;background:${c};box-shadow:0 0 6px ${c}"></span>${s}
|
||||||
|
</span>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function render() {
|
||||||
|
const data = USE_DEMO ? DEMO : DEMO; // swap with real fetch
|
||||||
|
|
||||||
|
// Uptime
|
||||||
|
const ut = document.getElementById('uptime-badge');
|
||||||
|
if (ut) ut.textContent = `uptime ${data.uptime}`;
|
||||||
|
|
||||||
|
// Timestamp
|
||||||
|
const ts = document.getElementById('metrics-ts');
|
||||||
|
if (ts) ts.textContent = 'updated ' + new Date().toLocaleTimeString('en-GB', { hour:'2-digit', minute:'2-digit', second:'2-digit' });
|
||||||
|
|
||||||
|
// Summary cards
|
||||||
|
const summary = document.getElementById('metrics-summary');
|
||||||
|
if (summary) {
|
||||||
|
summary.innerHTML = [
|
||||||
|
{ label: 'Avg CPU', value: `${data.summary.cpu}%`, pct: data.summary.cpu },
|
||||||
|
{ label: 'Avg RAM', value: `${data.summary.ram}%`, pct: data.summary.ram },
|
||||||
|
{ label: 'ZFS Used', value: `${data.summary.storage}%`, pct: data.summary.storage },
|
||||||
|
{ label: 'Network', value: data.summary.network, pct: null },
|
||||||
|
].map(m => `
|
||||||
|
<div class="card summary-card">
|
||||||
|
<div class="summary-label font-mono">${m.label}</div>
|
||||||
|
<div class="summary-value font-display">${m.value}</div>
|
||||||
|
${m.pct !== null ? `<div style="margin-top:0.5rem">${bar(m.pct)}</div>` : ''}
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Node table
|
||||||
|
const tbody = document.getElementById('node-tbody');
|
||||||
|
if (tbody) {
|
||||||
|
tbody.innerHTML = data.nodes.map(n => `
|
||||||
|
<tr>
|
||||||
|
<td class="font-mono" style="color:var(--text-primary)">${n.name}</td>
|
||||||
|
<td class="font-mono text-muted" style="font-size:0.78rem">${n.role}</td>
|
||||||
|
<td style="min-width:120px">${bar(n.status === 'offline' ? null : n.cpu)}</td>
|
||||||
|
<td style="min-width:120px">${bar(n.status === 'offline' ? null : n.ram)}</td>
|
||||||
|
<td class="font-mono text-muted" style="font-size:0.78rem">${n.load}</td>
|
||||||
|
<td>${statusBadge(n.status)}</td>
|
||||||
|
</tr>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Network I/O
|
||||||
|
const netGrid = document.getElementById('network-grid');
|
||||||
|
if (netGrid) {
|
||||||
|
netGrid.innerHTML = data.nodes
|
||||||
|
.filter(n => n.status === 'online')
|
||||||
|
.map(n => `
|
||||||
|
<div class="card net-card">
|
||||||
|
<div class="font-mono" style="font-size:0.75rem;color:var(--petronas-teal);margin-bottom:0.5rem">${n.name}</div>
|
||||||
|
<div class="net-row">
|
||||||
|
<span class="text-muted font-mono" style="font-size:0.7rem">↓ RX</span>
|
||||||
|
<span class="font-mono" style="font-size:0.8rem">${n.rx}</span>
|
||||||
|
</div>
|
||||||
|
<div class="net-row">
|
||||||
|
<span class="text-muted font-mono" style="font-size:0.7rem">↑ TX</span>
|
||||||
|
<span class="font-mono" style="font-size:0.8rem">${n.tx}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render();
|
||||||
|
setInterval(render, 30_000);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.homelab-page { padding-top: 8rem; }
|
||||||
|
|
||||||
|
.page-hero { margin-bottom: 4rem; }
|
||||||
|
|
||||||
|
.section-title {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 1.4rem;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Architecture diagram */
|
||||||
|
.arch-diagram { padding: 2rem; }
|
||||||
|
|
||||||
|
.arch-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arch-tier {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 1.25rem 0;
|
||||||
|
border-bottom: 1px solid var(--border-subtle);
|
||||||
|
}
|
||||||
|
.arch-tier:last-child { border-bottom: none; }
|
||||||
|
|
||||||
|
.tier-label {
|
||||||
|
font-size: 0.65rem;
|
||||||
|
letter-spacing: 0.15em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: var(--text-muted);
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arch-row {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arch-node {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
padding: 0.85rem 1.5rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
background: var(--bg-surface);
|
||||||
|
min-width: 180px;
|
||||||
|
text-align: center;
|
||||||
|
transition: border-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
.arch-node:hover { border-color: var(--border-glow); }
|
||||||
|
|
||||||
|
.node-icon { font-size: 1.2rem; color: var(--petronas-teal); }
|
||||||
|
.node-name { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; }
|
||||||
|
.node-detail { font-size: 0.68rem; color: var(--text-muted); margin-top: 0.1rem; }
|
||||||
|
|
||||||
|
.node-router .node-icon { color: #FFB800; }
|
||||||
|
.node-external .node-icon { color: var(--text-muted); }
|
||||||
|
.node-storage .node-icon { color: #7B9EFF; }
|
||||||
|
|
||||||
|
.arch-arrow {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--petronas-teal);
|
||||||
|
opacity: 0.4;
|
||||||
|
padding: 0.1rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arch-services {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.5rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.service-chip {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.5rem 0.9rem;
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: 6px;
|
||||||
|
background: var(--bg-surface);
|
||||||
|
transition: border-color var(--transition-fast);
|
||||||
|
}
|
||||||
|
.service-chip:hover { border-color: var(--border-glow); }
|
||||||
|
.chip-name { font-family: var(--font-display); font-size: 0.82rem; font-weight: 600; }
|
||||||
|
.chip-role { font-size: 0.62rem; color: var(--petronas-teal); margin-top: 0.1rem; }
|
||||||
|
|
||||||
|
/* Metrics */
|
||||||
|
.metrics-summary {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.summary-card { padding: 1.25rem; }
|
||||||
|
.summary-label { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.4rem; }
|
||||||
|
.summary-value { font-size: 1.8rem; font-weight: 700; color: var(--petronas-teal); line-height: 1; }
|
||||||
|
|
||||||
|
/* Node table */
|
||||||
|
.node-table-wrapper { overflow-x: auto; padding: 0; }
|
||||||
|
.node-table { width: 100%; border-collapse: collapse; }
|
||||||
|
.node-table th {
|
||||||
|
padding: 0.75rem 1.25rem;
|
||||||
|
text-align: left;
|
||||||
|
font-size: 0.65rem;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
color: var(--text-muted);
|
||||||
|
border-bottom: 1px solid var(--border-subtle);
|
||||||
|
}
|
||||||
|
.node-table td {
|
||||||
|
padding: 0.85rem 1.25rem;
|
||||||
|
border-bottom: 1px solid var(--border-subtle);
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.node-table tr:last-child td { border-bottom: none; }
|
||||||
|
.node-table tr:hover td { background: var(--bg-card-hover); }
|
||||||
|
|
||||||
|
/* Network */
|
||||||
|
.network-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.net-card { padding: 1rem; }
|
||||||
|
.net-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.3rem; }
|
||||||
|
|
||||||
|
/* Service map */
|
||||||
|
.service-map-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svc-card { padding: 1.25rem; }
|
||||||
|
.svc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
|
||||||
|
.svc-name { font-size: 1rem; }
|
||||||
|
.svc-domain { font-size: 0.72rem; color: var(--petronas-teal); display: block; margin-bottom: 0.5rem; }
|
||||||
|
.svc-desc { font-size: 0.8rem; }
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.metrics-summary { grid-template-columns: 1fr 1fr; }
|
||||||
|
}
|
||||||
|
@media (max-width: 480px) {
|
||||||
|
.metrics-summary { grid-template-columns: 1fr; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
17
src/pages/index.astro
Normal file
17
src/pages/index.astro
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
---
|
||||||
|
import BaseLayout from '../layouts/BaseLayout.astro';
|
||||||
|
import ParallaxHero from '../components/ParallaxHero.astro';
|
||||||
|
import HomelabStatus from '../components/HomelabStatus.astro';
|
||||||
|
import RecentPosts from '../components/RecentPosts.astro';
|
||||||
|
---
|
||||||
|
|
||||||
|
<BaseLayout title="Home">
|
||||||
|
<ParallaxHero />
|
||||||
|
|
||||||
|
<!-- <RecentPosts /> -->
|
||||||
|
|
||||||
|
<hr class="glow-divider container" />
|
||||||
|
|
||||||
|
<HomelabStatus />
|
||||||
|
|
||||||
|
</BaseLayout>
|
||||||
292
src/styles/global.css
Normal file
292
src/styles/global.css
Normal file
@@ -0,0 +1,292 @@
|
|||||||
|
/* ============================================================
|
||||||
|
GLOBAL STYLES — AMG Petronas Green Theme
|
||||||
|
============================================================ */
|
||||||
|
|
||||||
|
@import url("https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300&family=Inter:wght@300;400;500&display=swap");
|
||||||
|
|
||||||
|
/* ── CSS Variables ─────────────────────────────────────────── */
|
||||||
|
:root {
|
||||||
|
--petronas-teal: #00d2be;
|
||||||
|
--petronas-green: #00a19c;
|
||||||
|
--petronas-dark: #007a76;
|
||||||
|
--petronas-glow: rgba(0, 210, 190, 0.15);
|
||||||
|
--petronas-glow-lg: rgba(0, 210, 190, 0.35);
|
||||||
|
|
||||||
|
--bg-void: #050a0a;
|
||||||
|
--bg-deep: #080f0e;
|
||||||
|
--bg-surface: #0d1918;
|
||||||
|
--bg-card: #111e1d;
|
||||||
|
--bg-card-hover: #162524;
|
||||||
|
--bg-glass: rgba(13, 25, 24, 0.7);
|
||||||
|
|
||||||
|
--text-primary: #e8f5f4;
|
||||||
|
--text-secondary: #8bbab8;
|
||||||
|
--text-muted: #4a7a78;
|
||||||
|
--text-accent: var(--petronas-teal);
|
||||||
|
|
||||||
|
--border-subtle: rgba(0, 210, 190, 0.08);
|
||||||
|
--border-glow: rgba(0, 210, 190, 0.35);
|
||||||
|
|
||||||
|
--font-display: "Rajdhani", sans-serif;
|
||||||
|
--font-mono: "DM Mono", monospace;
|
||||||
|
--font-body: "Inter", sans-serif;
|
||||||
|
|
||||||
|
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
--transition-med: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
--transition-slow: 600ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Reset ─────────────────────────────────────────────────── */
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
scroll-behavior: smooth;
|
||||||
|
color-scheme: dark;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: var(--bg-void);
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-family: var(--font-body);
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.7;
|
||||||
|
overflow-x: hidden;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Scrollbar ─────────────────────────────────────────────── */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: var(--bg-void);
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: var(--petronas-dark);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: var(--petronas-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Typography ────────────────────────────────────────────── */
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
line-height: 1.15;
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: clamp(2.5rem, 6vw, 5rem);
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
font-size: clamp(1.8rem, 4vw, 3rem);
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--petronas-teal);
|
||||||
|
text-decoration: none;
|
||||||
|
transition: color var(--transition-fast);
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: var(--text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
code,
|
||||||
|
pre {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.88em;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background: var(--bg-surface);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-left: 3px solid var(--petronas-teal);
|
||||||
|
padding: 1.25rem 1.5rem;
|
||||||
|
border-radius: 0 8px 8px 0;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Layout ────────────────────────────────────────────────── */
|
||||||
|
.container {
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.section {
|
||||||
|
padding: 6rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Teal Accent Line ──────────────────────────────────────── */
|
||||||
|
.accent-line {
|
||||||
|
display: inline-block;
|
||||||
|
width: 3rem;
|
||||||
|
height: 3px;
|
||||||
|
background: linear-gradient(90deg, var(--petronas-teal), transparent);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Cards ─────────────────────────────────────────────────── */
|
||||||
|
.card {
|
||||||
|
background: var(--bg-card);
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 1.75rem;
|
||||||
|
transition:
|
||||||
|
border-color var(--transition-med),
|
||||||
|
background var(--transition-med),
|
||||||
|
transform var(--transition-med);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:hover {
|
||||||
|
border-color: var(--border-glow);
|
||||||
|
background: var(--bg-card-hover);
|
||||||
|
transform: translateY(-3px);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Glow Button ───────────────────────────────────────────── */
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.6rem 1.5rem;
|
||||||
|
font-family: var(--font-display);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
font-weight: 600;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
border-radius: 4px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all var(--transition-med);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: transparent;
|
||||||
|
color: var(--petronas-teal);
|
||||||
|
border: 1px solid var(--petronas-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: var(--petronas-glow);
|
||||||
|
box-shadow: 0 0 24px var(--petronas-glow-lg);
|
||||||
|
color: var(--petronas-teal);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Tag / Badge ───────────────────────────────────────────── */
|
||||||
|
.tag {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.2rem 0.65rem;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: var(--petronas-teal);
|
||||||
|
background: var(--petronas-glow);
|
||||||
|
border: 1px solid rgba(0, 210, 190, 0.2);
|
||||||
|
border-radius: 3px;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Glow Divider ──────────────────────────────────────────── */
|
||||||
|
.glow-divider {
|
||||||
|
border: none;
|
||||||
|
height: 1px;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
var(--petronas-teal),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
margin: 4rem 0;
|
||||||
|
opacity: 0.3;
|
||||||
|
margin: 4rem auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Noise texture overlay ─────────────────────────────────── */
|
||||||
|
body::after {
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 9999;
|
||||||
|
opacity: 0.025;
|
||||||
|
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Utility ───────────────────────────────────────────────── */
|
||||||
|
.text-muted {
|
||||||
|
color: var(--text-muted);
|
||||||
|
}
|
||||||
|
.text-accent {
|
||||||
|
color: var(--petronas-teal);
|
||||||
|
}
|
||||||
|
.font-mono {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
.font-display {
|
||||||
|
font-family: var(--font-display);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Prose (blog posts) ────────────────────────────────────── */
|
||||||
|
.prose {
|
||||||
|
max-width: 72ch;
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
.prose h2,
|
||||||
|
.prose h3 {
|
||||||
|
color: var(--text-primary);
|
||||||
|
margin: 2.5rem 0 1rem;
|
||||||
|
}
|
||||||
|
.prose p {
|
||||||
|
margin-bottom: 1.4rem;
|
||||||
|
}
|
||||||
|
.prose ul,
|
||||||
|
.prose ol {
|
||||||
|
padding-left: 1.5rem;
|
||||||
|
margin-bottom: 1.4rem;
|
||||||
|
}
|
||||||
|
.prose li {
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
}
|
||||||
|
.prose blockquote {
|
||||||
|
border-left: 3px solid var(--petronas-teal);
|
||||||
|
padding-left: 1.25rem;
|
||||||
|
color: var(--text-muted);
|
||||||
|
font-style: italic;
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
.prose img {
|
||||||
|
border-radius: 8px;
|
||||||
|
width: 100%;
|
||||||
|
border: 1px solid var(--border-subtle);
|
||||||
|
}
|
||||||
|
.prose a {
|
||||||
|
text-decoration: underline;
|
||||||
|
text-underline-offset: 3px;
|
||||||
|
}
|
||||||
|
.prose strong {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.prose code {
|
||||||
|
background: var(--bg-surface);
|
||||||
|
padding: 0.15em 0.4em;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: var(--petronas-teal);
|
||||||
|
}
|
||||||
9
tsconfig.json
Normal file
9
tsconfig.json
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"extends": "astro/tsconfigs/strict",
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user