Blazor Blog Feature

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

Orchestration Protocol

Phase 1: Setup & Understanding

Before writing any code, establish context:

1. Review your current Blazor WASM project structure
2. Confirm you have Azure Functions API project ready
3. Verify Azure Storage account and File Share access
4. 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:

Phase 3: Execution & Validation

Implementation sequence:

1. Create project structure (core-architecture.md Step 1-2)
2. Add NuGet packages (backend-services.md)
3. Implement BlogStorageService (backend-services.md)
4. Create Azure Functions (backend-services.md)
5. Build Blazor components (frontend-components.md)
6. Configure Azure environment (azure-configuration.md)
7. Test locally (sample-content-testing.md testing workflow)
8. 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

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

Scenario 2: Existing Backend, Need Frontend

Timeline: 1 hour

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

Scenario 3: Update Existing Blog

Timeline: 30 minutes

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

Scenario 4: Troubleshooting Issues

Timeline: As needed

1. Go directly to sample-content-testing.md
2. Find problem in troubleshooting section
3. 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

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

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

Quick Navigation by Goal

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)