Skip to main content

Documentation Index

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

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

The Blog page (/blog) showcases writing under the heading “The Grimoire…” with the self-aware subtitle “I mean, Blog. (Grimoires are so last century)”. Three post cards are displayed as wide oval pill shapes, each shimmering with a continuous SVG ripple effect that mimics light refracting through water. Hovering over a card reveals a turquoise glow and a “Peer closer →” prompt that fades in to invite the reader.

​
Card Design

Oval pill shape. Each card uses rounded-[100px] to produce the distinctive elongated pill silhouette. The card has an outer purple border and an inner turquoise border, with a dark gradient background that layers the two border rings into a jewel-like frame. SVG ripple filter. A hidden <svg> element is rendered in the page with an feTurbulence filter chained into a feDisplacementMap. The turbulence baseFrequency is animated between 0.02 → 0.04 → 0.02 over a 5-second loop using an SVG <animate> element. The resulting filter is applied to each card via filter: url(#ripple), giving the entire card surface a subtle, breathing distortion as though it were submerged. Entrance animation. Cards animate in using Framer Motion on mount:
  • Initial state: opacity: 0, scale: 0.9
  • Animate state: opacity: 1, scale: 1
  • Stagger delay: index * 0.2 seconds per card
Hover animation. On hover, the card scales up by 5% (scale: 1.05) and a turquoise box-shadow glow appears around it. The “Peer closer →” text starts at opacity: 0 and transitions to opacity: 1 when the card is hovered, providing a clear affordance without cluttering the resting state.

​
Blog Post Data

The three posts are stored in the qt array in assets/main.js. Each object contains an id, title, date, and excerpt. 
const qt = [
  {
    id: 1,
    title: "10 React Hooks for the Modern Witch",
    date: "Oct 31, 2023",
    excerpt:
      "Stop writing boilerplate and start casting custom hooks. A guide to useMemo, useCallback, and other performance enchantments.",
  },
  {
    id: 2,
    title: "Summoning Demons (and Daemons)",
    date: "Sep 15, 2023",
    excerpt:
      "A practical guide to background processes, cron jobs, and keeping your server running when the moon is full.",
  },
  {
    id: 3,
    title: "CSS Grid: A Summoning Circle Tutorial",
    date: "Aug 02, 2023",
    excerpt:
      "Aligning items shouldn't require a blood sacrifice. Master the arcane arts of grid-template-areas.",
  },
];

​
Adding a Blog Post

1

Locate the qt array in assets/main.js

Open assets/main.js and find the qt array near the top of the BlogPage component. You will see the three existing post objects.
2

Append a new post object

Add a new object to the end of the qt array. Provide a unique id, a title, a formatted date string, and a one-to-two sentence excerpt:
{
  id: 4,
  title: "Your Post Title Here",
  date: "Month DD, YYYY",
  excerpt:
    "A short, engaging description of what the post covers. Keep it to one or two sentences.",
}
The new card will render automatically with the same oval shape, ripple filter, and staggered entrance animation as the existing three. No other changes are required.
The blog cards are display-only — there are no individual post pages in the current implementation. Clicking a card does not navigate anywhere. To add full post routing, you would need to introduce a router (e.g. React Router <Route>) and create per-post page components.

Build docs developers (and LLMs) love

Get started for freeTalk to us