Update to .NET 8.0 (#55)

.github/workflows/azure-static-web-apps-brave-stone-0645cc000.yml

@@ -18,6 +18,8 @@ jobs:
       - uses: actions/[email protected]
         with:
           submodules: true
+      - name: Install wasm-tools
+        run: dotnet workload install wasm-tools
       - name: Build And Deploy
         id: builddeploy
         uses: Azure/static-web-apps-deploy@v1

.github/workflows/codeql-analysis.yml

@@ -41,10 +41,10 @@ jobs:
     - name: 🛒 Checkout repository
       uses: actions/[email protected]
 
-    - name: ✨ Setup .NET 7.0
+    - name: ✨ Setup .NET 8.0
       uses: actions/setup-dotnet@v4
       with:
-        dotnet-version: 7.0.x
+        dotnet-version: 8.0.x
 
     # Initializes the CodeQL tools for scanning.
     - name: ✨ Initialize CodeQL

.github/workflows/deploy-to-ghpages.yml

@@ -10,7 +10,7 @@ on:
 
 env:
   CONFIGURATION: Release
-  DOTNET_CORE_VERSION: 7.0.x
+  DOTNET_VERSION: 8.0.x
   WORKING_DIRECTORY: TryAzureStaticBlazorApp
 
 jobs:
@@ -22,7 +22,9 @@ jobs:
     - name: ✨ Setup .NET
       uses: actions/setup-dotnet@v4
       with:
-        dotnet-version: ${{ env.DOTNET_CORE_VERSION }}
+        dotnet-version: ${{ env.DOTNET_VERSION }}
+    - name: ⚙️ Install wasm-tools
+      run: dotnet workload install wasm-tools
     - name: 🚚 Restore
       run: dotnet restore "${{ env.WORKING_DIRECTORY }}"
     - name: 🛠️ Build

README.md

@@ -12,12 +12,12 @@ Blazor wasm アプリを次のホスティングサービスへデプロイし
 * [Azure Static Web Apps (https://brave-stone-0645cc000.2.azurestaticapps.net/)](https://brave-stone-0645cc000.2.azurestaticapps.net/)
 * [GitHub Pages (https://maremare.github.io/try-deploy-blazor-wasm-app/)](https://maremare.github.io/try-deploy-blazor-wasm-app/)
 * [Cloudflare Pages (https://try-deploy-blazor-wasm-app.pages.dev/)](https://try-deploy-blazor-wasm-app.pages.dev/)
-  * [Cloudflare Pages (https://wasm2.trypage.tk/)](https://wasm2.trypage.tk/)
 
 ## 前提条件
 
 * Azure アカウント
 * GitHub アカウント
+* Cloudflare アカウント
 
 ## アプリケーションの作成
 
@@ -203,7 +203,7 @@ GitHub Pages へ発行するには次の調整が必要になるらしい。
 * `404.html` の追加
 
 この煩わしい調整を
-[NuGet Gallery \| PublishSPAforGitHubPages\.Build 2\.0\.1](https://www.nuget.org/packages/PublishSPAforGitHubPages.Build/#readme-body-tab) という素晴らしいパッケージを利用すると自動化してくれる。
+[NuGet Gallery \| PublishSPAforGitHubPages\.Build](https://www.nuget.org/packages/PublishSPAforGitHubPages.Build/#readme-body-tab) という素晴らしいパッケージを利用すると自動化してくれる。
 
 使い方は次の通り：
 1. `PublishSPAforGitHubPages.Build` Nuget パッケージ参照を追加
@@ -255,19 +255,21 @@ on:
 
 env:
   CONFIGURATION: Release
-  DOTNET_CORE_VERSION: 6.0.x
+  DOTNET_VERSION: 8.0.x
   WORKING_DIRECTORY: TryAzureStaticBlazorApp
 
 jobs:
   build-and-deploy:
     runs-on: ubuntu-latest
     steps:
     - name: 🛒 Checkout
-      uses: actions/checkout@master
-    - name: ✨ Setup .NET Core
-      uses: actions/setup-dotnet@v1
+      uses: actions/checkout@v4.1.1
+    - name: ✨ Setup .NET
+      uses: actions/setup-dotnet@v4
       with:
-        dotnet-version: ${{ env.DOTNET_CORE_VERSION }}
+        dotnet-version: ${{ env.DOTNET_VERSION }}
+    - name: ⚙️ Install wasm-tools
+      run: dotnet workload install wasm-tools
     - name: 🚚 Restore
       run: dotnet restore "${{ env.WORKING_DIRECTORY }}"
     - name: 🛠️ Build
@@ -297,15 +299,23 @@ deploy
     ```sh
     curl -sSL https://dot.net/v1/dotnet-install.sh > dotnet-install.sh;
     chmod +x dotnet-install.sh;
-    ./dotnet-install.sh -c 7.0 -InstallDir ./dotnet7;
-    ./dotnet7/dotnet --version;
-    ./dotnet7/dotnet publish "src/blazorwasm-standalone-singleOrg" -c Release -o output;
+    ./dotnet-install.sh -c 8.0 -InstallDir ./dotnet8;
+    ./dotnet8/dotnet --version;
+    ./dotnet8/dotnet workload install wasm-tools;
+    ./dotnet8/dotnet publish "TryAzureStaticBlazorApp" -c Release -o output;
     ```
   * ビルド出力ディレクトリ
     ```sh
     /output/wwwroot
     ```
 
+## Run Blazor Web Assembly locally
+* [natemcmaster/dotnet\-serve: Simple command\-line HTTPS server for the \.NET Core CLI](https://github.com/natemcmaster/dotnet-serve)
+  ```ps1
+  dotnet publish TryAzureStaticBlazorApp -c release -o publish
+  dotnet serve -o -S -p:7014 -b -d:publish/wwwroot
+  ```
+
 ## 参考サイト
 * [チュートリアル:Azure Static Web Apps での Blazor を使用した静的 Web アプリのビルド \| Microsoft Docs](https://docs.microsoft.com/ja-jp/azure/static-web-apps/deploy-blazor?WT.mc_id=-blog-scottha)
 * [Azure Static Web Apps with \.NET and Blazor \| ASP\.NET Blog](https://devblogs.microsoft.com/aspnet/azure-static-web-apps-with-blazor/)

TryAzureStaticBlazorApp/Shared/MainLayout.razor → TryAzureStaticBlazorApp/Layout/MainLayout.razor

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

TryAzureStaticBlazorApp/Shared/MainLayout.razor.css → TryAzureStaticBlazorApp/Layout/MainLayout.razor.css

@@ -37,11 +37,7 @@ main {
     }
 
 @media (max-width: 640.98px) {
-    .top-row:not(.auth) {
-        display: none;
-    }
-
-    .top-row.auth {
+    .top-row {
         justify-content: space-between;
     }
 

TryAzureStaticBlazorApp/Shared/NavMenu.razor → TryAzureStaticBlazorApp/Layout/NavMenu.razor

@@ -7,21 +7,21 @@
     </div>
 </div>
 
-<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
+<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
     <nav class="flex-column">
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
-                <span class="oi oi-home" aria-hidden="true"></span> Home
+                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
             </NavLink>
         </div>
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="counter">
-                <span class="oi oi-plus" aria-hidden="true"></span> Counter
+                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
             </NavLink>
         </div>
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="fetchdata">
-                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
+            <NavLink class="nav-link" href="weather">
+                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
             </NavLink>
         </div>
     </nav>

TryAzureStaticBlazorApp/Layout/NavMenu.razor.css

@@ -0,0 +1,83 @@
+.navbar-toggler {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+.top-row {
+    height: 3.5rem;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.navbar-brand {
+    font-size: 1.1rem;
+}
+
+.bi {
+    display: inline-block;
+    position: relative;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.75rem;
+    top: -1px;
+    background-size: cover;
+}
+
+.bi-house-door-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
+}
+
+.bi-plus-square-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
+}
+
+.bi-list-nested-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
+}
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+    .nav-item:first-of-type {
+        padding-top: 1rem;
+    }
+
+    .nav-item:last-of-type {
+        padding-bottom: 1rem;
+    }
+
+    .nav-item ::deep a {
+        color: #d7d7d7;
+        border-radius: 4px;
+        height: 3rem;
+        display: flex;
+        align-items: center;
+        line-height: 3rem;
+    }
+
+.nav-item ::deep a.active {
+    background-color: rgba(255,255,255,0.37);
+    color: white;
+}
+
+.nav-item ::deep a:hover {
+    background-color: rgba(255,255,255,0.1);
+    color: white;
+}
+
+@media (min-width: 641px) {
+    .navbar-toggler {
+        display: none;
+    }
+
+    .collapse {
+        /* Never collapse the sidebar for wide screens */
+        display: block;
+    }
+
+    .nav-scrollable {
+        /* Allow sidebar to scroll for tall menus */
+        height: calc(100vh - 3.5rem);
+        overflow-y: auto;
+    }
+}

TryAzureStaticBlazorApp/Pages/Home.razor

@@ -0,0 +1,7 @@
+@page "/"
+
+<PageTitle>Home</PageTitle>
+
+<h1>Hello, world!</h1>
+
+Welcome to your new app.

TryAzureStaticBlazorApp/Pages/FetchData.razor → TryAzureStaticBlazorApp/Pages/Weather.razor

@@ -1,9 +1,9 @@
-@page "/fetchdata"
+@page "/weather"
 @inject HttpClient Http
 
-<PageTitle>Weather forecast</PageTitle>
+<PageTitle>Weather</PageTitle>
 
-<h1>Weather forecast</h1>
+<h1>Weather</h1>
 
 <p>This component demonstrates fetching data from the server.</p>
 
@@ -46,7 +46,7 @@ else
 
     public class WeatherForecast
     {
-        public DateTime Date { get; set; }
+        public DateOnly Date { get; set; }
 
         public int TemperatureC { get; set; }
 

TryAzureStaticBlazorApp/Properties/launchSettings.json

@@ -1,19 +1,30 @@
 {
+  "$schema": "http://json.schemastore.org/launchsettings.json",
   "iisSettings": {
     "windowsAuthentication": false,
     "anonymousAuthentication": true,
     "iisExpress": {
-      "applicationUrl": "http://localhost:37435",
-      "sslPort": 44355
+      "applicationUrl": "http://localhost:36586",
+      "sslPort": 44334
     }
   },
   "profiles": {
-    "TryAzureStaticBlazorApp": {
+    "http": {
       "commandName": "Project",
       "dotnetRunMessages": true,
       "launchBrowser": true,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
-      "applicationUrl": "https://localhost:7169;http://localhost:5169",
+      "applicationUrl": "http://localhost:5025",
+      "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:7014;http://localhost:5025",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }