Markdown updates (#909)

* Added additional demo example placeholders * #904 Translation in GRID "Does not contain" * Markdown - New component - updates
vikramlearning · Oct 21, 2024 · 9bc9009 · 9bc9009
1 parent 2abbe9d
commit 9bc9009
Show file tree

Hide file tree

Showing 29 changed files with 1,255 additions and 128 deletions.
diff --git a/...rBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Demo_01_Translations.razor b/...rBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Demo_01_Translations.razor
@@ -49,6 +49,7 @@
         filtersTranslation.Add(new(">=", "Groter dan of gelijk aan", FilterOperator.GreaterThanOrEquals));
         // string
         filtersTranslation.Add(new("*a*", "Bevat", FilterOperator.Contains));
+        filtersTranslation.Add(new("!*a*", "Bevat niet", FilterOperator.DoesNotContain));
         filtersTranslation.Add(new("a**", "Begint met", FilterOperator.StartsWith));
         filtersTranslation.Add(new("**a", "Eindigt met", FilterOperator.EndsWith));
         filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals));

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Index.razor
@@ -132,7 +132,7 @@
         </div>
         <div class="col-sm-4 mb-2">
             <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="/markdown">
-                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MarkdownFill" class="me-2" /> Markdown <Badge Color="BadgeColor.Danger">New</Badge></h4>
+                <h4 class="mb-0 fs-5 fw-semibold"><Icon Name="IconName.MarkdownFill" class="me-2" /> Markdown <Badge Color="BadgeColor.Danger">Preview</Badge></h4>
             </a>
         </div>
         <div class="col-sm-4 mb-2">
@@ -238,7 +238,7 @@
     </div>
 </div>
 
-<div class="container bd-gutter masthead-followup">
+@* <div class="container bd-gutter masthead-followup">
     <div class="col-lg-7 mb-4 mx-auto text-md-center">
         <h2 class="mb-3 fw-semibold lh-sm">AI Components</h2>
     </div>
@@ -250,7 +250,7 @@
             </a>
         </div>
     </div>
-</div>
+</div> *@
 
 <div class="container bd-gutter masthead-followup mb-5">
     <div class="col-lg-7 mb-4 mx-auto text-md-center">

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/MarkdownDocumentation.razor
@@ -4,39 +4,106 @@
 
 <MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />
 
-<h1>Blazor Markdown</h1>
+<h1>Blazor Markdown <Badge Color="BadgeColor.Secondary">Preview</Badge></h1>
 <div class="lead mb-3">Use Blazor Bootstrap Markdown component to add formatting, tables, images, and more to your project pages.</div>
 
 <CarbonAds />
 
-@* <SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
+<SectionHeading Size="HeadingSize.H2" Text="Live preview" PageUrl="@pageUrl" HashTagName="live-preview" />
 <div class="mb-3"></div>
-<Demo Type="typeof(Markdown_Demo_01_Examples)" Tabs="true" /> *@
+<Demo Type="typeof(Markdown_Demo_01_Preview)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Headers" PageUrl="@pageUrl" HashTagName="headers" />
-<div class="mb-3"></div>
+<div class="mb-3">
+    Use headers to structure your content. Start a line with <code>#</code> for a heading. Add more <code>#</code> characters for subheadings, up to six levels.
+</div>
 <Demo Type="typeof(Markdown_Demo_02_Headers)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Paragraphs and line breaks" PageUrl="@pageUrl" HashTagName="paragraphs-and-line-breaks" />
-<div class="mb-3"></div>
+<div class="mb-3">
+    Break your text into paragraphs or line breaks for easier reading.
+</div>
 <Demo Type="typeof(Markdown_Demo_03_Paragraphs_and_Line_Breaks)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Blockquotes" PageUrl="@pageUrl" HashTagName="blockquotes" />
-<div class="mb-3"></div>
+<div class="mb-3">
+    Quote text with <code>></code> before it. Use more <code>></code> characters to nest quotes. For blocks of text, use <code>></code> at the start of each line.
+</div>
 <Demo Type="typeof(Markdown_Demo_04_Blockquotes)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Horizontal rules" PageUrl="@pageUrl" HashTagName="horizontal-rules" />
-<div class="mb-3"></div>
+<div class="mb-3">
+    Add a horizontal rule with a line of <code>---</code>.
+</div>
 <Demo Type="typeof(Markdown_Demo_05_Horizontal_Rules)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Emphasis (bold, italics, strikethrough)" PageUrl="@pageUrl" HashTagName="emphasis-bold-italics-strikethrough" />
-<div class="mb-3"></div>
+<div class="mb-3">
+    Emphasize text with bold, italics, or strikethrough:
+    <ul>
+        <li>Italics: <code>*text*</code> or <code>_text_</code></li>
+        <li>Bold: <code>**text**</code></li>
+        <li>Strikethrough: <code>~~text~~</code></li>
+        <li>Combine for more emphasis.</li>
+    </ul>
+</div>
 <Demo Type="typeof(Markdown_Demo_06_Emphasis_bold_italics_strikethrough)" Tabs="true" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Code highlighting" PageUrl="@pageUrl" HashTagName="code-highlighting" />
 <div class="mb-3"></div>
 <Demo Type="typeof(Markdown_Demo_07_Code_Highlighting)" Tabs="true" />
 
+<SectionHeading Size="HeadingSize.H2" Text="Tables" PageUrl="@pageUrl" HashTagName="tables" />
+<div class="mb-3">
+    Tables help organize structured data.
+    <ul>
+        <li>Use <code>|</code> to separate cells.</li>
+        <li>Escape <code>|</code> with <code>\|</code> if used within a cell.</li>
+        <li>Use <code>&lt;br /&gt;</code> for new lines within a cell.</li>
+        <li>End each row with a carriage return (CR) or line feed (LF).</li>
+    </ul>
+</div>
+<Demo Type="typeof(Markdown_Demo_08_Tables_A_Example)" Tabs="true" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_08_Tables_B_Custom_CssClass)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Lists" PageUrl="@pageUrl" HashTagName="lists" />
+<div class="mb-3">
+    Use lists to organize related items:
+    <ul>
+        <li>Ordered lists: start with a number followed by a period.</li>
+        <li>Unordered lists: start with a <code>-</code>.</li>
+        <li>Begin each list item on a new line.</li>
+    </ul>    
+</div>
+<SectionHeading Size="HeadingSize.H3" Text="Ordered list" PageUrl="@pageUrl" HashTagName="ordered-list" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_09_Lists_A_Ordered)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H3" Text="Unordered list" PageUrl="@pageUrl" HashTagName="unordered-list" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_09_Lists_B_Unordered)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H3" Text="Nested list" PageUrl="@pageUrl" HashTagName="nested-list" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_09_Lists_C_Nested)" Tabs="true" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_09_Lists_D_Nested)" Tabs="true" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_09_Lists_E_Nested)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Links" PageUrl="@pageUrl" HashTagName="links" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_10_Links)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Images" PageUrl="@pageUrl" HashTagName="images" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_11_Images)" Tabs="true" />
+
+<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
+<div class="mb-3"></div>
+<Demo Type="typeof(Markdown_Demo_99_Examples)" Tabs="true" />
+
 @code{
     private string pageUrl = "/markdown";
     private string title = "Blazor Markdown Component";

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_01_Examples.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_01_Examples.razor
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_01_Preview.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_01_Preview.razor
@@ -0,0 +1,21 @@
+<div class="row border-bottom mb-3">
+    <div class="col"><b>Markdown</b></div>
+    <div class="col"><b>Preview</b></div>
+</div>
+<div class="row" style="max-height:486px;">
+    <div class="col">
+        <textarea class="form-control"
+                  rows="18"
+                  placeholder="Enter markdown here"
+                  @bind="markdown"
+                  @bind:event="oninput">
+        </textarea>
+    </div>
+    <div class="col">
+        <Markdown style="max-height: 437px;overflow-y:auto;">@markdown</Markdown>
+    </div>
+</div>
+
+@code {
+    private string markdown = "# Heading 1\n## Heading 2\n\n![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =50)";
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_02_Headers.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_02_Headers.razor
@@ -1,7 +1,8 @@
 <Markdown>
-    # This is a H1 header
-    ## This is a H2 header
-    ### This is a H3 header
-    #### This is a H4 header
-    ##### This is a H5 header
+# This is a H1 header
+## This is a H2 header
+### This is a H3 header
+#### This is a H4 header
+##### This is a H5 header
+###### This is a H6 header
 </Markdown>
diff --git a/...trap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_03_Paragraphs_and_Line_Breaks.razor b/...trap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_03_Paragraphs_and_Line_Breaks.razor
@@ -1,8 +1,8 @@
 <Markdown>
-    Add lines between your text with the **Enter** key.    
-    Your text gets better spaced and makes it easier to read.
+Add lines between your text with the **Enter** key.    
+Your text gets better spaced and makes it easier to read.
 
 
-    Add lines between your text with the **Enter** key.
-    Your text gets better spaced and makes it easier to read.
+Add lines between your text with the **Enter** key.
+Your text gets better spaced and makes it easier to read.
 </Markdown>
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_04_Blockquotes.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_04_Blockquotes.razor
@@ -1,6 +1,10 @@
 <Markdown>
-    > Single line quote
-    >> Nested quote
-    >> multiple line
-    >> quote
+> A well-known quote, contained in a blockquote element.
+</Markdown>
+
+<Markdown>
+> Single line quote
+>> Nested quote
+>> multiple line
+>> quote
 </Markdown>
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_05_Horizontal_Rules.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_05_Horizontal_Rules.razor
@@ -1,6 +1,5 @@
 <Markdown>
-    above
-
-    ----
-    below
+above
+---
+below
 </Markdown>
diff --git a/....RCL/Components/Pages/Markdown/Markdown_Demo_06_Emphasis_bold_italics_strikethrough.razor b/....RCL/Components/Pages/Markdown/Markdown_Demo_06_Emphasis_bold_italics_strikethrough.razor
@@ -1,5 +1,5 @@
 <Markdown>
-    Use _emphasis_ in comments to express **strong** opinions and point out ~~corrections~~
-    **_Bold, italicized text_**
-    **~~Bold, strike-through text~~**
+Use _emphasis_ in comments to express **strong** opinions and point out ~~corrections~~
+**_Bold, italicized text_**
+**~~Bold, strike-through text~~**
 </Markdown>
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_07_Code_Highlighting.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_07_Code_Highlighting.razor
@@ -1,11 +1,53 @@
 <Markdown>
-    ```js
-    const count = records.length;
-    ```
+```js
+const count = records.length;
+```
 </Markdown>
 
 <Markdown>
-    ```csharp
-    Console.WriteLine("Hello, World!");
-    ```
+```csharp
+Console.WriteLine("Hello, World!");
+```
+</Markdown>
+
+<Markdown>
+```csharp
+var countdown = new TimerRemaining()
+{
+    buffer =
+    {
+        [^1] = 0,
+        [^2] = 1,
+        [^3] = 2,
+        [^4] = 3,
+        [^5] = 4,
+        [^6] = 5,
+        [^7] = 6,
+        [^8] = 7,
+        [^9] = 8,
+        [^10] = 9
+    }
+};
+```
+</Markdown>
+
+<Markdown>
+```csharp
+public partial class C
+{
+    // Declaring declaration
+    public partial string Name { get; set; }
+}
+
+public partial class C
+{
+    // implementation declaration:
+    private string _name;
+    public partial string Name
+    {
+        get => _name;
+        set => _name = value;
+    }
+}
+```
 </Markdown>
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_08_Tables_A_Example.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_08_Tables_A_Example.razor
@@ -0,0 +1,6 @@
+<Markdown>
+| Heading 1 | Heading 2 | Heading 3 |
+|--|--|--|
+| Cell A1 | Cell A2 | Cell A3 |
+| Cell B1 | Cell B2 | Cell B3<br />second line of text |
+</Markdown>
diff --git a/...tstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_08_Tables_B_Custom_CssClass.razor b/...tstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_08_Tables_B_Custom_CssClass.razor
@@ -0,0 +1,9 @@
+<Markdown TableCssClass="table table-striped table-hover table-bordered">
+| Heading 1 | Heading 2 | Heading 3 |
+|--|--|--|
+| Cell A1 | Cell A2 | Cell A3 |
+| Cell B1 | Cell B2 | Cell B3 |
+| Cell C1 | Cell C2 | Cell C3 |
+| Cell D1 | Cell D2 | Cell D3 |
+| Cell E1 | Cell E2 | Cell E3 |
+</Markdown>
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_09_Lists_A_Ordered.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_09_Lists_A_Ordered.razor
@@ -0,0 +1,5 @@
+<Markdown>
+1. First item
+1. Second item
+1. Third item
+</Markdown>
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_09_Lists_B_Unordered.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_09_Lists_B_Unordered.razor
@@ -0,0 +1,5 @@
+<Markdown>
+- Item 1
+- Item 2
+- Item 3
+</Markdown>
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_09_Lists_C_Nested.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_09_Lists_C_Nested.razor
@@ -0,0 +1,14 @@
+<Markdown>
+1. First item
+    - Item 1
+    - Item 2
+    - Item 3
+1. Second item
+    - Nested item 1
+        - Further nested item 1
+        - Further nested item 2
+        - Further nested item 3
+    - Nested item 2
+    - Nested item 3
+1. Third item
+</Markdown>
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_09_Lists_D_Nested.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_09_Lists_D_Nested.razor
@@ -0,0 +1,14 @@
+<Markdown>
+1. First item
+    1. Item 1
+    1. Item 2
+    1. Item 3
+1. Second item
+    1. Nested item 1
+        1. Further nested item 1
+        1. Further nested item 2
+        1. Further nested item 3
+    1. Nested item 2
+    1. Nested item 3
+1. Third item
+</Markdown>
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_09_Lists_E_Nested.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Markdown/Markdown_Demo_09_Lists_E_Nested.razor
@@ -0,0 +1,14 @@
+<Markdown>
+- First item
+    - Item 1
+    - Item 2
+    - Item 3
+- Second item
+    - Nested item 1
+        - Further nested item 1
+        - Further nested item 2
+        - Further nested item 3
+    - Nested item 2
+    - Nested item 3
+- Third item
+</Markdown>