Add Blazor Express sections and update chart documentation (#1169)

This commit introduces new sections for "Blazor Express" in `MainLayout.razor` and "Other Packages" in `MainLayoutBaseFooter.razor`, linking to BlazorExpress.Bulma and BlazorExpress.ChartJS.

Additionally, several chart documentation files have been updated to include a new `<ChartJSCallout />` component, providing installation instructions and usage information for chart components. Each documentation file now also contains a `@code` block with constants for page metadata, improving the overall structure and clarity of the documentation.

NOTE: This commit message is auto-generated using GitHub Copilot.

Author: gvreddy04

BlazorBootstrap.Demo.RCL/Components/Layout/MainLayout.razor

@@ -70,7 +70,7 @@
                     }
                 </ul>
             </div>
-            <div class="col-6 col-lg-2 offset-lg-1 mb-3">
+            <div class="col-6 col-lg-2 mb-3">
                 <h5>Links</h5>
                 <ul class="list-unstyled">
                     <li class="mb-2"><a href="/">Home</a></li>
@@ -96,7 +96,13 @@
                     <li class="mb-2"><a href="@StackoverflowUrl" target="_blank" rel="noopener">Stack Overflow</a></li>
                 </ul>
             </div>
-            <div class="col-6 col-lg-2 mb-3"></div>
+            <div class="col-6 col-lg-2 mb-3">
+                <h5>Blazor Express</h5>
+                <ul class="list-unstyled">
+                    <li class="mb-2"><a href="https://bulma.blazorexpress.com/" target="_blank" rel="noopener">BlazorExpress.Bulma</a></li>
+                    <li class="mb-2"><a href="https://chartjs.blazorexpress.com/" target="_blank" rel="noopener">BlazorExpress.ChartJS</a></li>
+                </ul>
+            </div>
         </div>
     </FooterSection>
 </BlazorBootstrapLayout>

BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBaseFooter.razor

@@ -45,7 +45,13 @@
                     <li class="mb-2"><a href="@StackoverflowUrl" target="_blank" rel="noopener">Stack Overflow</a></li>
                 </ul>
             </div>
-            <div class="col-6 col-lg-2 mb-3"></div>
+            <div class="col-6 col-lg-2 mb-3">
+                <h5>Other Packages</h5>
+                <ul class="list-unstyled">
+                    <li class="mb-2"><a href="https://bulma.blazorexpress.com/" target="_blank" rel="noopener">BlazorExpress.Bulma</a></li>
+                    <li class="mb-2"><a href="https://chartjs.blazorexpress.com/" target="_blank" rel="noopener">BlazorExpress.ChartJS</a></li>
+                </ul>
+            </div>
         </div>
     </div>
 </div>

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/BarCharts/BarChartDocumentation.razor

@@ -42,6 +42,8 @@
 <Section Size="HeadingSize.H4" Name="Data labels" PageUrl="@pageUrl" Link="data-labels" />
 <Demo Type="typeof(BarChart_Demo_05_Stacked_BarChart_with_Datalabels)" Tabs="true" />
 
+<ChartJSCallout />
+
 @code {
     private const string pageUrl = RouteConstants.Demos_BarChart_Documentation;
     private const string pageTitle = "Blazor Bar Chart";

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ChartsDocumentation.razor

@@ -38,6 +38,8 @@
     </div>
 </Section>
 
+<ChartJSCallout />
+
 @code {
     private const string pageUrl = RouteConstants.Demos_Charts_Documentation;
     private const string pageTitle = "Blazor Charts";

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/DoughnutCharts/DoughnutChartDocumentation.razor

@@ -32,6 +32,8 @@
     <Demo Type="typeof(DoughnutChart_Demo_02_Datalabels)" Tabs="true" />
 </Section>
 
+<ChartJSCallout />
+
 @code {
     private const string pageUrl = RouteConstants.Demos_DoughnutChart_Documentation;
     private const string pageTitle = "Blazor Doughnut Chart";

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/LineCharts/LineChartDocumentation.razor

@@ -54,6 +54,8 @@
     <Demo Type="typeof(LineChart_Demo_06_Dataset_Fill)" Tabs="true" />
 </Section>
 
+<ChartJSCallout />
+
 @code {
     private const string pageUrl = RouteConstants.Demos_LineChart_Documentation;
     private const string pageTitle = "Blazor Line Chart";

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PieCharts/PieChartDocumentation.razor

@@ -39,6 +39,8 @@
     <Demo Type="typeof(PieChart_Demo_03_Change_Legend_Position)" Tabs="true" />
 </Section>
 
+<ChartJSCallout />
+
 @code {
     private const string pageUrl = RouteConstants.Demos_PieChart_Documentation;
     private const string pageTitle = "Blazor Pie Chart";

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/PolarAreaCharts/PolarAreaChartDocumentation.razor

@@ -28,6 +28,8 @@
     <Demo Type="typeof(PolarAreaChart_Demo_01_Examples)" Tabs="true" />
 </Section>
 
+<ChartJSCallout />
+
 @code {
     private const string pageUrl = RouteConstants.Demos_PolarAreaChart_Documentation;
     private const string pageTitle = "Blazor Polar Area Chart";

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/RadarCharts/RadarChartDocumentation.razor

@@ -28,6 +28,8 @@
     <Demo Type="typeof(RadarChart_Demo_01_Examples)" Tabs="true"/>
 </Section>
 
+<ChartJSCallout />
+
 @code {
     private const string pageUrl = RouteConstants.Demos_RadarChart_Documentation;
     private const string pageTitle = "Blazor Radar Chart";

BlazorBootstrap.Demo.RCL/Components/Pages/Charts/ScatterCharts/ScatterChartDocumentation.razor

@@ -37,6 +37,8 @@
     <Demo Type="typeof(ScatterChart_Demo_02_Dynamic_Data)" Tabs="true" />
 </Section>
 
+<ChartJSCallout />
+
 @code {
     private const string pageUrl = RouteConstants.Demos_ScatterChart_Documentation;
     private const string pageTitle = "Blazor Scatter Chart";