Performance Optimizations

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

@@ -31,34 +31,34 @@
                 <hr class="d-lg-none text-white-50">
                 <ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
                     <li class="nav-item col-6 col-lg-auto"><a class="nav-link py-2 px-0 px-lg-2" href="/getting-started/blazor-webassembly">Demos</a></li>
-                    <li class="nav-item col-6 col-lg-auto"><a class="nav-link py-2 px-0 px-lg-2" href="@docsUrl" target="_blank" rel="noopener">Docs</a></li>
-                    <li class="nav-item col-6 col-lg-auto"><a class="nav-link py-2 px-0 px-lg-2" href="@blogUrl" target="_blank" rel="noopener">Blog</a></li>
-                    <li class="nav-item col-6 col-lg-auto"><a class="nav-link py-2 px-0 px-lg-2" href="@githubUrl" target="_blank" rel="noopener">GitHub</a></li>
+                    <li class="nav-item col-6 col-lg-auto"><a class="nav-link py-2 px-0 px-lg-2" href="@DocsUrl" target="_blank" rel="noopener">Docs</a></li>
+                    <li class="nav-item col-6 col-lg-auto"><a class="nav-link py-2 px-0 px-lg-2" href="@BlogUrl" target="_blank" rel="noopener">Blog</a></li>
+                    <li class="nav-item col-6 col-lg-auto"><a class="nav-link py-2 px-0 px-lg-2" href="@GithubUrl" target="_blank" rel="noopener">GitHub</a></li>
                 </ul>
 
                 <hr class="d-lg-none text-white-50">
 
                 <ul class="navbar-nav flex-row flex-wrap ms-md-auto">
                     <li class="nav-item col-6 col-lg-auto">
-                        <a class="nav-link py-2 px-0 px-lg-2" href="@githubUrl" target="_blank" rel="noopener">
+                        <a class="nav-link py-2 px-0 px-lg-2" href="@GithubUrl" target="_blank" rel="noopener">
                             <i class="bi bi-github"></i>
                             <small class="d-lg-none ms-2">GitHub</small>
                         </a>
                     </li>
                     <li class="nav-item col-6 col-lg-auto">
-                        <a class="nav-link py-2 px-0 px-lg-2" href="@twitterUrl" target="_blank" rel="noopener">
+                        <a class="nav-link py-2 px-0 px-lg-2" href="@TwitterUrl" target="_blank" rel="noopener">
                             <i class="bi bi-twitter-x"></i>
                             <small class="d-lg-none ms-2">Twitter</small>
                         </a>
                     </li>
                     <li class="nav-item col-6 col-lg-auto">
-                        <a class="nav-link py-2 px-0 px-lg-2" href="@linkedInUrl" target="_blank" rel="noopener">
+                        <a class="nav-link py-2 px-0 px-lg-2" href="@LinkedInUrl" target="_blank" rel="noopener">
                             <i class="bi bi-linkedin"></i>
                             <small class="d-lg-none ms-2">LinkedIn</small>
                         </a>
                     </li>
                     <li class="nav-item col-6 col-lg-auto">
-                        <a class="nav-link py-2 px-0 px-lg-2" href="@openCollectiveUrl" target="_blank" rel="noopener">
+                        <a class="nav-link py-2 px-0 px-lg-2" href="@OpenCollectiveUrl" target="_blank" rel="noopener">
                             <i class="bi bi-opencollective"></i>
                             <small class="d-lg-none ms-2">Open Collective</small>
                         </a>

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

@@ -4,22 +4,22 @@
 <BlazorBootstrapLayout StickyHeader="true">
     <HeaderSection>
         <div>
-            <a class="nav-link py-2 px-2" href="@githubUrl" target="_blank" rel="noopener">
+            <a class="nav-link py-2 px-2" href="@GithubUrl" target="_blank" rel="noopener">
                 <i class="bi bi-github"></i>
             </a>
         </div>
         <div>
-            <a class="nav-link py-2 px-2" href="@twitterUrl" target="_blank" rel="noopener">
+            <a class="nav-link py-2 px-2" href="@TwitterUrl" target="_blank" rel="noopener">
                 <i class="bi bi-twitter-x"></i>
             </a>
         </div>
         <div>
-            <a class="nav-link py-2 px-2" href="@linkedInUrl" target="_blank" rel="noopener">
+            <a class="nav-link py-2 px-2" href="@LinkedInUrl" target="_blank" rel="noopener">
                 <i class="bi bi-linkedin"></i>
             </a>
         </div>
         <div>
-            <a class="nav-link py-2 px-2 pe-3" href="@openCollectiveUrl" target="_blank" rel="noopener">
+            <a class="nav-link py-2 px-2 pe-3" href="@OpenCollectiveUrl" target="_blank" rel="noopener">
                 <i class="bi bi-opencollective"></i>
             </a>
         </div>
@@ -64,10 +64,7 @@
                     <li class="mb-2">Designed and built with all the love in the world by the <strong><a href="https://www.nuget.org/packages/Blazor.Bootstrap">Blazor Bootstrap</a></strong> team with the help of our contributors.</li>
                     <li class="mb-2">Code licensed <a href="https://github.com/vikramlearning/blazorbootstrap/blob/main/LICENSE.txt" target="_blank" rel="license noopener">Apache License 2.0</a>.</li>
                     <li class="mb-2">Currently @Version.</li>
-                    @if (!string.IsNullOrWhiteSpace(DotNetVersion))
-                    {
-                        <li class="mb-2">Powered by @DotNetVersion</li>
-                    }
+                    <li class="mb-2">Powered by @DotNetVersion</li>
                 </ul>
             </div>
             <div class="col-6 col-lg-2 offset-lg-1 mb-3">

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

@@ -2,9 +2,9 @@
 
 public partial class MainLayout : MainLayoutBase
 {
-    internal override IEnumerable<NavItem> GetNavItems()
+    internal override IReadOnlyCollection<NavItem> GetNavItems()
     {
-        navItems ??= new List<NavItem>
+        NavItems ??= new List<NavItem>
         {
             new (){ Id = "1", Text = "Getting Started", Href = "/getting-started", IconName = IconName.HouseDoorFill },
 
@@ -15,6 +15,7 @@ internal override IEnumerable<NavItem> GetNavItems()
             new (){ Id = "3", Text = "Content", IconName = IconName.BodyText, IconColor = IconColor.Primary },
             new (){ Id = "300", Text = "Icons", Href = "/icons", IconName = IconName.PersonSquare, ParentId = "3" },
             new (){ Id = "301", Text = "Images", Href = "/images", IconName = IconName.Image, ParentId = "3" },
+            new (){ Id = "302", Text = "CSS Generator", Href = "/customcss", IconName = IconName.WrenchAdjustableCircle, ParentId = "3" },
 
             new (){ Id = "4", Text = "Forms", IconName = IconName.InputCursorText, IconColor = IconColor.Success },
             new (){ Id = "400", Text = "Auto Complete", Href = "/form/autocomplete", IconName = IconName.InputCursorText, ParentId = "4" },
@@ -97,7 +98,7 @@ internal override IEnumerable<NavItem> GetNavItems()
             new (){ Id = "1900", Text = "Color Utility", Href = "/utils/color-utility", IconName = IconName.Palette2, ParentId = "19" },
         };
 
-        return navItems;
+        return NavItems;
     }
 
     private async ValueTask OnThemeChanged(string themeName) 

BlazorBootstrap.Demo.RCL/Components/Layout/MainLayoutBase.cs

@@ -1,61 +1,56 @@
-namespace BlazorBootstrap.Demo.RCL;
+using System.Runtime.InteropServices;
+
+namespace BlazorBootstrap.Demo.RCL;
 
 public class MainLayoutBase : LayoutComponentBase
 {
-    internal string version = default!;
-    internal string dotNetVersion = default!;
-    internal string docsUrl = default!;
-    internal string blogUrl = default!;
-    internal string githubUrl = default!;
-    internal string twitterUrl = default!;
-    internal string linkedInUrl = default!;
-    internal string openCollectiveUrl = default!;
-    internal string githubIssuesUrl = default!;
-    internal string githubDiscussionsUrl = default!;
-    internal string stackoverflowUrl = default!;
-
     internal Sidebar2 sidebar2 = default!;
-    internal IEnumerable<NavItem> navItems = default!;
+    internal IReadOnlyCollection<NavItem>? NavItems;
 
     [Inject] public IConfiguration Configuration { get; set; } = default!;
 
     [Inject] protected IJSRuntime JS { get; set; } = default!;
 
     protected override void OnInitialized()
     {
-        version = $"v{Configuration["version"]}"; // example: v0.6.1
-        dotNetVersion = $".NET {Configuration["dotNetVersion"]}"; // example: 9.0.0
-        docsUrl = $"{Configuration["urls:docs"]}";
-        blogUrl = $"{Configuration["urls:blog"]}";
-        githubUrl = $"{Configuration["urls:github"]}";
-        twitterUrl = $"{Configuration["urls:twitter"]}";
-        linkedInUrl = $"{Configuration["urls:linkedin"]}";
-        openCollectiveUrl = $"{Configuration["urls:opencollective"]}";
-        githubIssuesUrl = $"{Configuration["urls:github_issues"]}";
-        githubDiscussionsUrl = $"{Configuration["urls:github_discussions"]}";
-        stackoverflowUrl = $"{Configuration["urls:stackoverflow"]}";
+        Version = $"v{Configuration["version"]}"; // example: v0.6.1
+        DocsUrl = $"{Configuration["urls:docs"]}";
+        BlogUrl = $"{Configuration["urls:blog"]}";
+        GithubUrl = $"{Configuration["urls:github"]}";
+        TwitterUrl = $"{Configuration["urls:twitter"]}";
+        LinkedInUrl = $"{Configuration["urls:linkedin"]}";
+        OpenCollectiveUrl = $"{Configuration["urls:opencollective"]}";
+        GithubIssuesUrl = $"{Configuration["urls:github_issues"]}";
+        GithubDiscussionsUrl = $"{Configuration["urls:github_discussions"]}";
+        StackoverflowUrl = $"{Configuration["urls:stackoverflow"]}";
         base.OnInitialized();
     }
 
-    internal virtual async Task<Sidebar2DataProviderResult> Sidebar2DataProvider(Sidebar2DataProviderRequest request)
+    internal virtual Task<Sidebar2DataProviderResult> Sidebar2DataProvider()
     {
-        if (navItems is null)
-            navItems = GetNavItems();
-
-        return await Task.FromResult(request.ApplyTo(navItems));
+        return Task.FromResult(Sidebar2DataProviderRequest.ApplyTo(NavItems));
     }
+    internal virtual IReadOnlyCollection<NavItem> GetNavItems() => new List<NavItem>();
+
+    public string Version { get; private set; } = default!;
+
+    public string DocsUrl { get; private set; } = default!;
+
+    public string BlogUrl { get; private set; } = default!;
+
+    public string GithubUrl { get; private set; } = default!;
+
+    public string TwitterUrl { get; private set; } = default!;
+
+    public string LinkedInUrl { get; private set; } = default!;
+
+    public string OpenCollectiveUrl { get; private set; } = default!;
+
+    public string GithubIssuesUrl { get; private set; } = default!;
+
+    public string GithubDiscussionsUrl { get; private set; } = default!;
 
-    internal virtual IEnumerable<NavItem> GetNavItems() => new List<NavItem>();
-
-    public string Version => version;
-    public string DotNetVersion => dotNetVersion;
-    public string DocsUrl => docsUrl;
-    public string BlogUrl => blogUrl;
-    public string GithubUrl => githubUrl;
-    public string TwitterUrl => twitterUrl;
-    public string LinkedInUrl => linkedInUrl;
-    public string OpenCollectiveUrl => openCollectiveUrl;
-    public string GithubIssuesUrl => githubIssuesUrl;
-    public string GithubDiscussionsUrl => githubDiscussionsUrl;
-    public string StackoverflowUrl => stackoverflowUrl;
+    public string StackoverflowUrl { get; private set; } = default!;
+
+    public string DotNetVersion => RuntimeInformation.FrameworkDescription;
 }

BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_01_Examples.razor

@@ -1,17 +1,11 @@
 <Accordion>
     <AccordionItem Title="Accordion Item #1">
-        <Content>
-            <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
-        </Content>
+        <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
     </AccordionItem>
     <AccordionItem Title="Accordion Item #2">
-        <Content>
-            <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
-        </Content>
+        <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
     </AccordionItem>
     <AccordionItem Title="Accordion Item #3">
-        <Content>
-            <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
-        </Content>
+        <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
     </AccordionItem>
 </Accordion>

BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/Accordion_Demo_02_Title_with_Icon.razor

@@ -3,24 +3,24 @@
         <TitleTemplate>
             <Icon Name="IconName.HouseFill" Class="me-1" /> Accordion Item #1
         </TitleTemplate>
-        <Content>
+        <ChildContent>
             <b>This is the first item's accordion body.</b> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
-        </Content>
+        </ChildContent>
     </AccordionItem>
     <AccordionItem>
         <TitleTemplate>
             <Icon Name="IconName.PersonFill" Class="me-1" /> Accordion Item #2
         </TitleTemplate>
-        <Content>
+        <ChildContent>
             <b>This is the second item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
-        </Content>
+        </ChildContent>
     </AccordionItem>
     <AccordionItem>
         <TitleTemplate>
             <Icon Name="IconName.PhoneFill" Class="me-1" /> Accordion Item #3
         </TitleTemplate>
-        <Content>
+        <ChildContent>
             <b>This is the third item's accordion body.</b> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.
-        </Content>
+        </ChildContent>
     </AccordionItem>
 </Accordion>