Replace the sample project

- from Razor Class Lib to Stand Alone Blazor Wasm app.

.github/workflows/gh-pages.yml

@@ -10,20 +10,20 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       # Checkout the code
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       # Install .NET SDK
       - name: Setup .NET SDK
-        uses: actions/setup-dotnet@v3
+        uses: actions/setup-dotnet@v4
         with:
-           dotnet-version: '8.0.x'
-           dotnet-quality: 'preview'
+          dotnet-version: "8.0.x"
+          dotnet-quality: "preview"
       - name: Install .NET WebAssembly Tools
         run: dotnet workload install wasm-tools
 
       # Publish the site
       - name: Publish
-        run: dotnet publish Samples/MyRazorClassLib/MyRazorClassLib.Stories/MyRazorClassLib.Stories.csproj -c Release -o public -p GHPages=true
+        run: dotnet publish Samples/MyBlazorWasmApp1/MyBlazorWasmApp1.Stories/MyBlazorWasmApp1.Stories.csproj -c Release -o public -p GHPages=true
 
       # Deploy the site
       - name: Deploy

Samples/MyBlazorWasmApp1/MyBlazorWasmApp1.Stories/App.razor

@@ -0,0 +1,4 @@
+<BlazingStoryApp Assemblies="[typeof(App).Assembly]"
+                 DefaultLayout="typeof(DefaultLayout)"
+                 EnableHotReloading="true">
+</BlazingStoryApp>

Samples/MyRazorClassLib/MyRazorClassLib.Stories/MyRazorClassLib.Stories.csproj → Samples/MyBlazorWasmApp1/MyBlazorWasmApp1.Stories/MyBlazorWasmApp1.Stories.csproj

@@ -1,23 +1,23 @@
-<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
     <TargetFramework>net8.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
-    <NoWarn>$(NoWarn);1591</NoWarn>
-    <DocumentationFile>bin\$(Configuration)\$(TargetFramework)\$(MSBuildProjectName).xml</DocumentationFile>
-    <BlazorEnableCompression>true</BlazorEnableCompression>
+    <GenerateDocumentationFile>True</GenerateDocumentationFile>
+    <InvariantGlobalization>true</InvariantGlobalization>
+    <BlazorEnableTimeZoneSupport>false</BlazorEnableTimeZoneSupport>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="BlazingStory" Version="1.0.0-preview.28" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.2" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.2" PrivateAssets="all" />
+    <PackageReference Include="BlazingStory" Version="1.0.0-preview.31" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.3" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.3" PrivateAssets="all" />
     <PackageReference Include="PublishSPAforGitHubPages.Build" Version="2.1.1" />
   </ItemGroup>
 
   <ItemGroup>
-    <ProjectReference Include="..\MyRazorClassLib\MyRazorClassLib.csproj" />
+    <ProjectReference Include="..\MyBlazorWasmApp1\MyBlazorWasmApp1.csproj" />
   </ItemGroup>
 
 </Project>

Samples/MyRazorClassLib/MyRazorClassLib.Stories/Program.cs → Samples/MyBlazorWasmApp1/MyBlazorWasmApp1.Stories/Program.cs

@@ -1,6 +1,6 @@
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
-using MyRazorClassLib.Stories;
+using MyBlazorWasmApp1.Stories;
 
 var builder = WebAssemblyHostBuilder.CreateDefault(args);
 builder.RootComponents.Add<App>("#app");

Samples/MyRazorClassLib/MyRazorClassLib.Stories/Properties/launchSettings.json → Samples/MyBlazorWasmApp1/MyBlazorWasmApp1.Stories/Properties/launchSettings.json

@@ -3,17 +3,27 @@
     "windowsAuthentication": false,
     "anonymousAuthentication": true,
     "iisExpress": {
-      "applicationUrl": "http://localhost:7174/",
-      "sslPort": 44393
+      "applicationUrl": "http://localhost:46855/",
+      "sslPort": 44389
     }
   },
   "profiles": {
-    "MyRazorClassLib.Stories": {
+    "http": {
       "commandName": "Project",
       "dotnetRunMessages": true,
       "launchBrowser": true,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "https://localhost:7082;http://localhost:5125",
+      "applicationUrl": "http://localhost:5134",
+      "environmentVariables": {
+        "ASPNETCORE_ENVIRONMENT": "Development"
+      }
+    },
+    "https": {
+      "commandName": "Project",
+      "dotnetRunMessages": true,
+      "launchBrowser": true,
+      "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
+      "applicationUrl": "https://localhost:7115;http://localhost:5134",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

Samples/MyBlazorWasmApp1/MyBlazorWasmApp1.Stories/Shared/DefaultLayout.razor

@@ -0,0 +1,3 @@
+@inherits LayoutComponentBase
+@* See also: https://github.com/jsakamoto/BlazingStory#%EF%B8%8F-configure-layouts *@
+@Body

Samples/MyRazorClassLib/MyRazorClassLib.Stories/_Imports.razor → Samples/MyBlazorWasmApp1/MyBlazorWasmApp1.Stories/_Imports.razor

@@ -8,5 +8,8 @@
 @using Microsoft.JSInterop
 @using BlazingStory.Components
 @using BlazingStory.Types
-@using MyRazorClassLib.Components
-@using MyRazorClassLib.Stories
+@using MyBlazorWasmApp1.Components
+@using MyBlazorWasmApp1.Stories
+@using MyBlazorWasmApp1.Stories.Shared
+@using MyBlazorWasmApp1.Stories.Stories
+

Samples/MyRazorClassLib/MyRazorClassLib.Stories/wwwroot/iframe.html → Samples/MyBlazorWasmApp1/MyBlazorWasmApp1.Stories/wwwroot/iframe.html

@@ -4,10 +4,15 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>MyRazorClassLib.Stories</title>
+    <title>MyBlazorWasmApp1.Stories</title>
     <base href="/" />
+    <!--
+    If you need to add <link> or <script> elements to include CSS or JavaScript files 
+    for canvas views of your Stories, 
+    YOU SHOULD PLACE THEM HERE, not in the "index.html" file.
+    -->
     <link rel="stylesheet" href="css/blazor-ui.css" />
-    <link rel="stylesheet" href="MyRazorClassLib.Stories.styles.css" />
+    <link rel="stylesheet" href="MyBlazorWasmApp1.Stories.styles.css" />
 </head>
 
 <body>
@@ -19,6 +24,11 @@
         <a href="" class="reload">Reload</a>
         <a class="dismiss">🗙</a>
     </div>
+
+    <!--
+    If you need to add <script> elements to include JavaScript files for canvas views of your Stories, 
+    YOU SHOULD PLACE THEM HERE, not in the "index.html" file.
+    -->
     <script src="_framework/blazor.webassembly.js"></script>
 </body>
 

Samples/MyRazorClassLib/MyRazorClassLib.Stories/wwwroot/index.html → Samples/MyBlazorWasmApp1/MyBlazorWasmApp1.Stories/wwwroot/index.html

@@ -1,19 +1,16 @@
 <!DOCTYPE html>
 <html lang="en">
 
-<head prefix="og:http://ogp.me/ns#">
+<head>
     <meta charset="utf-8" />
-    <meta property="og:url" content="https://jsakamoto.github.io/BlazingStory/" />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="Blazing Story - Live Demonstration" />
-    <meta property="og:description" content='"Blazing Story", the clone of "Storybook" for Blazor, a frontend workshop for building UI components and pages in isolation.' />
-    <meta property="og:site_name" content="Blazing Story - Live Demonstration" />
-    <meta property="og:image" content="https://jsakamoto.github.io/BlazingStory/images/social-preview.png" />
-    <meta name="twitter:card" content="summary_large_image" />
-
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Blazing Story - Live Demonstration</title>
+    <title>MyBlazorWasmApp1.Stories</title>
     <base href="/" />
+    <!--
+    If you need to add <link> or <script> elements to include CSS or JavaScript files 
+    for canvas views of your Stories, 
+    YOU SHOULD DO THAT IN THE "iframe.html" FILE, NOT HERE.
+    -->
     <link rel="stylesheet" href="css/blazor-ui.css" />
 </head>
 
@@ -34,6 +31,11 @@
         <a href="" class="reload">Reload</a>
         <a class="dismiss">🗙</a>
     </div>
+
+    <!--
+    If you need to add <script> elements to include JavaScript files for canvas views of your Stories, 
+    YOU SHOULD DO THAT IN THE "iframe.html" FILE, NOT HERE.
+    -->
     <script src="_framework/blazor.webassembly.js"></script>
 </body>
 

Samples/MyBlazorWasmApp1/MyBlazorWasmApp1.sln

@@ -0,0 +1,31 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 17
+VisualStudioVersion = 17.10.34707.107
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MyBlazorWasmApp1", "MyBlazorWasmApp1\MyBlazorWasmApp1.csproj", "{9EC9C26C-22C5-4128-B100-AA5023FB0045}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MyBlazorWasmApp1.Stories", "MyBlazorWasmApp1.Stories\MyBlazorWasmApp1.Stories.csproj", "{5CC24B2C-F708-43FF-808D-112F8D38A669}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{9EC9C26C-22C5-4128-B100-AA5023FB0045}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{9EC9C26C-22C5-4128-B100-AA5023FB0045}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{9EC9C26C-22C5-4128-B100-AA5023FB0045}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{9EC9C26C-22C5-4128-B100-AA5023FB0045}.Release|Any CPU.Build.0 = Release|Any CPU
+		{5CC24B2C-F708-43FF-808D-112F8D38A669}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{5CC24B2C-F708-43FF-808D-112F8D38A669}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{5CC24B2C-F708-43FF-808D-112F8D38A669}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{5CC24B2C-F708-43FF-808D-112F8D38A669}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {C6CB1969-2368-4874-9A53-8B33CBDFFD25}
+	EndGlobalSection
+EndGlobal

Samples/MyBlazorWasmApp1/MyBlazorWasmApp1/App.razor

@@ -0,0 +1,12 @@
+<Router AppAssembly="@typeof(App).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
+    </Found>
+    <NotFound>
+        <PageTitle>Not found</PageTitle>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <p role="alert">Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>

Samples/MyRazorClassLib/MyRazorClassLib/Components/Button.razor → Samples/MyBlazorWasmApp1/MyBlazorWasmApp1/Components/Button.razor

@@ -1,4 +1,4 @@
-<button type="button" class="@this.GetCssClasses()" style="@this.GetStyles()" @attributes="this.Attributes">
+<button type="button" class="@this.GetCssClasses()" style="@this.GetStyles()" @attributes="this.Attributes" @onclick="OnClick">
     @this.Label
 </button>
 
@@ -32,7 +32,7 @@
     /// Optional click handler
     /// </summary>
     [Parameter]
-    public EventCallback OnClick { get; set; }
+    public EventCallback<MouseEventArgs> OnClick { get; set; }
 
     [Parameter(CaptureUnmatchedValues = true)]
     public Dictionary<string, object>? Attributes { get; set; }

Samples/MyRazorClassLib/MyRazorClassLib/Components/Button.razor.cs → Samples/MyBlazorWasmApp1/MyBlazorWasmApp1/Components/Button.razor.cs

@@ -1,4 +1,4 @@
-namespace MyRazorClassLib.Components;
+namespace MyBlazorWasmApp1.Components;
 
 /// <summary>
 /// This is basic button component.

Samples/MyRazorClassLib/MyRazorClassLib/Components/Button.razor.css → Samples/MyBlazorWasmApp1/MyBlazorWasmApp1/Components/Button.razor.css

@@ -15,7 +15,7 @@
 
 .blazingstory-button--secondary {
     color: #333;
-    background-color: transparent;
+    background-color: #f4f4f4;
     box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
 }
 

Samples/MyBlazorWasmApp1/MyBlazorWasmApp1/Components/ButtonSize.cs

@@ -0,0 +1,22 @@
+namespace MyBlazorWasmApp1.Components;
+
+/// <summary>
+/// Represents the size of a button.
+/// </summary>
+public enum ButtonSize
+{
+    /// <summary>
+    /// Small button size.
+    /// </summary>
+    Small,
+
+    /// <summary>
+    /// Medium button size.
+    /// </summary>
+    Medium,
+
+    /// <summary>
+    /// Large button size.
+    /// </summary>
+    Large
+}

Samples/MyRazorClassLib/MyRazorClassLib/Components/Rating.razor.cs → Samples/MyBlazorWasmApp1/MyBlazorWasmApp1/Components/Rating.razor.cs

@@ -1,4 +1,4 @@
-namespace MyRazorClassLib.Components;
+namespace MyBlazorWasmApp1.Components;
 
 /// <summary>
 /// The rating component helps gather user feedback on products/services.

Samples/MyBlazorWasmApp1/MyBlazorWasmApp1/Layout/MainLayout.razor

@@ -0,0 +1,16 @@
+@inherits LayoutComponentBase
+<div class="page">
+    <div class="sidebar">
+        <NavMenu />
+    </div>
+
+    <main>
+        <div class="top-row px-4">
+            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+        </div>
+
+        <article class="content px-4">
+            @Body
+        </article>
+    </main>
+</div>

Samples/MyBlazorWasmApp1/MyBlazorWasmApp1/Layout/MainLayout.razor.css

@@ -0,0 +1,77 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        white-space: nowrap;
+        margin-left: 1.5rem;
+        text-decoration: none;
+    }
+
+    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+        text-decoration: underline;
+    }
+
+    .top-row ::deep a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+@media (max-width: 640.98px) {
+    .top-row {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}