| name | blazor-blog-feature |
| description | Adds a complete blog feature to an existing Blazor WebAssembly Static Web App with Azure Functions backend and Azure File Share for markdown storage. Use when implementing blog functionality in .NET Blazor WASM projects with Azure infrastructure. Includes post listing, detail pages, markdown rendering, Azure Storage integration. |
| version | 2 |
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)
