From f9baddd2c882272680a6b9ad968353a968897301 Mon Sep 17 00:00:00 2001 From: Stefan Koelle Date: Thu, 13 Aug 2026 23:01:07 +0200 Subject: [PATCH] README.md and 2 new links --- README.md | 284 +++++++++++++++++++++++++++++++++++++++++--------- hub/index.njk | 8 ++ 2 files changed, 242 insertions(+), 50 deletions(-) diff --git a/README.md b/README.md index c4d545d..25e2da6 100755 --- a/README.md +++ b/README.md @@ -1,61 +1,245 @@ -# moonweb-site +# πŸŒ™ moonweb-site -Monorepo for hub.moonweb.org, infra.moonweb.org, smarthome.moonweb.org, -code.moonweb.org and retro.moonweb.org. cv (stefankoelle.de) stays external -(Cloudflare Free-Tier limits to 5 Pages projects per repository). +Monorepo for the **moonweb.org** homelab β€” five static sites built with [Eleventy](https://www.11ty.dev/), deployed to [Cloudflare Pages](https://pages.cloudflare.com/). -See `SPEC.md` for the full specification and `PLAN.md` for the phased -implementation plan. Cloudflare Free-Tier limits to 5 Pages projects per -repository β€” cv (stefankoelle.de) stays external. - -## What is real vs. placeholder - -- Structure, layouts, themes, Eleventy configs, CI workflow: fully implemented. -- `code/_data/repos.json`: populated with real data pulled from the - `skoelle` GitHub account (public repos only, private repos like - `wetterapi` intentionally excluded from the public catalog). -- `infra/`, `smarthome/`: overview pages and detail pages with real content, - redacted per SPEC.md Β§6. -- `retro/`: intentionally minimal, per SPEC.md Β§5. - -Note: stefankoelle.de (CV) is hosted separately and linked from the hub -and site-switcher β€” it is not part of this monorepo (Cloudflare Free-Tier -limits to 5 Pages projects per repository). - -## Local development - -Each site has its own minimal Eleventy config so you can preview one site -at a time: - -```bash -npm install -npm run dev:hub # http://localhost:8081 -npm run dev:infra # http://localhost:8082 -npm run dev:smarthome # http://localhost:8083 -npm run dev:code # http://localhost:8084 -npm run dev:retro # http://localhost:8085 +``` +hub.moonweb.org β†’ 🏠 Central index & gateway +infra.moonweb.org β†’ πŸ—οΈ Infrastructure overview (Proxmox, Synology, Docker) +smarthome.moonweb.org β†’ 🏑 Smart home projects & dashboards +code.moonweb.org β†’ πŸ’» Curated GitHub project catalog +retro.moonweb.org β†’ πŸ•ΉοΈ Physical retro hardware collection ``` -## Build +> **External sites** (not in this monorepo): [stefankoelle.de](https://stefankoelle.de) (CV), [www.moonweb.org](https://www.moonweb.org) (2000s time capsule), [28k8.moonweb.org](https://28k8.moonweb.org) (90s BBS archive), [home.moonweb.org](https://home.moonweb.org) (Authelia-protected dashboard). -```bash -npm run build # builds all five Eleventy sites into dist// +--- + +## πŸ“ Architecture + +``` +β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” +β”‚ GitHub Actions CI β”‚ +β”‚ β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β” β”‚ +β”‚ β”‚ build:hub β”‚ β”‚build:infraβ”‚ β”‚build:smartβ”‚ β”‚build:… β”‚ β”‚ +β”‚ β””β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”˜ β””β”€β”€β”€β”¬β”€β”€β”€β”€β”˜ β”‚ +β”‚ β”‚ β”‚ β”‚ β”‚ β”‚ +β”‚ β–Ό β–Ό β–Ό β–Ό β”‚ +β”‚ dist/hub/ dist/infra/ dist/smarthome/ dist/…/ β”‚ +β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”¬β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + β”‚ + β–Ό + β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” + β”‚ Cloudflare Workers β”‚ + β”‚ (5 Pages projects) β”‚ + β””β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”˜ + β”‚ + β”Œβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”Όβ”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β”€β” + β–Ό β–Ό β–Ό + hub.moonweb.org infra.moonweb.org … ``` -## Deploy +### Why 5 separate Cloudflare projects? -Handled entirely by `.github/workflows/build-deploy.yml` on push to `main`: -builds all sites, then deploys each `dist/` folder to its own -Cloudflare Pages project via `wrangler pages deploy`. See the workflow -file for the required repo secrets. +Cloudflare Free-Tier limits to **5 Pages projects per repository**. Each subdomain (hub, infra, smarthome, code, retro) gets its own project. `stefankoelle.de` stays external to stay within this limit. -Note: Cloudflare Free-Tier limits to 5 Pages projects per repository β€” -cv (stefankoelle.de) stays external. +--- -## GitHub aggregator (code.moonweb.org) +## πŸ› οΈ Tech Stack -`scripts/github-aggregator/aggregate.py` reads a `.moonweb.yml` file from -each of your GitHub repos and regenerates `code/_data/repos.json`. Run it -manually whenever you want to refresh the catalog β€” see SPEC.md Β§8 for the -`.moonweb.yml` schema. It is *not* wired into CI; this is a deliberate, -manual step. cv (stefankoelle.de) is not included in this automation. +| Layer | Technology | Why | +|-------|-----------|-----| +| **SSG** | [Eleventy 3.1.6](https://www.11ty.dev/) | Markdown/YAML-first, minimal JS, `_data` folders map directly to aggregator output, low maintenance for 5 sites | +| **Templates** | [Nunjucks](https://mozilla.github.io/nunjucks/) | Shared `base.njk` layout with site-switcher header, `card-grid.njk` for index pages | +| **Styling** | Custom CSS (variables-based) | `base.css` for shared layout, `theme-*.css` per domain accent color, no build step needed | +| **Fonts** | [Lobster](https://fonts.google.com/specimen/Lobster) (Google Fonts) | Distinctive heading font across all sites | +| **CI/CD** | [GitHub Actions](https://github.com/features/actions) | Matrix build for all 5 sites, artifact upload, parallel deploy | +| **Deploy** | [Cloudflare Workers](https://workers.cloudflare.com/) | Static asset hosting via `wrangler pages deploy`, one worker per site | +| **DNS** | Cloudflare | Already managing DNS β€” zero additional setup for Pages custom domains | +| **GitHub Catalog** | Python aggregator | Reads `.moonweb.yml` from each repo, outputs `repos.json` | +| **Runtime** | Fully static | No server-side code, no containers, no database β€” pure HTML/CSS/JS | + +--- + +## 🎨 Design System + +### Header-consistent, content-flexible + +- **Header is identical** across all home-section sites: site-switcher (hub Β· infra Β· smarthome Β· code Β· retro Β· cv), domain accent color, Lobster title font. +- **Index pages** use a shared card-grid layout with grouped sections. +- **Detail pages** keep the same header but use a freer layout below it (e.g., pin tables, API docs, photos in free arrangement). + +### Accent colors + +| Domain | Color | Hex | +|--------|-------|-----| +| hub | Neutral blue | `#3b6ea5` | +| infra | Grey-blue | `#99333A` | +| smarthome | Teal | `#1f8a8a` | +| code | Violet | `#3E5098` | +| retro | Warm brown | `#8a6d3b` | + +### Emojis + +Each card on index pages has an emoji for visual navigation β€” consistent across hub, infra, smarthome, code, and retro. + +--- + +## πŸš€ Local Development + +```bash +npm install # install Eleventy + deps + +npm run dev:hub # http://localhost:8081 +npm run dev:infra # http://localhost:8082 +npm run dev:smarthome # http://localhost:8083 +npm run dev:code # http://localhost:8084 +npm run dev:retro # http://localhost:8085 + +npm run dev # all 5 in parallel +``` + +Each site has its own minimal Eleventy config (`/eleventy.config.js`). Live reload is built in. + +### Build + +```bash +npm run build # builds all 5 β†’ dist// +npm run build:hub # build single site +``` + +--- + +## πŸ“¦ Project Structure + +``` +moonweb-site/ +β”œβ”€β”€ hub/ # 🏠 Central index & gateway +β”œβ”€β”€ infra/ # πŸ—οΈ Infra overview + 3 detail pages +β”‚ β”œβ”€β”€ backup-strategy/ +β”‚ β”œβ”€β”€ monitoring/ +β”‚ └── dev-environment/ +β”œβ”€β”€ smarthome/ # 🏑 Smart home overview + 6 detail pages +β”‚ β”œβ”€β”€ homematic-mqtt/ +β”‚ β”œβ”€β”€ tasmota-energy/ +β”‚ β”œβ”€β”€ balkonpi/ +β”‚ β”œβ”€β”€ airplay-audio/ +β”‚ β”œβ”€β”€ octoprint/ +β”‚ └── tubearchivist/ +β”œβ”€β”€ code/ # πŸ’» GitHub catalog +β”‚ └── _data/repos.json # populated by the aggregator +β”œβ”€β”€ retro/ # πŸ•ΉοΈ Retro hardware (WIP) +β”œβ”€β”€ shared/ # πŸ”§ Shared components +β”‚ β”œβ”€β”€ _includes/ +β”‚ β”‚ β”œβ”€β”€ base.njk # base layout (header, site-switcher, footer) +β”‚ β”‚ └── card-grid.njk # card-grid template with emoji support +β”‚ β”œβ”€β”€ base.css # shared CSS (layout, cards, typography) +β”‚ └── theme-*.css # accent colors per domain +β”œβ”€β”€ scripts/ +β”‚ └── github-aggregator/ # 🐍 Python: reads .moonweb.yml β†’ repos.json +β”‚ β”œβ”€β”€ aggregate.py +β”‚ β”œβ”€β”€ example.moonweb.yml +β”‚ └── README.md +β”œβ”€β”€ .github/workflows/ +β”‚ └── build-deploy.yml # βš™οΈ CI/CD: build + deploy to Cloudflare +β”œβ”€β”€ DESIGN.md # πŸ“‹ Initial concept (German) +β”œβ”€β”€ SPEC.md # πŸ“‹ Full specification (English, 159 lines) +β”œβ”€β”€ PLAN.md # πŸ“‹ Implementation plan +β”œβ”€β”€ TODO.md # πŸ“‹ Open items & workflow +└── package.json # npm scripts for dev/build +``` + +--- + +## πŸ”„ CI/CD Pipeline + +Defined in `.github/workflows/build-deploy.yml`: + +``` +push to main + β”‚ + β”œβ”€β”€ Build (matrix: hub, infra, smarthome, code, retro) + β”‚ β”œβ”€β”€ checkout β†’ setup-node (22) β†’ npm ci + β”‚ β”œβ”€β”€ npm run build: + β”‚ β”œβ”€β”€ validate dist// exists & non-empty + β”‚ └── upload artifact (7-day retention) + β”‚ + └── Deploy (matrix: 5 Cloudflare Workers) + β”œβ”€β”€ download artifact + β”œβ”€β”€ generate wrangler.toml + └── wrangler pages deploy +``` + +**Required secrets:** +- `CLOUDFLARE_API_TOKEN` β€” Workers:Edit permission +- `CLOUDFLARE_ACCOUNT_ID` β€” Cloudflare account ID + +--- + +## 🐍 GitHub Aggregator (code.moonweb.org) + +`scripts/github-aggregator/aggregate.py` automatically builds the project catalog: + +1. Fetches all **public repos** from `skoelle` via GitHub API +2. Reads `.moonweb.yml` from each repo root +3. Filters for `category: code` entries +4. Sorts by subcategory + title +5. Writes combined result to `code/_data/repos.json` + +### `.moonweb.yml` schema + +```yaml +title: "MVG Departures" +category: code # code | smarthome | infra +subcategory: "Web Apps" # drives grouping on code.moonweb.org +status: active +stack: [Python, FastAPI] +hosted_on: "Docker Host Debian (PVE)" +summary: "Compact MVG/S-Bahn departure monitor with configurable stations." +repo_url: "https://github.com/skoelle/mvg-departures" +``` + +### Manual run + +```bash +export GITHUB_TOKEN=ghp_xxx +python scripts/github-aggregator/aggregate.py +``` + +> **Deliberately manual** β€” no scheduled CI job. The catalog is refreshed on demand, not on every push. + +--- + +## πŸ“ Content Rules + +| Site | Detail pages? | Rule | +|------|--------------|------| +| smarthome | βœ… Yes | When enough content exists β€” no placeholder cards | +| infra | ⚠️ Rarely | Deliberately shallow β€” sensitive data (IPs, keys, passwords) stripped | +| code | ❌ Never | Overview cards + GitHub links only β€” no README duplication | +| retro | πŸ”¨ Minimal | Still WIP β€” honest minimal overview, no over-investment | + +**Infra redaction rule:** Architecture-level only (Proxmox, Synology, Docker, VLAN concept). No concrete IPs, WireGuard keys, passwords, internal hostnames. + +--- + +## 🌍 Language + +All five sites are written **entirely in English**. German source documents are translated once during migration (AI-assisted). New content is authored in English from the start. + +--- + +## πŸ“š Documentation + +| File | Purpose | +|------|---------| +| `DESIGN.md` | Initial concept and design decisions (German) | +| `SPEC.md` | Complete specification β€” what gets built (English) | +| `PLAN.md` | Phased implementation plan | +| `TODO.md` | Open items, workflow, and current status | +| `README.md` | This file β€” project overview for GitHub | + +--- + +## πŸ“„ License + +This project is for personal use. See [stefankoelle.de](https://stefankoelle.de) for contact. diff --git a/hub/index.njk b/hub/index.njk index d5b7bfe..644b20c 100644 --- a/hub/index.njk +++ b/hub/index.njk @@ -38,5 +38,13 @@ sections: summary: "The 2000s internet projects, networking and engineering." href: "https://www.moonweb.org" emoji: "🌐" + - title: "inseco.de" + summary: "Internet services & consulting for gastronomy and clubs (2002–2009), with a custom PHP/CMS." + href: "https://inseco.de" + emoji: "🍽️" + - title: "aztec-project.org" + summary: ".NET developer blog and StupidDB – a simple file system object storage framework." + href: "https://aztec-project.org" + emoji: "πŸ”·" --- {% include "card-grid.njk" %}