@san-siva/blogkit-md 0.1.0 → 0.1.1

package/README.md

@@ -89,23 +89,25 @@ export default function Page() {
 
 ## Supported markdown features
 
-| Feature         | Syntax                             |
-| --------------- | ---------------------------------- |
-| Headings        | `# H1` `## H2` `### H3` `#### H4`  |
-| Paragraph       | Plain text                         |
-| Hard line break | Two spaces at end of line          |
-| Bold            | `**bold**`                         |
-| Italic          | `_italic_`                         |
-| Inline code     | `` `code` ``                       |
-| Link            | `[text](url)`                      |
-| Image           | `![alt](url)`                      |
-| Ordered list    | `1. item`                          |
-| Unordered list  | `- item`                           |
-| Table           | GFM table syntax                   |
-| Code block      | ` ```lang `                        |
-| Mermaid diagram | ` ```mermaid `                     |
-| Thematic break  | `---`                              |
-| Blockquote      | `> text` — renders as info callout |
+| Feature              | Syntax                                 |
+| -------------------- | -------------------------------------- |
+| Headings             | `# H1` `## H2` `### H3` `#### H4`      |
+| Paragraph            | Plain text                             |
+| Hard line break      | Two spaces at end of line              |
+| Bold                 | `**bold**`                             |
+| Italic               | `_italic_`                             |
+| Inline code          | `` `code` ``                           |
+| Link                 | `[text](url)`                          |
+| Image                | `![alt](url)`                          |
+| Ordered list         | `1. item`                              |
+| Unordered list       | `- item`                               |
+| Table                | GFM table syntax                       |
+| Code block           | ` ```lang `                            |
+| Mermaid diagram      | ` ```mermaid `                         |
+| Thematic break       | `---`                                  |
+| Blockquote           | `> text` — renders as info callout     |
+| Blockquote (warning) | `> ~text` — renders as warning callout |
+| Blockquote (error)   | `> !text` — renders as error callout   |
 
 ## Philosophy
 
@@ -221,13 +223,25 @@ Nested content belongs here.
 ## The Results
 ```
 
+### Callouts
+
+Blockquotes are rendered as styled callout banners. The callout type is controlled by a prefix on the first word of the quote:
+
+| Syntax    | Callout Type | Example                      |
+| :-------- | :----------- | :--------------------------- |
+| `> text`  | Info         | `> This is an info callout.` |
+| `> ~text` | Warning      | `> ~This is a warning.`      |
+| `> !text` | Error        | `> !This is an error.`       |
+
+The prefix character is stripped from the rendered output — only the callout style changes.
+
 ## Want more customization?
 
 `blogkit-md` is just one piece of the puzzle. If you want to customize the underlying React components, tweak the UI, or take full control over your blog's layout, dive into the official [Blogkit documentation](https://blogkit.santhoshsiva.dev/).
 
 ## License
 
-`blogkit-md` is open source software licensed under the [MIT license](https://github.com/san-siva/blogkit-md/blob/main/LICENSE).
+`blogkit-md` is open source software licensed under the [MIT license](https://github.com/san-siva/blogkit-md/blob/main/LICENSE).  
 Contributions are welcome!
 
 ## About

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@san-siva/blogkit-md",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"description": "Converts markdown files into JSX blog posts for Blogkit",
 	"main": "index.ts",
 	"exports": {

package/utils/renderMarkdown.tsx

@@ -1,6 +1,12 @@
 import React from 'react';
 
-import { BlogSection, Callout, CodeBlock, Mermaid, Table } from '@san-siva/blogkit';
+import {
+	BlogSection,
+	Callout,
+	CodeBlock,
+	Mermaid,
+	Table,
+} from '@san-siva/blogkit';
 import type { Root, RootContent } from 'mdast';
 
 import type { Section } from './groupSections';
@@ -84,10 +90,47 @@ function renderNode(
 		}
 		case 'blockquote': {
 			const children = node.children as RootContent[];
+			let calloutType: 'info' | 'warning' | 'error' = 'info';
+			let strippedChildren = children;
+
+			const firstChild = children[0];
+			if (firstChild?.type === 'paragraph') {
+				const firstInline = firstChild.children[0];
+				if (firstInline?.type === 'text') {
+					if (firstInline.value.startsWith('!')) {
+						calloutType = 'error';
+						const trimmed = firstInline.value.slice(1).trimStart();
+						strippedChildren = [
+							{
+								...firstChild,
+								children: [
+									{ ...firstInline, value: trimmed },
+									...firstChild.children.slice(1),
+								],
+							},
+							...children.slice(1),
+						];
+					} else if (firstInline.value.startsWith('~')) {
+						calloutType = 'warning';
+						const trimmed = firstInline.value.slice(1).trimStart();
+						strippedChildren = [
+							{
+								...firstChild,
+								children: [
+									{ ...firstInline, value: trimmed },
+									...firstChild.children.slice(1),
+								],
+							},
+							...children.slice(1),
+						];
+					}
+				}
+			}
+
 			return (
-				<Callout key={key} type="info" hasMarginUp hasMarginDown>
-					{children.map((child, index) =>
-						renderNode(child, index, children[index + 1])
+				<Callout key={key} type={calloutType} hasMarginUp hasMarginDown>
+					{strippedChildren.map((child, index) =>
+						renderNode(child, index, strippedChildren[index + 1])
 					)}
 				</Callout>
 			);
@@ -95,7 +138,7 @@ function renderNode(
 		case 'list': {
 			const Tag = node.ordered ? 'ol' : 'ul';
 			return (
-				<Tag key={key}>
+				<Tag key={key} className={styles['margin-bottom--2']}>
 					{node.children.map((item, index) => (
 						<li key={index}>
 							{item.children.map((child, index) =>