A Look Behind Plangs!

Plangs! is a website about programming languages and tools, so it’s only fitting to share some of the tools that power it!

Database#

Plangs! is written with TypeScript and uses a graph data model that provides strong typing and IDE support. The data is defined in pure TypeScript folliwing a small spec for vertices and edges. It should be easy to swap the current plain JSON store with a real database in the future if needed.

Backend#

Plangs compiles into a static site but uses Bun's HTTP server during development. Since Bun’s bundler is still in beta, I use esbuild for bundling. Biome handles linting and formatting. marked helps with the markdown to HTML conversion.

The server-side rendering leverages Preact's render-to-string to output static HTML strings from TSX templates. TailwindCSS’s utility-first approach transformed my CSS workflow, and I’m now a believer.

Frontend#

The dynamic parts of the site, like the faceted search feature, the editor and the navbar, were also done with Preact. When encoding states in URLs, I use Rison2, which produces clean human-readable URLs compared to other encodings.

Hosting#

The site is hosted on Cloudflare Pages with Cloudflare Functions providing lightweight backend support for GitHub pull-request creation, a feature of the editor.

Language agnostic tools#

The dev server requires a few tools running concurrently. To orchestrate this, I use Overmind, a tmux-based tool that runs "Procfile" configurations similar to Heroku's. File watching was also needed in the Procfile, and I chose entr, a file watcher written in C that's tiny and efficient.

Data Scraping and AI Enrichment#

I scraped the initial dataset from Wikipedia using Cheerio, a jQuery-inspired library for HTML manipulation. Also enriched the data using OpenAI's Structured Outputs API, guided by JSON Schema, via typescript-json-schema. For extracting and cleaning webpage content for the AI prompts, I used Readability and Turndown to extract the main page content and convert it to Markdown, respectively.

A Big Thank You!#

I'm deeply grateful for all the high-quality open-source tools out there that made building a site like Plangs! possible. A Big Thank You to all the dedicated, generous individuals behind them!