Skip to main content

Documentation Index

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

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

The Blog page is where Alex Groovy shares written thoughts on frontend development, filtered through a distinctly 1970s lens. Titled “The Record Crate” with the subtitle “Flip through my latest thoughts”, the page invites visitors to browse posts as though flipping through a physical record collection. The RecordCrate component renders each post as a record sleeve that can be thumbed through horizontally or vertically — selecting a post animates it forward as though pulling it from the crate. Five posts are currently defined, covering topics from CSS Grid to vintage UI patterns, each stamped with a publication date.

​
Route

PropertyValue
Path/blog
React componentD
Router typeHashRouter — accessed as /#/blog

​
Current posts

#TitleDate
1CSS Grid is GroovyMay 15, 2023
2State Management ZenApr 02, 2023
3The Art of the SVGMar 18, 2023
4Accessibility is LoveFeb 10, 2023
5Vintage UI PatternsJan 05, 2023

​
Blog post object shape

Each entry in the posts array must follow this schema:
​
title
string
required
The post title displayed on the record sleeve face and as the heading when the post is expanded. Should be punchy and concise — four to seven words is the sweet spot for the sleeve label area.
"CSS Grid is Groovy"
​
date
string
required
Publication date as a human-readable string. No strict format is enforced, but "MMM DD, YYYY" (e.g. "May 15, 2023") is used consistently across all current posts and is recommended for visual consistency in the crate.
"May 15, 2023"
​
excerpt
string
A one-to-two sentence teaser shown when the post is selected from the crate. If omitted, the component renders the title and date only in the expanded state. Strongly recommended for any post intended to drive click-throughs to full post content.
"CSS Grid transformed how we think about two-dimensional layout. Here's why I reach for it first, every time."
​
color
string (hex)
Optional accent colour applied to the record sleeve’s label dot and the expanded post highlight bar. Defaults to the portfolio fuchsia (#d946ef) if not specified. Using distinct colours per post helps visitors visually differentiate entries in the crate.
"#2dd4bf"

​
Full posts array (as defined in source)

const posts = [
  {
    title:   "CSS Grid is Groovy",
    date:    "May 15, 2023",
    excerpt: "Stop floating your divs and start gridding your layouts. It's a whole new dimension, man.",
    color:   "#d946ef",
  },
  {
    title:   "State Management Zen",
    date:    "Apr 02, 2023",
    excerpt: "Finding inner peace when your React components have too much state to handle.",
    color:   "#2dd4bf",
  },
  {
    title:   "The Art of the SVG",
    date:    "Mar 18, 2023",
    excerpt: "Drawing with math to create scalable, trippy visuals that look crisp on any screen.",
    color:   "#fde047",
  },
  {
    title:   "Accessibility is Love",
    date:    "Feb 10, 2023",
    excerpt: "Making the web usable for everyone is the most righteous thing a developer can do.",
    color:   "#8b5cf6",
  },
  {
    title:   "Vintage UI Patterns",
    date:    "Jan 05, 2023",
    excerpt: "What we can learn from the tactile interfaces of the 70s and apply to modern web design.",
    color:   "#a3e635",
  },
];

​
Adding a new post

Prepend new posts to the beginning of the array so the most recent entry appears first in the crate: 
{
  title: "The Joy of View Transitions",
  date: "Jun 20, 2023",
  excerpt:
    "The View Transitions API is here and it's bringing page animations to the masses. Let's dig in.",
  color: "#a78bfa",
}

​
RecordCrate component props

​
posts
BlogPost[]
required
The array of post objects to render as record sleeves. The crate handles ordering internally — pass the array in the desired display order (newest first recommended).
​
crateColor
string (hex)
default:"\"#78350f\""
Background colour of the crate housing element itself (the wooden-box aesthetic). Defaults to a warm brown. Changing this to black gives a more modern record-store feel.
​
onPostSelect
(post: BlogPost) => void
Optional callback fired when the user selects a post from the crate. Use this to route to a full post page, open a drawer, or trigger a modal with the post body content.
If you’re linking blog posts to real external URLs (e.g. a Medium or dev.to profile), add a url field to each post object and wire it into the onPostSelect callback: onPostSelect={(post) => window.open(post.url, '_blank')}. This lets the RecordCrate stay self-contained while still driving traffic to full-length hosted posts.

​
Related components

RecordCrate Component

Full API reference and animation customisation options for the RecordCrate browser.

Projects Page

VinylRecord cards that share the same music-and-grooves visual language as the blog crate.

Build docs developers (and LLMs) love

Get started for freeTalk to us