Skip to main content

Documentation Index

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

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

The Workings section spans two routes: a listing page at /case-studies that presents each case study as a decorative candle bookmark, and an individual detail page at /case-studies/:slug that renders the full account on a parchment-styled surface. The CaseStudiesPage (Ue) handles the listing; CaseStudyDetailPage (Ve) handles the detail view.

​
Routes

RouteComponent
/case-studiesCaseStudiesPage (Ue)
/case-studies/:slugCaseStudyDetailPage (Ve)

​
Listing Page — /case-studies

​
Layout

The page centers under max-w-5xl. A heading block at the top reads “Major Workings” with the subtitle “Detailed accounts of complex incantations.” Below it, three candle bookmark components are arranged in a horizontal flex row with gap-12 spacing on mobile and gap-24 on md and wider viewports.

​
Candle Bookmark Anatomy

Each candle is built from three stacked layers:
  1. Hanging thread — a w-0.5 h-24 gradient line running from witch-dark at the top, through witch-plum/50 at mid-point, to witch-plum/80 at the bottom.
  2. Candle body — a w-24 h-32 motion.div with rounded top edges (rounded-t-full) that shifts y: -5 on hover. A radial-gradient motion.div inside simulates the flame, scaling from 0.8 (unlit) to 1.2 (lit) as opacity rises from 0.3 to 1.0 on hover.
  3. Label — title in font-heading and category in font-code uppercase tracking-widest beneath the candle body.
The candle border transitions from border-witch-plum/60 to border-witch-amber on hover. Clicking anywhere on the candle group calls useNavigate to push /case-studies/:slug.

​
Case Study Data

const caseStudies = [
  {
    slug: "banishing-the-monolith",
    title: "Banishing the Monolith",
    category: "Architecture",
  },
  {
    slug: "summoning-design-system",
    title: "Summoning a Design System",
    category: "Frontend",
  },
  {
    slug: "warding-against-ddos",
    title: "Warding Against DDoS",
    category: "DevOps",
  },
];

​
Detail Page — /case-studies/:slug

​
Title Derivation

The page title is not stored in data — it is derived from the URL slug at render time: 
const title = slug
  .split("-")
  .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
  .join(" ");
So /case-studies/warding-against-ddos renders “Warding Against Ddos”. If you need exact capitalisation (e.g. “DDoS”), store a title field in the data and look it up by slug instead.

​
Parchment Layout

The detail view uses a max-w-3xl mx-auto container with a ← Return button anchored absolutely at -left-16 (visible on wide viewports). The content panel is a parchment-bg p-12 border border-witch-plum/30 rounded-sm card that fades and rises in via: 
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}

​
Three-Section Structure

Every case study detail page renders the same three sections:
1

I. The Curse (Problem)

Describes the initial state of the system — the pain points, legacy debt, or threat vector that required intervention.
2

II. The Working (Approach)

Explains the strategy and technical choices made. Includes a fenced code block illustrating the key implementation step.
3

III. The Dispelling (Outcome)

Summarizes the measurable results and the state of the system after the working was complete.

​
Binding Ritual Code Block

The approach section contains a styled code example. In main.js this is rendered as a raw <pre><code> block inside a bg-witch-dark p-4 rounded border border-witch-plum/30 font-code text-sm text-witch-turquoise/80 container: 
// The binding ritual
const rootReducer = combineReducers({
  entities: entityReducer,
  ui: uiReducer,
  // Banish legacy state
});

​
Customization

​
Adding a New Case Study

Step 1 — Add the entry to the listing array: 
{
  slug: "conjuring-the-ci-pipeline",
  title: "Conjuring the CI Pipeline",
  category: "DevOps",
},
Step 2 — The detail page renders automatically from the slug. No new component or route is needed — CaseStudyDetailPage handles any slug under /case-studies/. The three-section body text is currently hard-coded in Ve; to make each case study unique, replace the static paragraph content with a data lookup keyed on the slug.

​
Updating Static Body Content

The three section paragraphs in CaseStudyDetailPage are hard-coded prose strings. To vary content per study, create a caseStudyContent map: 
const caseStudyContent = {
  "banishing-the-monolith": {
    curse:  "The legacy system had grown dark and twisted ...",
    working: "We began by drawing a circle of protection ...",
    dispelling: "When the new architecture was summoned ...",
  },
  // additional entries
};
Then destructure caseStudyContent[slug] inside CaseStudyDetailPage and pass each field to the matching section.

Build docs developers (and LLMs) love

Get started for freeTalk to us