Colophon
What this site is built with.
A transparent rundown of the stack, typography, SEO setup, and editorial tooling. If you're considering Astro, Tailwind, or a similar static stack, this might be useful prior art.
Stack
The site itself is a static-export Astro app, served from a plain Nginx host on the same VPS that runs the iSuperCoder platform.
-
Astro 5
Static-site generator
Ships zero JS by default. Content collections + MDX make every release post and guide type-safe at build time.
-
Tailwind CSS 3
Utility-first CSS
Custom palette (`ink`, `brand`, `accent`), custom display font, custom animations. No design-system framework.
-
TypeScript (strict)
Build-time type checking
Catches schema drift on content collections before deploy. Every page builds cleanly with zero TS errors.
-
MDX
Markdown plus components
Lets release posts and guides embed `<Callout>` directly without giving up Markdown ergonomics.
-
Shiki
Syntax highlighting
Dual-theme `github-light` + `github-dark-dimmed`, no client-side JS, ships highlighting in HTML.
Typography
Two webfonts, both self-hosted via `@fontsource` so the woff2 files bundle into `/_astro/` with content hashes and inherit immutable caching.
-
Inter Variable
Body sans-serif
Self-hosted via `@fontsource-variable/inter`. Variable axes for fluid weight transitions; bundled woff2 served with `Cache-Control: public, max-age=31536000, immutable`.
-
Source Serif 4 Variable
Display headlines
Self-hosted via `@fontsource-variable/source-serif-4`. Used on every H1, H2, H3 via the `font-display` Tailwind family. Picked from a six-option live A/B at `/font-preview/` (kept around `noindex` for re-runs).
-
JetBrains Mono (system)
Monospace fallback
Not a webfont — used by name only. System falls back to SF Mono / Menlo / Consolas on respective platforms; no payload cost.
-
tabular-nums
Number alignment
Applied to every table cell, mono span, and stat display. Ensures column-aligned digits, ironic detail for a table-plugin site to get right.
SEO & Structured Data
Every page that earns it ships with rich-result-eligible schema.
-
astro-seo
Meta-tag helper
OpenGraph, Twitter cards, canonical, robots, all in one component.
-
@astrojs/sitemap
XML sitemap
Auto-generated at build time. 90+ indexable URLs (count derives from live content collections, so this stays accurate as the site grows).
-
@astrojs/rss
RSS feed
Releases collection rendered as `/releases.xml` for readers and aggregators.
-
JSON-LD types in use
Structured data
SoftwareApplication, Organization, WebSite (with SearchAction), FAQPage, Review, TechArticle, BreadcrumbList, HowTo, Person.
UX details
Things you might not notice unless you look.
-
View transitions
Skipped, intentionally
Existing `prefetch.prefetchAll` already gives near-instant nav. VT requires refactoring all interactive scripts; trade-off not worth it.
-
Scroll-driven animations
CSS `animation-timeline: scroll()`
Zero JS. Cards fade-up as they enter viewport. Reading-progress bar fills as you scroll long-form articles. Both respect `prefers-reduced-motion`.
-
Sticky TOC
IntersectionObserver-driven
Active heading bolds in the right-rail TOC as you scroll through release posts and guides.
-
Theme toggle, no FOUC
Pre-paint inline script
Reads localStorage + prefers-color-scheme synchronously before any CSS applies. Theme persists across navigations.
-
Mobile menu
Hamburger with slide-down panel
Closes on link tap, ESC-key, or hamburger toggle. Full ARIA wiring.
Hosting
Boring on purpose.
-
Nginx
Static file server
Lives on a Contabo VPS alongside the iSuperCoder Rust microservices. Same TLS terminator, same Let's Encrypt automation.
-
GitHub Actions
CI / deploy
On every push to main: `npm run build`, scp `dist/` to the VPS, Nginx serves the new bundle within 60 seconds.
-
No CDN
Direct from VPS
Page-weight is ~30-80KB gzipped per route. CDN adds latency for the first request and complexity to invalidation; not worth it at this scale.
Editor
Where this is written.
-
Cursor
IDE
VS Code fork with Claude integration. The Astro extension provides .astro-aware syntax + IntelliSense.
-
Claude Code
AI pair
Used heavily for content scaffolding. The release post format is shaped by Claude pulling structure from the actual changelog files.
-
GitHub
Source of truth
TableCrafter org. Public repos for the plugin, this site, the docs. Private repos for the Pro version and design assets.