Retro Garden

Dial-up soul, garden-path links, modern static bones.

RSS ready :: WebC components online :: microformats inside :: view-source encouraged :: accessible by default

about.md

who + why

About

What Retro Garden is trying to do, and why it leans into personality over sterile defaults.

Retro Garden is built for people who want their site to feel lived in.

It borrows from the IndieWeb in spirit and in structure:

  • RSS and JSON feeds ship by default.
  • Posts use microformat-friendly classes such as h-entry, p-name, p-summary, and e-content.
  • The layout leaves room for badge walls, blogrolls, side notes, and personal flourishes.

It also borrows from the earlier web without trying to become a parody:

  • Window-chrome panels and marquee-style status strips create a little friendly friction.
  • The palette switcher keeps the page playful without making it illegible.
  • The typography mixes a readable body face with a deliberate pixel-ish display face.

Example routes to click through

  • Style Guide shows the component language, typography, badges, code colors, and all three palettes.
  • Customize demonstrates the optional page sidebar and maps out which files control which features.
  • Journal shows the read-time, tag archive, share links, feed links, and the author panel at the bottom of each post.

Included features

  • Eleventy Fetch: Caches remote data so the build stays friendly to APIs and still works offline after a successful fetch.

  • OG Image Generation: Build-time social cards powered by eleventy-plugin-og-image and local fonts.

  • Shortcodes: Custom theme helpers like the 88x31 button shortcode are wired into markdown and templates.

  • Markdown: Markdown-it is configured with heading anchors and attribute support for rich long-form posts.

  • Accessibility: Skip links, focus states, motion guards, semantic structure, and a Pa11y CI script are included.

  • Tailwind CSS: Tailwind 4 powers utilities while the theme layers in custom retro components and tokens.

  • RSS: RSS and JSON feeds are generated out of the box for journal posts.

  • WebC: Reusable components handle marquee strips, retro windows, dividers, and the palette switcher.

  • is-land: The accent palette switcher hydrates only when it is useful instead of loading everything up front.

  • Read Time: Posts display estimated reading time using the reading-time package.

  • Slugify: Clean tag and post URLs are generated with slugify.

Accessibility choices

The theme includes a skip link, visible focus outlines, reduced-motion-aware animation, semantic landmarks, and a pa11y-ci script so accessibility can stay part of the workflow rather than an afterthought.

What to customize first

  1. Update the sample identity values in src/_data/site.js.
  2. Replace the demo posts in src/posts/.
  3. Set SITE_URL to your real production domain before publishing feeds or OG images on Vercel.