@next-md-blog/core 1.0.0

package/README.md

@@ -0,0 +1,242 @@
+# @florianamette/next-md-blog
+
+A powerful React library for parsing and displaying markdown and MDX blog posts in Next.js projects. Write your blog posts in markdown or MDX format and easily display them with dynamic routes, complete SEO optimization, and beautiful Open Graph images.
+
+## ✨ Features
+
+- 📝 **Markdown & MDX Support** - Full markdown and MDX support with GitHub Flavored Markdown (GFM) support
+- 🎨 **Server Components** - Built for Next.js App Router with server-side rendering
+- 🔍 **SEO Optimized** - Automatic metadata generation with Open Graph and Twitter Cards
+- 🖼️ **OG Images** - Built-in OG image generation component
+- ⚡ **Type Safe** - Full TypeScript support with comprehensive types
+- 🎯 **Flexible** - Works with both App Router and Pages Router
+- 🛡️ **Robust** - Input validation, error handling, and clean code principles
+
+## 📦 Installation
+
+```bash
+npm install @florianamette/next-md-blog
+```
+
+## 🚀 Quick Start
+
+### 1. Initialize with CLI (Recommended)
+
+The easiest way to get started is using the CLI:
+
+```bash
+npx @florianamette/next-md-blog-cli
+```
+
+This will automatically:
+- ✅ Create blog routes and pages
+- ✅ Install required dependencies
+- ✅ Configure Tailwind CSS typography
+- ✅ Set up SEO configuration
+
+### 2. Manual Setup
+
+If you prefer manual setup:
+
+1. **Install the package:**
+```bash
+npm install @florianamette/next-md-blog @tailwindcss/typography
+```
+
+2. **Create a config file:**
+```tsx
+// next-md-blog.config.ts
+import { createConfig } from '@florianamette/next-md-blog';
+
+export default createConfig({
+  siteName: 'My Blog',
+  siteUrl: process.env.NEXT_PUBLIC_SITE_URL || 'https://example.com',
+  defaultAuthor: 'Your Name',
+  twitterHandle: '@yourhandle',
+  defaultLang: 'en',
+});
+```
+
+3. **Create blog routes:**
+```tsx
+// app/blog/[slug]/page.tsx
+import { getBlogPost, getAllBlogPosts, generateBlogPostMetadata } from '@florianamette/next-md-blog';
+import { MarkdownContent } from '@florianamette/next-md-blog';
+import { notFound } from 'next/navigation';
+import type { Metadata } from 'next';
+import blogConfig from '@/next-md-blog.config';
+
+export async function generateStaticParams() {
+  const posts = await getAllBlogPosts({ config: blogConfig });
+  return posts.map((post) => ({
+    slug: post.slug,
+  }));
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const { slug } = await params;
+  const post = await getBlogPost(slug, { config: blogConfig });
+
+  if (!post) {
+    return { title: 'Post Not Found' };
+  }
+
+  return generateBlogPostMetadata(post, blogConfig);
+}
+
+export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params;
+  const post = await getBlogPost(slug, { config: blogConfig });
+
+  if (!post) {
+    notFound();
+  }
+
+  return (
+    <div className="prose prose-lg dark:prose-invert max-w-none">
+      <MarkdownContent content={post.content} />
+    </div>
+  );
+}
+```
+
+## 📚 API Reference
+
+### Components
+
+#### `MarkdownContent`
+
+A React Server Component that renders markdown content as HTML.
+
+**Props:**
+- `content` (string, required): The markdown content to render
+- `className` (string, optional): CSS class name for the container
+- `components` (MarkdownComponents, optional): Custom components to override default markdown rendering
+- `remarkPlugins` (any[], optional): Custom remark plugins to extend markdown parsing
+- `rehypePlugins` (any[], optional): Custom rehype plugins to extend HTML processing
+
+**Example:**
+```tsx
+<MarkdownContent content="# Hello World" className="prose prose-lg" />
+```
+
+#### `BlogPostSEO`
+
+A component that generates JSON-LD structured data for SEO.
+
+**Props:**
+- `post` (BlogPost, required): The blog post object
+- `config` (SEOConfig, required): SEO configuration
+
+**Example:**
+```tsx
+<BlogPostSEO post={post} config={blogConfig} />
+```
+
+#### `OgImage`
+
+A component for generating Open Graph images (used with `@vercel/og`).
+
+**Props:**
+- `title` (string, required): Title text
+- `description` (string, optional): Description/subtitle text
+- `siteName` (string, optional): Site name
+- `backgroundColor` (string, optional): Background color (default: `#1a1a1a`)
+- `textColor` (string, optional): Text color (default: `#ffffff`)
+
+### Functions
+
+#### `getBlogPost(slug: string, options?: GetBlogPostOptions): Promise<BlogPost | null>`
+
+Retrieves a single blog post by its slug.
+
+**Parameters:**
+- `slug` (string): The slug of the blog post (filename without .md or .mdx extension)
+- `options` (optional): Configuration object
+  - `postsDir` (string, optional): Custom path to posts directory
+  - `config` (Config, optional): Blog configuration
+
+**Returns:**
+- `Promise<BlogPost | null>`: The blog post object or null if not found
+
+#### `getAllBlogPosts(options?: GetBlogPostOptions): Promise<BlogPostMetadata[]>`
+
+Retrieves all blog posts from the posts folder.
+
+**Parameters:**
+- `options` (optional): Configuration object
+  - `postsDir` (string, optional): Custom path to posts directory
+  - `config` (Config, optional): Blog configuration
+
+**Returns:**
+- `Promise<BlogPostMetadata[]>`: Array of blog post metadata, sorted by date (newest first)
+
+#### `generateBlogPostMetadata(post: BlogPost, config?: SEOConfig): Metadata`
+
+Generates comprehensive SEO metadata for a blog post.
+
+**Parameters:**
+- `post` (BlogPost): The blog post object
+- `config` (SEOConfig, optional): SEO configuration
+
+**Returns:**
+- `Metadata`: Next.js metadata object
+
+#### `generateBlogListMetadata(posts: BlogPostMetadata[], config?: SEOConfig): Metadata`
+
+Generates SEO metadata for the blog listing page.
+
+### Types
+
+#### `BlogPost`
+
+```typescript
+interface BlogPost {
+  slug: string;
+  content: string;
+  frontmatter: BlogPostFrontmatter;
+  authors: Author[];
+  readingTime: number;
+  wordCount: number;
+}
+```
+
+#### `BlogPostFrontmatter`
+
+```typescript
+interface BlogPostFrontmatter {
+  title?: string;
+  date?: string;
+  description?: string;
+  author?: string;
+  tags?: string[];
+  ogImage?: string;
+  image?: string;
+  [key: string]: unknown;
+}
+```
+
+## 🎨 Styling
+
+The library is designed to work with Tailwind CSS v4 and the `@tailwindcss/typography` plugin. Use the `prose` classes for beautiful markdown styling:
+
+```tsx
+<div className="prose prose-lg dark:prose-invert max-w-none">
+  <MarkdownContent content={post.content} />
+</div>
+```
+
+## 📖 Documentation
+
+For complete documentation, examples, and advanced usage, visit the [main repository](https://github.com/florianamette/next-mdx-blog).
+
+## 📝 License
+
+MIT
+
+## 🔗 Links
+
+- [GitHub Repository](https://github.com/florianamette/next-mdx-blog)
+- [CLI Package](https://www.npmjs.com/package/@florianamette/next-md-blog-cli)
+- [Issues](https://github.com/florianamette/next-mdx-blog/issues)
+

package/dist/components/BlogPostSEO.d.ts

@@ -0,0 +1,28 @@
+import type { BlogPost, Config } from '../core/types.js';
+/**
+ * Props for the BlogPostSEO component
+ */
+export interface BlogPostSEOProps {
+    /** The blog post */
+    post: BlogPost;
+    /** Configuration (optional - will load from next-md-blog.config.ts if not provided) */
+    config?: Config;
+    /** Custom breadcrumb items (optional) */
+    breadcrumbs?: Array<{
+        name: string;
+        url: string;
+    }>;
+    /** Whether to include breadcrumbs schema (default: true) */
+    includeBreadcrumbs?: boolean;
+}
+/**
+ * Component that generates and injects JSON-LD structured data for a blog post
+ * Handles both article schema and breadcrumbs schema automatically
+ *
+ * @example
+ * ```tsx
+ * <BlogPostSEO post={post} />
+ * ```
+ */
+export declare function BlogPostSEO({ post, config, breadcrumbs, includeBreadcrumbs, }: BlogPostSEOProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BlogPostSEO.d.ts.map

package/dist/components/BlogPostSEO.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogPostSEO.d.ts","sourceRoot":"","sources":["../../src/components/BlogPostSEO.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAIzD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,oBAAoB;IACpB,IAAI,EAAE,QAAQ,CAAC;IACf,uFAAuF;IACvF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,WAAW,CAAC,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,4DAA4D;IAC5D,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,MAAM,EACN,WAAW,EACX,kBAAyB,GAC1B,EAAE,gBAAgB,2CA2BlB"}

package/dist/components/BlogPostSEO.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { generateBlogPostSchema, generateBreadcrumbsSchema } from '../core/seo.js';
+import { getConfig } from '../core/config.js';
+/**
+ * Component that generates and injects JSON-LD structured data for a blog post
+ * Handles both article schema and breadcrumbs schema automatically
+ *
+ * @example
+ * ```tsx
+ * <BlogPostSEO post={post} />
+ * ```
+ */
+export function BlogPostSEO({ post, config, breadcrumbs, includeBreadcrumbs = true, }) {
+    const blogConfig = config || getConfig();
+    // Generate article schema
+    const articleSchema = generateBlogPostSchema(post, blogConfig);
+    // Generate breadcrumbs schema if enabled
+    const breadcrumbsSchema = includeBreadcrumbs
+        ? generateBreadcrumbsSchema(post, blogConfig, breadcrumbs)
+        : null;
+    return (_jsxs(_Fragment, { children: [_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(articleSchema) } }), breadcrumbsSchema && (_jsx("script", { type: "application/ld+json", dangerouslySetInnerHTML: { __html: JSON.stringify(breadcrumbsSchema) } }))] }));
+}

package/dist/components/MarkdownContent.d.ts

@@ -0,0 +1,48 @@
+import type { Components } from 'react-markdown';
+/**
+ * Component types that can be overridden
+ */
+export interface MarkdownComponents extends Partial<Components> {
+}
+/**
+ * Props for the MarkdownContent component
+ */
+export interface MarkdownContentProps {
+    /** The markdown content to render */
+    content: string;
+    /** Optional CSS class name for the container */
+    className?: string;
+    /** Optional custom components to override default markdown rendering */
+    components?: MarkdownComponents;
+    /** Optional remark plugins */
+    remarkPlugins?: any[];
+    /** Optional rehype plugins */
+    rehypePlugins?: any[];
+}
+/**
+ * React Server Component that renders markdown content as React elements
+ * Uses react-markdown under the hood with support for custom components.
+ *
+ * If custom components are provided in the components/markdown folder, they will be used.
+ * Otherwise, Tailwind's prose classes will handle the styling.
+ *
+ * @example
+ * ```tsx
+ * // Using default components from components/markdown folder
+ * <MarkdownContent
+ *   content="# Hello World"
+ *   className="prose prose-lg"
+ * />
+ *
+ * // Overriding specific components
+ * <MarkdownContent
+ *   content="# Hello World"
+ *   className="prose prose-lg"
+ *   components={{
+ *     h1: ({ children, ...props }) => <h1 className="text-4xl font-bold" {...props}>{children}</h1>,
+ *   }}
+ * />
+ * ```
+ */
+export declare function MarkdownContent({ content, className, components, remarkPlugins, rehypePlugins, }: MarkdownContentProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MarkdownContent.d.ts.map

package/dist/components/MarkdownContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MarkdownContent.d.ts","sourceRoot":"","sources":["../../src/components/MarkdownContent.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAGjD;;GAEG;AACH,MAAM,WAAW,kBAAmB,SAAQ,OAAO,CAAC,UAAU,CAAC;CAAG;AAElE;;GAEG;AACH,MAAM,WAAW,oBAAoB;IACnC,qCAAqC;IACrC,OAAO,EAAE,MAAM,CAAC;IAChB,gDAAgD;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wEAAwE;IACxE,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,8BAA8B;IAC9B,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;IACtB,8BAA8B;IAC9B,aAAa,CAAC,EAAE,GAAG,EAAE,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,eAAe,CAAC,EAC9B,OAAO,EACP,SAAc,EACd,UAAU,EACV,aAAkB,EAClB,aAAkB,GACnB,EAAE,oBAAoB,2CA0BtB"}

package/dist/components/MarkdownContent.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import remarkEmoji from 'remark-emoji';
+import { defaultMarkdownComponents } from './markdown/defaults.js';
+/**
+ * React Server Component that renders markdown content as React elements
+ * Uses react-markdown under the hood with support for custom components.
+ *
+ * If custom components are provided in the components/markdown folder, they will be used.
+ * Otherwise, Tailwind's prose classes will handle the styling.
+ *
+ * @example
+ * ```tsx
+ * // Using default components from components/markdown folder
+ * <MarkdownContent
+ *   content="# Hello World"
+ *   className="prose prose-lg"
+ * />
+ *
+ * // Overriding specific components
+ * <MarkdownContent
+ *   content="# Hello World"
+ *   className="prose prose-lg"
+ *   components={{
+ *     h1: ({ children, ...props }) => <h1 className="text-4xl font-bold" {...props}>{children}</h1>,
+ *   }}
+ * />
+ * ```
+ */
+export function MarkdownContent({ content, className = '', components, remarkPlugins = [], rehypePlugins = [], }) {
+    if (!content || typeof content !== 'string') {
+        throw new Error('Invalid content: must be a non-empty string');
+    }
+    // Merge default components with user-provided components
+    // User components override defaults
+    const mergedComponents = {
+        ...defaultMarkdownComponents,
+        ...components,
+    };
+    // Default remark plugins
+    const defaultRemarkPlugins = [remarkGfm, remarkEmoji, ...remarkPlugins];
+    return (_jsx("article", { className: className ? `prose prose-lg max-w-none dark:prose-invert ${className}` : 'prose prose-lg max-w-none dark:prose-invert', children: _jsx(ReactMarkdown, { remarkPlugins: defaultRemarkPlugins, rehypePlugins: rehypePlugins, components: mergedComponents, children: content }) }));
+}

package/dist/components/OgImage.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+/**
+ * Props for the OgImage component
+ */
+export interface OgImageProps {
+    /** Title text */
+    title: string;
+    /** Description/subtitle text */
+    description?: string;
+    /** Site name */
+    siteName?: string;
+    /** Background color */
+    backgroundColor?: string;
+    /** Text color */
+    textColor?: string;
+    /** Width of the image */
+    width?: number;
+    /** Height of the image */
+    height?: number;
+}
+/**
+ * Default OG Image component for generating Open Graph images
+ * This component can be used with @vercel/og or similar libraries
+ *
+ * @example
+ * ```tsx
+ * <OgImage
+ *   title="My Blog Post"
+ *   description="A great blog post"
+ *   siteName="My Blog"
+ * />
+ * ```
+ */
+export declare function OgImage({ title, description, siteName, backgroundColor, textColor, width, height, }: OgImageProps): React.JSX.Element;
+//# sourceMappingURL=OgImage.d.ts.map

package/dist/components/OgImage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OgImage.d.ts","sourceRoot":"","sources":["../../src/components/OgImage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,gCAAgC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,uBAAuB;IACvB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,WAAW,EACX,QAAoB,EACpB,eAA2B,EAC3B,SAAqB,EACrB,KAAY,EACZ,MAAY,GACb,EAAE,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAiElC"}

package/dist/components/OgImage.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Default OG Image component for generating Open Graph images
+ * This component can be used with @vercel/og or similar libraries
+ *
+ * @example
+ * ```tsx
+ * <OgImage
+ *   title="My Blog Post"
+ *   description="A great blog post"
+ *   siteName="My Blog"
+ * />
+ * ```
+ */
+export function OgImage({ title, description, siteName = 'My Blog', backgroundColor = '#1a1a1a', textColor = '#ffffff', width = 1200, height = 630, }) {
+    return (_jsx("div", { style: {
+            width,
+            height,
+            backgroundColor,
+            color: textColor,
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            padding: '80px',
+            fontFamily: 'system-ui, -apple-system, sans-serif',
+        }, children: _jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                textAlign: 'center',
+                maxWidth: '1000px',
+            }, children: [siteName && (_jsx("div", { style: {
+                        fontSize: '24px',
+                        opacity: 0.8,
+                        marginBottom: '20px',
+                        fontWeight: 500,
+                    }, children: siteName })), _jsx("h1", { style: {
+                        fontSize: '64px',
+                        fontWeight: 700,
+                        margin: 0,
+                        marginBottom: description ? '24px' : 0,
+                        lineHeight: 1.2,
+                        wordWrap: 'break-word',
+                    }, children: title }), description && (_jsx("p", { style: {
+                        fontSize: '32px',
+                        opacity: 0.9,
+                        margin: 0,
+                        lineHeight: 1.4,
+                        wordWrap: 'break-word',
+                    }, children: description }))] }) }));
+}

package/dist/components/markdown/a.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface AProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+}
+declare const A: React.ForwardRefExoticComponent<AProps & React.RefAttributes<HTMLAnchorElement>>;
+export default A;
+//# sourceMappingURL=a.d.ts.map

package/dist/components/markdown/a.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"a.d.ts","sourceRoot":"","sources":["../../../src/components/markdown/a.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,MAAO,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEhF,QAAA,MAAM,CAAC,kFAIN,CAAC;AAGF,eAAe,CAAC,CAAC"}

package/dist/components/markdown/a.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+const A = React.forwardRef(({ className, ...props }, ref) => {
+    return _jsx("a", { ref: ref, className: className, ...props });
+});
+A.displayName = 'A';
+export default A;

package/dist/components/markdown/blockquote.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface BlockquoteProps extends React.HTMLAttributes<HTMLQuoteElement> {
+}
+declare const Blockquote: React.ForwardRefExoticComponent<BlockquoteProps & React.RefAttributes<HTMLQuoteElement>>;
+export default Blockquote;
+//# sourceMappingURL=blockquote.d.ts.map

package/dist/components/markdown/blockquote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"blockquote.d.ts","sourceRoot":"","sources":["../../../src/components/markdown/blockquote.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;CAAG;AAElF,QAAA,MAAM,UAAU,0FAIf,CAAC;AAGF,eAAe,UAAU,CAAC"}

package/dist/components/markdown/blockquote.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+const Blockquote = React.forwardRef(({ className, ...props }, ref) => {
+    return _jsx("blockquote", { ref: ref, className: className, ...props });
+});
+Blockquote.displayName = 'Blockquote';
+export default Blockquote;

package/dist/components/markdown/code.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
+}
+declare const Code: React.ForwardRefExoticComponent<CodeProps & React.RefAttributes<HTMLElement>>;
+export default Code;
+//# sourceMappingURL=code.d.ts.map

package/dist/components/markdown/code.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"code.d.ts","sourceRoot":"","sources":["../../../src/components/markdown/code.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;CAAG;AAEvE,QAAA,MAAM,IAAI,+EAIT,CAAC;AAGF,eAAe,IAAI,CAAC"}

package/dist/components/markdown/code.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+const Code = React.forwardRef(({ className, ...props }, ref) => {
+    return _jsx("code", { ref: ref, className: className, ...props });
+});
+Code.displayName = 'Code';
+export default Code;

package/dist/components/markdown/defaults.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Default markdown components
+ * These are used when no custom components are provided
+ */
+import type { Components } from 'react-markdown';
+/**
+ * Default markdown components that will be used if no custom components are provided
+ * These components from the components/markdown folder will be used.
+ * If a component is not provided here, Tailwind's prose classes will handle the styling.
+ */
+export declare const defaultMarkdownComponents: Partial<Components>;
+//# sourceMappingURL=defaults.d.ts.map

package/dist/components/markdown/defaults.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"defaults.d.ts","sourceRoot":"","sources":["../../../src/components/markdown/defaults.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AA0BjD;;;;GAIG;AACH,eAAO,MAAM,yBAAyB,EAAE,OAAO,CAAC,UAAU,CAyBzD,CAAC"}

package/dist/components/markdown/defaults.js

@@ -0,0 +1,59 @@
+/**
+ * Default markdown components
+ * These are used when no custom components are provided
+ */
+import H1 from './h1.js';
+import H2 from './h2.js';
+import H3 from './h3.js';
+import H4 from './h4.js';
+import H5 from './h5.js';
+import H6 from './h6.js';
+import P from './p.js';
+import A from './a.js';
+import Img from './img.js';
+import Code from './code.js';
+import Pre from './pre.js';
+import Blockquote from './blockquote.js';
+import Ul from './ul.js';
+import Ol from './ol.js';
+import Li from './li.js';
+import Table from './table.js';
+import Thead from './thead.js';
+import Tbody from './tbody.js';
+import Tr from './tr.js';
+import Th from './th.js';
+import Td from './td.js';
+import Hr from './hr.js';
+import Strong from './strong.js';
+import Em from './em.js';
+/**
+ * Default markdown components that will be used if no custom components are provided
+ * These components from the components/markdown folder will be used.
+ * If a component is not provided here, Tailwind's prose classes will handle the styling.
+ */
+export const defaultMarkdownComponents = {
+    h1: H1,
+    h2: H2,
+    h3: H3,
+    h4: H4,
+    h5: H5,
+    h6: H6,
+    p: P,
+    a: A,
+    img: Img,
+    code: Code,
+    pre: Pre,
+    blockquote: Blockquote,
+    ul: Ul,
+    ol: Ol,
+    li: Li,
+    table: Table,
+    thead: Thead,
+    tbody: Tbody,
+    tr: Tr,
+    th: Th,
+    td: Td,
+    hr: Hr,
+    strong: Strong,
+    em: Em,
+};

package/dist/components/markdown/em.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface EmProps extends React.HTMLAttributes<HTMLElement> {
+}
+declare const Em: React.ForwardRefExoticComponent<EmProps & React.RefAttributes<HTMLElement>>;
+export default Em;
+//# sourceMappingURL=em.d.ts.map

package/dist/components/markdown/em.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"em.d.ts","sourceRoot":"","sources":["../../../src/components/markdown/em.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,OAAQ,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;CAAG;AAErE,QAAA,MAAM,EAAE,6EAIP,CAAC;AAGF,eAAe,EAAE,CAAC"}

package/dist/components/markdown/em.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+const Em = React.forwardRef(({ className, ...props }, ref) => {
+    return _jsx("em", { ref: ref, className: className, ...props });
+});
+Em.displayName = 'Em';
+export default Em;

package/dist/components/markdown/h1.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface H1Props extends React.HTMLAttributes<HTMLHeadingElement> {
+}
+declare const H1: React.ForwardRefExoticComponent<H1Props & React.RefAttributes<HTMLHeadingElement>>;
+export default H1;
+//# sourceMappingURL=h1.d.ts.map

package/dist/components/markdown/h1.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"h1.d.ts","sourceRoot":"","sources":["../../../src/components/markdown/h1.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,OAAQ,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;CAAG;AAE5E,QAAA,MAAM,EAAE,oFAIP,CAAC;AAGF,eAAe,EAAE,CAAC"}

package/dist/components/markdown/h1.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+const H1 = React.forwardRef(({ className, ...props }, ref) => {
+    return _jsx("h1", { ref: ref, className: className, ...props });
+});
+H1.displayName = 'H1';
+export default H1;