@leadertechie/md2html 0.1.0-alpha.0

package/.github/workflows/publish.yml

@@ -0,0 +1,76 @@
+name: CI / Publish
+
+on:
+  push:
+    branches:
+      - '**'
+  pull_request:
+  workflow_dispatch:
+
+jobs:
+  build-and-test:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    
+    steps:
+      - uses: actions/checkout@v4
+      
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      
+      - name: Install dependencies
+        run: npm install
+      
+      - name: Run tests
+        run: npm test
+      
+      - name: Build package
+        run: npm run build
+
+  publish:
+    needs: build-and-test
+    runs-on: ubuntu-latest
+    if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+    permissions:
+      contents: read
+    
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      
+      - name: Setup GitVersion
+        uses: gittools/actions/gitversion/setup@v0.10.2
+        with:
+          versionSpec: '5.x'
+      
+      - name: Execute GitVersion
+        id: gitversion
+        uses: gittools/actions/gitversion/execute@v0.10.2
+        with:
+          useConfigFile: true
+      
+      - name: Display GitVersion outputs
+        run: |
+          echo "FullSemVer: ${{ steps.gitversion.outputs.fullSemVer }}"
+      
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          registry-url: 'https://registry.npmjs.org/'
+      
+      - name: Install dependencies
+        run: npm install
+      
+      - name: Build package
+        run: npm run build
+      
+      - name: Update package version
+        run: npm version ${{ steps.gitversion.outputs.fullSemVer }} --no-git-tag-version
+      
+      - name: Publish to npm
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/GitVersion.yml

@@ -0,0 +1,7 @@
+next-version: 0.0.1
+mode: Mainline
+branches:
+  main:
+    regex: ^main$
+    increment: Patch
+    tag: alpha

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 leadertechie
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,73 @@
+# @leadertechie/md2html
+
+A configuration-driven markdown to HTML pipeline that parses markdown to an AST (ContentNode), then renders to HTML strings or Lit templates.
+
+## Features
+
+- **Parse markdown to AST** - Converts markdown to a structured JSON AST (ContentNode[])
+- **Render to HTML string** - Convert AST to plain HTML strings
+- **Render to Lit templates** - Convert AST to Lit TemplateResult for web components
+- **Configuration-driven** - No hardcoded paths or content structure
+- **SSR-ready** - Works in both Node.js and browser environments
+- **Image path handling** - Configurable prefix and base URL for images
+
+## Installation
+
+```bash
+npm install @leadertechie/md2html
+```
+
+## Usage
+
+### Basic Usage
+
+```typescript
+import { MarkdownPipeline } from '@leadertechie/md2html';
+
+const pipeline = new MarkdownPipeline();
+
+const markdown = `# Hello World
+
+This is a paragraph with **bold** and *italic* text.
+
+- Item 1
+- Item 2
+
+![Alt text](image.jpg)
+`;
+
+// Parse markdown to AST
+const ast = pipeline.parse(markdown);
+
+// Render AST to HTML string
+const html = pipeline.render(ast);
+```
+
+### Configuration
+
+```typescript
+import { MarkdownPipeline } from '@leadertechie/md2html';
+
+const pipeline = new MarkdownPipeline({
+  imagePathPrefix: 'images/',
+  imageBaseUrl: 'https://cdn.example.com',
+  parseOptions: {
+    gfm: true,
+    breaks: false,
+    pedantic: false
+  }
+});
+```
+
+### API
+
+| Method | Description |
+|--------|-------------|
+| `parse(markdown)` | Parse markdown string to AST |
+| `render(nodes)` | Render AST to HTML string |
+| `renderMarkdown(markdown)` | Parse and render in one call |
+| `renderPage(title, nodes)` | Render AST to full HTML page |
+
+## License
+
+MIT

package/__tests__/index.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.test.d.ts.map

package/__tests__/index.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["index.test.ts"],"names":[],"mappings":""}

package/__tests__/index.test.js

@@ -0,0 +1,130 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { MarkdownParser } from '../src/parser';
+import { HTMLRenderer } from '../src/renderer';
+import { MarkdownPipeline } from '../src/pipeline';
+describe('MarkdownParser', () => {
+    let parser;
+    beforeEach(() => {
+        parser = new MarkdownParser();
+    });
+    describe('parse', () => {
+        it('should parse heading', () => {
+            const result = parser.parse('# Hello World');
+            expect(result.content).toHaveLength(1);
+            expect(result.content[0].type).toBe('heading');
+            expect(result.content[0].content).toBe('Hello World');
+        });
+        it('should parse multiple headings', () => {
+            const result = parser.parse('# Heading 1\n## Heading 2\n### Heading 3');
+            expect(result.content).toHaveLength(3);
+            expect(result.content[0].type).toBe('heading');
+        });
+        it('should parse paragraph', () => {
+            const result = parser.parse('This is a paragraph');
+            expect(result.content).toHaveLength(1);
+            expect(result.content[0].type).toBe('paragraph');
+        });
+        it('should parse list items', () => {
+            const result = parser.parse('- Item 1\n- Item 2\n- Item 3');
+            expect(result.content).toHaveLength(1);
+            expect(result.content[0].type).toBe('list');
+            expect(result.content[0].children).toHaveLength(3);
+        });
+        it('should parse image in paragraph', () => {
+            const result = parser.parse('![Alt text](image.jpg)');
+            expect(result.content).toHaveLength(1);
+            expect(result.content[0].type).toBe('paragraph');
+            expect(result.content[0].children?.[0].type).toBe('image');
+        });
+        it('should parse code block', () => {
+            const result = parser.parse('```javascript\nconst x = 1;\n```');
+            expect(result.content).toHaveLength(1);
+            expect(result.content[0].type).toBe('code');
+        });
+        it('should handle image path prefix', () => {
+            const parserWithPrefix = new MarkdownParser({ imagePathPrefix: 'images/' });
+            const result = parserWithPrefix.parse('![Alt](photo.jpg)');
+            expect(result.content[0].children?.[0].src).toBe('images/photo.jpg');
+        });
+        it('should handle imageBaseUrl', () => {
+            const parserWithBaseUrl = new MarkdownParser({ imageBaseUrl: 'https://cdn.example.com/' });
+            const result = parserWithBaseUrl.parse('![Alt](photo.jpg)');
+            expect(result.content[0].children?.[0].src).toBe('https://cdn.example.com/photo.jpg');
+        });
+    });
+});
+describe('HTMLRenderer', () => {
+    let renderer;
+    beforeEach(() => {
+        renderer = new HTMLRenderer();
+    });
+    describe('renderNode', () => {
+        it('should render heading', () => {
+            const node = { type: 'heading', content: 'Hello', attributes: { level: '1' } };
+            const html = renderer.renderNode(node);
+            expect(html).toBe('<h1>Hello</h1>');
+        });
+        it('should render paragraph', () => {
+            const node = { type: 'paragraph', content: 'Hello world' };
+            const html = renderer.renderNode(node);
+            expect(html).toBe('<p>Hello world</p>');
+        });
+        it('should render image', () => {
+            const node = { type: 'image', src: 'image.jpg', alt: 'Alt text' };
+            const html = renderer.renderNode(node);
+            expect(html).toBe('<img src="image.jpg" alt="Alt text" class="">');
+        });
+    });
+    describe('renderNodes', () => {
+        it('should render multiple nodes', () => {
+            const nodes = [
+                { type: 'heading', content: 'Title', attributes: { level: '1' } },
+                { type: 'paragraph', content: 'Content' }
+            ];
+            const html = renderer.renderNodes(nodes);
+            expect(html).toContain('<h1>Title</h1>');
+            expect(html).toContain('<p>Content</p>');
+        });
+        it('should handle empty array', () => {
+            const html = renderer.renderNodes([]);
+            expect(html).toBe('');
+        });
+    });
+});
+describe('MarkdownPipeline', () => {
+    let pipeline;
+    beforeEach(() => {
+        pipeline = new MarkdownPipeline();
+    });
+    describe('parse', () => {
+        it('should parse markdown to nodes', () => {
+            const nodes = pipeline.parse('# Hello');
+            expect(nodes).toHaveLength(1);
+            expect(nodes[0].type).toBe('heading');
+        });
+    });
+    describe('renderMarkdown', () => {
+        it('should parse and render in one call', () => {
+            const html = pipeline.renderMarkdown('# Hello World\n\nThis is a paragraph.');
+            expect(html).toContain('<h1>Hello World</h1>');
+            expect(html).toContain('<p>This is a paragraph.</p>');
+        });
+    });
+    describe('renderPage', () => {
+        it('should render full HTML page', () => {
+            const nodes = [
+                { type: 'heading', content: 'Title', attributes: { level: '1' } }
+            ];
+            const page = pipeline.renderPage('My Page', nodes);
+            expect(page).toContain('<!DOCTYPE html>');
+            expect(page).toContain('<title>My Page</title>');
+        });
+    });
+    describe('configuration', () => {
+        it('should use imagePathPrefix config', () => {
+            const pipelineWithConfig = new MarkdownPipeline({ imagePathPrefix: 'images/' });
+            const nodes = pipelineWithConfig.parse('![img](test.jpg)');
+            expect(nodes[0].children?.[0].src).toBe('images/test.jpg');
+        });
+    });
+});

package/__tests__/index.test.ts

@@ -0,0 +1,155 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { MarkdownParser } from '../src/parser';
+import { HTMLRenderer } from '../src/renderer';
+import { LitRenderer } from '../src/lit-renderer';
+import { MarkdownPipeline } from '../src/pipeline';
+import type { ContentNode } from '../src/types';
+
+describe('MarkdownParser', () => {
+  let parser: MarkdownParser;
+
+  beforeEach(() => {
+    parser = new MarkdownParser();
+  });
+
+  describe('parse', () => {
+    it('should parse heading', () => {
+      const result = parser.parse('# Hello World');
+      expect(result.content).toHaveLength(1);
+      expect(result.content[0].type).toBe('heading');
+      expect(result.content[0].content).toBe('Hello World');
+    });
+
+    it('should parse multiple headings', () => {
+      const result = parser.parse('# Heading 1\n## Heading 2\n### Heading 3');
+      expect(result.content).toHaveLength(3);
+      expect(result.content[0].type).toBe('heading');
+    });
+
+    it('should parse paragraph', () => {
+      const result = parser.parse('This is a paragraph');
+      expect(result.content).toHaveLength(1);
+      expect(result.content[0].type).toBe('paragraph');
+    });
+
+    it('should parse list items', () => {
+      const result = parser.parse('- Item 1\n- Item 2\n- Item 3');
+      expect(result.content).toHaveLength(1);
+      expect(result.content[0].type).toBe('list');
+      expect(result.content[0].children).toHaveLength(3);
+    });
+
+    it('should parse image in paragraph', () => {
+      const result = parser.parse('![Alt text](image.jpg)');
+      expect(result.content).toHaveLength(1);
+      expect(result.content[0].type).toBe('paragraph');
+      expect(result.content[0].children?.[0].type).toBe('image');
+    });
+
+    it('should parse code block', () => {
+      const result = parser.parse('```javascript\nconst x = 1;\n```');
+      expect(result.content).toHaveLength(1);
+      expect(result.content[0].type).toBe('code');
+    });
+
+    it('should handle image path prefix', () => {
+      const parserWithPrefix = new MarkdownParser({ imagePathPrefix: 'images/' });
+      const result = parserWithPrefix.parse('![Alt](photo.jpg)');
+      expect(result.content[0].children?.[0].src).toBe('images/photo.jpg');
+    });
+
+    it('should handle imageBaseUrl', () => {
+      const parserWithBaseUrl = new MarkdownParser({ imageBaseUrl: 'https://cdn.example.com/' });
+      const result = parserWithBaseUrl.parse('![Alt](photo.jpg)');
+      expect(result.content[0].children?.[0].src).toBe('https://cdn.example.com/photo.jpg');
+    });
+  });
+});
+
+describe('HTMLRenderer', () => {
+  let renderer: HTMLRenderer;
+
+  beforeEach(() => {
+    renderer = new HTMLRenderer();
+  });
+
+  describe('renderNode', () => {
+    it('should render heading', () => {
+      const node: ContentNode = { type: 'heading', content: 'Hello', attributes: { level: '1' } };
+      const html = renderer.renderNode(node);
+      expect(html).toBe('<h1>Hello</h1>');
+    });
+
+    it('should render paragraph', () => {
+      const node: ContentNode = { type: 'paragraph', content: 'Hello world' };
+      const html = renderer.renderNode(node);
+      expect(html).toBe('<p>Hello world</p>');
+    });
+
+    it('should render image', () => {
+      const node: ContentNode = { type: 'image', src: 'image.jpg', alt: 'Alt text' };
+      const html = renderer.renderNode(node);
+      expect(html).toBe('<img src="image.jpg" alt="Alt text" class="">');
+    });
+  });
+
+  describe('renderNodes', () => {
+    it('should render multiple nodes', () => {
+      const nodes: ContentNode[] = [
+        { type: 'heading', content: 'Title', attributes: { level: '1' } },
+        { type: 'paragraph', content: 'Content' }
+      ];
+      const html = renderer.renderNodes(nodes);
+      expect(html).toContain('<h1>Title</h1>');
+      expect(html).toContain('<p>Content</p>');
+    });
+
+    it('should handle empty array', () => {
+      const html = renderer.renderNodes([]);
+      expect(html).toBe('');
+    });
+  });
+});
+
+describe('MarkdownPipeline', () => {
+  let pipeline: MarkdownPipeline;
+
+  beforeEach(() => {
+    pipeline = new MarkdownPipeline();
+  });
+
+  describe('parse', () => {
+    it('should parse markdown to nodes', () => {
+      const nodes = pipeline.parse('# Hello');
+      expect(nodes).toHaveLength(1);
+      expect(nodes[0].type).toBe('heading');
+    });
+  });
+
+  describe('renderMarkdown', () => {
+    it('should parse and render in one call', () => {
+      const html = pipeline.renderMarkdown('# Hello World\n\nThis is a paragraph.');
+      expect(html).toContain('<h1>Hello World</h1>');
+      expect(html).toContain('<p>This is a paragraph.</p>');
+    });
+  });
+
+  describe('renderPage', () => {
+    it('should render full HTML page', () => {
+      const nodes: ContentNode[] = [
+        { type: 'heading', content: 'Title', attributes: { level: '1' } }
+      ];
+      const page = pipeline.renderPage('My Page', nodes);
+      expect(page).toContain('<!DOCTYPE html>');
+      expect(page).toContain('<title>My Page</title>');
+    });
+  });
+
+  describe('configuration', () => {
+    it('should use imagePathPrefix config', () => {
+      const pipelineWithConfig = new MarkdownPipeline({ imagePathPrefix: 'images/' });
+      const nodes = pipelineWithConfig.parse('![img](test.jpg)');
+      expect(nodes[0].children?.[0].src).toBe('images/test.jpg');
+    });
+  });
+});

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@leadertechie/md2html",
+  "version": "0.1.0-alpha.0",
+  "description": "Markdown to HTML pipeline - parse markdown to AST, render to HTML or Lit templates",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "marked": "^15.0.0"
+  },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "typescript": "^5.0.0",
+    "vitest": "^2.0.0"
+  },
+  "keywords": [
+    "markdown",
+    "html",
+    "ast",
+    "parser",
+    "renderer",
+    "ssr"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/leadertechie/md2html.git"
+  }
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export * from './types';
+export * from './parser';
+export * from './renderer';
+export * from './lit-renderer';
+export * from './pipeline';
+
+export { LitRenderer as HTMLRenderer } from './lit-renderer';

package/src/lit-renderer.ts

@@ -0,0 +1,91 @@
+import { TemplateResult, html } from 'lit';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { ContentNode } from './types';
+
+export class LitRenderer {
+  private renderTextNode(node: ContentNode): TemplateResult {
+    if (node.type === 'image') {
+      return html`<img src="${node.src}" alt="${node.alt || ''}" class="inline-image" style="max-width:100%;height:auto;">`;
+    }
+    return html`${unsafeHTML(node.content || '')}`;
+  }
+
+  renderNode(node: ContentNode): TemplateResult {
+    switch (node.type) {
+      case 'heading': {
+        const level = node.attributes?.level || '2';
+        if (level === '1') return html`<h1>${unsafeHTML(node.content)}</h1>`;
+        if (level === '2') return html`<h2>${unsafeHTML(node.content)}</h2>`;
+        if (level === '3') return html`<h3>${unsafeHTML(node.content)}</h3>`;
+        return html`<h2>${unsafeHTML(node.content)}</h2>`;
+      }
+        
+      case 'paragraph':
+        if (node.children) {
+          return html`<p>${node.children.map(child => this.renderTextNode(child))}</p>`;
+        }
+        return html`<p>${unsafeHTML(node.content)}</p>`;
+        
+      case 'list':
+        return html`<ul>${node.children?.map(child => this.renderNode(child))}</ul>`;
+        
+      case 'list-item':
+        return html`<li>${unsafeHTML(node.content)}</li>`;
+        
+      case 'image':
+        return html`<img src="${node.src || node.attributes?.src}" alt="${node.alt || node.attributes?.alt || ''}" class="${node.className || ''}" style="max-width:100%;height:auto;">`;
+        
+      case 'container':
+        return html`<div class="${node.className || ''}" style="${node.attributes?.style || ''}">
+          ${node.children?.map(child => this.renderNode(child))}
+        </div>`;
+      
+      case 'code':
+        return html`<pre><code class="language-${node.attributes?.lang || ''}">${node.content || ''}</code></pre>`;
+      
+      case 'text':
+        return html`${node.content}`;
+      
+      default:
+        return html``;
+    }
+  }
+
+  renderNodes(nodes: ContentNode[]): TemplateResult {
+    if (!nodes || nodes.length === 0) {
+      return html``;
+    }
+    return html`${nodes.map(node => this.renderNode(node))}`;
+  }
+
+  renderToHTMLString(nodes: ContentNode[]): string {
+    if (!nodes || nodes.length === 0) {
+      return '';
+    }
+    return nodes.map(node => this.nodeToHTMLString(node)).join('\n');
+  }
+
+  private nodeToHTMLString(node: ContentNode): string {
+    switch (node.type) {
+      case 'heading':
+        const level = node.attributes?.level || '2';
+        return `<h${level}>${node.content}</h${level}>`;
+      case 'paragraph':
+        return `<p>${node.content}</p>`;
+      case 'list':
+        const items = node.children?.map(child => this.nodeToHTMLString(child)).join('') || '';
+        return `<ul>${items}</ul>`;
+      case 'list-item':
+        return `<li>${node.content}</li>`;
+      case 'image':
+        return `<img src="${node.attributes?.src}" alt="${node.attributes?.alt}" class="${node.className || ''}">`;
+      case 'container':
+        const childrenHTML = node.children?.map(child => this.nodeToHTMLString(child)).join('') || '';
+        return `<div class="${node.className || ''}">${childrenHTML}</div>`;
+      case 'text':
+        return node.content || '';
+      default:
+        return '';
+    }
+  }
+}

package/src/parser.ts

@@ -0,0 +1,142 @@
+import { marked } from 'marked';
+import { ContentNode, MarkdownContent, ParseOptions } from './types';
+
+export class MarkdownParser {
+  private imagePathPrefix: string;
+  private imageBaseUrl: string;
+
+  constructor(options?: { imagePathPrefix?: string; imageBaseUrl?: string }) {
+    this.imagePathPrefix = options?.imagePathPrefix || '';
+    this.imageBaseUrl = options?.imageBaseUrl || '';
+  }
+
+  private processImagePath(src: string): string {
+    if (src.startsWith('http') || src.startsWith('/')) {
+      return src;
+    }
+    let path = this.imagePathPrefix ? `${this.imagePathPrefix}${src}` : src;
+    if (this.imageBaseUrl && !path.startsWith('http')) {
+      path = `${this.imageBaseUrl}${path}`;
+    }
+    return path;
+  }
+
+  private processInlineFormatting(text: string): string {
+    return text
+      .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+      .replace(/\*(.+?)\*/g, '<em>$1</em>');
+  }
+
+  private parseTokens(tokens: unknown[]): ContentNode[] {
+    const nodes: ContentNode[] = [];
+    
+    for (const token of tokens) {
+      const node = this.parseToken(token as Record<string, unknown>);
+      if (node) {
+        nodes.push(node);
+      }
+    }
+    
+    return nodes;
+  }
+
+  private parseToken(token: Record<string, unknown>): ContentNode | null {
+    switch (token.type) {
+      case 'heading':
+        return {
+          type: 'heading',
+          content: token.text as string,
+          attributes: { level: String(token.depth) }
+        };
+        
+      case 'paragraph':
+        const tokens = (token.tokens as Array<Record<string, unknown>>) || [];
+        const hasInlineImage = tokens.some(t => t.type === 'image');
+        
+        if (hasInlineImage) {
+          const children = tokens.map(t => {
+            if (t.type === 'image') {
+              return {
+                type: 'image' as const,
+                src: this.processImagePath(t.href as string),
+                alt: t.text as string || ''
+              };
+            }
+            return {
+              type: 'text' as const,
+              content: this.processInlineFormatting(t.text as string || '')
+            };
+          });
+          return {
+            type: 'paragraph',
+            children
+          };
+        }
+        
+        return {
+          type: 'paragraph',
+          content: this.processInlineFormatting(token.text as string)
+        };
+        
+      case 'list':
+        return {
+          type: 'list',
+          ordered: token.ordered as boolean,
+          children: (token.items as Array<Record<string, unknown>>).map((item) => ({
+            type: 'list-item',
+            content: this.processInlineFormatting(item.text as string)
+          }))
+        };
+        
+      case 'image':
+        return {
+          type: 'image',
+          src: this.processImagePath(token.href as string),
+          alt: token.title as string || ''
+        };
+
+      case 'code':
+        return {
+          type: 'code',
+          content: token.text as string,
+          attributes: { lang: token.lang as string || '' }
+        };
+      
+      case 'hr':
+        return { type: 'container', attributes: { tag: 'hr' } };
+      
+      case 'blockquote':
+        return {
+          type: 'container',
+          attributes: { tag: 'blockquote' },
+          children: this.parseTokens((token as Record<string, unknown>).tokens as unknown[] || [])
+        };
+      
+      case 'html':
+        return { type: 'container', content: token.raw as string };
+        
+      default:
+        return null;
+    }
+  }
+
+  parse(markdown: string, options?: ParseOptions): MarkdownContent {
+    const parseOptions = {
+      gfm: options?.gfm ?? true,
+      breaks: options?.breaks ?? false,
+      pedantic: options?.pedantic ?? false
+    };
+    
+    const tokens = marked.lexer(markdown, parseOptions as Parameters<typeof marked.lexer>[1]);
+    const content = this.parseTokens(tokens);
+    
+    return {
+      title: '',
+      content
+    };
+  }
+
+  parseToNodes(markdown: string, options?: ParseOptions): ContentNode[] {
+    return this.parse(markdown, options).content;
+  }
+}

package/src/pipeline.ts

@@ -0,0 +1,66 @@
+import { MarkdownParser } from './parser';
+import { HTMLRenderer } from './renderer';
+import { ContentNode, MarkdownContent, PipelineConfig } from './types';
+
+export class MarkdownPipeline {
+  private parser: MarkdownParser;
+  private renderer: HTMLRenderer;
+  private config: Required<PipelineConfig>;
+
+  constructor(config: PipelineConfig = {}) {
+    this.config = {
+      imagePathPrefix: config.imagePathPrefix || '',
+      imageBaseUrl: config.imageBaseUrl || '',
+      parseOptions: {
+        gfm: config.parseOptions?.gfm ?? true,
+        breaks: config.parseOptions?.breaks ?? false,
+        pedantic: config.parseOptions?.pedantic ?? false
+      }
+    };
+
+    this.parser = new MarkdownParser({
+      imagePathPrefix: this.config.imagePathPrefix,
+      imageBaseUrl: this.config.imageBaseUrl
+    });
+    this.renderer = new HTMLRenderer();
+  }
+
+  parse(markdown: string): ContentNode[] {
+    return this.parser.parseToNodes(markdown, this.config.parseOptions);
+  }
+
+  parseWithMetadata(markdown: string): MarkdownContent {
+    return this.parser.parse(markdown, this.config.parseOptions);
+  }
+
+  render(nodes: ContentNode[]): string {
+    return this.renderer.renderNodes(nodes);
+  }
+
+  renderMarkdown(markdown: string): string {
+    const nodes = this.parse(markdown);
+    return this.render(nodes);
+  }
+
+  renderPage(title: string, nodes: ContentNode[], options?: {
+    lang?: string;
+    charset?: string;
+  }): string {
+    const html = this.render(nodes);
+    return `<!DOCTYPE html>
+<html lang="${options?.lang || 'en'}">
+<head>
+  <meta charset="${options?.charset || 'UTF-8'}">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>
+</head>
+<body>
+  ${html}
+</body>
+</html>`;
+  }
+
+  getConfig(): Readonly<Required<PipelineConfig>> {
+    return { ...this.config };
+  }
+}

package/src/renderer.ts

@@ -0,0 +1,67 @@
+import { ContentNode } from './types';
+
+export class HTMLRenderer {
+  renderNode(node: ContentNode): string {
+    switch (node.type) {
+      case 'heading':
+        const level = node.attributes?.level || '2';
+        return `<h${level}>${node.content || ''}</h${level}>`;
+        
+      case 'paragraph':
+        if (node.children) {
+          return `<p>${node.children.map(child => this.renderNode(child)).join('')}</p>`;
+        }
+        return `<p>${node.content || ''}</p>`;
+        
+      case 'list':
+        const tag = node.ordered ? 'ol' : 'ul';
+        const items = node.children?.map(child => this.renderNode(child)).join('') || '';
+        return `<${tag}>${items}</${tag}>`;
+        
+      case 'list-item':
+        return `<li>${node.content || ''}</li>`;
+        
+      case 'image':
+        const src = node.src || node.attributes?.src || '';
+        const alt = node.alt || node.attributes?.alt || '';
+        return `<img src="${src}" alt="${alt}" class="${node.className || ''}">`;
+        
+      case 'code':
+        return `<pre><code class="language-${node.attributes?.lang || ''}">${node.content || ''}</code></pre>`;
+      
+      case 'container':
+        if (node.attributes?.tag === 'hr') return '<hr>';
+        if (node.attributes?.tag === 'blockquote') {
+          const children = node.children?.map(child => this.renderNode(child)).join('') || '';
+          return `<blockquote>${children}</blockquote>`;
+        }
+        const containerChildren = node.children?.map(child => this.renderNode(child)).join('') || '';
+        return `<div class="${node.className || ''}">${containerChildren}</div>`;
+      
+      case 'strong':
+        return `<strong>${node.content || ''}</strong>`;
+      
+      case 'emphasis':
+        return `<em>${node.content || ''}</em>`;
+      
+      case 'text':
+      default:
+        return node.content || '';
+    }
+  }
+
+  renderNodes(nodes: ContentNode[]): string {
+    if (!nodes || nodes.length === 0) {
+      return '';
+    }
+    return nodes.map(node => this.renderNode(node)).join('\n');
+  }
+
+  renderToHTMLString(nodes: ContentNode[]): string {
+    return this.renderNodes(nodes);
+  }
+
+  render(markdown: string): string {
+    return markdown;
+  }
+}

package/src/types.ts

@@ -0,0 +1,40 @@
+export type ContentNodeType = 
+  | 'text' 
+  | 'heading' 
+  | 'paragraph' 
+  | 'list' 
+  | 'list-item' 
+  | 'image' 
+  | 'code' 
+  | 'container'
+  | 'strong'
+  | 'emphasis';
+
+export interface ContentNode {
+  type: ContentNodeType;
+  content?: string;
+  children?: ContentNode[];
+  attributes?: Record<string, unknown>;
+  className?: string;
+  src?: string;
+  alt?: string;
+  ordered?: boolean;
+}
+
+export interface MarkdownContent {
+  title: string;
+  metadata?: Record<string, unknown>;
+  content: ContentNode[];
+}
+
+export interface ParseOptions {
+  gfm?: boolean;
+  breaks?: boolean;
+  pedantic?: boolean;
+}
+
+export interface PipelineConfig {
+  imagePathPrefix?: string;
+  imageBaseUrl?: string;
+  parseOptions?: ParseOptions;
+}

package/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "lib": ["ES2020"],
+    "moduleResolution": "bundler",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "./dist",
+    "rootDir": "./src"
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules", "dist", "__tests__", "**/*.test.ts"]
+}