Skip to content

Commit c9de832

Browse files
workcontrolgitworkcontrolgit
committed
Add SERIES-NAVIGATION-TOC.md, remove per-article nav sections, replace with TOC link
1 parent 1cb251d commit c9de832

16 files changed

Lines changed: 120 additions & 253 deletions

‎blogs/README.md‎

Lines changed: 41 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,67 +2,53 @@
22

33
This folder contains blog posts for publication on Medium.com covering the AngularNetTutorial full-stack series (Angular 20, .NET 10, OAuth 2.0).
44

5+
## Navigation
6+
7+
📖 **[Series Navigation TOC](SERIES-NAVIGATION-TOC.md)** — Quick links to all articles
8+
9+
📋 **[Blog Series Plan](BLOG-SERIES-PLAN.md)** — Full plan with status, subtitles, and file paths
10+
511
## Folder Structure
612

713
```
814
blogs/
9-
├── README.md ← This file
10-
├── BLOG-SERIES-PLAN.md ← Master plan with all 19 articles and status
11-
├── BLOG-TEMPLATE.md ← Template for new articles
15+
├── README.md ← This file
16+
├── SERIES-NAVIGATION-TOC.md ← Article navigation — link all readers back here
17+
├── BLOG-SERIES-PLAN.md ← Master plan with status tracking
18+
├── BLOG-TEMPLATE.md ← Template for new articles
1219
│
13-
├── series-0-architecture/ ← Architecture & Workspace
14-
│ ├── git-submodule-workspace-MEDIUM.md
15-
│ └── playwright-testing-MEDIUM.md
20+
├── series-0-architecture/
21+
│ ├── 0.1-git-submodule-workspace.md
22+
│ └── 0.2-playwright-testing.md
1623
│
17-
├── series-1-authentication/ ← Authentication & Security
18-
│ └── oauth2-pkce-flow-MEDIUM.md
24+
├── series-1-authentication/
25+
│ ├── 1.1-oauth2-pkce-flow.md
26+
│ ├── 1.2-angular-route-guards.md
27+
│ ├── 1.3-angular-http-interceptor.md
28+
│ └── 1.4-angular-role-based-ui.md
1929
│
20-
├── series-2-dotnet-api/ ← .NET 10 Web API (coming soon)
21-
├── series-3-angular-material/ ← Angular Material UI (coming soon)
22-
├── series-4-playwright-testing/ ← Playwright Deep Dives (coming soon)
23-
└── series-5-devops/ ← DevOps & Data (coming soon)
30+
├── series-2-dotnet-api/
31+
│ ├── 2.1-dotnet-clean-architecture.md
32+
│ ├── 2.2-dotnet-jwt-validation.md
33+
│ ├── 2.3-dotnet-api-versioning.md
34+
│ └── 2.4-dotnet-swagger-jwt.md
35+
│
36+
├── series-3-angular-material/
37+
│ ├── 3.1-angular-material-datatable.md
38+
│ ├── 3.2-angular-reactive-forms.md
39+
│ ├── 3.3-angular-material-dialogs.md
40+
│ └── 3.4-ng-matero-admin-shell.md
41+
│
42+
├── series-4-playwright-testing/ ← Coming soon
43+
└── series-5-devops/ ← Coming soon
2444
```
2545

2646
## File Naming Convention
2747

28-
* **Blog posts:** `{topic}-MEDIUM.md` saved inside the appropriate `series-N-*/` folder
48+
* **Blog posts:** `[N.N]-[topic].md` inside the appropriate `series-N-*/` folder
2949
* **Series plan:** `BLOG-SERIES-PLAN.md` — track status with `[ ]` / `[~]` / `[x]`
3050
* **Template:** `BLOG-TEMPLATE.md` — copy this when starting a new article
3151

32-
## Series Overview
33-
34-
**Series 0 — Architecture & Workspace** (`series-0-architecture/`)
35-
* Git Submodule Workspace — manage multiple repos as one workspace
36-
* Playwright Overview — E2E testing introduction
37-
38-
**Series 1 — Authentication & Security** (`series-1-authentication/`)
39-
* OAuth 2.0 PKCE Flow — how login works end to end
40-
* Angular Route Guards — protecting pages with OIDC
41-
* HTTP Interceptor — automatic Bearer token injection
42-
* Role-Based UI — ngx-permissions for Employee/Manager/HRAdmin
43-
44-
**Series 2 — .NET 10 Web API** (`series-2-dotnet-api/`)
45-
* Clean Architecture — layer walkthrough
46-
* JWT Token Validation — how the API trusts IdentityServer
47-
* API Versioning — why `/api/v1/` matters
48-
* Swagger with JWT — test secured endpoints interactively
49-
50-
**Series 3 — Angular Material UI** (`series-3-angular-material/`)
51-
* Data Tables — sort, filter, paginate with MatTable
52-
* Reactive Forms — validation patterns
53-
* Dialogs — confirm/delete with MatDialog
54-
55-
**Series 4 — Playwright Testing** (`series-4-playwright-testing/`)
56-
* First Playwright Test — from zero to green
57-
* Page Object Model — for Angular Material
58-
* Role-Based Testing — fixtures per role
59-
* JWT Token Testing — decode and verify claims
60-
* API Testing — Playwright request fixture
61-
62-
**Series 5 — DevOps & Data** (`series-5-devops/`)
63-
* Database Seeding — EF Core seed data
64-
* CI/CD with GitHub Actions — full-stack pipeline
65-
6652
## Medium.com Compatibility Rules
6753

6854
* ❌ NO tables (Medium.com doesn't support them)
@@ -71,18 +57,19 @@ blogs/
7157
* ✅ Bold text for scannability
7258
* ✅ Short paragraphs (2-3 sentences max)
7359
* ✅ Hero image placeholder at top
74-
* ✅ Series Navigation section at bottom
60+
* ✅ Single TOC back-reference at bottom (replaces per-article navigation lists)
7561
* ✅ Tags at the very bottom
7662

7763
## Publishing Workflow
7864

79-
1. Write article in `series-N-*/topic-MEDIUM.md` following `BLOG-TEMPLATE.md`
65+
1. Write article in `series-N-*/N.N-[topic].md` following `BLOG-TEMPLATE.md`
8066
2. Update `BLOG-SERIES-PLAN.md` status from `[ ]` to `[~]`
81-
3. Copy entire file content to clipboard
82-
4. Paste into Medium editor (medium.com/new-story)
83-
5. Replace placeholder image with actual diagram
84-
6. Preview, adjust formatting, add tags
85-
7. Publish — then update `BLOG-SERIES-PLAN.md` status to `[x]` with the published URL
67+
3. Update `SERIES-NAVIGATION-TOC.md` with the published Medium URL when live
68+
4. Copy entire file content to clipboard
69+
5. Paste into Medium editor (medium.com/new-story)
70+
6. Replace placeholder image with actual diagram
71+
7. Preview, adjust formatting, add tags
72+
8. Publish — then update `BLOG-SERIES-PLAN.md` status to `[x]` with the published URL
8673

8774
## Published Articles
8875

‎blogs/SERIES-NAVIGATION-TOC.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# AngularNetTutorial — Series Navigation
2+
3+
**Full-Stack Development with Angular 20, .NET 10, and OAuth 2.0 with Duende IdentityServer**
4+
5+
📖 **Main Tutorial:** [Building Modern Web Applications with Angular, .NET, and OAuth 2.0](https://medium.com/scrum-and-coke/building-modern-web-applications-with-angular-net-and-oauth-2-0-complete-tutorial-series-7ea97ed3fc56)
6+
7+
📁 **Repository:** [AngularNetTutorial on GitHub](https://github.com/workcontrolgit/AngularNetTutorial)
8+
9+
---
10+
11+
## 📝 Series 0: Architecture & Workspace
12+
13+
* [0.1 — Stop Juggling Multiple Repos: Manage Your Full-Stack App Like a Workspace](#) — Git Submodules
14+
* [0.2 — End-to-End Testing Made Simple: How Playwright Transforms Testing](#) — Playwright Overview
15+
16+
---
17+
18+
## 🔐 Series 1: Authentication & Security
19+
20+
* [1.1 — Why Your Angular App Needs PKCE: OAuth 2.0 Explained with a Working Demo](#) — OAuth 2.0 PKCE Flow
21+
* [1.2 — Lock Down Your Angular Routes: Auth Guards with OIDC in 5 Minutes](#) — Route Guards
22+
* [1.3 — Never Forget a Bearer Token Again: Angular's HTTP Interceptor Explained](#) — HTTP Interceptor
23+
* [1.4 — Show the Right Buttons to the Right People: Role-Based UI in Angular](#) — Role-Based UI
24+
25+
---
26+
27+
## 🔧 Series 2: .NET 10 Web API
28+
29+
* [2.1 — How to Structure a .NET 10 API So It Doesn't Become a Mess](#) — Clean Architecture
30+
* [2.2 — How Your .NET API Knows to Trust Angular: JWT Validation Explained](#) — JWT Validation
31+
* [2.3 — Future-Proof Your .NET API: Add Versioning Without Breaking Existing Clients](#) — API Versioning
32+
* [2.4 — Test Your Secured .NET API Without Writing a Single Line of Frontend Code](#) — Swagger with JWT
33+
34+
---
35+
36+
## 🎨 Series 3: Angular Material UI
37+
38+
* [3.1 — Build a Production-Ready Data Table in Angular Material: Sort, Filter, Page](#) — Data Tables
39+
* [3.2 — Reactive Forms Done Right: Validation Patterns Every Angular Developer Should Know](#) — Reactive Forms
40+
* [3.3 — The Right Way to Ask "Are You Sure?" — Angular Material Dialogs for Confirm Actions](#) — Dialogs
41+
* [3.4 — Why We Didn't Build the Admin Shell from Scratch: ng-matero Explained](#) — Admin Shell
42+
43+
---
44+
45+
## 🎭 Series 4: Playwright Testing Deep Dives
46+
47+
* [4.1 — Your First Playwright Test for an Angular App — From Zero to Green in 15 Minutes](#) — First Test
48+
* [4.2 — Stop Copy-Pasting Selectors: The Page Object Model for Angular Material](#) — Page Object Model
49+
* [4.3 — One Feature, Three Users: Testing Role-Based Access Control with Playwright](#) — Role-Based Testing
50+
* [4.4 — How to Extract and Verify JWT Tokens in Playwright Tests](#) — JWT Token Testing
51+
* [4.5 — Skip the UI: Test Your .NET API Directly with Playwright's Request Fixture](#) — API Testing
52+
53+
---
54+
55+
## 🛠️ Series 5: DevOps & Data
56+
57+
* [5.1 — 1,000 Test Employees in 3 Seconds: Database Seeding for Development and Testing](#) — Database Seeding
58+
* [5.2 — Run Your Playwright Tests Automatically: CI/CD for a Full-Stack Angular/.NET App](#) — CI/CD
59+
60+
---
61+
62+
*Links marked `(#)` will be updated when the article is published on Medium.*

‎blogs/series-0-architecture/0.1-git-submodule-workspace.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -480,3 +480,6 @@ Each component is a separate repository that can be developed, tested, and deplo
480480
**Tutorial Repository:** https://github.com/workcontrolgit/AngularNetTutorial
481481

482482
**Author's Note:** This pattern emerged from real-world pain managing enterprise applications split across dozens of repositories. If you've ever lost an hour debugging version mismatches or spent a day onboarding a new developer, you'll appreciate the elegance of this approach. Give it a try—your future self will thank you.
483+
---
484+
485+
📖 **Series:** [AngularNetTutorial Series Navigation](../SERIES-NAVIGATION-TOC.md)

‎blogs/series-0-architecture/0.2-playwright-testing.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -740,4 +740,6 @@ npx playwright test --ui
740740
```
741741

742742
Happy testing!
743+
---
743744

745+
📖 **Series:** [AngularNetTutorial Series Navigation](../SERIES-NAVIGATION-TOC.md)

‎blogs/series-1-authentication/1.1-oauth2-pkce-flow.md‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -592,19 +592,7 @@ Understanding PKCE makes you a better full-stack developer because:
592592
* 💬 **Discussions** — Ask questions, share your use cases
593593
* 🚀 **Pull requests** — Improvements always appreciated
594594

595-
---
596-
597-
## 📖 Series Navigation
598-
599-
**AngularNetTutorial Blog Series:**
600-
601-
* [Building Modern Web Applications with Angular, .NET, and OAuth 2.0](https://medium.com/scrum-and-coke/building-modern-web-applications-with-angular-net-and-oauth-2-0-complete-tutorial-series-7ea97ed3fc56) — Main tutorial
602-
* [Stop Juggling Multiple Repos: Manage Your Full-Stack App Like a Workspace](#) — Git Submodules
603-
* [End-to-End Testing Made Simple: How Playwright Transforms Testing](#) — Playwright Overview
604-
* **Why Your Angular App Needs PKCE** — This article
605-
* [Lock Down Your Angular Routes: Auth Guards with OIDC in 5 Minutes](#) — Route Guards
606-
* [Never Forget a Bearer Token Again: Angular's HTTP Interceptor Explained](#) — HTTP Interceptor
607-
* [Show the Right Buttons to the Right People: Role-Based UI in Angular](#) — Role-Based UI
595+
📖 **Series:** [AngularNetTutorial Series Navigation](../SERIES-NAVIGATION-TOC.md)
608596

609597
---
610598

‎blogs/series-1-authentication/1.2-angular-route-guards.md‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -608,19 +608,7 @@ The pattern here — a broad `canActivateChild` on the layout parent, plus targe
608608
* 💬 **Discussions** — Ask questions, share your use cases
609609
* 🚀 **Pull requests** — Improvements always appreciated
610610

611-
---
612-
613-
## 📖 Series Navigation
614-
615-
**AngularNetTutorial Blog Series:**
616-
617-
* [Building Modern Web Applications with Angular, .NET, and OAuth 2.0](https://medium.com/scrum-and-coke/building-modern-web-applications-with-angular-net-and-oauth-2-0-complete-tutorial-series-7ea97ed3fc56) — Main tutorial
618-
* [Stop Juggling Multiple Repos: Manage Your Full-Stack App Like a Workspace](#) — Git Submodules
619-
* [End-to-End Testing Made Simple: How Playwright Transforms Testing](#) — Playwright Overview
620-
* [Why Your Angular App Needs PKCE: OAuth 2.0 Explained with a Working Demo](#) — OAuth 2.0 PKCE Flow
621-
* **Lock Down Your Angular Routes** — This article
622-
* [Never Forget a Bearer Token Again: Angular's HTTP Interceptor Explained](#) — HTTP Interceptor
623-
* [Show the Right Buttons to the Right People: Role-Based UI in Angular](#) — Role-Based UI
611+
📖 **Series:** [AngularNetTutorial Series Navigation](../SERIES-NAVIGATION-TOC.md)
624612

625613
---
626614

‎blogs/series-1-authentication/1.3-angular-http-interceptor.md‎

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -462,19 +462,7 @@ The interceptor chain in this app also demonstrates a broader principle — **co
462462
* 💬 **Discussions** — Ask questions, share your use cases
463463
* 🚀 **Pull requests** — Improvements always appreciated
464464

465-
---
466-
467-
## 📖 Series Navigation
468-
469-
**AngularNetTutorial Blog Series:**
470-
471-
* [Building Modern Web Applications with Angular, .NET, and OAuth 2.0](https://medium.com/scrum-and-coke/building-modern-web-applications-with-angular-net-and-oauth-2-0-complete-tutorial-series-7ea97ed3fc56) — Main tutorial
472-
* [Stop Juggling Multiple Repos: Manage Your Full-Stack App Like a Workspace](#) — Git Submodules
473-
* [End-to-End Testing Made Simple: How Playwright Transforms Testing](#) — Playwright Overview
474-
* [Why Your Angular App Needs PKCE: OAuth 2.0 Explained with a Working Demo](#) — OAuth 2.0 PKCE Flow
475-
* [Lock Down Your Angular Routes: Auth Guards with OIDC in 5 Minutes](#) — Route Guards
476-
* **Never Forget a Bearer Token Again** — This article
477-
* [Show the Right Buttons to the Right People: Role-Based UI in Angular](#) — Role-Based UI
465+
📖 **Series:** [AngularNetTutorial Series Navigation](../SERIES-NAVIGATION-TOC.md)
478466

479467
---
480468

‎blogs/series-1-authentication/1.4-angular-role-based-ui.md‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -568,20 +568,7 @@ The combination of `*appHasRole` (reactive, OIDC-driven, DOM-level) and ngx-perm
568568
* 💬 **Discussions** — Ask questions, share your use cases
569569
* 🚀 **Pull requests** — Improvements always appreciated
570570

571-
---
572-
573-
## 📖 Series Navigation
574-
575-
**AngularNetTutorial Blog Series:**
576-
577-
* [Building Modern Web Applications with Angular, .NET, and OAuth 2.0](https://medium.com/scrum-and-coke/building-modern-web-applications-with-angular-net-and-oauth-2-0-complete-tutorial-series-7ea97ed3fc56) — Main tutorial
578-
* [Stop Juggling Multiple Repos: Manage Your Full-Stack App Like a Workspace](#) — Git Submodules
579-
* [End-to-End Testing Made Simple: How Playwright Transforms Testing](#) — Playwright Overview
580-
* [Why Your Angular App Needs PKCE: OAuth 2.0 Explained with a Working Demo](#) — OAuth 2.0 PKCE Flow
581-
* [Lock Down Your Angular Routes: Auth Guards with OIDC in 5 Minutes](#) — Route Guards
582-
* [Never Forget a Bearer Token Again: Angular's HTTP Interceptor Explained](#) — HTTP Interceptor
583-
* **Show the Right Buttons to the Right People** — This article
584-
* [How to Structure a .NET 10 API So It Doesn't Become a Mess](#) — Clean Architecture (Series 2)
571+
📖 **Series:** [AngularNetTutorial Series Navigation](../SERIES-NAVIGATION-TOC.md)
585572

586573
---
587574

‎blogs/series-2-dotnet-api/2.1-dotnet-clean-architecture.md‎

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -860,21 +860,7 @@ No layer skips a step. No controller accesses the database directly. No handler
860860
* **Mapster** — Lightweight object mapping with explicit profiles for Value Object conversion
861861
* **Feature Management** — `AuthEnabled` and `UseInMemoryDatabase` flags for environment-specific behavior
862862

863-
---
864-
865-
## 📖 Series Navigation
866-
867-
**AngularNetTutorial Blog Series:**
868-
869-
* [Building Modern Web Applications with Angular, .NET, and OAuth 2.0](https://medium.com/scrum-and-coke/building-modern-web-applications-with-angular-net-and-oauth-2-0-complete-tutorial-series-7ea97ed3fc56) — Main tutorial
870-
* [Stop Juggling Multiple Repos: Manage Your Full-Stack App Like a Workspace](#) — Git Submodules
871-
* [End-to-End Testing Made Simple: How Playwright Transforms Testing](#) — Playwright Overview
872-
* [Why Your Angular App Needs PKCE: OAuth 2.0 Explained with a Working Demo](#) — OAuth 2.0 PKCE Flow
873-
* [Lock Down Your Angular Routes: Auth Guards with OIDC in 5 Minutes](#) — Route Guards
874-
* [Never Forget a Bearer Token Again: Angular's HTTP Interceptor Explained](#) — HTTP Interceptor
875-
* [Show the Right Buttons to the Right People: Role-Based UI in Angular](#) — Role-Based UI
876-
* **How to Structure a .NET 10 API So It Doesn't Become a Mess** — This article
877-
* [How Your .NET API Knows to Trust Angular: JWT Validation Explained](#) — JWT Validation
863+
📖 **Series:** [AngularNetTutorial Series Navigation](../SERIES-NAVIGATION-TOC.md)
878864

879865
---
880866

‎blogs/series-2-dotnet-api/2.2-dotnet-jwt-validation.md‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -495,22 +495,7 @@ If step 11 fails → `403 Forbidden`
495495
* Check the right `appsettings.json` file is loaded (Development vs Production)
496496
* Verify `FeatureManagement:AuthEnabled` is `false`, not `"false"` (string)
497497

498-
---
499-
500-
## 📖 Series Navigation
501-
502-
**AngularNetTutorial Blog Series:**
503-
504-
* [Building Modern Web Applications with Angular, .NET, and OAuth 2.0](https://medium.com/scrum-and-coke/building-modern-web-applications-with-angular-net-and-oauth-2-0-complete-tutorial-series-7ea97ed3fc56) — Main tutorial
505-
* [Stop Juggling Multiple Repos: Manage Your Full-Stack App Like a Workspace](#) — Git Submodules
506-
* [End-to-End Testing Made Simple: How Playwright Transforms Testing](#) — Playwright Overview
507-
* [Why Your Angular App Needs PKCE: OAuth 2.0 Explained with a Working Demo](#) — OAuth 2.0 PKCE Flow
508-
* [Lock Down Your Angular Routes: Auth Guards with OIDC in 5 Minutes](#) — Route Guards
509-
* [Never Forget a Bearer Token Again: Angular's HTTP Interceptor Explained](#) — HTTP Interceptor
510-
* [Show the Right Buttons to the Right People: Role-Based UI in Angular](#) — Role-Based UI
511-
* [How to Structure a .NET 10 API So It Doesn't Become a Mess](#) — Clean Architecture
512-
* **How Your .NET API Knows to Trust Angular** — This article
513-
* [Future-Proof Your .NET API: Add Versioning Without Breaking Existing Clients](#) — API Versioning
498+
📖 **Series:** [AngularNetTutorial Series Navigation](../SERIES-NAVIGATION-TOC.md)
514499

515500
---
516501

0 commit comments

Comments
 (0)