Demos update (#755)

* RCL.Demo - Demos improved
vikramlearning · Jun 14, 2024 · 7f35bc1 · 7f35bc1
1 parent 18827f3
commit 7f35bc1
Show file tree

Hide file tree

Showing 9 changed files with 190 additions and 115 deletions.
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Layout/server/LayoutServerDocumentation.razor
@@ -26,7 +26,7 @@
     Remove all the CSS content from the <b>Shared/MainLayout.razor.css</b> file.
 </Callout>
 
-<CodeSnippet File="~\Components\Pages\Layout\server\Layout_Server_Demo_01.razor" />
+<Snippet FilePath="~\Components\Pages\Layout\server\Layout_Server_Demo_01.razor" />
 
 @code {
     private string pageUrl = "/layout-setup/blazor-server";

diff --git a/...otstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor b/...otstrap.Demo.RCL/Components/Pages/Layout/webassembly/LayoutWebAssemblyDocumentation.razor
@@ -27,7 +27,7 @@
     Remove all the CSS content from the <b>Shared/MainLayout.razor.css</b> file.
 </Callout>
 
-<CodeSnippet File="~\Components\Pages\Layout\webassembly\Layout_WebAssembly_Demo_01.razor" />
+<Snippet FilePath="~\Components\Pages\Layout\webassembly\Layout_WebAssembly_Demo_01.razor" />
 
 @code {
     private string pageUrl = "/layout-setup/blazor-webassembly";

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/SortableList/SortableListDocumentation.razor
@@ -13,7 +13,7 @@
 
 <SectionHeading Size="HeadingSize.H2" Text="Setup" PageUrl="@pageUrl" HashTagName="setup" />
 <div class="mb-3">Before using the <b>SortableList</b> component, include the <b>SortableJS</b> script reference in your <code>index.html/_Host.cshtml</code> file.</div>
-<CodeSnippet File="~\Components\Pages\SortableList\SortableList_Demo_00_Setup.razor" />
+<Snippet FilePath="~\Components\Pages\SortableList\SortableList_Demo_00_Setup.razor" />
 
 <SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
 <div class="mb-3"></div>

diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/CodeSnippet.cs b/BlazorBootstrap.Demo.RCL/Components/Shared/CodeSnippet.cs
diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor b/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor
@@ -1,7 +1,6 @@
 @namespace BlazorBootstrap.Demo.RCL
 @inherits ComponentBase
 
-<!--googleoff: index-->
 @if (ShowCodeOnly)
 {
     <div class="bd-example-snippet bd-code-snippet">
@@ -15,13 +14,13 @@
         </div>
          <div class="highlight">
              <pre>
-                    <code class="@LanguageCssClass">
-                        @if (codeSnippet is not null)
-                        {
-                            <text>@codeSnippet.Trim()</text>
-                        }
-                    </code>
-                </pre>
+                <code class="@LanguageCode.ToLanguageCssClass()">
+                    @if (snippet is not null)
+                    {
+                        <text>@snippet.Trim()</text>
+                    }
+                </code>
+            </pre>
          </div>
      </div>
 }
@@ -41,10 +40,10 @@ else if (!Tabs)
         </div>
         <div class="highlight">
             <pre>
-                <code class="@LanguageCssClass">
-                    @if (codeSnippet is not null)
+                <code class="@LanguageCode.ToLanguageCssClass()">
+                    @if (snippet is not null)
                     {
-                        <text>@codeSnippet.Trim()</text>
+                        <text>@snippet.Trim()</text>
                     }
                 </code>
             </pre>
@@ -76,10 +75,10 @@ else // Tabs = true
                 </div>
                 <div class="highlight">
                     <pre class="mt-0 me-4">
-                        <code class="@LanguageCssClass">
-                            @if (codeSnippet is not null)
+                        <code class="@LanguageCode.ToLanguageCssClass()">
+                            @if (snippet is not null)
                             {
-                                <text>@codeSnippet.Trim()</text>
+                                <text>@snippet.Trim()</text>
                             }
                         </code>
                     </pre>
@@ -88,4 +87,3 @@ else // Tabs = true
         </Tab>
     </Tabs>
 }
-<!--googleon: index-->
diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.cs b/BlazorBootstrap.Demo.RCL/Components/Shared/Demo.razor.cs
@@ -10,7 +10,7 @@ public partial class Demo : ComponentBase
 
     private string? clipboardTooltipTitle = "Copy to clipboard";
 
-    private string? codeSnippet;
+    private string? snippet;
 
     /// <summary>
     /// A reference to this component instance for use in JavaScript calls.
@@ -37,11 +37,11 @@ protected override async Task OnInitializedAsync()
 
     protected override async Task OnParametersSetAsync()
     {
-        if (codeSnippet is null)
+        if (snippet is null)
         {
-            var resourceName = Type.FullName + ".razor";
+            var resourceFullName = Type.FullName + ".razor";
 
-            using (var stream = Type.Assembly.GetManifestResourceStream(resourceName)!)
+            using (var stream = Type.Assembly.GetManifestResourceStream(resourceFullName)!)
             {
                 try
                 {
@@ -50,7 +50,7 @@ protected override async Task OnParametersSetAsync()
 
                     using (var reader = new StreamReader(stream))
                     {
-                        codeSnippet = await reader.ReadToEndAsync();
+                        snippet = await reader.ReadToEndAsync();
                     }
                 }
                 catch (Exception ex)
@@ -97,15 +97,15 @@ public void ResetCopyStatusJS()
         StateHasChanged();
     }
 
-    private async Task CopyToClipboardAsync() => await JS.InvokeVoidAsync("copyToClipboard", codeSnippet, objRef);
+    private async Task CopyToClipboardAsync() => await JS.InvokeVoidAsync("copyToClipboard", snippet, objRef);
 
     #endregion
 
     #region Properties, Indexers
 
     [Inject] protected IJSRuntime JS { get; set; } = default!;
 
-    [Parameter] public string LanguageCssClass { get; set; } = "language-cshtml";
+    [Parameter] public LanguageCode LanguageCode { get; set; } = LanguageCode.Razor;
 
     [Parameter] public bool ShowCodeOnly { get; set; }
 

diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/Enums/LanguageCode.cs b/BlazorBootstrap.Demo.RCL/Components/Shared/Enums/LanguageCode.cs
@@ -0,0 +1,68 @@
+namespace BlazorBootstrap.Demo.RCL;
+
+/// <summary>
+/// <see href="https://prismjs.com/#supported-languages" />
+/// </summary>
+public enum LanguageCode
+{
+    /// <summary>
+    /// ASP.NET (C#) - aspnet
+    /// </summary>
+    AspNet,
+
+    /// <summary>
+    /// C# - csharp, cs, dotnet
+    /// </summary>
+    CSharp,
+
+    /// <summary>
+    /// CSS - css
+    /// </summary>
+    Css,
+
+    /// <summary>
+    /// HTML - html
+    /// </summary>
+    HTML,
+
+    /// <summary>
+    /// JavaScript - javascript, js
+    /// </summary>
+    JavaScript,
+
+    /// <summary>
+    /// JSON - json
+    /// </summary>
+    JSON,
+
+    /// <summary>
+    /// JSONP - jsonp
+    /// </summary>
+    JSONP,
+
+    /// <summary>
+    /// Markdown - md
+    /// </summary>
+    Markdown,
+
+    /// <summary>
+    /// PowerShell - powershell
+    /// </summary>
+    PowerShell,
+
+    /// <summary>
+    /// Razor C# - cshtml, razor
+    /// </summary>
+    Razor,
+
+    /// <summary>
+    /// Text - none
+    /// </summary>
+    Text,
+
+    /// <summary>
+    /// YAML - yaml, yml
+    /// </summary>
+    YAML
+}
+
diff --git a/BlazorBootstrap.Demo.RCL/Components/Shared/Extensions/EnumExtensions.cs b/BlazorBootstrap.Demo.RCL/Components/Shared/Extensions/EnumExtensions.cs
@@ -0,0 +1,20 @@
+namespace BlazorBootstrap.Demo.RCL;
+
+public static class EnumExtensions
+{
+    public static string? ToLanguageCssClass(this LanguageCode languageCode) =>
+        languageCode switch
+        {
+            LanguageCode.AspNet => "language-aspnet",
+            LanguageCode.CSharp => "language-csharp",
+            LanguageCode.JavaScript => "language-js",
+            LanguageCode.JSON => "language-json",
+            LanguageCode.JSONP => "language-jsonp",
+            LanguageCode.Markdown => "language-md",
+            LanguageCode.PowerShell => "language-powershell",
+            LanguageCode.Razor => "language-razor",
+            LanguageCode.Text => "language-none",
+            LanguageCode.YAML => "language-yaml",
+            _ => null
+        };
+}