Update app to .NET 8.0.2 (#28)

* Update app to .NET 8.0.2 - Update DevContainer settings - Update Blazor WASM app using .NET 8.0.2 * Update DevContainer settings - Replace tabs to spaces in JSON * Update typos - Fix #24 #19
github-education-resources · Feb 28, 2024 · 64baa92 · 64baa92
1 parent cb0cc1b
commit 64baa92
Show file tree

Hide file tree

Showing 20 changed files with 173 additions and 115 deletions.
diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile
@@ -1,5 +1,5 @@
 # [Choice] .NET version: 7.0, 7.0-bullseye-slim, 7.0-jammy, 6.0, 6.0-bullseye-slim, 6.0-jammy, 6.0-focal
-ARG VARIANT="7.0-jammy"
+ARG VARIANT="8.0-jammy"
 FROM mcr.microsoft.com/dotnet/sdk:${VARIANT}
 
 # [Optional] Uncomment this section to install additional OS packages.

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
@@ -5,23 +5,29 @@
     "dockerfile": "./Dockerfile",
     "context": ".",
     "args": {
-      // version: 7.0, 7.0-bullseye-slim, 7.0-jammy, 6.0, 6.0-bullseye-slim, 6.0-jammy, 6.0-focal
-      "VARIANT": "7.0"
+      "VARIANT": "8.0-jammy"
     }
   },
 
   // Use 'forwardPorts' to make a list of ports inside the container available locally.
   "forwardPorts": [
-    // ASP.NET Core Web/API App, Blazor App
+    // ASP.NET Blazor App
     5000, 5001,
     // Azure Static Web Apps
     4280
   ],
 
   "features": {
+    // .NET SDK
+    "ghcr.io/devcontainers/features/dotnet:latest": {
+      "version": "6.0",
+      "additionalVersions": "7.0"
+    },
+
     // Azure CLI
     "ghcr.io/devcontainers/features/azure-cli:latest": {
-      "version": "latest"
+      "version": "latest",
+      "extensions": "account,alias,deploy-to-azure,functionapp,staticwebapp,subscription,webapp"
     },
 
     // GitHub CLI
@@ -31,7 +37,6 @@
 
     // node.js
     "ghcr.io/devcontainers/features/node:latest": {
-      // version: 'latest', 'lts', '18', '16', '14'
       "version": "lts",
       "nodeGypDependencies": true,
       "nvmInstallPath": "/usr/local/share/nvm"
@@ -58,14 +63,13 @@
     "vscode": {
       // Add the IDs of extensions you want installed when the container is created.
       "extensions": [
-    	  "GitHub.copilot",
-    	  "GitHub.copilot-chat",
-    	  "GitHub.copilot-labs",
-        "ms-dotnettools.csharp",
-    	  "ms-vscode.PowerShell",
-    	  "ms-vscode.vscode-node-azure-pack",
-    	  "VisualStudioExptTeam.vscodeintellicode"
-    	],
+        "GitHub.copilot",
+        "GitHub.copilot-chat",
+        "ms-dotnettools.csdevkit",
+        "ms-vscode.PowerShell",
+        "ms-vscode.vscode-node-azure-pack",
+        "VisualStudioExptTeam.vscodeintellicode"
+      ],
       "settings": {
         // Uncomment if you want to disable the minimap view
         // "editor.minimap.enabled": false,

diff --git a/.devcontainer/on-create.sh b/.devcontainer/on-create.sh
@@ -19,25 +19,7 @@ dotnet restore && dotnet build
 # Uncomment the below to install Azure Static Web Apps CLI. Make sure you have installed node.js
 npm install -g @azure/static-web-apps-cli
 
-## GitHub Copilot CLI ##
-npm install -g @githubnext/github-copilot-cli
-eval "$(github-copilot-cli alias -- "$0")"
-
 ## OH-MY-POSH ##
 # Uncomment the below to install oh-my-posh
 sudo wget https://github.com/JanDeDobbeleer/oh-my-posh/releases/latest/download/posh-linux-amd64 -O /usr/local/bin/oh-my-posh
 sudo chmod +x /usr/local/bin/oh-my-posh
-
-## Add GitHub Copilot CLI alias to .zshrc
-echo '
-# Add GitHub Copilot CLI alias to .zshrc
-alias ghcp='github-copilot-cli'
-eval "$(github-copilot-cli alias -- "$0")"
-' >> $HOME/.zshrc
-
-## Add GitHub Copilot CLI alias to .bashrc
-echo '
-# Add GitHub Copilot CLI alias to .bashrc
-alias ghcp='github-copilot-cli'
-eval "$(github-copilot-cli alias -- "$0")"
-' >> $HOME/.bashrc
diff --git a/MyPortfolio.sln b/MyPortfolio.sln
@@ -5,23 +5,23 @@ VisualStudioVersion = 17.0.31903.59
 MinimumVisualStudioVersion = 10.0.40219.1
 Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "src", "src", "{555ADF87-3BD5-49F1-91D2-052D7FEAEF60}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorApp", "src\BlazorApp\BlazorApp.csproj", "{0E4E8348-79E0-4BC2-8611-6AABAC95F1A3}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorApp", "src\BlazorApp\BlazorApp.csproj", "{024FE23B-7509-45FE-824D-5B884F91DEA3}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
 		Release|Any CPU = Release|Any CPU
 	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{024FE23B-7509-45FE-824D-5B884F91DEA3}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{024FE23B-7509-45FE-824D-5B884F91DEA3}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{024FE23B-7509-45FE-824D-5B884F91DEA3}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{024FE23B-7509-45FE-824D-5B884F91DEA3}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
 	GlobalSection(SolutionProperties) = preSolution
 		HideSolutionNode = FALSE
 	EndGlobalSection
-	GlobalSection(ProjectConfigurationPlatforms) = postSolution
-		{0E4E8348-79E0-4BC2-8611-6AABAC95F1A3}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
-		{0E4E8348-79E0-4BC2-8611-6AABAC95F1A3}.Debug|Any CPU.Build.0 = Debug|Any CPU
-		{0E4E8348-79E0-4BC2-8611-6AABAC95F1A3}.Release|Any CPU.ActiveCfg = Release|Any CPU
-		{0E4E8348-79E0-4BC2-8611-6AABAC95F1A3}.Release|Any CPU.Build.0 = Release|Any CPU
-	EndGlobalSection
 	GlobalSection(NestedProjects) = preSolution
-		{0E4E8348-79E0-4BC2-8611-6AABAC95F1A3} = {555ADF87-3BD5-49F1-91D2-052D7FEAEF60}
+		{024FE23B-7509-45FE-824D-5B884F91DEA3} = {555ADF87-3BD5-49F1-91D2-052D7FEAEF60}
 	EndGlobalSection
 EndGlobal
diff --git a/README.md b/README.md
@@ -6,10 +6,10 @@ _Create, customize and deploy your own portfolio website in minutes._ ✨
 
 In this template repository we have the development environment and base set and ready to go. So that you can immediately launch the Codespaces to customize with no setup.
 
-* **Who is this for?** __Anyone__ looking to create a portfolio site, learn web development, or test out Codespaces.
-* **How much experience do you need?** __Zero__. You decide how much you want to customize based on your experience, and time available.
-* **Tools needed:** _None_. No need to install anything! All you need is a web browser.
-* **Prerequisites:** _None_. This template includes your development environment and deployable web app for you to create your own site.
+- **Who is this for?** __Anyone__ looking to create a portfolio site, learn web development, or test out Codespaces.
+- **How much experience do you need?** __Zero__. You decide how much you want to customize based on your experience, and time available.
+- **Tools needed:** _None_. No need to install anything! All you need is a web browser.
+- **Prerequisites:** _None_. This template includes your development environment and deployable web app for you to create your own site.
 
 ## About this portfolio template
 
@@ -20,8 +20,9 @@ In this "choose your own adventure" template portfolio, we have a [Blazor](https
 ### Quick Start
 
 1. Click the **Use this Template** button
-   
+
    [![Use this Template](/images/template-button.svg)](https://github.com/education/codespaces-project-template-dotnet/generate)
+
 1. Select the repository owner (e.g. your GitHub account)
 1. Enter a unique name for your new repository
 1. Click the **Code** button
@@ -31,7 +32,7 @@ In this "choose your own adventure" template portfolio, we have a [Blazor](https
 
 <details>
    <summary><b>🎥 To learn more about Codespaces, watch our video tutorial series</b></summary>
-   
+
    [![Codespaces Tutorial](https://img.youtube.com/vi/ozuDPmcC1io/0.jpg)](https://aka.ms/CodespacesVideoTutorial "Codespaces Tutorial")
 </details>
 
@@ -43,15 +44,15 @@ This repo is a GitHub template to build a .NET personal portfolio frontend web a
 
 The repo contains the following:
 
-* `/.devcontainer`
+- `/.devcontainer`
   - `.devcontainer/Dockerfile`: Configuration file used by Codespaces to determine operating system and other details.
   - `.devcontainer/devcontainer.json`: Configuration file used by Codespaces to configure Visual Studio Code settings, such as the enabling of additional extensions.
   - `.devcontainer/on-create.sh`: Configuration file used by Codespaces to install additional tools, such as PowerShell.
-* `/src`: Blazor WebAssembly project to build your portfolio site.
-* `.editorconfig`: Settings for [EditorConfig](https://editorconfig.org/) that helps maintain consistent coding styles in Codespaces.
-* `global.json`: Settings for the Blazor WebAssembly app to avoid using pre-released .NET version.
-* `swa-cli.config.json`: Settings for [Azure SWA CLI](https://azure.github.io/static-web-apps-cli/) to run the Blazor WebAssembly app on your Codespaces.
-* `MyPortfolio.sln`: The solution file that contains the Blazor WebAssembly application project.
+- `/src`: Blazor WebAssembly project to build your portfolio site.
+- `.editorconfig`: Settings for [EditorConfig](https://editorconfig.org/) that helps maintain consistent coding styles in Codespaces.
+- `global.json`: Settings for the Blazor WebAssembly app to avoid using pre-released .NET version.
+- `swa-cli.config.json`: Settings for [Azure SWA CLI](https://azure.github.io/static-web-apps-cli/) to run the Blazor WebAssembly app on your Codespaces.
+- `MyPortfolio.sln`: The solution file that contains the Blazor WebAssembly application project.
 
 <br />
 
@@ -61,23 +62,23 @@ This portfolio site project is filled with sample data so that you can immediate
 
 Your development environment is all set for you to start. Based on our [.NET Codespaces Template](https://github.com/education/codespaces-teaching-template-dotnet), here is what's already setup and ready for you to use:
 
-* Simple [Blazor WebAssembly](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor?WT.mc_id=dotnet-82024-juyoo) application with components for each section of the portfolio site
-* [SWA CLI](https://azure.github.io/static-web-apps-cli/) in place to build your site when deploying
-* Code linting and formatting using [EditorConfig](https://editorconfig.org/) for code consistency.
+- Simple [Blazor WebAssembly](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor?WT.mc_id=dotnet-82024-juyoo) application with components for each section of the portfolio site
+- [SWA CLI](https://azure.github.io/static-web-apps-cli/) in place to build your site when deploying
+- Code linting and formatting using [EditorConfig](https://editorconfig.org/) for code consistency.
 
 ### Create your portfolio
 
 1. Create a repository from this template. Use this [create repo link](https://github.com/education/codespaces-teaching-template-dotnet/generate). Select the repository owner, provide a name, a description if you'd like and if you'd like the new repository to be public or private.
-2. Navigate to the main page of the newly created repository.
-3. Under the repository name, use the Code drop-down menu, and in the Codespaces tab, select "Create codespace on main".
+1. Navigate to the main page of the newly created repository.
+1. Under the repository name, use the Code drop-down menu, and in the Codespaces tab, select "Create codespace on main".
 
     <img src="./images/new-codespace-button.png" alt="Create codespace" style="width:270px;"/>
-    
-4. Wait as GitHub initializes the Codespaces.
+
+1. Wait as GitHub initializes the Codespaces.
 
     <img src="./images/codespaces-initializing.png" alt="Codespaces initializing" style="width: 600px;"/>
-    
-5. When complete you will see your Codespaces load with a terminal section at the bottom. Here you will see `dotnet restore && dotnet build` executing. When complete you will return to the terminal prompt where you can run the web application by executing: `swa start`.
+
+1. When complete you will see your Codespaces load with a terminal section at the bottom. Here you will see `dotnet restore && dotnet build` executing. When complete you will return to the terminal prompt where you can run the web application by executing: `swa start`.
 
    When the web application is started you will see a prompt telling you it started successfully on port 4280, and you can open that site within your browser:
 
@@ -87,9 +88,9 @@ Your development environment is all set for you to start. Based on our [.NET Cod
 
 ## ✨ Customize your site in 4 steps
 
-This project is built to be easily customizable. Each section of the site is a separate component, and your information needs to be set in only one spot. This is not only for ease of updating, but so you can see how prop values are passed to React components.
+This project is built to be easily customizable. Each section of the site is a separate component, and your information needs to be set in only one spot. This is not only for ease of updating, but so you can see how values are passed to Blazor components.
 
-For each step, open the project in Codespaces, then you can make and commit your changes while within your Codespaces. 
+For each step, open the project in Codespaces, then you can make and commit your changes while within your Codespaces.
 
 > See [Using source control in your codespaces](https://docs.github.com/codespaces/developing-in-codespaces/using-source-control-in-your-codespace) for more Codespaces source control how-tos
 
@@ -158,7 +159,6 @@ The about section helps to give people a bit more information about your skills
 * `skillsList`: an [array](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) of your skills to list on the site, can be as many or little as you wish
 * `detailOrQuote`: longer block for you to add more detail about yourself, or even a quote you like
 
-
 ### 4️⃣ Add items you've worked on and detail text
 
 This section to update is portfolio, where you highlight items you've worked on. These would be articles, videos, logo designs, GitHub projects, anything that highlights you!
@@ -264,33 +264,31 @@ Your environment comes with preinstalled extensions. You can change which extens
 
 1. Open file _.devcontainer/devcontainer.json_ and locate the following JSON element **extensions**
 
-   ```jsonc
-   "extensions": [
-     "GitHub.copilot",
-     "GitHub.copilot-chat",
-     "GitHub.copilot-labs",
-     "ms-dotnettools.csharp",
-     "ms-vscode.PowerShell",
-     "ms-vscode.vscode-node-azure-pack",
-     "VisualStudioExptTeam.vscodeintellicode"
-   ]
-   ```
+    ```jsonc
+    "extensions": [
+      "GitHub.copilot",
+      "GitHub.copilot-chat",
+      "ms-dotnettools.csdevkit",
+      "ms-vscode.PowerShell",
+      "ms-vscode.vscode-node-azure-pack",
+      "VisualStudioExptTeam.vscodeintellicode"
+    ]
+    ```
 
 1. Let's add the `indent-rainbow` extension. To do this, go to the **extensions** list and add:
 
-   ```jsonc
-   "oderwat.indent-rainbow"
-   ```
+    ```jsonc
+    "oderwat.indent-rainbow"
+    ```
   
    What you did above was to add the unique identifier of an extension of the [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow&WT.mc_id=dotnet-82024-juyoo). This will let Codespaces know that this extension should be pre-installed upon startup.
 
 To find the unique identifier of an extension:
 
 * Navigate to the extension's web page, like so [https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow&WT.mc_id=dotnet-82024-juyoo)
 * Locate the _Unique Identifier_ field under **More info** section on your right side.
-
-> 💡 Learn more here, <https://docs.github.com/codespaces/customizing-your-codespace/personalizing-github-codespaces-for-your-account>
 
+> 💡 Learn more here, <https://docs.github.com/codespaces/customizing-your-codespace/personalizing-github-codespaces-for-your-account>
 
 ### 2. Update to smooth scroll to a section
 
@@ -310,7 +308,7 @@ Your site should already be running in your Codespaces, and the change will relo
 
 ### 3. Animate desk photo
 
-Animations are a way you can easily add some motion to elements on your page to increase user interactivity and highlight items you want to make sure they notice. Let's animate the desk photo in the portfolio section. 
+Animations are a way you can easily add some motion to elements on your page to increase user interactivity and highlight items you want to make sure they notice. Let's animate the desk photo in the portfolio section.
 
 1. Open your site's stylesheet, `/src/BlazorApp/wwwroot/css/app.css` within your Codespaces. Add the animation sequence by adding a `@keyframes` definition to slide in from the left:
 
@@ -341,7 +339,6 @@ Your site should already be running in your Codespaces, and the change will relo
 
 > 🤩 **Bonus**: Animate scroll down arrow
 
-
 ### 4. Add a new section
 
 We started you off with a few basic sections for your portfolio site, but you have creative freedom to make it your own and add new sections relevant to what you want on your site.
@@ -364,8 +361,7 @@ For an example, let's add an education section to your portfolio site.
     <Education />
     ```
 
-In your Codespaces, your portfolio application should be running and will reload your site with the changes. 
-
+In your Codespaces, your portfolio application should be running and will reload your site with the changes.
 
 <br />
 

diff --git a/SUPPORT.md b/SUPPORT.md
@@ -1,13 +1,3 @@
-# TODO: The maintainer of this repo has not yet edited this file
-
-**REPO OWNER**: Do you want Customer Service & Support (CSS) support for this product/project?
-
-- **No CSS support:** Fill out this template with information about how to file issues and get help.
-- **Yes CSS support:** Fill out an intake form at [aka.ms/onboardsupport](https://aka.ms/onboardsupport). CSS will work with/help you to determine next steps.
-- **Not sure?** Fill out an intake as though the answer were "Yes". CSS will help you decide.
-
-*Then remove this first heading from this SUPPORT.MD file before publishing your repo.*
-
 # Support
 
 ## How to file issues and get help  
@@ -16,10 +6,8 @@ This project uses GitHub Issues to track bugs and feature requests. Please searc
 issues before filing new issues to avoid duplicates.  For new issues, file your bug or 
 feature request as a new Issue.
 
-For help and questions about using this project, please **REPO MAINTAINER: INSERT INSTRUCTIONS HERE 
-FOR HOW TO ENGAGE REPO OWNERS OR COMMUNITY FOR HELP. COULD BE A STACK OVERFLOW TAG OR OTHER
-CHANNEL. WHERE WILL YOU HELP PEOPLE?**.
+For help and questions about using this project, please [file an issue](https://github.com/microsoft/codespaces-teaching-template-dotnet/issues/new)
 
 ## Microsoft Support Policy  
 
-Support for this **PROJECT or PRODUCT** is limited to the resources listed above.
+Support for this project is limited to the resources listed above.
diff --git a/src/BlazorApp/BlazorApp.csproj b/src/BlazorApp/BlazorApp.csproj
@@ -1,14 +1,14 @@
 <Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
-    <TargetFramework>net7.0</TargetFramework>
+    <TargetFramework>net8.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0" />
-    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.2" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.2" PrivateAssets="all" />
   </ItemGroup>
 
 </Project>
diff --git a/src/BlazorApp/Shared/Footer.razor → src/BlazorApp/Layout/Footer.razor b/src/BlazorApp/Shared/Footer.razor → src/BlazorApp/Layout/Footer.razor
diff --git a/src/BlazorApp/Shared/Footer.razor.css → src/BlazorApp/Layout/Footer.razor.css b/src/BlazorApp/Shared/Footer.razor.css → src/BlazorApp/Layout/Footer.razor.css
diff --git a/src/BlazorApp/Shared/Header.razor → src/BlazorApp/Layout/Header.razor b/src/BlazorApp/Shared/Header.razor → src/BlazorApp/Layout/Header.razor
diff --git a/src/BlazorApp/Shared/Header.razor.css → src/BlazorApp/Layout/Header.razor.css b/src/BlazorApp/Shared/Header.razor.css → src/BlazorApp/Layout/Header.razor.css
diff --git a/src/BlazorApp/Layout/MainLayout.razor b/src/BlazorApp/Layout/MainLayout.razor
@@ -0,0 +1,5 @@
+@inherits LayoutComponentBase
+
+<div id="main">
+    @Body
+</div>