Merge pull request #1 from jamesmontemagno/copilot/convert-workshop-to-csharp-dotnet10

Convert workshop to C# .NET 10 Blazor WebAssembly

Author: jamesmontemagno

.devcontainer/devcontainer.json

@@ -1,26 +1,25 @@
 {
-  "name": "Soc-Ops React TypeScript",
-  "image": "mcr.microsoft.com/devcontainers/typescript-node:22",
+  "name": "Soc-Ops Blazor C#",
+  "image": "mcr.microsoft.com/devcontainers/dotnet:10.0",
   "customizations": {
     "vscode": {
       "extensions": [
-        "vitest.explorer",
-        "dbaeumer.vscode-eslint",
-        "bradlc.vscode-tailwindcss"
+        "ms-dotnettools.csdevkit",
+        "ms-dotnettools.csharp"
       ]
     },
     "codespaces": {
       "openFiles": [
-        "src/App.tsx",
+        "SocOps/Pages/Home.razor",
         "README.md"
       ]
     }
   },
-  "postCreateCommand": "npm install",
-  "forwardPorts": [5173],
+  "postCreateCommand": "dotnet restore SocOps/SocOps.csproj",
+  "forwardPorts": [5166],
   "portsAttributes": {
-    "5173": {
-      "label": "Vite Dev Server",
+    "5166": {
+      "label": "Blazor Dev Server",
       "onAutoForward": "openPreview"
     }
   }

.github/instructions/css-utilities.instructions.md

@@ -0,0 +1,83 @@
+---
+description: CSS utility classes and styling practices for this Blazor project.
+---
+
+# CSS Styling Practices
+
+## Overview
+This project uses custom CSS utility classes (similar to Tailwind) defined in `wwwroot/css/app.css`. These provide consistent, composable styling without external dependencies.
+
+## Available Utilities
+
+### Layout
+```css
+.flex, .flex-col, .flex-1
+.grid, .grid-cols-5
+.items-center, .justify-center, .justify-between
+```
+
+### Spacing
+```css
+.p-1 through .p-6, .px-*, .py-*
+.mb-2 through .mb-8, .mx-auto
+.gap-1, .space-y-2
+```
+
+### Sizing
+```css
+.h-full, .w-full, .min-h-full
+.max-w-xs, .max-w-sm, .max-w-md
+.aspect-square
+```
+
+### Colors
+```css
+.bg-white, .bg-gray-50, .bg-gray-100
+.bg-accent (primary blue), .bg-marked (green for selected)
+.text-gray-500 through .text-gray-900
+.text-green-600, .text-amber-500
+```
+
+### Typography
+```css
+.text-xs through .text-5xl
+.font-semibold, .font-bold
+.text-center, .text-left
+.leading-tight
+```
+
+### Borders & Shadows
+```css
+.border, .border-b
+.rounded, .rounded-lg, .rounded-xl
+.shadow-sm, .shadow-xl
+```
+
+### Positioning
+```css
+.fixed, .absolute, .relative
+.inset-0, .z-50
+```
+
+### Animation
+```css
+.transition-all, .transition-colors
+.duration-150
+.animate-[bounce_0.5s_ease-out]
+```
+
+## Best Practices
+
+1. **Compose utilities**: Combine classes for complex layouts
+2. **Add new utilities to app.css**: When needed, follow existing patterns
+3. **Use CSS variables**: For theming, define in `:root`
+4. **Keep specificity low**: Utility classes should be single-purpose
+
+## Example Component Styling
+```razor
+<div class="flex flex-col items-center justify-center min-h-full bg-gray-50">
+    <button class="px-6 py-3 bg-accent text-white rounded-lg font-semibold">
+        Start Game
+    </button>
+</div>
+```

.github/instructions/frontend-design.instructions.md

@@ -8,7 +8,7 @@ You tend to converge toward generic, "on distribution" outputs. In frontend desi
 Focus on:
 - Typography: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics.
 - Color & Theme: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes. Draw from IDE themes and cultural aesthetics for inspiration.
-- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions.
+- Motion: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for Blazor components. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions.
 - Backgrounds: Create atmosphere and depth rather than defaulting to solid colors. Layer CSS gradients, use geometric patterns, or add contextual effects that match the overall aesthetic.
 
 Avoid generic AI-generated aesthetics:
@@ -18,7 +18,6 @@ Avoid generic AI-generated aesthetics:
 - Cookie-cutter design that lacks context-specific character
 
 Interpret creatively and make unexpected choices that feel genuinely designed for the context. Vary between light and dark themes, different fonts, different aesthetics. You still tend to converge on common choices (Space Grotesk, for example) across generations. Avoid this: it is critical that you think outside the box!
-</frontend_aesthetics>
 
 **IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
 

.github/instructions/tailwind-4.instructions.md

@@ -1,14 +1,14 @@
 ---
 agent: agent
 description: Get my development workspace ready
-tools: ['vscode/openSimpleBrowser', 'execute/runTask', 'read/getTaskOutput', 'execute/runInTerminal', 'read', 'search', 'todo']
+tools: ['vscode/openSimpleBrowser', 'execute/runTask', 'execute/runInTerminal', 'read', 'search', 'todo']
 ---
 
 Your goal is to successfully build and run the workspace as local development environment.
 
 ## Checklist
-- [ ] Required dependencies from package.json/README.md installed
-- [ ] Lint, build and test tasks functional
-- [ ] Dev server running
+- [ ] Required dependencies (.NET 10 SDK) installed and verified
+- [ ] Build task functional
+- [ ] Dev server running (dotnet run)
 - [ ] Site open in browser preview
 - [ ] Short engaging welcome tour for the workspace

.github/prompts/setup.prompt.md

@@ -22,23 +22,25 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-dotnet@v4
         with:
-          node-version: '22'
-          cache: 'npm'
+          dotnet-version: '10.0.x'
 
-      - run: npm ci
+      - name: Restore dependencies
+        run: dotnet restore SocOps/SocOps.csproj
 
       - name: Build
-        run: npm run build
-        env:
-          VITE_REPO_NAME: ${{ github.event.repository.name }}
+        run: dotnet publish SocOps/SocOps.csproj -c Release -o release --nologo
+      
+      - name: Change base-tag in index.html
+        run: |
+          sed -i 's/<base href="\/" \/>/<base href="\/${{ github.event.repository.name }}\/" \/>/g' release/wwwroot/index.html
       
       - uses: actions/configure-pages@v4
 
       - uses: actions/upload-pages-artifact@v3
         with:
-          path: dist
+          path: release/wwwroot
 
       - name: Deploy to GitHub Pages
         id: deployment

.github/workflows/deploy.yml

@@ -1,24 +1,53 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
+# Build results
+[Dd]ebug/
+[Dd]ebugPublic/
+[Rr]elease/
+[Rr]eleases/
+x64/
+x86/
+[Ww][Ii][Nn]32/
+[Aa][Rr][Mm]/
+[Aa][Rr][Mm]64/
+bld/
+[Bb]in/
+[Oo]bj/
+[Ll]og/
+[Ll]ogs/
 
-node_modules
-dist
-dist-ssr
-*.local
+# Visual Studio cache/options
+.vs/
 
-# Editor directories and files
+# Visual Studio Code
+!.vscode/extensions.json
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
 !.vscode/extensions.json
+!.vscode/*.json
+
+# User-specific files
+*.rsuser
+*.suo
+*.user
+*.userosscache
+*.sln.docstates
+
+# Files built by Visual Studio
+*.pidb
+*.svclog
+*.scc
+
+# Editor directories and files
 .idea
 .DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
 *.sw?
 .playwright-mcp
+
+# .NET Core
+project.lock.json
+project.fragment.lock.json
+artifacts/
+
+# Local
+*.local

.gitignore

@@ -8,16 +8,16 @@ Harald Kirschner `@digitarald`
 - [ ] Latest VS Code **v1.107** (no update pending)
 - [ ] Signed in with GitHub
   - Copilot Free can not run cloud agent!
-- [ ] Git & Node installed
+- [ ] Git & .NET 10 SDK installed
 - [ ] Chat open and Agent ready for action
 
 *Optional*: Use DevContainer or WSL.
 
 ## Setup
 
 
-1. Open https://github.com/microsoft/vscode-agent-lab-soc-ops
-   1. *Use this template* > *Create a new repository* (pick `my-soc-ops`, make it *Public*)
+1. Open https://github.com/jamesmontemagno/vscode-agent-lab-soc-ops-csharp
+   1. *Use this template* > *Create a new repository* (pick `my-soc-ops-csharp`, make it *Public*)
       - ✅ Your own *soc-ops* GitHub repo is ready
    2. ⚠️ Enable *Settings* > *Pages* > *Deploy from a branch* to *GitHub Actions*
       - ✅ Any commit to the repo will publish the game as GitHub page: `http://{your-gh-username}.github.io/{my-soc-ops}`
@@ -77,11 +77,11 @@ Result: All future requests will have basic map of the workspace.
 
 Result: Agents completed adjusted the rules, fixed errors, and all edits are merged back into main. Stricter linting rules will catch any human/agent mistakes earlier.
 
-### Task: Check Tailwind 4 instructions
+### Task: Check CSS Utilities instructions
 
-**TL;DR**: Tailwind v4 instructions close gaps from training data and document the latest best practices.
+**TL;DR**: CSS utility instructions document the custom Tailwind-like classes available in this Blazor project.
 
-See prompt in the footer.
+See `.github/instructions/css-utilities.instructions.md`.
 
 **Optional**, if interested how it works: Delete main text and re-run the prompt
 
@@ -137,7 +137,7 @@ Ideas:
 - Bold Serif Vintage
 - Toybox Primary Colors
 
-Result: Frontend and tailwind instructions are use to build a beautiful design.
+Result: Frontend and CSS utility instructions are used to build a beautiful design.
 
 ### Task: Keep instructions updated