|
| 1 | +# Maintaining openbrain.fyi |
| 2 | + |
| 3 | +This guide is for the OB1 maintainer and any future contributors who need to update the canonical landing page after it goes live. The page is intentionally a single static `index.html` with no build step — every change is a normal git edit, and every deploy is a single push. |
| 4 | + |
| 5 | +## Edit-and-deploy loop |
| 6 | + |
| 7 | +1. Edit any file under `dashboards/ob1-canonical-landing/` |
| 8 | +2. Open a PR (or push to `main` if you have direct write access) |
| 9 | +3. The `Deploy landing page` workflow fires on the path filter and pushes the artifact to Pages |
| 10 | +4. The `https://openbrain.fyi/` cache refreshes within 1–2 minutes of the deploy job finishing |
| 11 | + |
| 12 | +Watch progress at **Actions → Deploy landing page**. The job's environment URL links to the live site once it's published. |
| 13 | + |
| 14 | +## Common edits |
| 15 | + |
| 16 | +### Update copy, headlines, or links |
| 17 | + |
| 18 | +All visible text lives directly in `index.html`. The major sections are marked with HTML `id`s for navigation: |
| 19 | + |
| 20 | +| `id` | Section | |
| 21 | +|------|---------| |
| 22 | +| `main-content` | Skip-link target, wraps everything below the nav | |
| 23 | +| (hero, no id) | The first `<section class="hero">` — h1, byline, CTA buttons, demo video | |
| 24 | +| `how-it-works` | Three-pillar overview | |
| 25 | +| `get-started` | Numbered steps + AI-assistant cards + companion prompts | |
| 26 | +| `extensions` | Extensions table | |
| 27 | +| `community` | Recipes + tools + skills tables, dashboards/integrations pillars | |
| 28 | + |
| 29 | +After any copy change, update `dateModified` in three places so search engines and citations stay in sync: |
| 30 | + |
| 31 | +| File | Field | |
| 32 | +|------|-------| |
| 33 | +| `index.html` | `<meta property="article:modified_time" content="...">` | |
| 34 | +| `index.html` | JSON-LD `TechArticle` → `"dateModified"` | |
| 35 | +| `index.html` | Byline `<time datetime="...">Updated ...</time>` | |
| 36 | +| `sitemap.xml` | `<lastmod>` | |
| 37 | +| `metadata.json` | `"updated"` | |
| 38 | + |
| 39 | +All five should be the same ISO date (`YYYY-MM-DD`). |
| 40 | + |
| 41 | +### Add or swap a video |
| 42 | + |
| 43 | +Videos use GitHub user-attachment URLs (the same URLs that render in the project README). To add a new video: |
| 44 | + |
| 45 | +1. Drag the `.mp4` into a GitHub issue or PR comment to upload it; copy the `https://github.com/user-attachments/assets/...` URL |
| 46 | +2. Embed using the existing pattern: |
| 47 | + |
| 48 | +```html |
| 49 | +<video class="inline-video" controls preload="none" playsinline aria-label="Brief description"> |
| 50 | + <source src="https://github.com/user-attachments/assets/UUID" type="video/mp4"> |
| 51 | + <a href="https://github.com/NateBJones-Projects/OB1" target="_blank" rel="noopener">Watch on GitHub</a> |
| 52 | +</video> |
| 53 | +``` |
| 54 | + |
| 55 | +Always set a meaningful `aria-label` — screen readers announce it. Use `preload="metadata"` only for the hero video; keep all below-fold videos at `preload="none"` to protect first-paint performance. |
| 56 | + |
| 57 | +If a GitHub user-attachment URL ever goes 404, replace with a re-uploaded asset; do not host video binaries in the repo (gate rule blocks files >1MB). |
| 58 | + |
| 59 | +### Replace or update the logo |
| 60 | + |
| 61 | +The page ships three brand-image variants generated from a single source: |
| 62 | + |
| 63 | +| File | Use | Source | |
| 64 | +|------|-----|--------| |
| 65 | +| `imgs/ob1-logo.png` (512×512) | Nav + manifest icon | Square master | |
| 66 | +| `imgs/ob1-logo-wide.png` (1200×360) | Hero banner | Wide master | |
| 67 | +| `imgs/og.png` (1200×630) | Social share | Wide on `#0f1b33` background | |
| 68 | +| `imgs/apple-touch-icon.png` (180×180) | iOS home screen | Square master | |
| 69 | +| `imgs/favicon-32.png` (32×32) | Browser tab | Square master | |
| 70 | + |
| 71 | +To regenerate from new master images, drop the new sources at `imgs/_master-square.png` and `imgs/_master-wide.png`, then run: |
| 72 | + |
| 73 | +```bash |
| 74 | +cd dashboards/ob1-canonical-landing/imgs |
| 75 | +magick _master-square.png -resize 512x512 -strip ob1-logo.png |
| 76 | +magick _master-square.png -resize 180x180 -strip apple-touch-icon.png |
| 77 | +magick _master-square.png -resize 32x32 -strip favicon-32.png |
| 78 | +magick _master-wide.png -resize 1200x -strip ob1-logo-wide.png |
| 79 | +magick _master-wide.png -resize 1000x -background "#0f1b33" -gravity center -extent 1200x630 og.png |
| 80 | +rm _master-square.png _master-wide.png |
| 81 | +``` |
| 82 | + |
| 83 | +Requires ImageMagick 7+ (`brew install imagemagick`). The `-strip` flag removes EXIF/color-profile metadata that bloats files and leaks build-environment info. |
| 84 | + |
| 85 | +If the logo's color palette changes, update the four CSS custom properties in the `:root` block of `index.html`: |
| 86 | + |
| 87 | +```css |
| 88 | +--accent: #e05a20; /* primary accent (OB1 orange) */ |
| 89 | +--brand-blue-deep: #0f1b33; /* used in hero gradient + OG bg */ |
| 90 | +--brand-blue-mid: #1a3a6e; |
| 91 | +--brand-blue-bright: #2563b8; |
| 92 | +``` |
| 93 | + |
| 94 | +### Add a new content section |
| 95 | + |
| 96 | +Use the existing pattern so styling, spacing, and a11y stay consistent: |
| 97 | + |
| 98 | +```html |
| 99 | +<section id="kebab-case-id"> |
| 100 | + <div class="container"> |
| 101 | + <h2>Section title</h2> |
| 102 | + <p>Lead paragraph.</p> |
| 103 | + <!-- content --> |
| 104 | + </div> |
| 105 | +</section> |
| 106 | +``` |
| 107 | + |
| 108 | +Alternate `<section>` and `<section class="alt">` for visual rhythm. Add a nav link in the sticky `<nav>` block if the section is top-level. |
| 109 | + |
| 110 | +Heading hierarchy must stay clean: one `<h1>` (in the hero), `<h2>` per section, `<h3>` for sub-blocks. Skipping levels breaks screen-reader navigation. |
| 111 | + |
| 112 | +### Update the byline |
| 113 | + |
| 114 | +The page is currently bylined to Nate B. Jones. If authorship changes (or co-authors are added), update **all** of these in lockstep: |
| 115 | + |
| 116 | +- `<meta name="author">` |
| 117 | +- `<meta property="article:author">` |
| 118 | +- `<meta name="twitter:creator">` |
| 119 | +- JSON-LD `TechArticle` → `author` |
| 120 | +- The visible `.byline` block in the hero |
| 121 | + |
| 122 | +## Pre-deploy validation |
| 123 | + |
| 124 | +Run these locally before pushing significant changes. None of them are part of the deploy workflow yet — they're discretionary checks that catch most regressions. |
| 125 | + |
| 126 | +### Structured data |
| 127 | + |
| 128 | +```bash |
| 129 | +# Extract JSON-LD blocks and parse them |
| 130 | +python3 -c " |
| 131 | +import re, json |
| 132 | +html = open('dashboards/ob1-canonical-landing/index.html').read() |
| 133 | +for i, m in enumerate(re.finditer(r'<script type=\"application/ld\\+json\">(.+?)</script>', html, re.DOTALL)): |
| 134 | + try: |
| 135 | + json.loads(m.group(1)); print(f'block {i+1}: ok') |
| 136 | + except Exception as e: |
| 137 | + print(f'block {i+1}: FAIL — {e}') |
| 138 | +" |
| 139 | +``` |
| 140 | + |
| 141 | +Then paste a deployed URL into [Google's Rich Results Test](https://search.google.com/test/rich-results) and the [Schema.org Validator](https://validator.schema.org/) once or twice a year, or after any JSON-LD edit. |
| 142 | + |
| 143 | +### Accessibility |
| 144 | + |
| 145 | +The page targets WCAG 2.1 AA. Run [axe DevTools](https://www.deque.com/axe/devtools/) in Chrome or [Pa11y](https://pa11y.org/) locally: |
| 146 | + |
| 147 | +```bash |
| 148 | +npx pa11y --standard WCAG2AA https://openbrain.fyi/ |
| 149 | +``` |
| 150 | + |
| 151 | +Common things that break it: text on the orange accent (use `var(--bg)` not `var(--text)` for contrast); missing `alt` on new images; nested interactive elements (a button inside an anchor, or vice versa). |
| 152 | + |
| 153 | +### Link health |
| 154 | + |
| 155 | +```bash |
| 156 | +# Quick check — should return zero broken external links |
| 157 | +grep -oE 'href="https?://[^"]+"' dashboards/ob1-canonical-landing/index.html \ |
| 158 | + | sort -u \ |
| 159 | + | sed 's/href="//;s/"$//' \ |
| 160 | + | xargs -P 8 -I{} curl -sLo /dev/null -w "%{http_code} {}\n" {} \ |
| 161 | + | grep -v "^200" |
| 162 | +``` |
| 163 | + |
| 164 | +### Size budget |
| 165 | + |
| 166 | +The page should stay under 60KB HTML and 200KB total assets. Check: |
| 167 | + |
| 168 | +```bash |
| 169 | +du -sh dashboards/ob1-canonical-landing/index.html dashboards/ob1-canonical-landing/imgs/ |
| 170 | +``` |
| 171 | + |
| 172 | +If either grows substantially, audit before merging. Optimize new images with `magick INPUT -strip -quality 85 OUTPUT` before committing. |
| 173 | + |
| 174 | +## Post-deploy verification |
| 175 | + |
| 176 | +After every meaningful edit, spot-check production: |
| 177 | + |
| 178 | +```bash |
| 179 | +# Page resolves with HTTPS, served by GitHub |
| 180 | +curl -sI https://openbrain.fyi/ | grep -iE "^(HTTP|server|content-type|x-github)" |
| 181 | + |
| 182 | +# Crawler files all return 200 |
| 183 | +for path in / /sitemap.xml /robots.txt /llms.txt /site.webmanifest; do |
| 184 | + printf "%-25s %s\n" "$path" "$(curl -s -o /dev/null -w "%{http_code}" https://openbrain.fyi$path)" |
| 185 | +done |
| 186 | + |
| 187 | +# 404 page works (note: GitHub Pages serves /404 for any unknown path) |
| 188 | +curl -s -o /dev/null -w "%{http_code}\n" https://openbrain.fyi/this-does-not-exist |
| 189 | +# Expected: 404 |
| 190 | +``` |
| 191 | + |
| 192 | +If anything looks off, check **Actions → Deploy landing page** for the most recent run's logs and the deploy environment URL. |
| 193 | + |
| 194 | +## Cert renewal and DNS health |
| 195 | + |
| 196 | +Let's Encrypt certs auto-renew via GitHub Pages — no maintainer action needed. If "Enforce HTTPS" ever becomes unchecked unexpectedly, it usually means DNS was edited and broke verification. Re-run: |
| 197 | + |
| 198 | +```bash |
| 199 | +dig @8.8.8.8 +short openbrain.fyi A |
| 200 | +dig @8.8.8.8 +short www.openbrain.fyi CNAME |
| 201 | +``` |
| 202 | + |
| 203 | +If the four `185.199.108–111.153` IPs and `natebjones-projects.github.io.` aren't all returned, restore the registrar's DNS to match the table in `README.md` Step 3. |
| 204 | + |
| 205 | +## Decommissioning |
| 206 | + |
| 207 | +If `openbrain.fyi` is ever retired: |
| 208 | + |
| 209 | +1. **Settings → Pages → Custom domain**: clear the field and save |
| 210 | +2. Disable the workflow file (rename to `.disabled` or delete) |
| 211 | +3. At the registrar, remove the four A records and the www CNAME |
| 212 | +4. Optionally delete `dashboards/ob1-canonical-landing/CNAME` to prevent the next maintainer from re-binding the domain by accident |
| 213 | + |
| 214 | +The page itself can stay in the repo as a reference template even when not served live. |
| 215 | + |
| 216 | +## Files at a glance |
| 217 | + |
| 218 | +See the **Files** table in `README.md` for the canonical list. Every file in this folder is purposeful — there are no leftover scaffolding files or stubs. |
| 219 | + |
| 220 | +## Questions or issues |
| 221 | + |
| 222 | +Open an issue in the OB1 repo with the label `landing-page`. |
0 commit comments