Getting started - Blazor WebAssembly (.NET 8) - demo updates (#24)

gvreddy04 · web-flow · commit 9425b1f9a921 · 2025-07-09T23:39:21.000+05:30
diff --git a/BlazorExpress.Bulma.Demo.RCL/BlazorExpress.Bulma.Demo.RCL.csproj b/BlazorExpress.Bulma.Demo.RCL/BlazorExpress.Bulma.Demo.RCL.csproj
@@ -6,6 +6,22 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
+  <ItemGroup>
+    <Compile Remove="Pages\Demos\GettingStarted\01_A_Manual_Install_05_Snippet.cs" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Content Remove="Pages\Demos\GettingStarted\01_A_Manual_Install_04_Snippet.razor" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Content Include="Pages\Demos\GettingStarted\01_A_Manual_Install_05_Snippet.cs" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <None Include="Pages\Demos\GettingStarted\01_A_Manual_Install_04_Snippet.razor" />
+  </ItemGroup>
+
   <ItemGroup>
     <SupportedPlatform Include="browser" />
   </ItemGroup>
@@ -24,7 +40,7 @@
     <ItemGroup>
       <EmbeddedResource Include="Pages\**\*Demo*.razor" />
       <EmbeddedResource Include="Pages\**\*Doc*.razor" />
-      <EmbeddedResource Include="Shared\**\*Snippet*" />
+      <EmbeddedResource Include="Pages\**\*Snippet*" />
     </ItemGroup>
   </Target>
 
diff --git a/BlazorExpress.Bulma.Demo.RCL/Extensions/EnumExtensions.cs b/BlazorExpress.Bulma.Demo.RCL/Extensions/EnumExtensions.cs
@@ -10,6 +10,8 @@ public static class EnumExtensions
         {
             LanguageCode.AspNet => "language-aspnet",
             LanguageCode.CSharp => "language-csharp",
+            LanguageCode.Css => "language-csharp",
+            LanguageCode.HTML => "language-html",
             LanguageCode.JavaScript => "language-js",
             LanguageCode.JSON => "language-json",
             LanguageCode.JSONP => "language-jsonp",
@@ -26,6 +28,8 @@ public static class EnumExtensions
         {
             LanguageCode.AspNet => "ASP.NET",
             LanguageCode.CSharp => "C#",
+            LanguageCode.Css => "CSS",
+            LanguageCode.HTML => "HTML",
             LanguageCode.JavaScript => "JS",
             LanguageCode.JSON => "Json",
             LanguageCode.JSONP => "Jsonp",
diff --git a/BlazorExpress.Bulma.Demo.RCL/Layout/BlogMainLayout.razor b/BlazorExpress.Bulma.Demo.RCL/Layout/BlogMainLayout.razor
@@ -49,7 +49,7 @@
             <Button Class="bi bi-box-arrow-right menu-toggle-button ml-1 mt-0 mb-1" @onclick="ToggleSidebarSection" />
             @Body
             <Notification Class="has-text-centered" Color="NotificationColor.Link" HideDeleteButton="true">
-                <a href="//github.com/BlazorExpress/BlazorExpress.Bulma" class="be-bulma-text-decoration-none">
+                <a href="@GithubUrl" class="be-bulma-text-decoration-none" target="_blank">
                     <i class="bi bi-star-fill"></i>
                     <span>If you like BlazorExpress.Bulma, give it a star on GitHub!</span>
                     <i class="bi bi-star-fill"></i>
diff --git a/BlazorExpress.Bulma.Demo.RCL/Layout/DemosMainLayout.razor b/BlazorExpress.Bulma.Demo.RCL/Layout/DemosMainLayout.razor
@@ -49,7 +49,7 @@
             <Button Class="bi bi-box-arrow-right menu-toggle-button ml-1 mt-0 mb-1" @onclick="ToggleSidebarSection" />
             @Body
             <Notification Class="has-text-centered" Color="NotificationColor.Link" HideDeleteButton="true">
-                <a href="//github.com/BlazorExpress/BlazorExpress.Bulma" class="be-bulma-text-decoration-none">
+                <a href="@GithubUrl" class="be-bulma-text-decoration-none" target="_blank">
                     <i class="bi bi-star-fill"></i>
                     <span>If you like BlazorExpress.Bulma, give it a star on GitHub!</span>
                     <i class="bi bi-star-fill"></i>
diff --git a/BlazorExpress.Bulma.Demo.RCL/Layout/DocsMainLayout.razor b/BlazorExpress.Bulma.Demo.RCL/Layout/DocsMainLayout.razor
@@ -49,7 +49,7 @@
             <Button Class="bi bi-box-arrow-right menu-toggle-button ml-1 mt-0 mb-1" @onclick="ToggleSidebarSection" />
             @Body
             <Notification Class="has-text-centered mt-3" Color="NotificationColor.Link" HideDeleteButton="true">
-                <a href="//github.com/BlazorExpress/BlazorExpress.Bulma" class="be-bulma-text-decoration-none">
+                <a href="@GithubUrl" class="be-bulma-text-decoration-none" target="_blank">
                     <i class="bi bi-star-fill"></i>
                     <span>If you like BlazorExpress.Bulma, give it a star on GitHub!</span>
                     <i class="bi bi-star-fill"></i>
diff --git a/BlazorExpress.Bulma.Demo.RCL/Layout/MainLayout.razor b/BlazorExpress.Bulma.Demo.RCL/Layout/MainLayout.razor
@@ -11,7 +11,7 @@
         @Body
         <div class="container is-max-desktop mb-4">
             <Notification Class="has-text-centered" Color="NotificationColor.Link" HideDeleteButton="true">
-                <a href="//github.com/BlazorExpress/BlazorExpress.Bulma" class="be-bulma-text-decoration-none">
+                <a href="@GithubUrl" class="be-bulma-text-decoration-none" target="_blank">
                     <i class="bi bi-star-fill"></i>
                     <span>If you like BlazorExpress.Bulma, give it a star on GitHub!</span>
                     <i class="bi bi-star-fill"></i>
diff --git a/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/01_A_Manual_Install_01_Snippet.razor b/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/01_A_Manual_Install_01_Snippet.razor
@@ -0,0 +1 @@
+dotnet add package BlazorExpress.Bulma
diff --git a/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/01_A_Manual_Install_02_Snippet.html b/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/01_A_Manual_Install_02_Snippet.html
@@ -0,0 +1,2 @@
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
+<link rel="stylesheet" href="_content/BlazorExpress.Bulma/css/blazorexpress.bulma.css">
diff --git a/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/01_A_Manual_Install_03_Snippet.html b/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/01_A_Manual_Install_03_Snippet.html
@@ -0,0 +1 @@
+<script src="_content/BlazorExpress.Bulma/js/blazorexpress.bulma.js"></script>
diff --git a/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/01_A_Manual_Install_04_Snippet.razor b/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/01_A_Manual_Install_04_Snippet.razor
@@ -0,0 +1 @@
+﻿@using BlazorExpress.Bulma
diff --git a/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/01_A_Manual_Install_05_Snippet.cs b/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/01_A_Manual_Install_05_Snippet.cs
@@ -0,0 +1,10 @@
+﻿// Program.cs
+using BlazorExpress.Bulma;
+
+var builder = WebAssemblyHostBuilder.CreateDefault(args);
+// ... your existing setup
+
+// Register BlazorExpress.Bulma services (if required)
+builder.Services.AddBlazorExpressBulma();
+
+await builder.Build().RunAsync();
diff --git a/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/01_A_Manual_Install_06_Snippet.razor b/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/01_A_Manual_Install_06_Snippet.razor
@@ -0,0 +1 @@
+﻿<Button Color="ButtonColor.Primary">Hello Bulma!</Button>
diff --git a/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/GettingStartedDocumentation.razor b/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/GettingStartedDocumentation.razor
@@ -28,22 +28,22 @@
                     <tr>
                         <td>1</td>
                         <td>.NET 8</td>
-                        <td><a href="/demos/getting-started/blazor-webassembly-net-8" target="_blank">Blazor WebAssembly (.NET 8)</a></td>
+                        <td><a href="/demos/getting-started/blazor-webassembly-net-8">Blazor WebAssembly (.NET 8)</a></td>
                     </tr>
                     <tr>
                         <td>2</td>
                         <td>.NET 8</td>
-                        <td><a href="/demos/getting-started/blazor-webapp-server-global-net-8" target="_blank">Blazor WebApp (.NET 8) - Interactive render mode Server - Global location</a></td>
+                        <td><a href="/demos/getting-started/blazor-webapp-server-global-net-8">Blazor WebApp (.NET 8) - Interactive render mode Server - Global location</a></td>
                     </tr>
                     <tr>
                         <td>3</td>
                         <td>.NET 8</td>
-                        <td><a href="/demos/getting-started/blazor-webapp-auto-global-net-8" target="_blank">Blazor WebApp (.NET 8) - Interactive render mode Auto - Global location</a></td>
+                        <td><a href="/demos/getting-started/blazor-webapp-auto-global-net-8">Blazor WebApp (.NET 8) - Interactive render mode Auto - Global location</a></td>
                     </tr>
                     <tr>
                         <td>4</td>
                         <td>.NET 8</td>
-                        <td><a href="/demos/getting-started/maui-blazor-net-8" target="_blank">MAUI Blazor Hybrid App (.NET 8)</a></td>
+                        <td><a href="/demos/getting-started/maui-blazor-net-8">MAUI Blazor Hybrid App (.NET 8)</a></td>
                     </tr>
                 </tbody>
             </table>
diff --git a/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/GettingStarted_01_NET_8_WebAssembly_Documentation.razor b/BlazorExpress.Bulma.Demo.RCL/Pages/Demos/GettingStarted/GettingStarted_01_NET_8_WebAssembly_Documentation.razor
@@ -21,16 +21,8 @@
     <ol>
         <li>
             <b>Install the template:</b>
-            <pre><code>dotnet new install BlazorExpress.Bulma.Templates</code></pre>
-        </li>
-        <li>
-            <b>Create a new project:</b>
-            <pre><code>dotnet new blazorexpress-bulma -n MyBlazorApp</code></pre>
-        </li>
-        <li>
-            <b>Run your app:</b>
-            <pre><code>cd MyBlazorApp
-dotnet run</code></pre>
+            <br />
+            <p>TODO: Update the instructions</p>
         </li>
     </ol>
     <p>
@@ -41,39 +33,23 @@ dotnet run</code></pre>
     <ol>
         <li>
             <b>Add the NuGet package:</b>
-            <pre><code>dotnet add package BlazorExpress.Bulma</code></pre>
+            <CodeChunk Class="mt-3" LanguageCode="LanguageCode.Text" FilePath="~\Pages\Demos\GettingStarted\01_A_Manual_Install_01_Snippet.razor" />
         </li>
         <li>
             <b>Add Bulma and BlazorExpress.Bulma CSS to <code>wwwroot/index.html</code>:</b>
-            <pre><code>&lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css"&gt;
-&lt;link rel="stylesheet" href="_content/BlazorExpress.Bulma/css/blazorexpress.bulma.css"&gt;
-</code></pre>
+            <CodeChunk Class="mt-3" LanguageCode="LanguageCode.HTML" FilePath="~\Pages\Demos\GettingStarted\01_A_Manual_Install_02_Snippet.html" />
         </li>
         <li>
             <b>Add BlazorExpress.Bulma JS to <code>wwwroot/index.html</code>:</b>
-            <pre><code>&lt;script src="_content/BlazorExpress.Bulma/js/blazorexpress.bulma.js"&gt;&lt;/script&gt;
-</code></pre>
+            <CodeChunk Class="mt-3" LanguageCode="LanguageCode.HTML" FilePath="~\Pages\Demos\GettingStarted\01_A_Manual_Install_03_Snippet.html" />
         </li>
         <li>
             <b>Add <code>@@using BlazorExpress.Bulma</code> to <code>_Imports.razor</code>:</b>
-            <pre><code>
-@using BlazorExpress.Bulma
-            </code></pre>
+            <CodeChunk Class="mt-3" LanguageCode="LanguageCode.Razor" FilePath="~\Pages\Demos\GettingStarted\01_A_Manual_Install_04_Snippet.razor" />
         </li>
         <li>
             <b>Register services in <code>Program.cs</code> (if required):</b>
-            <pre><code class="language-csharp">
-// Program.cs
-using BlazorExpress.Bulma;
-
-var builder = WebAssemblyHostBuilder.CreateDefault(args);
-// ... your existing setup
-
-// Register BlazorExpress.Bulma services (if required)
-builder.Services.AddBlazorExpressBulma();
-
-await builder.Build().RunAsync();
-            </code></pre>
+            <CodeChunk Class="mt-3" LanguageCode="LanguageCode.CSharp" FilePath="~\Pages\Demos\GettingStarted\01_A_Manual_Install_05_Snippet.cs" />
             <p>
                 <b>Note:</b> If <code>AddBlazorExpressBulma()</code> is not available, check the <a href="https://github.com/BlazorExpress/BlazorExpress.Bulma" target="_blank">official documentation</a> for the latest setup instructions.
             </p>
@@ -82,11 +58,9 @@ await builder.Build().RunAsync();
 
     <h2>3. Usage Example</h2>
     <p>
-        Add a Bulma component to <code>Pages/Index.razor</code>:
+        Add a Bulma component to <code>Pages/Home.razor</code>:
     </p>
-    <pre><code>
-&lt;Button Color="ButtonColor.Primary"&gt;Hello Bulma!&lt;/Button&gt;
-    </code></pre>
+    <CodeChunk Class="mt-3" LanguageCode="LanguageCode.Razor" FilePath="~\Pages\Demos\GettingStarted\01_A_Manual_Install_06_Snippet.razor" />
 
     <h2>4. Troubleshooting</h2>
     <ul>
diff --git a/BlazorExpress.Bulma.Demo.RCL/Shared/CodeChunk.razor b/BlazorExpress.Bulma.Demo.RCL/Shared/CodeChunk.razor
@@ -0,0 +1,55 @@
+@namespace BlazorExpress.Bulma.Demo.RCL
+@inherits BulmaComponentBase
+
+<div @ref="@Element"
+     id="@Id"
+     class="@ClassNames"
+     style="@StyleNames"
+     @attributes="@AdditionalAttributes">
+
+    @if (true)
+    {
+        @* <div class="be-bulma-doc-example-demo">
+            <DynamicComponent Type="this.Type" />
+        </div> *@
+        <div class="be-bulma-doc-example-toolbar is-flex is-justify-content-space-between">
+            <div class="pl-4 py-2">@LanguageCode.ToLanguageName()?.ToUpperInvariant()</div>
+            <div class="pr-4 py-2"><i class="@clipboardTooltipIconName" role="button" @onclick="CopyToClipboardAsync"></i></div>
+        </div>
+        <div class="be-bulma-doc-example-snippet">
+            <pre>
+                <code class="@LanguageCode.ToLanguageCssClass()">
+                    @if (snippet is not null)
+                    {
+                        <text>@snippet</text>
+                    }
+                </code>
+            </pre>
+        </div>
+    }
+    else
+    {
+        @* <Tabs>
+            <Tab Title="Example">
+                <div class="be-bulma-doc-example-demo">
+                    <DynamicComponent Type="this.Type" />
+                </div>
+            </Tab>
+            <Tab Title="View Source">
+                <div class="be-bulma-doc-example-snippet">
+                    <div class="pr-4 py-2 be-bulma-doc-float-end">
+                        <i class="@clipboardTooltipIconName" role="button" @onclick="CopyToClipboardAsync"></i>
+                    </div>
+                    <pre>
+                        <code class="@LanguageCode.ToLanguageCssClass()">
+                            @if (codeSnippet is not null)
+                            {
+                                <text>@codeSnippet</text>
+                            }
+                        </code>
+                    </pre>
+                </div>
+            </Tab>
+        </Tabs> *@
+    }
+</div>
diff --git a/BlazorExpress.Bulma.Demo.RCL/Shared/CodeChunk.razor.cs b/BlazorExpress.Bulma.Demo.RCL/Shared/CodeChunk.razor.cs
@@ -0,0 +1,116 @@
+﻿namespace BlazorExpress.Bulma.Demo.RCL;
+
+public partial class CodeChunk : BulmaComponentBase
+{
+    #region Fields and Constants
+
+    private string? clipboardTooltipTitle = "Copy to clipboard";
+
+    private string? clipboardTooltipIconName = "bi bi-clipboard";
+
+    private string? snippet;
+
+    private float snippetWidth;
+
+    /// <summary>
+    /// A reference to this component instance for use in JavaScript calls.
+    /// </summary>
+    private DotNetObjectReference<CodeChunk> objRef = default!;
+
+    #endregion
+
+    #region Methods
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender && !IsFirstRenderComplete)
+        {
+            await JSRuntime.InvokeVoidAsync("highlightCode");
+        }
+
+        await base.OnAfterRenderAsync(firstRender);
+    }
+
+    protected override async Task OnInitializedAsync()
+    {
+        objRef ??= DotNetObjectReference.Create(this);
+        await base.OnInitializedAsync();
+    }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        if (snippet is not null)
+            return;
+
+        if (string.IsNullOrWhiteSpace(FilePath))
+            return;
+
+        var resourceName = FilePath.Replace("~", typeof(CodeChunk).Assembly.GetName().Name).Replace("/", ".").Replace("\\", ".");
+
+        using (var stream = typeof(CodeChunk).Assembly.GetManifestResourceStream(resourceName)!)
+        {
+            try
+            {
+                if (stream is null)
+                    return;
+
+                using (var reader = new StreamReader(stream))
+                {
+                    snippet = await reader.ReadToEndAsync();
+                }
+            }
+            catch (Exception ex)
+            {
+                Console.WriteLine(ex.Message);
+            }
+        }
+    }
+
+    /// <summary>
+    /// Handles a copy error event from JavaScript.
+    /// </summary>
+    /// <param name="errorMessage">The error message.</param>
+    [JSInvokable]
+    public void OnCopyFailJS(string errorMessage)
+    {
+        // TODO: show message
+    }
+
+    /// <summary>
+    /// Handles a copy success event from JavaScript.
+    /// </summary>
+    [JSInvokable]
+    public void OnCopySuccessJS()
+    {
+        clipboardTooltipTitle = "Copied!";
+        clipboardTooltipIconName = "bi bi-check2 has-text-primary";
+        StateHasChanged();
+    }
+
+    /// <summary>
+    /// Handles a copy status reset event from JavaScript.
+    /// </summary>
+    [JSInvokable]
+    public void ResetCopyStatusJS()
+    {
+        clipboardTooltipTitle = "Copy to clipboard";
+        clipboardTooltipIconName = "bi bi-clipboard";
+        StateHasChanged();
+    }
+
+    private async Task CopyToClipboardAsync()
+        => await JSRuntime.InvokeVoidAsync("copyToClipboard", snippet, objRef);
+
+    #endregion
+
+    #region Properties, Indexers
+
+    protected override string? ClassNames
+        => BuildClassNames(Class, ("be-bulma-doc-example", true));
+
+    [Parameter] public LanguageCode LanguageCode { get; set; } = LanguageCode.Razor;
+
+    [Parameter] public string? FilePath { get; set; }
+
+    #endregion
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">`
	`2`	`+<link rel="stylesheet" href="_content/BlazorExpress.Bulma/css/blazorexpress.bulma.css">`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+<script src="_content/BlazorExpress.Bulma/js/blazorexpress.bulma.js"></script>`