Skip to content

feat: add MDX content components documentation#24

Draft
Corey-T1000 wants to merge 1 commit intomainfrom
feat/mdx-content-components
Draft

feat: add MDX content components documentation#24
Corey-T1000 wants to merge 1 commit intomainfrom
feat/mdx-content-components

Conversation

@Corey-T1000
Copy link
Contributor

Summary

Adds documentation for MDX blog components to the Sandworm design system. These components are used in the AuthZed web project for rich blog content.

Components Documented

  • Callout - Info, warning, tip, success message boxes
  • KeyTakeaways - Summary boxes with TL;DR variant
  • Timeline - Step sequences with complete/current/upcoming status
  • Figure - Images with editorial left-border captions
  • VideoEmbed - YouTube, Vimeo, Spotify embeds
  • LinkCard - Rich link previews (github, docs, external types)
  • Terminal - Command line examples with syntax highlighting

Design Principles

The components follow an editorial design approach:

  • Typography-focused styling with subtle left-border accents
  • Consistent border-l-2 border-stone-300 pattern
  • Proper Sandworm color scale (025, 050, 100)
  • Magenta highlights for emphasis states

Files Changed

  • sandworm/app/components/content/page.tsx - New content components documentation page
  • sandworm/app/components/page.tsx - Added "Content" category to components index

Test plan

  • Visit /components/content to see all documented components
  • Verify code toggle buttons work for each component
  • Check responsive layout on mobile

🤖 Generated with Claude Code

Add documentation for MDX blog components used in the AuthZed web project.
These components follow an editorial design approach with typography-focused
styling and subtle left-border accents.

Components documented:
- Callout (info, warning, tip, success variants)
- KeyTakeaways (summary boxes with TL;DR variant)
- Timeline (step sequences with status indicators)
- Figure (images with editorial captions)
- VideoEmbed (YouTube, Vimeo, Spotify)
- LinkCard (rich link previews)
- Terminal (command line examples)

Each component includes:
- Live visual examples
- Toggleable code snippets
- Usage documentation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@vercel
Copy link
Contributor

vercel bot commented Jan 29, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
design-basin Ready Ready Preview, Comment Jan 29, 2026 9:52pm
design-sandworm Ready Ready Preview, Comment Jan 29, 2026 9:52pm

Request Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant