Calculi Blog & Invariant
Two publications from one custom CMS: an Arabic RTL blog for Tunisian students and Invariant, an English engineering publication, with a shared render pipeline for mixed-direction text, code and LaTeX.
- Started
- October 2025
- Timeline
- Ongoing
- Complexity
- High
- Type
- Web App, SEO
Two editorial publications, published from one CMS I built. مدونة Calculi is an Arabic, right-to-left blog for Tunisian students at calculi.tn/blog. Invariant publishes English long-form essays on distributed systems, data engineering, machine learning and the theory underneath them, at calculi.tn/invariant. They share infrastructure and nothing else: no page, language, text direction or audience. Both are part of Calculi-tn.
Why two publications
The audiences don't overlap. The Arabic blog serves Tunisian students arriving from search. Invariant is written for engineers anywhere and spreads through LinkedIn, X, Reddit and Hacker News. One needs right-to-left typography and local search, the other needs short shareable links and large social cards.
مدونة Calculi
Its visual language is فسيفساء, the Tunisian mosaic. Each category has its own colour and a generated geometric pattern, so an index page reads as one composed picture. Everything interactive is an enhancement: with scripts blocked, every page still reads.
Arabic writing about technology mixes scripts constantly, with code, product names and formulas in the middle of sentences. The blog lays that content out correctly, block by block, in the places where browser defaults get it wrong.
Invariant
Invariant's design is a measured field with one conserved line running through it: a coordinate lattice as the background, a single accent line, and serif typography for long reading.
- Built for distribution: short URLs, full-text feeds and large share cards.
- A living front page with most-read essays, a topic ticker and weekly and monthly rankings, all of which degrade gracefully without scripts.
- A stable layout, with measured cumulative layout shift of 0.00.
- Search with live suggestions.
One rendering pipeline
Both publications share a rendering pipeline that turns whatever an author pastes into clean, accessible article HTML. It adds tables of contents, code blocks with language labels and copy buttons, server-side LaTeX typesetting, responsive tables, and correct text direction.
The CMS
A custom admin panel built for one editor, with its own design system and light and dark themes. It stays usable even with JavaScript disabled.
- Aware of the publication throughout: each publication keeps its own taxonomy, feed and sitemap.
- Rich-editor presets for Arabic articles, English essays and student testimonials.
- A full editorial workflow with drafts, review, private, published and trash, plus featured posts, image galleries and per-post SEO.
- A command palette, and a media library with a built-in image editor.
Markdown in, article out
Paste Markdown, including tables, code and formulas, and see exactly how it will render before creating a draft. Or paste it straight into the editor and it is converted on the way in.
Moderation
Comments, student testimonials and reports of errors in the guide data all land in moderation queues, with live counts in the sidebar.
SEO and distribution
Each publication has its own sitemaps and structured data. Robots rules keep thin pages out of the index, share cards come in each interface language, and related-reading suggestions lead readers onward rather than round in circles.
Stack
Node.js · Express · MongoDB · EJS · TinyMCE · KaTeX · Cloudinary · Docker · Google Cloud Run · Cloudflare. It shares its deployment, authentication and media library with the rest of Calculi-tn.