Compare commits

...
4 Commits
8 changed files with 216 additions and 229 deletions
+198 -91
View File
@@ -1,116 +1,223 @@
# River Rooks | Technical Publication & Systems Architecture Blog
> Developer-centric, high-signal, low-noise personal technical blog and homelab documentation site.
> Developer-centric, high-signal, low-noise personal technical publication and systems architecture blog.
Inspired by native terminal environments, modal text editors (Zed, Ghostty), and tiling window managers, this site prioritizes raw performance, keyboard navigability, information density, and structured craftsmanship over generic marketing aesthetics.
---
## 1. Architectural Vision & Pillars
## 1. Quickstart: Production Server Deployment
### 1.1 Static Generation via Eleventy (11ty)
- **Engine:** Fast, pre-rendered static HTML and minimal client-side runtime using **Eleventy** and **Nunjucks (`.njk`)** templates.
- **Performance:** Instant time-to-first-byte (TTFB), zero client-side framework bloat, and pure static asset delivery via high-performance native Node runtime.
- **Syntax Highlighting & Code Blocks:** Terminal-styled code blocks with title bars displaying filenames, language tags, and high-contrast monospace code.
### 1.2 Dynamic Obsidian Publishing Pipeline
- **Seamless Authoring:** Author and edit technical dispatches, CTF write-ups, and homelab notes directly inside an **Obsidian** vault.
- **Custom Ingestion API:** A dedicated server-side endpoint (`POST /api/posts`) accepting markdown payloads and assets, paired with a custom Obsidian plugin for one-click publishing.
- **LiveSync Integration:** Architectural support for syncing notes from a self-hosted Obsidian LiveSync (CouchDB) instance.
- **Content Normalization:** Translates Obsidian wikilinks (`[[slug|Title]]`), callouts (`> [!NOTE]`), and asset references into standard web formats during ingestion and build time.
### 1.3 Strict CSS Isolation & Reusable Templating
- **No Monolithic Inlines:** Replaces repetitive inline `<style>` tags with a modular CSS token and component architecture.
- **Design Tokens:** Centralized CSS custom properties (`--bg-canvas`, `--bg-surface`, `--border-color`, `--accent-cyan`, etc.) for consistent dark-mode native styling.
- **DRY Layouts & Partials:** Reusable Nunjucks components for global navigation (`global-bar`), hero tiles (`hero-tile`), split cards, and article workspace layouts (`article-workspace-grid`).
### 1.4 AI Pair Architect & Pedagogical Explainer
- **Interactive Learning:** The workspace includes customized Antigravity agent configurations (`.agents/` and `AGENTS.md`) that pair-program with the author, architecting solutions while clearly explaining *how* and *why* code is built.
---
## 2. Strict Design Specification
Adhering to the principles in [`sample-designs/design-specification.md`](./sample-designs/design-specification.md):
| Rule | Constraint |
| :--- | :--- |
| **Color Scheme** | Dark-mode native only. Canvas: `#0d0f12`, Surface: `#121417`, Elevated: `#1c1f26`, Borders: `#2b303b`. |
| **Accents** | High-signal terminal accents used sparingly: Cyan (`#00f0ff`), Green (`#00e676`), Amber (`#ffb700`). |
| **Borders & Radius** | Crisp 1px solid borders. Zero to 4px maximum border-radius (sharp corners preferred). |
| **Strict Anti-Patterns** | **NO** glassmorphism (`backdrop-filter`), **NO** drop shadows or glows, **NO** gradients, **NO** spring animations. |
| **Typography** | Monospace for UI & code (`IBM Plex Mono`, `JetBrains Mono`); clean sans-serif for body prose (`Inter`). |
| **Interactivity** | Instant binary hover snaps (no slow fade transitions); high-contrast focus outlines for keyboard navigation. |
---
## 3. Project Directory Map
The production deployment uses a **decoupled container architecture**. The server does not need Node.js, git, or build dependencies—it only pulls the prebuilt engine from the registry and mounts a local folder containing your Markdown posts.
### 1.1 Server Directory Structure (`~/docker/blog`)
```text
.
├── .agents/ # Antigravity agent configurations & customizations
│ ├── rules/
│ │ └── blog-system.md # Architectural constraints, CSS/template isolation & explainer mode
│ └── skills/
│ ├── eleventy-tiling-blog/ # Runbook & recipes for Eleventy builds and component extraction
│ └── obsidian-sync/ # Runbook & API contracts for Obsidian publishing & plugin sync
├── sample-designs/ # Canonical HTML/CSS prototypes & design specification
│ ├── article-tiling-firmware.html
│ ├── blog-tiling-lead.html
│ ├── design-specification.md
│ └── service-gateway-tiling.html
├── src/ # Eleventy source directory (scaffolded in Phase 2)
│ ├── _data/ # Global site metadata, navigation, telemetry data
│ ├── _includes/
│ │ ├── layouts/ # Base, post, and page templates
│ │ └── partials/ # Global bar, hero tile, card, code box, sidebar
│ ├── assets/
│ │ ├── css/ # Modular CSS (tokens, reset, layout, components)
│ │ └── fonts/ # Self-hosted monospace & prose webfonts
│ └── posts/ # Markdown content ingested from Obsidian
├── .eleventy.js # Eleventy configuration, markdown-it plugins, and shortcodes
├── package.json # Project dependencies & build scripts
├── server.js # Native Node static web server & clean-URL router
├── Dockerfile # Node container definition (built & served via npm)
├── docker-compose.yml # Container orchestration (web gateway)
└── AGENTS.md # Project-level agent instructions & pair programming guide
~/docker/blog/
├── .env # Environment variables (SITE_DOMAIN, etc.)
├── docker-compose.yml # Production container definition
└── posts/ # Your live Markdown articles (.md)
```
### 1.2 Production `docker-compose.yml`
```yaml
services:
web:
image: git.riverrooks.dev/venus/river-rooks-blog:latest
container_name: river_rooks_web
restart: unless-stopped
volumes:
- "./posts:/app/src/posts:ro"
environment:
- "SITE_DOMAIN=${SITE_DOMAIN:?Error: SITE_DOMAIN is not set. Please define SITE_DOMAIN in .env}"
- "SITE_URL=${SITE_URL:-https://${SITE_DOMAIN}}"
- "PORT=${PORT:-8080}"
- "WATCH=${WATCH:-false}"
ports:
- "${HOST_PORT:-${PORT:-8080}}:${PORT:-8080}"
networks:
- backend
labels:
- "traefik.enable=true"
- "traefik.http.routers.blog.rule=Host(`riverrooks.dev`) || Host(`www.riverrooks.dev`)"
- "traefik.http.routers.blog.entrypoints=websecure"
- "traefik.http.routers.blog.tls.certresolver=basic"
- "traefik.http.services.blog.loadbalancer.server.port=8080"
- "traefik.docker.network=backend"
networks:
backend:
external: true
```
### 1.3 Deployment Commands
```bash
# 1. Pull the prebuilt engine from Gitea registry
docker compose pull
# 2. Launch the container
docker compose up -d
# 3. Verify healthcheck status (transitions to healthy in 3-5 seconds)
docker compose ps
```
---
## 4. Development & Build Roadmap
## 2. Local Development & Verification
- [x] **Phase 1: Foundation & Agent Customizations**
- Establish `README.md` architectural blueprint.
- Setup `.agents/` workspace rules, skills, and root `AGENTS.md`.
- [ ] **Phase 2: Eleventy Scaffolding & Modularization**
- Initialize Node/npm environment and configure `.eleventy.js`.
- Extract design tokens, layout styles, and components into `src/assets/css/`.
- Build reusable Nunjucks layouts and partials modeled on `sample-designs/`.
- [ ] **Phase 3: Dynamic Obsidian Ingestion & Plugin**
- Implement the server-side note ingestion endpoint (`POST /api/posts`).
- Develop the custom Obsidian plugin for publishing notes and frontmatter.
- Integrate wikilink and callout transformation filters.
- [ ] **Phase 4: Containerization & Deployment**
- Verify static build outputs in `_site/`.
- Update Dockerfile and `docker-compose.yml` for unified production serving.
---
## 5. Development Setup
*(To be initialized during Phase 2)*
All templates, styles, and engine code are developed in this repository (`~/code/blog`).
### 2.1 Native Node.js Workflow
```bash
# Install dependencies
npm install
# Start Eleventy local development server with hot-reload
# Run automated test suite (unit tests, filters, server, and docker assertions)
npm test
# Launch Eleventy dev server with hot-reload (binds to http://localhost:8080)
npm run dev
# Compile static assets for production
# Compile static assets to _site/
npm run build
# Run via Docker Compose
docker compose up --build
# Start the native static server locally
npm start
```
### 2.2 Local Docker Compose Workflow
The local `docker-compose.yml` provides sensible defaults (`localhost`, port 8080, and mounts `./src/posts`):
```bash
# Build and run the local container stack
docker compose up -d --build
# View container logs (Eleventy compilation + server output)
docker compose logs -f
# Stop and clean up
docker compose down
```
---
## 3. Push & Update Cycles
Because the system separates the **Engine** (templates/code) from the **Content** (markdown notes), updates follow two distinct paths:
### 3.1 Publishing or Editing Articles (Content Workflow)
When you write a new note or edit an existing article:
1. **Add or update the Markdown file** in `posts/` (e.g. `posts/my-new-post.md`):
```yaml
---
title: "My Article Title"
date: 2026-09-14
tags: ["#systems", "#architecture"]
excerpt: "A short synopsis of the article."
---
# Article Content...
```
2. **Recompile the site:**
```bash
docker compose restart web
```
*Eleventy compiles the mounted markdown in ~150ms and starts serving immediately.*
> [!TIP]
> **Zero-Restart Live Reload:** Set `WATCH=true` in your server's `docker-compose.yml` environment. Eleventy will watch the `posts/` directory in the background. Whenever a note is saved or synced (e.g., from Obsidian), the site automatically updates in memory without running any commands.
### 3.2 Updating Blog Templates, CSS, or Features (Engine Workflow)
When you modify design tokens, Nunjucks templates, server routes, or dependencies:
1. **Develop and verify locally:**
```bash
npm test
```
2. **Build and push the new engine image to the Gitea container registry:**
```bash
# Build the engine image
docker build -t git.riverrooks.dev/venus/river-rooks-blog:latest .
# Push to Gitea
docker push git.riverrooks.dev/venus/river-rooks-blog:latest
```
3. **Update the production server:**
```bash
docker compose pull
docker compose up -d
```
---
## 4. System Architecture & Structure
### 4.1 High-Level Architecture
```text
┌─────────────────────────────────────────────────────────────┐
│ Dev Machine / Workstation │
│ src/ (templates, CSS, config) + Dockerfile + entrypoint.sh │
└──────────────────────────────┬──────────────────────────────┘
│ docker push
▼
┌─────────────────────────────────────────────────────────────┐
│ Gitea Container Registry (git.riverrooks.dev) │
│ image: venus/river-rooks-blog:latest │
└──────────────────────────────┬──────────────────────────────┘
│ docker pull
▼
┌─────────────────────────────────────────────────────────────┐
│ Production Server │
│ │
│ ~/docker/blog/posts/ ──(volume)──> [ river_rooks_web ] │
│ (Live Markdown Notes) ├── entrypoint.sh │
│ ├── 11ty compiles │
│ Traefik (SSL / Proxy) <──────────── └── server.js (:8080) │
└─────────────────────────────────────────────────────────────┘
```
### 4.2 Key Engine Components
- **`entrypoint.sh`**: Dynamic container entrypoint. Compiles mounted markdown notes with Eleventy on boot, starts optional background file watcher, and spawns `server.js` as PID 1 for clean signal handling.
- **`Dockerfile`**: Minimal `node:22-alpine` container with pre-installed dependencies, baseline static pre-compilation, and baked-in `HEALTHCHECK` querying `http://127.0.0.1:8080/healthz`.
- **`server.js`**: Zero-dependency native Node static web server supporting clean directory URLs, MIME caching, security headers, and the `/healthz` telemetry endpoint.
- **`eleventy.config.js`**: Eleventy 3.x configuration, custom collections (`posts`, `tagList`), markdown-it anchor plugins, and custom date/reading-time filters.
### 4.3 Directory Map
```text
.
├── .agents/ # Antigravity agent configurations & rules
├── sample-designs/ # Design specifications & HTML/CSS prototypes
├── src/ # Blog engine source
│ ├── _data/ # Site metadata & navigation
│ ├── _filters/ # Modular Eleventy filters (date, readingTime, headings)
│ ├── _includes/
│ │ ├── layouts/ # Base & post Nunjucks templates
│ │ └── partials/ # Global bar, hero tile, post cards, code box
│ ├── assets/
│ │ └── css/ # Modular CSS (tokens, reset, layout, components)
│ └── posts/ # Default/fallback markdown posts
├── test/ # Automated test suite (node:test)
├── docker-compose.yml # Local development compose file
├── sample-docker-compose.yml # Production-ready compose template
├── Dockerfile # Production container image definition
├── entrypoint.sh # Container startup & compilation entrypoint
├── server.js # Native Node static HTTP server
├── eleventy.config.js # Eleventy configuration
├── package.json # Project scripts & dependencies
└── README.md # Documentation & runbook
```
---
## 5. Strict Design Specification
All UI components and stylesheets strictly follow [`sample-designs/design-specification.md`](./sample-designs/design-specification.md):
| Rule | Constraint |
| :--- | :--- |
| **Color Scheme** | Dark-mode native only. Canvas: `#0d0f12`, Surface: `#121417`, Elevated: `#1c1f26`, Borders: `#2b303b`. |
| **Accents** | Terminal accents: Cyan (`#00f0ff`), Green (`#00e676`), Amber (`#ffb700`), Red (`#ff5252`). |
| **Borders & Radius** | Crisp 1px solid borders. Zero to 4px maximum border-radius (sharp corners). |
| **Strict Anti-Patterns** | **NO** glassmorphism (`backdrop-filter`), **NO** drop shadows or glows, **NO** gradients, **NO** spring animations. |
| **Typography** | Monospace for UI & code (`IBM Plex Mono`, `JetBrains Mono`); clean sans-serif for body prose (`Inter`). |
| **Interactivity** | Instant binary hover snaps (no slow fade transitions); high-contrast focus outlines for keyboard navigation. |
+1
View File
@@ -106,6 +106,7 @@
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.hero-pretitle {
+2 -2
View File
@@ -407,11 +407,11 @@
<!-- Main Hero Landing Tile (Central Focus of Homepage) -->
<section class="hero-tile" aria-label="Homepage Mission & Landing Declaration">
<div class="hero-pretitle">SYSTEM DECLARATION &bull; RACK-01 NODE GATEWAY</div>
<h1 class="hero-main-title">Engineering Sovereign Infrastructure &amp; Technical Notes</h1>
<h1 class="hero-main-title">Cybersecurity &amp; Dev Ops notes</h1>
<div class="hero-landing-text">
<p>
I am River Rooks, a cybersecurity engineering student at the University of Alabama. My work centers on network forensics, self-hosted system architecture, low-level firmware exploitation, and zero-allocation Unix utilities.
I am River Rooks, a cybersecurity student at the University of Alabama. My work centers on self-hosted system architecture, network security, and capture the flag style skills. I maintain a personal homelab cluster for research, experimentation, and development of open-source tools.
</p>
<p>
This website functions as the unified frontend for my physical homelab cluster. Rather than hosting projects on opaque third-party clouds, everything here runs on bare metal in my personal server rack—orchestrated through Proxmox VE, partitioned across isolated VLANs via OPNsense, and protected by point-to-point WireGuard cryptographic meshes.
+9 -3
View File
@@ -54,8 +54,8 @@ export default {
url: "/dispatches/"
},
{
label: "Gitea",
url: `https://git.${siteDomain}`,
label: "Code",
url: `https://git.riverrooks.dev/venus`,
external: true
},
{
@@ -66,7 +66,7 @@ export default {
services: [
{
name: "Gitea",
url: `https://git.${siteDomain}`,
url: `https://git.riverrooks.dev/venus`,
tag: `git.${siteDomain}:2222`,
desc: "Self-hosted Git code repositories."
},
@@ -93,6 +93,12 @@ export default {
url: `https://library.${siteDomain}`,
tag: `books.${siteDomain}:443`,
desc: `Calibre web frontend for managing and reading eBooks.`
},
{
name: "Whoami",
url: `https://whoami.${siteDomain}`,
tag: `whoami.${siteDomain}:443`,
desc: `Simple service to display request headers and connection information.`
}
],
topics: [
+1
View File
@@ -55,6 +55,7 @@
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 16px;
}
.hero-pretitle {
+5 -3
View File
@@ -6,15 +6,17 @@ title: "River Rooks | Homelab Gateway"
<!-- Main Hero Landing Tile -->
<section class="hero-tile" aria-label="Gateway Declaration">
<div class="hero-pretitle">SYSTEM DECLARATION &bull; NODE GATEWAY</div>
<h1 class="hero-main-title">Engineering Sovereign Infrastructure &amp; Technical Notes</h1>
<h1 class="hero-main-title">Cybersecurity &amp; Dev Ops notes</h1>
<div class="hero-landing-text">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum.
I am River Rooks, a cybersecurity student and the University of Alabama. This website is the public-facing gateway to my homelab, which hosts a variety of services and tools for personal and professional use. Here, you can find my technical blog and a collection of public tools that host.
</p>
<p>
Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
I deploy and maintain a variety of services in my homelab for research, development, and learning purposes. This includes web applications, databases, and other tools that I use to enhance my skills in cybersecurity and DevOps.
</p>
<p>
My blog serves as a way to share some of my extensive notes with the public. I primarily focus on Capture The Flag (CTF) writeups, technical guides, and other cybersecurity-related content. I also use this platform to document my learning journey and share insights into the world of cybersecurity and DevOps.
</div>
<div class="hero-directive-box">
@@ -1,52 +0,0 @@
---
layout: layouts/post.njk
title: "a post titel Notes & Systems Deployment Guide"
date: 2026-07-15
tags:
- homelab
- networking
- templates
excerpt: "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident."
readingTime: "4 MIN READ"
featured: false
difficulty: "BEGINNER"
---
## 1.0 Topology Overview
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua:
```text
[Gateway Ingress]
|
[Edge Router]
|
+-----+-----+
| |
[Node 01] [Node 02]
```
## 2.0 Deployment Configuration
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat:
```yaml
version: '3.8'
services:
app:
image: service:latest
restart: unless-stopped
ports:
- "8080:80"
```
## 3.0 Verification Testing
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur:
```sh
curl -s http://localhost:8080/health
```
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -1,78 +0,0 @@
---
layout: layouts/post.njk
title: "Sample Technical Dispatch: Systems Architecture & Implementation"
date: 2026-07-20
tags:
- systems
- architecture
- templates
excerpt: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."
readingTime: "6 MIN READ"
featured: true
difficulty: "INTERMEDIATE"
---
## 1.0 Executive Summary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa.
<div class="markdown-callout callout-note">
<div class="callout-title">[!NOTE] Operational Directives</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
</div>
## 2.0 System Parameters & Specifications
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis:
### 2.1 Interface Configuration Matrix
| Parameter ID | Signal Name | Protocol Bus | Expected Value |
| :--- | :--- | :--- | :--- |
| **0x01** | `SYS_CLOCK` | SPI Primary | 100 MHz |
| **0x02** | `DATA_IN` | Serial Bus | Bidirectional |
| **0x03** | `CONTROL_REG` | I2C Header | 0x3F Active |
| **0x04** | `GROUND_REF` | Chassis GND | 0.0V Nominal |
<div class="markdown-callout callout-warning">
<div class="callout-title">[!WARNING] Configuration Voltage Boundary</div>
<p>Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p>
</div>
## 3.0 Execution Workflow
Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta:
```sh
#!/bin/sh
# Sample deployment and verification routine
set -eu
echo "[+] Initializing subsystem..."
check_environment() {
test -f /etc/config.json && echo "Config verified."
}
check_environment
```
Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to interrupt operations safely at any point.
## 4.0 Telemetry & Verification
Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla:
- **Metric A:** `1,048,576 ops/sec`
- **Metric B:** `SHA256:e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855`
- **Latency:** `< 2.5ms` nominal
## 5.0 Audit Checklist
Lorem ipsum dolor sit amet, consectetur adipiscing elit:
- [x] Baseline architectural parameters verified
- [x] Initial configuration and unit tests passed
- [x] System telemetry within expected boundaries
- [ ] Production deployment and final review