Tech Stack
The tools and services that power Valeon — from the Next.js runtime to the VocaSync audio pipeline.
Core Platform
The foundation that serves every page, holds the content, and deploys updates with confidence.
The web framework that serves every page. Built on React, the modern App Router pairs with React Server Components for fast first paints and minimal JavaScript on the client.
- Hosted on Vercel with preview deploys for every change, so updates roll out without downtime.
A reactive backend that holds every post, author, category, series, and tag. New writing appears the moment it's published — no manual cache busting, no stale pages.
- Cover images live on Convex and serve through Vercel's edge image CDN for fast loads on any device.
Static typing across the stack. Errors surface at edit time rather than after deploy, which keeps the site reliable without slowing iteration.
Interface & Accessibility
Design tokens, typography, and components that keep the site legible, themeable, and inclusive.
Utility-first styling sits next to each component. Theme tokens (colour, spacing, radius) live in one place so adjustments are easy to find and review.
Vendored primitives — buttons, dialogs, sheets, forms — built on Base UI for accessible keyboard nav and focus management. The site ships with a dark default and a light alternative — pick one from the utilities menu in the header.
Drives the theme toggle in the utilities menu. Picks up your system preference on first visit, persists your choice across navigations, and avoids the flash-of-wrong-theme on initial paint by setting the html class on the server.
Lucide provides every utility icon — calendars, clocks, share, RSS. Brand glyphs for X, LinkedIn, Bluesky, GitHub, and friends are inline SVGs so they always match the surrounding text colour and theme.
The everyday reading typefaces — Inter for UI chrome, Lora and Merriweather for long-form prose. Loaded through next/font with subsetting and display: swap, so the page paints with system fallbacks first and the real face slides in once it's ready. Pick whichever you read best from the utilities menu in the header.
A dyslexia-friendly typeface available from the utilities menu alongside the everyday fonts. The preference saves locally so it persists across visits.
Renders TeX and MathML to inline SVG — no fonts to download on the client. Chosen over KaTeX because its output integrates cleanly with the audio pipeline's spoken-math conversion.
Click any image in a post to open it in a full-screen lightbox with keyboard navigation, swipe gestures, pinch-to-zoom on touch, and captions taken from each image's alt text.
Renders the publishing-cadence bar chart on the Stats page. Theme-aware via the same CSS variables that drive the rest of the site, so the bars match whichever palette you've selected without a second styling pass.
Powers the contact, newsletter signup, and contributor application forms. React Hook Form keeps re-renders minimal while you type; Zod validates the same schema on the client (for instant feedback) and on the Convex action (so the server never trusts client-side checks).
Audio Pipeline
How each post becomes a listenable episode.
Turns every post into a narrated MP3 with word-level alignment data, ready to play inline on the page and syndicate to podcast directories. Voice quality stays consistent across episodes; authors can opt out per-post when narration would be a poor fit.
Draws the audio waveform and powers the inline player on each post — scrubbing, hover preview, and the mini sticky player that follows you as you scroll. Decodes peaks in the browser so the waveform reflects the actual audio, not a placeholder.
Convert TeX equations to MathML, then to natural spoken English for the audio pipeline. This is what lets a post with inline math be narrated correctly — "x squared plus two x" instead of unreadable token salad — without changing what readers see on the page.
Content Pipeline
How Markdown becomes the page you're reading.
Where authors draft. A dedicated Valeon plugin publishes posts straight from the vault — each author holds their own API key, the plugin authenticates against the Convex HTTP API, and frontmatter, body, and embedded images all sync in one step. Sync runs both directions, so a fresh vault can pull your full archive back any time.
The dashboard's WYSIWYG editor for authors who prefer drafting in the browser. ProseMirror-backed with extensions for tables, code blocks, drag-and-drop images, links, and a bubble menu — what you see while writing is what lands on the published page.
Powers the optional AI helpers in the editor and the Obsidian plugin: generating a cover image from a subject and a chosen editorial style, drafting a post excerpt from the body, and describing a cover image for its alt text.
- Every suggestion is a starting point — the author reviews and edits it before anything is saved.
The Markdown rendering pipeline. Handles tables, footnotes, math, fenced code, and heading anchors so every post lands typeset cleanly without bespoke per-post styling.
Syntax highlighting for fenced code blocks. Pre-coloured at render time so code stays sharp without pulling a highlighter library to the browser.
YAML frontmatter parser used during content imports. Lets each post carry its metadata — title, author, categories, tags — alongside the body in plain Markdown, which keeps writing portable.
Tooling & Delivery
Sends every transactional email — newsletter confirmations and broadcasts, contact-form replies, contributor application acknowledgements. Bounce and complaint feedback flows back via webhook so the list stays clean without manual hygiene.
A fast JavaScript runtime and package manager. Powers the development server, the production build, and the content import scripts.
All-in-one linter and formatter. Runs in seconds on every save so style stays consistent without slowing anyone down.
Source control and continuous integration. Every change to the site flows through pull requests with automated checks before deploy.