Blog Feature Skill for Blazor WASM + Azure Functions

This skill provides a complete, production-ready blog feature for Blazor WASM applications hosted on Azure Static Web Apps with serverless backend processing.

Quick Reference: When to Load Which Resource

| Your Task | Load Resource | Key Concepts | |-----------|---------------|--------------| | Understand architecture, prerequisites, shared models | resources/core-architecture.md | 3-layer architecture, project structure, data models | | Implement backend services, Azure Functions, file share integration | resources/backend-services.md | BlogStorageService, YAML parsing, DI setup | | Build Blazor components, UI pages, styling | resources/frontend-components.md | Razor components, markdown rendering, responsive design | | Configure Azure environment, local settings, deployment | resources/azure-configuration.md | Connection strings, file share setup, environment variables | | Create sample content, test workflow, troubleshoot issues | resources/sample-content-testing.md | Sample markdown, testing checklist, common issues |

Orchestration Protocol

Phase 1: Setup & Understanding

Before writing any code, establish context:

Review your current Blazor WASM project structure
Confirm you have Azure Functions API project ready
Verify Azure Storage account and File Share access
Load resources/core-architecture.md to understand 3-layer design

Quick assessment:

Do you have existing Blazor WASM + Functions project? → YES, proceed
Do you need to understand what to build? → Load core-architecture.md first
Are you setting up Azure resources? → Go to azure-configuration.md

Phase 2: Implementation Selection

Choose your implementation path:

| Your Situation | Load This First | Then Load | |---|---|---| | Starting from scratch | core-architecture.md | backend-services.md | | Backend complete, need UI | frontend-components.md | (skip backend-services.md) | | Just need configuration help | azure-configuration.md | (reference other resources as needed) | | Debugging or testing | sample-content-testing.md | (target troubleshooting section) |

Phase 3: Execution & Validation

Implementation sequence:

Create project structure (core-architecture.md Step 1-2)
Add NuGet packages (backend-services.md)
Implement BlogStorageService (backend-services.md)
Create Azure Functions (backend-services.md)
Build Blazor components (frontend-components.md)
Configure Azure environment (azure-configuration.md)
Test locally (sample-content-testing.md testing workflow)
Deploy to Azure (azure-configuration.md deployment section)

Validation checkpoints:

Backend: Functions respond correctly to test calls
Frontend: Components load and display posts
Integration: End-to-end blog viewing works
Azure: Configuration deployed and accessible

Common Workflow Scenarios

Scenario 1: Fresh Implementation (First Time)

Timeline: 2-3 hours

Read core-architecture.md → understand what you're building
Follow backend-services.md → implement API layer
Follow frontend-components.md → build UI layer
Follow azure-configuration.md → configure Azure resources
Use sample-content-testing.md → validate with sample posts

Scenario 2: Existing Backend, Need Frontend

Timeline: 1 hour

Skip to frontend-components.md
Reference core-architecture.md if component questions arise
Use sample posts from sample-content-testing.md
Deploy following azure-configuration.md

Scenario 3: Update Existing Blog

Timeline: 30 minutes

Jump to relevant resource file
Reference back to core-architecture.md for context
Test changes with sample-content-testing.md checklist

Scenario 4: Troubleshooting Issues

Timeline: As needed

Go directly to sample-content-testing.md
Find problem in troubleshooting section
Reference other resources for context if needed

Architecture Summary

Frontend → Backend → Storage:

Blazor WASM pages call HTTP endpoints
Azure Functions retrieve from File Share
Markdown files with YAML frontmatter contain all content
No database needed (files are the database)

Key Components:

BlogStorageService: Abstracts File Share interactions
BlogFunctions: HTTP endpoints for listing/retrieving posts
Index/Post Razor Components: Client UI for browsing
CSS Styling: Responsive design for all screen sizes

Implementation Complexity

| Component | Complexity | Time | |-----------|-----------|------| | Backend Services | Medium | 45 min | | Azure Functions | Easy | 30 min | | Frontend Components | Medium | 60 min | | Styling | Easy | 30 min | | Configuration | Easy | 20 min | | Total | Easy-Medium | ~3 hours |

Prerequisites Checklist

✅ Existing Blazor WASM SWA project
✅ Azure Functions API project
✅ Azure Storage account with File Share
✅ .NET 10 SDK (or later)
✅ Azure CLI (for deployment)
✅ Visual Studio Code or Visual Studio

Resource Files Summary

`resources/core-architecture.md` (285 lines)

Foundational knowledge about the blog system architecture, project structure, and shared data models needed across frontend and backend.

Load when: Getting started, understanding the design, creating shared models

`resources/backend-services.md` (425 lines)

Complete implementation of Azure File Share service integration, BlogStorageService class, and Azure Functions for blog operations.

Load when: Building the API layer, implementing backend services

`resources/frontend-components.md` (610 lines)

Blazor Razor components for blog listing and detail pages, CSS styling for responsive design, navigation integration.

Load when: Building the UI layer, styling components, creating Razor pages

`resources/azure-configuration.md` (445 lines)

Azure environment setup, local development configuration, File Share structure, deployment guidelines, and security considerations.

Load when: Setting up Azure resources, configuring environments, deploying to production

`resources/sample-content-testing.md` (395 lines)

Sample markdown formats, complete testing workflow checklist, troubleshooting guide for common issues, and enhancement ideas.

Load when: Creating test data, validating implementation, debugging problems

Best Practices

Start with core-architecture.md - Don't skip understanding the design
Implement sequentially - Backend first, then frontend, then configuration
Test locally - Use Azure Storage Emulator before deploying
Use sample content - Test with provided markdown examples
Follow naming conventions - Consistent file naming prevents errors

Quick Navigation by Goal

| I want to... | Resource | Section | |---|---|---| | Understand the system | core-architecture.md | Architecture Overview | | Create the backend | backend-services.md | BlogStorageService | | Build the UI | frontend-components.md | Blog Listing Page | | Set up Azure | azure-configuration.md | Azure File Share Setup | | Test everything | sample-content-testing.md | Testing Workflow | | Fix a problem | sample-content-testing.md | Troubleshooting Guide | | Deploy to production | azure-configuration.md | Deployment Checklist |

Support & Next Steps

After implementation:

Add pagination for better performance (recommended)
Implement search functionality
Consider caching for frequently-accessed posts
Monitor Azure Function cold starts
Optimize featured image sizes for performance

Enhancement opportunities:

RSS feed generation
Comment system integration
Post categories and tagging
Admin content management interface
Email newsletter subscription

Built with: Blazor WASM, Azure Functions, Azure File Share, Markdown, YAML frontmatter

Skill Type: Feature Implementation (Blazor WASM + Azure)

Difficulty: Easy-Medium (3-4 hours total)