Documentation updated

BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/GettingStarted.razor

@@ -11,19 +11,19 @@
 <div class="mb-3">
     Looking to quickly add <b>BlazorExpress.ChartJS</b> to your project? Use NuGet package manager.
 </div>
-<CodeSnippet File="~\Components\Pages\GettingStarted\Getting_Started_Snippet_01_Install.txt" />
+<Snippet LanguageCode="LanguageCode.PowerShell" FilePath="~\Components\Pages\GettingStarted\Getting_Started_Snippet_01_Install.txt" />
 
 <SectionHeading Size="HeadingSize.H4" Text="Add script references" PageUrl="@pageUrl" HashTagName="add-script-references" />
 <div class="mb-3">
     Insert the following references into the <b>body</b> section of the <b>wwwroot/index.html</b> file, immediately after the <b>_framework/blazor.webassembly.js</b> reference:
 </div>
-<CodeSnippet File="~\Components\Pages\GettingStarted\Getting_Started_Snippet_02_Scripts.html" />
+<Snippet LanguageCode="LanguageCode.JavaScript" FilePath="~\Components\Pages\GettingStarted\Getting_Started_Snippet_02_Scripts.html" />
 
 <SectionHeading Size="HeadingSize.H4" Text="Register services" PageUrl="@pageUrl" HashTagName="register-services" />
 <div class="mb-3">
     Register tag helpers in <b>_Imports.razor</b>.
 </div>
-<CodeSnippet File="~\Components\Pages\GettingStarted\Getting_Started_Snippet_03_Register.txt" />
+<Snippet LanguageCode="LanguageCode.Razor" FilePath="~\Components\Pages\GettingStarted\Getting_Started_Snippet_03_Register.txt" />
 
 @code {
     private const string pageUrl = "/charts/getting-started";

BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Demo.razor

@@ -2,7 +2,6 @@
 @namespace BlazorExpress.ChartJS.Demo.RCL
 @inherits ComponentBase
 
-<!--googleoff: index-->
 @if (ShowCodeOnly)
 {
     <div class="bd-example-snippet bd-code-snippet">
@@ -16,10 +15,10 @@
         </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>
@@ -42,10 +41,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>
@@ -57,7 +56,7 @@ else // Tabs = true
     <Tabs EnableFadeEffect="true">
         <Tab Active="true">
             <TitleTemplate>
-                <Icon Name="IconName.Display" Class="me-2" /><b>Demo</b>
+                <Icon Name="IconName.Display" Class="me-2" /><b>Example</b>
             </TitleTemplate>
             <Content>
                 <div class="bb-example border-top-0 mt-0">
@@ -67,7 +66,7 @@ else // Tabs = true
         </Tab>
         <Tab>
             <TitleTemplate>
-                <Icon Name="IconName.CodeSlash" Class="me-2" /><b>Source</b>
+                <Icon Name="IconName.CodeSlash" Class="me-2" /><b>View Source</b>
             </TitleTemplate>
             <Content>
                 <div class="position-relative d-block float-end mt-3 me-3 me-sm-4">
@@ -77,16 +76,15 @@ 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>
+                        </code>
+                    </pre>
                 </div>
             </Content>
         </Tab>
     </Tabs>
 }
-<!--googleon: index-->

BlazorExpress.ChartJS.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; }
 

BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Enums/LanguageCode.cs

@@ -0,0 +1,68 @@
+namespace BlazorExpress.ChartJS.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
+}
+

BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Extensions/EnumExtensions.cs

@@ -0,0 +1,20 @@
+namespace BlazorExpress.ChartJS.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
+        };
+}

BlazorExpress.ChartJS.Demo.RCL/Components/Shared/CodeSnippet.cs → BlazorExpress.ChartJS.Demo.RCL/Components/Shared/Snippet.cs

@@ -1,24 +1,50 @@
 namespace BlazorExpress.ChartJS.Demo.RCL;
 
-public class CodeSnippet : ComponentBase
+public class Snippet : ComponentBase
 {
     #region Members
 
-    private string? code;
+    private string? snippet;
 
     #endregion
 
     #region Methods
 
+    protected override void BuildRenderTree(RenderTreeBuilder builder)
+    {
+        builder.OpenElement(300, "div");
+        builder.AddAttribute(301, "class", "highlight show-code-only");
+
+        builder.OpenElement(400, "pre");
+
+        builder.OpenElement(500, "code");
+        builder.AddAttribute(501, "class", LanguageCode.ToLanguageCssClass());
+
+        if (snippet != null)
+            builder.AddContent(600, snippet.Trim());
+
+        builder.CloseElement(); // end: code
+        builder.CloseElement(); // end: pre
+        builder.CloseElement(); // end: div
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+            await JS.InvokeVoidAsync("highlightCode");
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
     protected override async Task OnParametersSetAsync()
     {
-        if (code is null)
+        if (snippet is null)
         {
-            if (!string.IsNullOrWhiteSpace(File))
+            if (!string.IsNullOrWhiteSpace(FilePath))
             {
-                var resourceName = File.Replace("~", typeof(CodeSnippet).Assembly.GetName().Name).Replace("/", ".").Replace("\\", ".");
+                var resourceName = FilePath.Replace("~", typeof(Snippet).Assembly.GetName().Name).Replace("/", ".").Replace("\\", ".");
 
-                using (var stream = typeof(CodeSnippet).Assembly.GetManifestResourceStream(resourceName)!)
+                using (var stream = typeof(Snippet).Assembly.GetManifestResourceStream(resourceName)!)
                 {
                     try
                     {
@@ -27,7 +53,7 @@ protected override async Task OnParametersSetAsync()
 
                         using (var reader = new StreamReader(stream))
                         {
-                            code = await reader.ReadToEndAsync();
+                            snippet = await reader.ReadToEndAsync();
                         }
                     }
                     catch (Exception ex)
@@ -39,62 +65,15 @@ protected override async Task OnParametersSetAsync()
         }
     }
 
-    private string? GetLanguageFromFileExtension()
-    {
-        if (string.IsNullOrWhiteSpace(File))
-            return null;
-
-        return Path.GetExtension(File).ToLower() switch
-        {
-            ".razor" => "cshtml",
-            ".cshtml" => "cshtml",
-            ".html" => "html",
-            ".css" => "css",
-            ".cs" => "csharp",
-            ".txt" => "none",
-            ".js" => "js",
-            _ => null
-        };
-    }
-
-    protected override void BuildRenderTree(RenderTreeBuilder builder)
-    {
-        // no base call
-        builder.AddMarkupContent(0, "<!--googleoff: index-->");
-
-        builder.OpenElement(300, "div");
-        builder.AddAttribute(301, "class", "highlight show-code-only");
-        builder.OpenElement(400, "pre");
-        builder.OpenElement(401, "code");
-        builder.AddAttribute(402, "class", $"language-{Language ?? GetLanguageFromFileExtension() ?? "cshtml"}");
-        if (code != null)
-        {
-            builder.AddContent(403, code.Trim());
-        }
-        builder.CloseElement(); // end: code
-        builder.CloseElement(); // end: pre
-        builder.CloseElement();
-
-        builder.AddMarkupContent(700, "<!--googleon: index-->");
-    }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender)
-            await JS.InvokeVoidAsync("highlightCode");
-
-        await base.OnAfterRenderAsync(firstRender);
-    }
-
     #endregion
 
     #region Properties
 
     [Inject] protected IJSRuntime JS { get; set; } = null!;
 
-    [Parameter] public string? Language { get; set; }
+    [Parameter] public LanguageCode LanguageCode { get; set; } = LanguageCode.Razor;
 
-    [Parameter] public string? File { get; set; }
+    [Parameter] public string? FilePath { get; set; }
 
     #endregion
 }