Add GitHub-style callout support

Implement proper GitHub-style callouts with beautiful styling:

Features:
- Custom rehype plugin to transform > [!NOTE] syntax
- Support for 5 callout types:
  * NOTE (blue, 📝)
  * TIP (green, 💡)
  * IMPORTANT (purple, )
  * WARNING (orange, ⚠️)
  * CAUTION (red, 🚨)
- Gradient backgrounds with accent colors
- Full dark mode support
- Converts existing emoji callouts to proper format

Files:
- lib/rehype-callouts.ts: Custom plugin for parsing
- contentlayer.config.ts: Add plugin to pipeline
- styles/globals.css: Beautiful styling for all types
- content/: Convert 2 emoji callouts to [!TIP] format

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-20 18:11:29 +08:00
parent f994301fbb
commit af40ebc5e6
6 changed files with 250 additions and 1 deletions

View File

@@ -4,6 +4,7 @@ import rehypeSlug from 'rehype-slug';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import remarkGfm from 'remark-gfm';
import rehypePrettyCode from 'rehype-pretty-code';
import { rehypeCallouts } from './lib/rehype-callouts';
export const Post = defineDocumentType(() => ({
name: 'Post',
@@ -97,6 +98,7 @@ export default makeSource({
keepBackground: false,
},
],
rehypeCallouts,
rehypeSlug,
[rehypeAutolinkHeadings, { behavior: 'wrap' }],
/**