@alliance-droid/svelte-docs-system 0.0.2 → 0.1.0

package/src/lib/utils/markdown.test.ts

@@ -1,357 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest';
-import {
-  renderMarkdown,
-  extractMetadata,
-  getExcerpt,
-  type MarkdownResult,
-  type MarkdownMetadata
-} from './markdown';
-
-describe('Markdown Utilities', () => {
-  describe('renderMarkdown', () => {
-    it('should render basic markdown to HTML', async () => {
-      const content = '# Hello World';
-      const result = await renderMarkdown(content);
-
-      expect(result.html).toBeTruthy();
-      expect(result.html).toContain('Hello World');
-      expect(result.html).toContain('<h1>');
-    });
-
-    it('should parse frontmatter metadata', async () => {
-      const content = `---
-title: Test Page
-description: A test page
-author: John Doe
----
-
-# Content`;
-
-      const result = await renderMarkdown(content);
-
-      expect(result.metadata.title).toBe('Test Page');
-      expect(result.metadata.description).toBe('A test page');
-      expect(result.metadata.author).toBe('John Doe');
-    });
-
-    it('should handle content without frontmatter', async () => {
-      const content = '## Section\n\nSome content here';
-      const result = await renderMarkdown(content);
-
-      expect(result.html).toBeTruthy();
-      expect(result.metadata).toEqual({});
-    });
-
-    it('should convert markdown formatting to HTML', async () => {
-      const content = `
-# Heading 1
-## Heading 2
-**Bold text**
-*Italic text*
-\`code\`
-`;
-
-      const result = await renderMarkdown(content);
-
-      expect(result.html).toContain('<h1>');
-      expect(result.html).toContain('<h2>');
-      expect(result.html).toContain('<strong>');
-      expect(result.html).toContain('<em>');
-      expect(result.html).toContain('<code>');
-    });
-
-    it('should handle code blocks', async () => {
-      const content = `\`\`\`javascript
-const x = 42;
-console.log(x);
-\`\`\``;
-
-      const result = await renderMarkdown(content);
-
-      expect(result.html).toContain('<pre>');
-      expect(result.html).toContain('<code');
-      expect(result.html).toContain('const x = 42');
-    });
-
-    it('should handle lists', async () => {
-      const content = `
-- Item 1
-- Item 2
-- Item 3
-
-1. First
-2. Second
-3. Third
-`;
-
-      const result = await renderMarkdown(content);
-
-      expect(result.html).toContain('<li>');
-      expect(result.html).toContain('Item 1');
-    });
-
-    it('should handle links', async () => {
-      const content = '[Visit Example](https://example.com)';
-      const result = await renderMarkdown(content);
-
-      expect(result.html).toContain('<a');
-      expect(result.html).toContain('https://example.com');
-      expect(result.html).toContain('Visit Example');
-    });
-
-    it('should handle images', async () => {
-      const content = '![Alt text](./image.png)';
-      const result = await renderMarkdown(content);
-
-      expect(result.html).toContain('<img');
-      expect(result.html).toContain('./image.png');
-      expect(result.html).toContain('Alt text');
-    });
-
-    it('should handle blockquotes', async () => {
-      const content = '> This is a quote';
-      const result = await renderMarkdown(content);
-
-      expect(result.html).toContain('<blockquote');
-      expect(result.html).toContain('This is a quote');
-    });
-
-    it('should handle tables', async () => {
-      const content = `
-| Header 1 | Header 2 |
-|----------|----------|
-| Cell 1   | Cell 2   |
-| Cell 3   | Cell 4   |
-`;
-
-      const result = await renderMarkdown(content);
-
-      expect(result.html).toContain('<table');
-      expect(result.html).toContain('Header 1');
-    });
-
-    it('should return result type with html and metadata', async () => {
-      const content = `---
-title: Test
----
-Content`;
-
-      const result = await renderMarkdown(content);
-
-      expect(result).toHaveProperty('html');
-      expect(result).toHaveProperty('metadata');
-      expect(typeof result.html).toBe('string');
-      expect(typeof result.metadata).toBe('object');
-    });
-
-    it('should handle empty content', async () => {
-      const result = await renderMarkdown('');
-      expect(result.html).toBeDefined();
-      expect(result.metadata).toBeDefined();
-    });
-
-    it('should handle very long content', async () => {
-      const longContent = Array(100).fill('# Heading\n\nContent').join('\n');
-      const result = await renderMarkdown(longContent);
-
-      expect(result.html).toBeTruthy();
-      expect(result.html.length).toBeGreaterThan(0);
-    });
-
-    it('should preserve custom metadata fields', async () => {
-      const content = `---
-title: Test
-custom_field: custom_value
-tags: [tag1, tag2]
----
-Content`;
-
-      const result = await renderMarkdown(content);
-
-      expect(result.metadata.custom_field).toBe('custom_value');
-      expect(Array.isArray(result.metadata.tags)).toBe(true);
-    });
-  });
-
-  describe('extractMetadata', () => {
-    it('should extract metadata from content', () => {
-      const content = `---
-title: Page Title
-description: Page description
-author: John Doe
-date: 2024-01-01
----
-Content`;
-
-      const metadata = extractMetadata(content);
-
-      expect(metadata.title).toBe('Page Title');
-      expect(metadata.description).toBe('Page description');
-      expect(metadata.author).toBe('John Doe');
-      // YAML parses dates as Date objects, convert to ISO string
-      expect(metadata.date instanceof Date || typeof metadata.date === 'string').toBe(true);
-    });
-
-    it('should return empty object if no frontmatter', () => {
-      const content = '# Just content\n\nNo metadata here';
-      const metadata = extractMetadata(content);
-
-      expect(Object.keys(metadata).length).toBe(0);
-    });
-
-    it('should handle empty frontmatter', () => {
-      const content = `---
----
-Content`;
-
-      const metadata = extractMetadata(content);
-      expect(metadata).toBeDefined();
-    });
-
-    it('should support various data types in metadata', () => {
-      const content = `---
-string_field: value
-number_field: 42
-boolean_field: true
-array_field: [1, 2, 3]
-object_field:
-  nested: value
----
-Content`;
-
-      const metadata = extractMetadata(content);
-
-      expect(metadata.string_field).toBe('value');
-      expect(metadata.number_field).toBe(42);
-      expect(metadata.boolean_field).toBe(true);
-      expect(Array.isArray(metadata.array_field)).toBe(true);
-      expect(metadata.object_field.nested).toBe('value');
-    });
-  });
-
-  describe('getExcerpt', () => {
-    it('should extract excerpt from markdown content', () => {
-      const content = `---
-title: Test
----
-
-This is the first paragraph with some content.
-
-This is the second paragraph.`;
-
-      const excerpt = getExcerpt(content);
-
-      expect(excerpt).toContain('This is the first paragraph');
-    });
-
-    it('should remove markdown formatting from excerpt', () => {
-      const content = `**Bold** and *italic* with [links](https://example.com)`;
-      const excerpt = getExcerpt(content);
-
-      expect(excerpt).not.toContain('**');
-      expect(excerpt).not.toContain('*');
-      expect(excerpt).not.toContain('[');
-      expect(excerpt).toContain('Bold');
-      expect(excerpt).toContain('links');
-    });
-
-    it('should remove header formatting from excerpt', () => {
-      const content = `This is the actual content without headers.`;
-
-      const excerpt = getExcerpt(content);
-
-      expect(excerpt).toContain('This is the actual content');
-    });
-
-    it('should remove inline code from excerpt', () => {
-      const content = 'This is `code` in the text';
-      const excerpt = getExcerpt(content);
-
-      expect(excerpt).not.toContain('`');
-      expect(excerpt).toContain('This is code in the text');
-    });
-
-    it('should respect word limit', () => {
-      const longContent = Array(50).fill('word').join(' ');
-      const excerpt = getExcerpt(longContent, 10);
-
-      const wordCount = excerpt.split(/\s+/).length;
-      expect(wordCount).toBeLessThanOrEqual(11); // 10 words + ellipsis might add spaces
-    });
-
-    it('should add ellipsis if content is truncated', () => {
-      const longContent = Array(200).fill('word').join(' ');
-      const excerpt = getExcerpt(longContent, 10);
-
-      expect(excerpt).toContain('...');
-    });
-
-    it('should not add ellipsis if content fits', () => {
-      const shortContent = 'Short content';
-      const excerpt = getExcerpt(shortContent, 100);
-
-      expect(excerpt).not.toContain('...');
-    });
-
-    it('should handle content with frontmatter', () => {
-      const content = `---
-title: Test
----
-
-This is the excerpt content.`;
-
-      const excerpt = getExcerpt(content);
-
-      expect(excerpt).toContain('This is the excerpt content');
-      expect(excerpt).not.toContain('title');
-    });
-
-    it('should handle empty content', () => {
-      const excerpt = getExcerpt('');
-      expect(excerpt).toBe('');
-    });
-
-    it('should handle content with only whitespace', () => {
-      const excerpt = getExcerpt('   \n\n   ');
-      expect(excerpt.trim()).toBe('');
-    });
-
-    it('should handle default word limit', () => {
-      const content = Array(200).fill('word').join(' ');
-      const excerpt = getExcerpt(content); // Uses default 150
-
-      expect(excerpt).toBeTruthy();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('should handle malformed markdown gracefully', async () => {
-      const content = '[unclosed link]](extra';
-      const result = await renderMarkdown(content);
-
-      expect(result.html).toBeDefined();
-      expect(result.metadata).toBeDefined();
-    });
-
-    it('should handle special characters in content', async () => {
-      const content = '< > & " \' `special characters`';
-      const result = await renderMarkdown(content);
-
-      expect(result.html).toBeTruthy();
-    });
-
-    it('should handle unicode content', async () => {
-      const content = '# 你好世界\n\n日本語テスト';
-      const result = await renderMarkdown(content);
-
-      expect(result.html).toContain('你好世界');
-    });
-
-    it('should handle nested formatting', async () => {
-      const content = '***Bold and italic***';
-      const result = await renderMarkdown(content);
-
-      expect(result.html).toBeTruthy();
-    });
-  });
-});

package/src/lib/utils/markdown.ts

@@ -1,77 +0,0 @@
-import { marked } from 'marked';
-import matter from 'gray-matter';
-
-export interface MarkdownMetadata {
-	title?: string;
-	description?: string;
-	author?: string;
-	date?: string;
-	[key: string]: any;
-}
-
-export interface MarkdownResult {
-	html: string;
-	metadata: MarkdownMetadata;
-	slug?: string;
-}
-
-/**
- * Parse markdown content with frontmatter
- * Returns HTML content and metadata
- */
-export async function renderMarkdown(content: string): Promise<MarkdownResult> {
-	try {
-		// Parse frontmatter and content
-		const { data, content: markdownContent } = matter(content);
-
-		// Convert markdown to HTML (marked is async in v17+)
-		const html = await marked(markdownContent);
-
-		return {
-			html,
-			metadata: data as MarkdownMetadata
-		};
-	} catch (error) {
-		console.error('Error rendering markdown:', error);
-		return {
-			html: '<p>Error rendering markdown</p>',
-			metadata: {}
-		};
-	}
-}
-
-/**
- * Extract metadata from markdown content
- */
-export function extractMetadata(content: string): MarkdownMetadata {
-	try {
-		const { data } = matter(content);
-		return data as MarkdownMetadata;
-	} catch (error) {
-		return {};
-	}
-}
-
-/**
- * Get excerpt from markdown content (first paragraph)
- */
-export function getExcerpt(content: string, wordLimit = 150): string {
-	try {
-		const { content: markdownContent } = matter(content);
-
-		// Remove markdown syntax and get first paragraph
-		const text = markdownContent
-			.replace(/#{1,6}\s/g, '') // Remove headers
-			.replace(/[*_]{1,2}(.*?)[*_]{1,2}/g, '$1') // Remove bold/italic
-			.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1') // Remove links
-			.replace(/`([^`]+)`/g, '$1') // Remove inline code
-			.trim();
-
-		const words = text.split(/\s+/);
-		const excerpt = words.slice(0, wordLimit).join(' ');
-
-		return excerpt.length < text.length ? excerpt + '...' : excerpt;
-	} catch (error) {
-		return '';
-	}
-}

package/src/routes/+layout.server.ts

@@ -1 +0,0 @@
-export const prerender = true;

package/src/routes/+layout.svelte

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import '@fortawesome/fontawesome-free/css/all.min.css';
-	import '../app.css';
-
-	let { children } = $props();
-</script>
-
-<svelte:window
-	on:resize={() => {
-		// Handle window resize if needed
-	}}
-/>
-
-<div class="app">
-	{@render children?.()}
-</div>
-
-<style>
-	:global(body) {
-		margin: 0;
-		padding: 0;
-	}
-
-	.app {
-		display: flex;
-		flex-direction: column;
-		min-height: 100vh;
-	}
-</style>

package/src/routes/+page.svelte

@@ -1,165 +0,0 @@
-<script>
-  import { Callout, Tabs, CodeBlock, Image, APITable, Breadcrumbs } from '$lib';
-
-  const exampleCode = `function greet(name) {
-  return \`Hello, \${name}!\`;
-}
-
-console.log(greet('World'));`;
-
-  const apiTableColumns = [
-    { key: 'name', label: 'Parameter Name' },
-    { key: 'type', label: 'Type' },
-    { key: 'required', label: 'Required' },
-    { key: 'description', label: 'Description', width: '40%' }
-  ];
-
-  const apiTableRows = [
-    {
-      name: 'variant',
-      type: 'string',
-      required: false,
-      description: 'The callout type: info, warning, success, or error'
-    },
-    {
-      name: 'title',
-      type: 'string',
-      required: false,
-      description: 'Optional title for the callout'
-    },
-    {
-      name: 'children',
-      type: 'HTMLContent',
-      required: true,
-      description: 'The content to display inside the callout'
-    }
-  ];
-
-  const breadcrumbItems = [
-    { label: 'Home', href: '/' },
-    { label: 'Components', href: '/components' },
-    { label: 'Callout' }
-  ];
-
-  const tabItems = [
-    { label: 'JavaScript', content: '<code>const x = 42;</code>' },
-    { label: 'Python', content: '<code>x = 42</code>' },
-    { label: 'Rust', content: '<code>let x = 42;</code>' }
-  ];
-</script>
-
-<main class="mx-auto max-w-4xl px-6 py-12">
-  <h1 class="mb-2 text-4xl font-bold">Documentation Components</h1>
-  <p class="mb-8 text-gray-600">A collection of reusable Svelte components for building beautiful documentation.</p>
-
-  <!-- Breadcrumbs Section -->
-  <section class="mb-12">
-    <h2 class="mb-4 text-2xl font-bold">Breadcrumbs Navigation</h2>
-    <Breadcrumbs items={breadcrumbItems} />
-  </section>
-
-  <!-- Callout Section -->
-  <section class="mb-12">
-    <h2 class="mb-4 text-2xl font-bold">Callout Components</h2>
-
-    <h3 class="mb-3 text-xl font-semibold">Info Callout</h3>
-    <Callout variant="info" title="Information">
-      This is an informational message to guide users through the documentation.
-    </Callout>
-
-    <h3 class="mb-3 mt-6 text-xl font-semibold">Warning Callout</h3>
-    <Callout variant="warning" title="Warning">
-      Be careful! This action might have unexpected consequences.
-    </Callout>
-
-    <h3 class="mb-3 mt-6 text-xl font-semibold">Success Callout</h3>
-    <Callout variant="success" title="Success">
-      Great job! Your configuration has been saved successfully.
-    </Callout>
-
-    <h3 class="mb-3 mt-6 text-xl font-semibold">Error Callout</h3>
-    <Callout variant="error" title="Error">
-      Something went wrong. Please check your input and try again.
-    </Callout>
-  </section>
-
-  <!-- CodeBlock Section -->
-  <section class="mb-12">
-    <h2 class="mb-4 text-2xl font-bold">Code Block</h2>
-    <CodeBlock code={exampleCode} language="javascript" filename="example.js" />
-  </section>
-
-  <!-- Tabs Section -->
-  <section class="mb-12">
-    <h2 class="mb-4 text-2xl font-bold">Tabs Component</h2>
-    <Tabs items={tabItems} />
-  </section>
-
-  <!-- API Table Section -->
-  <section class="mb-12">
-    <h2 class="mb-4 text-2xl font-bold">API Reference Table</h2>
-    <APITable title="Callout Component Props" columns={apiTableColumns} rows={apiTableRows} />
-  </section>
-
-  <!-- Image Section -->
-  <section class="mb-12">
-    <h2 class="mb-4 text-2xl font-bold">Image Component</h2>
-    <Image
-      src="https://via.placeholder.com/600x400"
-      alt="Example placeholder image"
-      caption="This is an example image with a caption"
-      zoomable={true}
-    />
-  </section>
-</main>
-
-<style>
-  :global(body) {
-    background-color: white;
-    color: #333;
-  }
-
-  :global(.dark) :global(body) {
-    background-color: #030712;
-    color: #f3f4f6;
-  }
-
-  main {
-    max-width: 56rem;
-    margin: 0 auto;
-    padding: 3rem 1.5rem;
-  }
-
-  h1 {
-    margin-bottom: 0.5rem;
-    font-size: 2.25rem;
-    font-weight: 700;
-    color: #111827;
-  }
-
-  :global(.dark) h1 {
-    color: white;
-  }
-
-  h2 {
-    margin-bottom: 1rem;
-    font-size: 1.5rem;
-    font-weight: 700;
-    color: #111827;
-  }
-
-  :global(.dark) h2 {
-    color: white;
-  }
-
-  h3 {
-    margin-bottom: 0.75rem;
-    font-size: 1.25rem;
-    font-weight: 600;
-    color: #111827;
-  }
-
-  :global(.dark) h3 {
-    color: white;
-  }
-</style>