Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/webmaster/llms.txt

Use this file to discover all available pages before exploring further.

The Case Studies page (/casestudies) adopts a refined editorial aesthetic built entirely around the indigo colour palette — a deliberate contrast to the hot-pink and turquoise dominant elsewhere in the site. Two long-form <article> elements are separated by an ASCII art "oOo.oOo.oOo..." divider. Each article has a metadata bar, a serif-heavy body, an inline code block with an indigo left border accent, and a footer row of tags and a comment count badge.

​
Route

PathComponent function
/casestudiesde() in assets/main.js

​
Page Container

The outer wrapper is max-w-3xl mx-auto bg-white p-8 border-x-4 border-indigo-200 min-h-screen. This applies narrow left/right indigo borders that run the full viewport height, framing the editorial column: 
<div className="max-w-3xl mx-auto bg-white p-8 border-x-4 border-indigo-200 min-h-screen">

​
Page Header

A centred title block sits above both articles, separated by a border-b-4 border-double border-indigo-300: 
<div className="text-center mb-12 border-b-4 border-double border-indigo-300 pb-4">
  <h2 className="text-4xl text-indigo-800 font-serif italic">Deep Dives</h2>
  <p className="text-sm text-gray-500 mt-2 font-pixel">
    A collection of my greatest adventures in code.
  </p>
</div>

​
Article Structure

Each article follows an identical four-part template:

Metadata Bar

bg-indigo-50 border border-indigo-200 flex row with three font-pixel text-sm text-indigo-900 spans: Title label, Author, and Date.

Article Title

h3 in text-2xl font-bold text-indigo-700 font-comic.

Body Prose

font-serif leading-relaxed space-y-4 text-gray-800 paragraphs, plus an inline code block.

Tag Footer

Tags string + a bg-indigo-100 text-indigo-800 comment-count badge, separated by border-t border-indigo-100.

​
Article 1 — The Great Migration

// Metadata bar
<div className="bg-indigo-50 p-2 border border-indigo-200 mb-4 flex justify-between items-center font-pixel text-sm text-indigo-900">
  <span>Title: The Great Migration</span>
  <span>Author: Webmaster</span>
  <span>Date: 10/24/2023</span>
</div>

// Heading
<h3 className="text-2xl font-bold text-indigo-700 mb-4 font-comic">
  Refactoring a Legacy Monolith to Microservices
</h3>
Body summary: A PHP monolith with a million lines of code, broken down using Domain-Driven Design. Key outcome: 40% latency reduction and dramatically faster developer onboarding. Inline code block (bg-gray-100 p-4 border-l-4 border-indigo-400 font-mono text-sm my-4): 
<div className="bg-gray-100 p-4 border-l-4 border-indigo-400 font-mono text-sm my-4">
  // The old way<br />
  include('everything.php');<br />
  do_magic();
</div>
Tag footer: 
<div className="mt-6 flex items-center justify-between border-t border-indigo-100 pt-2 text-sm font-pixel text-gray-500">
  <span>Tags: [Architecture] [Refactoring] [PHP]</span>
  <span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Comments (42)</span>
</div>

​
ASCII Divider

Between the two articles, a mono-spaced decorative line provides visual separation: 
<div className="text-center text-indigo-300 font-mono my-12 whitespace-pre">
  oOo.oOo.oOo.oOo.oOo.oOo.oOo.oOo.oOo.oOo
</div>

​
Article 2 — Taming the State

// Metadata bar
<div className="bg-indigo-50 p-2 border border-indigo-200 mb-4 flex justify-between items-center font-pixel text-sm text-indigo-900">
  <span>Title: Taming the State</span>
  <span>Author: Webmaster</span>
  <span>Date: 05/12/2023</span>
</div>

// Heading
<h3 className="text-2xl font-bold text-indigo-700 mb-4 font-comic">
  Implementing Redux in a Chaotic React App
</h3>
Body summary: How runaway prop drilling — 15 components deep — was solved with Redux Toolkit for centralised, predictable, testable state. Tag footer: 
<span>Tags: [React] [Redux] [Frontend]</span>
<span className="bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Comments (13)</span>

​
Colour Palette Reference

ElementTailwind Class
Page side bordersborder-x-4 border-indigo-200
Header underlineborder-b-4 border-double border-indigo-300
Metadata bar bgbg-indigo-50 border-indigo-200
Metadata texttext-indigo-900
Article headingstext-indigo-700
Code block left borderborder-l-4 border-indigo-400
Comment badge bgbg-indigo-100 text-indigo-800
ASCII divider colourtext-indigo-300
Page titletext-indigo-800 font-serif italic

​
Customisation Guide

// In de() — update the <span> text inside each bg-indigo-50 metadata bar

// Article 1:
<span>Title: The Great Migration</span>
<span>Author: Webmaster</span>
<span>Date: 10/24/2023</span>

// Article 2:
<span>Title: Taming the State</span>
<span>Author: Webmaster</span>
<span>Date: 05/12/2023</span>
Unlike other pages in the site, the Case Studies page intentionally avoids font-pixel for body text — it uses font-serif to give a more editorial, blog-like feel. Only the metadata bar and tag footer use font-pixel.

Build docs developers (and LLMs) love

Get started for freeTalk to us