Building the Digital Garden: A Style Guide

Welcome to the start of my new blog section. This post serves as a style guide and a functionality test for the markdown renderer.

We are testing typography, code syntax highlighting, and media embeds.

1. Typography & Hierarchy

The following headers demonstrate the hierarchy of the document.

H3: The Sub-section

H4: The Detail view

H5: The deeply nested header

H6: The smallest header

Paragraphs should be legible with a comfortable line height. This specific blog is built using Next.js 14 and Supabase, aiming for a clean, "terminal-inspired" aesthetic.

"Simplicity is the ultimate sophistication."
— Leonardo da Vinci

2. Code Blocks (The Essentials)

Since this is a tech blog, we need to ensure our code blocks look pristine.

TypeScript / React Example:

import { createClient } from "@/utils/supabase/server";

export async function getPosts() {
  const supabase = await createClient();
  
  // Fetch only published posts
  const { data, error } = await supabase
    .from("blog_posts")
    .select("*")
    .eq("is_published", true);

  if (error) {
    console.error("Error fetching posts:", error);
    return [];
  }

  return data;
}

CSS / Tailwind Example:

.gradient-text {  
  @apply bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500;  
}

Terminal Command:

npm install @supabase/ssr @supabase/supabase-js

3. Lists and Tasks

The Tech Stack:

1. Framework: Next.js (App Router)
2. Database: PostgreSQL (Supabase)
3. Styling: Tailwind CSS + Shadcn
4. Deployment: Vercel

Roadmap (Task List):

• Setup Database Schema
• Build Navigation
• Implement Comment System
• Add RSS Feed

4. Media & Embeds

We need to support images and video content for tutorials.

Standard Image

Caption: A generated abstract texture.

YouTube Embed (Iframe)

Testing HTML rendering for video content:

5. Structured Data (Tables)

Comparison of rendering methods for this project:

6. Closing Thoughts

This concludes the test post. If you can read this, the react-markdown (or mdx) setup is working correctly.