first commit

2026-05-18 15:53:59 +03:30
commit 2c100028a1
534 changed files with 94240 additions and 0 deletions
@@ -0,0 +1,245 @@
+# SbMarkdownViewer
+
+Renders markdown content as HTML using the Markdig library. Supports advanced markdown extensions including tables, task lists, and code blocks.
+
+## Parameters
+
+| Parameter | Type | Default | Description |
+|-----------|------|---------|-------------|
+| Content | string? | null | The markdown content to render |
+| Class | string? | null | Additional CSS classes |
+| Style | string? | null | Inline styles |
+| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes |
+
+## CSS Classes
+
+- `sb-markdown-viewer` - Base class applied to the container
+
+## Markdown Features
+
+The component uses Markdig with advanced extensions enabled, supporting:
+
+- **Standard Markdown**: Headings, paragraphs, lists, links, images, emphasis
+- **Extended Syntax**: Tables, task lists, strikethrough
+- **Code Blocks**: Fenced code blocks with language specification
+- **Auto-links**: Automatic URL linking
+- **And more**: Abbreviations, footnotes, etc.
+
+## Examples
+
+### Basic Usage
+
+```razor
+<SbMarkdownViewer Content="@markdownContent" />
+
+@code {
+    private string markdownContent = """
+        # Hello World
+        
+        This is **bold** and this is *italic*.
+        
+        - Item 1
+        - Item 2
+        - Item 3
+        """;
+}
+```
+
+### From External Source
+
+```razor
+@inject HttpClient Http
+
+<SbMarkdownViewer Content="@readmeContent" />
+
+@code {
+    private string? readmeContent;
+    
+    protected override async Task OnInitializedAsync()
+    {
+        readmeContent = await Http.GetStringAsync("README.md");
+    }
+}
+```
+
+### With Code Blocks
+
+```razor
+<SbMarkdownViewer Content="@codeExample" />
+
+@code {
+    private string codeExample = """
+        ## Code Example
+        
+        Here's how to create a button:
+        
+        ```razor
+        <SbButton OnClick="HandleClick">
+            Click Me
+        </SbButton>
+        ```
+        
+        And the handler:
+        
+        ```csharp
+        private void HandleClick()
+        {
+            Console.WriteLine("Clicked!");
+        }
+        ```
+        """;
+}
+```
+
+### With Tables
+
+```razor
+<SbMarkdownViewer Content="@tableContent" />
+
+@code {
+    private string tableContent = """
+        ## Parameters
+        
+        | Parameter | Type | Default | Description |
+        |-----------|------|---------|-------------|
+        | Name | string | null | The component name |
+        | Size | SbSize | Md | Component size |
+        | Disabled | bool | false | Disables the component |
+        """;
+}
+```
+
+### With Task Lists
+
+```razor
+<SbMarkdownViewer Content="@taskList" />
+
+@code {
+    private string taskList = """
+        ## TODO
+        
+        - [x] Create component
+        - [x] Add parameters
+        - [ ] Write documentation
+        - [ ] Add tests
+        """;
+}
+```
+
+### Documentation Page
+
+```razor
+<SbCard>
+    <Header>
+        <SbHeading Level="2">SbButton Documentation</SbHeading>
+    </Header>
+    <ChildContent>
+        <SbMarkdownViewer Content="@buttonDocs" Class="documentation-content" />
+    </ChildContent>
+</SbCard>
+
+@code {
+    private string buttonDocs = """
+        A versatile button component for triggering actions.
+        
+        ## Basic Usage
+        
+        ```razor
+        <SbButton>Click Me</SbButton>
+        ```
+        
+        ## Variants
+        
+        - **Primary**: Default filled button
+        - **Outlined**: Button with border
+        - **Ghost**: Transparent button
+        
+        ## Props
+        
+        | Prop | Type | Description |
+        |------|------|-------------|
+        | Variant | SbButtonVariant | Visual style |
+        | Size | SbSize | Button size |
+        | Disabled | bool | Disables interaction |
+        """;
+}
+```
+
+### Styled Container
+
+```razor
+<SbMarkdownViewer 
+    Content="@content" 
+    Class="custom-markdown"
+    Style="max-width: 800px; margin: 0 auto;" />
+
+<style>
+    .custom-markdown h1 {
+        border-bottom: 2px solid var(--sb-primary);
+        padding-bottom: 0.5rem;
+    }
+    
+    .custom-markdown code {
+        background-color: #f5f5f5;
+        padding: 2px 6px;
+        border-radius: 4px;
+    }
+    
+    .custom-markdown pre {
+        background-color: #1e1e1e;
+        color: #d4d4d4;
+        padding: 1rem;
+        border-radius: 8px;
+        overflow-x: auto;
+    }
+</style>
+```
+
+### Blog Post
+
+```razor
+<article>
+    <SbHeading Level="1">@post.Title</SbHeading>
+    <SbText Variant="SbTextVariant.Caption" Color="SbColor.Secondary">
+        @post.Date.ToLongDateString() · @post.ReadTime min read
+    </SbText>
+    <SbDivider />
+    <SbMarkdownViewer Content="@post.Body" />
+</article>
+```
+
+### Component Demo Page
+
+```razor
+<SbTabs>
+    <SbTab Title="Preview">
+        @* Live component demo *@
+        <SbButton Variant="SbButtonVariant.Primary">Demo Button</SbButton>
+    </SbTab>
+    <SbTab Title="Code">
+        <SbMarkdownViewer Content="@codeSnippet" />
+    </SbTab>
+    <SbTab Title="API">
+        <SbMarkdownViewer Content="@apiDocs" />
+    </SbTab>
+</SbTabs>
+
+@code {
+    private string codeSnippet = """
+        ```razor
+        <SbButton Variant="SbButtonVariant.Primary">
+            Demo Button
+        </SbButton>
+        ```
+        """;
+    
+    private string apiDocs = """
+        ## Parameters
+        
+        | Parameter | Type | Default |
+        |-----------|------|---------|
+        | Variant | SbButtonVariant | Primary |
+        | Size | SbSize | Md |
+        """;
+}
+```