Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/digital-domain/llms.txt

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

The Blog page recreates the personal “web-log” format popular in the early 2000s, where authors posted short opinion pieces and updates directly to their homepage. Each post is rendered as an HTML <table> that visually mimics a Windows 98 window — a pattern that would have been entirely standard on sites of that era. A set of BeveledButton category filters lets visitors narrow posts by type, with the filtered list updating reactively via a single activeCategory state variable.

​
Page Header

The page opens with a centred heading block: 
<h1 className="font-vt323 text-5xl text-white drop-shadow-[2px_2px_0px_#FF1493]">
  My Web-Log
</h1>
<p className="font-comic text-lg bg-white inline-block px-4 py-1 border-2 border-black">
  Thoughts, rants, and broken code.
</p>
Visual appearance: The “My Web-Log” heading is rendered in the VT323 bitmap font at size 5xl in white, with a bright pink (#FF1493) 2px offset drop shadow for a neon-sign pop. Beneath it, the tagline “Thoughts, rants, and broken code.” sits in font-comic inside a white box with a solid black border — like a label sticker over the page background.

​
Category Filters

Four BeveledButton elements provide category filtering. The active category is tracked via state: 
const [activeCategory, setActiveCategory] = useState("All");

const categories = ["All", "Hot Takes", "Essays", "Updates"];
Each button receives an active prop that reflects whether it is the currently selected category: 
{categories.map((cat) => (
  <BeveledButton
    key={cat}
    active={activeCategory === cat}
    onClick={() => setActiveCategory(cat)}
  >
    {cat}
  </BeveledButton>
))}
Visual appearance: Buttons are displayed in a flex justify-center gap-2 row centred on the page. The active prop on BeveledButton applies a pressed/sunken bevel shadow (shadow-win-btn-active) to the selected category, so “All” appears pressed-in by default. Inactive buttons use the raised bevel shadow (shadow-win-btn).

​
Hardcoded Post Data

Three posts are defined in the top-level constant array (M in the compiled source): 
const posts = [
  {
    slug: "why-tables-are-better",
    title: "Why <table> layouts are actually superior",
    date: "Oct 12, 2002",
    category: "Hot Takes",
  },
  {
    slug: "css-is-a-fad",
    title: "CSS is just a fad, stick to inline styles",
    date: "Sep 04, 2002",
    category: "Essays",
  },
  {
    slug: "my-new-winamp-skin",
    title: "Check out my new custom Winamp skin!",
    date: "Aug 21, 2002",
    category: "Updates",
  },
];
All three posts carry fictional publication dates from 2002, placing them firmly in the era being referenced.

​
Filtered Post List

The displayed posts are derived from the full list using the activeCategory state: 
const filteredPosts = activeCategory === "All"
  ? posts
  : posts.filter((p) => p.category === activeCategory);
Selecting “Hot Takes” shows only the first post; “Essays” shows only the second; “Updates” shows only the third; “All” shows all three.

​
Post Card Structure

Each post is rendered as an HTML <table> styled to look like a Win98 application window — a historically accurate technique for the time period the site is parodying: 
<table className="w-full bg-white border-4 border-win-gray shadow-win-out border-collapse">
  <tbody>
    {/* Title bar row */}
    <tr>
      <td className="bg-titlebar text-white font-comic font-bold p-2 border-b-2 border-black flex justify-between">
        <span>{post.title}</span>
        <span className="text-sm font-normal text-gray-300">{post.date}</span>
      </td>
    </tr>

    {/* Body row */}
    <tr>
      <td className="p-4 font-comic text-gray-800">
        <p className="mb-4">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          I'm writing this from my Pentium III machine...
        </p>
        <Link to={`/blog/${post.slug}`} className="text-blue-700 underline hover:text-retro-pink font-bold">
          Read More >>
        </Link>
      </td>
    </tr>

    {/* Footer / metadata row */}
    <tr>
      <td className="bg-gray-200 p-1 text-xs font-comic border-t border-gray-400 text-right">
        Filed under: <span className="text-retro-purple font-bold">{post.category}</span> | Comments (0)
      </td>
    </tr>
  </tbody>
</table>
Visual appearance: The title bar row uses bg-titlebar (the same blue as Win98 active title bars), white bold font-comic text for the post title, and a right-aligned light grey date stamp. The body row is white with standard font-comic text-gray-800 body copy and a blue underlined “Read More >>” link. The footer row is light grey (bg-gray-200) with right-aligned category metadata in a smaller font. The outer table has the full Win98 raised-bevel border (border-4 border-win-gray shadow-win-out).

​
Individual Post Navigation

The “Read More >>” link in each post card navigates to /blog/:slug using the React Router Link component. The slug is drawn directly from the post data object. The individual Blog Post page (ke component in the source) renders its own full post view at that route, complete with a mood indicator, currently-playing song, and animated GIF.
The post body content shown in the list view is placeholder lorem ipsum text — all three posts display the same stub paragraph. Only the title, date, category, and slug are unique per post. The full post content is rendered on the detail route at /blog/:slug.

​
Blog Post Detail Route

The detail page (/blog/:slug) renders:
  • A back link to /blog
  • A full <table> window with a large title bar showing the slug in uppercase
  • A metadata row showing Mood: ☕ Caffeinated and Listening to: Linkin Park - In The End.mp3
  • Two prose paragraphs of body content
  • A <img> GIF from Giphy
  • A closing sign-off: Peace out, / - The Webmaster
  • A footer bar: [ Comments have been closed since 2007 due to spam ]

​
Component Dependencies

ComponentSourceUsage
BeveledButton (d)components/BeveledButton.jsCategory filter buttons
LinkReact RouterPost list “Read More” links
useStateReact 18activeCategory filter state
useParams (T)React RouterBlog post detail slug extraction

Build docs developers (and LLMs) love

Get started for freeTalk to us