Getting started page updates

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

@@ -1,27 +1,51 @@
 @attribute [Route(pageUrl)]
+@attribute [Route(pageUrl2)]
 
 <PageHeroSection PageUrl="@pageUrl"
                  Title="@title"
                  Heading="@heading"
                  Description="@description"
                  ImageUrl="@imageUrl" />
 
-<Prerequisites />
+<SectionHeading Size="HeadingSize.H4" Text="Install Nuget Package" PageUrl="@pageUrl" HashTagName="install-nuget-package" />
+<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" />
 
-<SectionHeading Size="HeadingSize.H4" Text="How it works" PageUrl="@pageUrl" HashTagName="how-it-works" />
+<SectionHeading Size="HeadingSize.H4" Text="Add script references" PageUrl="@pageUrl" HashTagName="add-script-references" />
 <div class="mb-3">
-    In the following example, a categorical 12-color palette is used.
+    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>
-<BlazorBootstrap.Callout Heading="TIP" Color="CalloutColor.Success">
-    For data visualization, you can use the predefined palettes <code>ColorUtility.CategoricalTwelveColors</code> for a 12-color palette and <code>ColorUtility.CategoricalSixColors</code> for a 6-color palette.
-    These palettes offer a range of distinct and visually appealing colors that can be applied to represent different categories or data elements in your visualizations.
-</BlazorBootstrap.Callout>
-@* <Demo Type="typeof(DoughnutChart_Demo_01_Examples)" Tabs="true" /> *@
+<CodeSnippet File="~\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" />
 
 @code {
     private const string pageUrl = "/charts/getting-started";
-    private const string title = "Blazor Doughnut Chart";
-    private const string heading = "Blazor Doughnut Chart";
-    private const string description = "A Blazor donut chart component is a circular chart that shows the proportional values of different categories. It is similar to a pie chart, but the center of the donut chart is hollow. This makes it easier to see the individual values of each category.";
+    private const string pageUrl2 = "/charts/getting-started/blazor-webassembly-net-8";
+    private const string title = "Getting started - Blazor WebAssembly (.NET 8)";
+    private const string heading = "Getting started - Blazor WebAssembly (.NET 8)";
+    private const string description = "Get started with the Enterprise-class Component library built on the Blazor and Chart.js JavaScript library.";
     private const string imageUrl = "https://i.imgur.com/xEPhAsW.png";
+
+    [Inject]
+    private NavigationManager _navigationManager { get; set; } = default!;
+
+    protected override void OnInitialized()
+    {
+        try
+        {
+            if (_navigationManager.Uri.Replace(_navigationManager.BaseUri, "").Contains("charts/getting-started"))
+                _navigationManager.NavigateTo(pageUrl2);
+        }
+        catch
+        {
+            // do nothing
+        }
+    }
 }

BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_01_Install.txt

@@ -0,0 +1 @@
+Install-Package BlazorExpress.ChartJS -Version 1.0.0-preview1

BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_02_Scripts.html

@@ -0,0 +1,4 @@
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+<script src="_content/BlazorExpress.ChartJS/blazorexpress.chartjs.js"></script>

BlazorExpress.ChartJS.Demo.RCL/Components/Pages/GettingStarted/Getting_Started_Snippet_03_Register.txt

@@ -0,0 +1 @@
+@using BlazorExpress.ChartJS

BlazorExpress.ChartJS.Demo.RCL/Components/Pages/Home/Index.razor

@@ -24,7 +24,7 @@
     <li><a href="/charts/pie-chart">Pie Chart</a></li>
 </ol>
 
-<BlazorBootstrap.Callout Color="CalloutColor.Info">
+<BlazorBootstrap.Callout Color="BlazorBootstrap.CalloutColor.Info">
     We will add Bubble Chart, Polar Area Chart, Radar Chart, Scatter Chart, and Mixed Chart support in the subsequent versions.
 </BlazorBootstrap.Callout>
 
@@ -48,10 +48,11 @@
         try
         {
             if (_navigationManager.Uri.Replace(_navigationManager.BaseUri, "").Equals(""))
-                _navigationManager.NavigateTo("/charts/overview");
-        } catch
+                _navigationManager.NavigateTo(pageUrl2);
+        }
+        catch
         {
             // do nothing
-        }        
+        }
     }
 }

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

@@ -0,0 +1,100 @@
+namespace BlazorExpress.ChartJS.Demo.RCL;
+
+public class CodeSnippet : ComponentBase
+{
+    #region Members
+
+    private string? code;
+
+    #endregion
+
+    #region Methods
+
+    protected override async Task OnParametersSetAsync()
+    {
+        if (code is null)
+        {
+            if (!string.IsNullOrWhiteSpace(File))
+            {
+                var resourceName = File.Replace("~", typeof(CodeSnippet).Assembly.GetName().Name).Replace("/", ".").Replace("\\", ".");
+
+                using (var stream = typeof(CodeSnippet).Assembly.GetManifestResourceStream(resourceName)!)
+                {
+                    try
+                    {
+                        if (stream is null)
+                            return;
+
+                        using (var reader = new StreamReader(stream))
+                        {
+                            code = await reader.ReadToEndAsync();
+                        }
+                    }
+                    catch (Exception ex)
+                    {
+                        Console.WriteLine(ex.Message);
+                    }
+                }
+            }
+        }
+    }
+
+    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 string? File { get; set; }
+
+    #endregion
+}

BlazorExpress.ChartJS/BlazorExpress.ChartJS.csproj

@@ -11,7 +11,7 @@
     <PackageProjectUrl>https://chartjs.blazorexpress.com</PackageProjectUrl>
     <RepositoryUrl>https://github.com/BlazorExpress/BlazorExpress.ChartJS</RepositoryUrl>
     <PackageReadmeFile>README.md</PackageReadmeFile>
-    <PackageTags>Blazor, Charts, BlazorBarChart, BlazorDoughnutChart, BlazorLineChart, BlazorPieChart</PackageTags>
+    <PackageTags>Blazor, BlazorExpress, Charts, BlazorBarChart, BlazorDoughnutChart, BlazorLineChart, BlazorPieChart</PackageTags>
     <Description>An open-source, production-ready Blazor charts component library built on the Blazor and Chart.js JavaScript library.</Description>
     <Authors>Vikram Reddy</Authors>
     <!--<Company>your_company</Company>-->