@@ -239,3 +239,337 @@ Common issue: **CORS errors**
2392394. Login with test credentials
2402405. Should redirect back to Angular dashboard
2412416. API calls should work (check Network tab for 200 responses with Bearer token)
242+
243+ ---
244+
245+ ## Writing Medium.com Compatible Blog Posts
246+
247+ When creating blog posts or documentation for Medium.com, follow these guidelines to ensure proper formatting and compatibility.
248+
249+ ### Medium.com Formatting Rules
250+
251+ **CRITICAL: Medium.com does NOT support tables.** All content must use alternative formatting.
252+
253+ ### Replace Tables With Lists
254+
255+ **❌ DON'T use tables:**
256+ ```markdown
257+ | Tool | Version | Purpose |
258+ |------|---------|---------|
259+ | .NET | 10.0+ | Backend |
260+ ```
261+
262+ **✅ DO use bullet lists with em dashes (—):**
263+ ```markdown
264+ * **.NET SDK 10.0+** — Build and run .NET applications
265+ * **Node.js 20.x LTS** — Run Angular development server
266+ * **Git (Latest)** — Version control and submodules
267+ ```
268+
269+ ### Technology Stack Formatting
270+
271+ **❌ DON'T use tables for tech stacks:**
272+ ```markdown
273+ | Technology | Version | Purpose |
274+ |------------|---------|---------|
275+ | Angular | 20.x | Frontend |
276+ ```
277+
278+ **✅ DO use descriptive bullets:**
279+ ```markdown
280+ **Technology Stack:**
281+
282+ * **Angular 20** — Frontend framework
283+ * **Angular Material 20** — UI component library
284+ * **TypeScript 5.x** — Type-safe JavaScript
285+ * **RxJS 7.x** — Reactive programming
286+ ```
287+
288+ ### API Endpoints Formatting
289+
290+ **❌ DON'T use tables for API endpoints:**
291+ ```markdown
292+ | Method | Endpoint | Auth |
293+ |--------|----------|------|
294+ | GET | /api/employees | read |
295+ ```
296+
297+ **✅ DO use descriptive bullets:**
298+ ```markdown
299+ **API Endpoints (Employees):**
300+
301+ * **GET /api/v1/employees** — Get all employees (requires `read` scope)
302+ * **GET /api/v1/employees/{id}** — Get employee by ID (requires `read` scope)
303+ * **POST /api/v1/employees** — Create employee (requires `write` scope)
304+ * **PUT /api/v1/employees/{id}** — Update employee (requires `write` scope)
305+ * **DELETE /api/v1/employees/{id}** — Delete employee (requires `write` scope)
306+ ```
307+
308+ ### Comparison/Reference Formatting
309+
310+ **❌ DON'T use tables for comparisons:**
311+ ```markdown
312+ | Aspect | Value |
313+ |--------|-------|
314+ | Format | JWT |
315+ | Lifetime | 1 hour |
316+ ```
317+
318+ **✅ DO use definition-style formatting:**
319+ ```markdown
320+ **Access Token:**
321+ * **Purpose:** Grant access to protected resources (APIs)
322+ * **Format:** JWT or reference token
323+ * **Lifetime:** Short (typically 1 hour)
324+ * **Validated by:** Resource server (API)
325+ * **Contains:** Scopes, client ID, user claims
326+ ```
327+
328+ ### URL/Port Listings
329+
330+ **❌ DON'T use tables for URLs:**
331+ ```markdown
332+ | Component | URL | Description |
333+ |-----------|-----|-------------|
334+ | Angular | http://localhost:4200 | Main UI |
335+ ```
336+
337+ **✅ DO use colon-separated bullets:**
338+ ```markdown
339+ **Application URLs:**
340+
341+ * **Angular Client:** http://localhost:4200 — Main application UI
342+ * **Web API:** https://localhost:44378 — RESTful API endpoints
343+ * **Swagger UI:** https://localhost:44378/swagger — API documentation
344+ * **IdentityServer:** https://localhost:44310 — Authentication server
345+ ```
346+
347+ ### Problem/Solution Formatting
348+
349+ **❌ DON'T use tables for troubleshooting:**
350+ ```markdown
351+ | Issue | Cause | Solution |
352+ |-------|-------|----------|
353+ | 401 Error | Token invalid | Restart IdentityServer |
354+ ```
355+
356+ **✅ DO use problem/solution structure:**
357+ ```markdown
358+ **Common Issues:**
359+
360+ **IdentityServer won't start**
361+ * **Problem:** Port 44310 already in use
362+ * **Solution:** Kill process using the port or change port in `Properties/launchSettings.json`
363+
364+ **API returns 401 Unauthorized**
365+ * **Problem:** IdentityServer not running or URL mismatch
366+ * **Solution:** Verify IdentityServer is running at https://localhost:44310
367+
368+ **Angular shows "invalid_scope" error**
369+ * **Problem:** Scope mismatch between Angular config and IdentityServer
370+ * **Solution:** Verify `environment.ts` scope matches `identityserverdata.json`
371+ ```
372+
373+ ### Section Headers with Emojis
374+
375+ Use emojis to make sections more visually appealing and scannable:
376+
377+ ```markdown
378+ ## 📚 What You'll Learn
379+ ## 🎯 What is the CAT Pattern?
380+ ## 🚀 Getting Started
381+ ## 🔐 Key Security Features
382+ ## 📦 Component Deep Dive
383+ ## 💡 Benefits of the CAT Pattern
384+ ## 📖 Tutorial Series Roadmap
385+ ## 🎓 Next Steps
386+ ## 🔗 Learning Resources
387+ ## 🤝 Support and Contribution
388+ ## 🎉 Conclusion
389+ ```
390+
391+ ### Bold and Emphasis
392+
393+ Use bold effectively for scannability:
394+
395+ ```markdown
396+ **Why First?** The API and Angular client both depend on IdentityServer.
397+
398+ **Wait for:** `Now listening on: https://localhost:44310`
399+
400+ **Verify:** Open browser to check the application loads correctly.
401+ ```
402+
403+ ### Code Block Best Practices
404+
405+ Keep code blocks concise and focused:
406+
407+ ```markdown
408+ **Good:**
409+ ```typescript
410+ export const environment = {
411+ apiUrl: 'https://localhost:44378/api/v1',
412+ identityServerUrl: 'https://localhost:44310',
413+ };
414+ ```
415+ ```
416+
417+ **Avoid:** Including entire files or excessive comments
418+
419+ ### Nested Lists for Structure
420+
421+ Use nested bullets for hierarchical information:
422+
423+ ```markdown
424+ **Key Features:**
425+
426+ * **Authentication & Authorization**
427+ * OIDC authentication with automatic token refresh
428+ * HTTP interceptor adds Bearer tokens automatically
429+ * Route guards protect authenticated routes
430+ * Role-based UI rendering using ngx-permissions
431+
432+ * **UI Components**
433+ * Material Design components (buttons, forms, tables)
434+ * Responsive layouts (mobile, tablet, desktop)
435+ * Data tables with sorting and filtering
436+ * Form validation with reactive forms
437+ ```
438+
439+ ### Checkmarks for Benefits
440+
441+ Use checkmarks (✅) for positive points:
442+
443+ ```markdown
444+ ## Benefits
445+
446+ ✅ **Security** — Industry-standard OAuth 2.0/OIDC authentication
447+
448+ ✅ **Scalability** — Independent scaling of each component
449+
450+ ✅ **Maintainability** — Clear separation of concerns
451+
452+ ✅ **Flexibility** — Technology-agnostic architecture
453+ ```
454+
455+ ### Hero Images
456+
457+ Always include a placeholder at the top of blog posts:
458+
459+ ```markdown
460+ # Your Title Here
461+
462+ ## Subtitle
463+
464+ Brief introduction paragraph.
465+
466+ 
467+
468+ ---
469+
470+ ## First Section
471+ ```
472+
473+ ### Tags at Bottom
474+
475+ End blog posts with relevant tags:
476+
477+ ```markdown
478+ ---
479+
480+ **📌 Tags:** #angular #dotnet #oauth2 #openidconnect #identityserver #webdevelopment #authentication #security #cleanarchitecture #typescript #csharp #enterpriseapplications #fullstack #spa #jwt
481+ ```
482+
483+ ### Creating Medium-Optimized Content
484+
485+ When asked to create Medium.com blog posts:
486+
487+ 1. **Start from scratch** or use existing content as reference
488+ 2. **Remove ALL tables** — convert to lists, sections, or prose
489+ 3. **Add emoji section headers** for visual appeal
490+ 4. **Use bold liberally** for scannability
491+ 5. **Keep paragraphs short** (2-3 sentences max)
492+ 6. **Use nested bullets** for hierarchical info
493+ 7. **Add checkmarks (✅)** for benefits/features
494+ 8. **Include hero image placeholder** at top
495+ 9. **Add relevant tags** at bottom
496+ 10. **Test by copying to Medium** editor before finalizing
497+
498+ ### Example: Converting a Tutorial Section
499+
500+ **Before (with tables):**
501+ ```markdown
502+ ## Prerequisites
503+
504+ | Tool | Version | Download |
505+ |------|---------|----------|
506+ | .NET SDK | 10.0+ | [Link](https://dotnet.microsoft.com) |
507+ | Node.js | 20.x | [Link](https://nodejs.org/) |
508+
509+ | Feature | Description |
510+ |---------|-------------|
511+ | OIDC | Authentication protocol |
512+ | JWT | Token format |
513+ ```
514+
515+ **After (Medium-optimized):**
516+ ```markdown
517+ ## 🚀 Getting Started
518+
519+ ### Prerequisites
520+
521+ **Tools you'll need:**
522+
523+ * **.NET SDK 10.0+** — Build and run .NET applications — [Download](https://dotnet.microsoft.com/download)
524+ * **Node.js 20.x LTS** — Run Angular development server — [Download](https://nodejs.org/)
525+ * **npm 10+** — Package manager for Node.js — Included with Node.js
526+ * **Git (Latest)** — Version control and submodules — [Download](https://git-scm.com/)
527+
528+ ### Key Technologies
529+
530+ **Authentication & Security:**
531+ * **OIDC (OpenID Connect)** — Industry-standard authentication protocol
532+ * **JWT (JSON Web Tokens)** — Secure token format for API authorization
533+ * **OAuth 2.0** — Authorization framework for delegated access
534+ * **PKCE** — Security extension for single-page applications
535+ ```
536+
537+ ### Quick Reference: Medium.com Do's and Don'ts
538+
539+ **DO:**
540+ * ✅ Use bullet lists with em dashes (—)
541+ * ✅ Use emoji section headers (📚, 🎯, 🚀)
542+ * ✅ Use bold for emphasis and key terms
543+ * ✅ Keep paragraphs short (2-3 sentences)
544+ * ✅ Use nested bullets for structure
545+ * ✅ Use checkmarks (✅) for benefits
546+ * ✅ Include hero image placeholder
547+ * ✅ Add tags at bottom
548+
549+ **DON'T:**
550+ * ❌ Use tables (not supported)
551+ * ❌ Use complex ASCII diagrams (simplify them)
552+ * ❌ Use relative internal links
553+ * ❌ Include file system paths excessively
554+ * ❌ Use overly technical jargon without explanation
555+ * ❌ Write long paragraphs (hard to scan)
556+ * ❌ Use excessive nested headings (keep hierarchy flat)
557+
558+ ### Publishing Workflow
559+
560+ 1. **Create content** following Medium guidelines
561+ 2. **Save as `*-MEDIUM.md`** to distinguish from regular docs
562+ 3. **Copy entire content** to clipboard
563+ 4. **Paste into Medium editor** (medium.com/new-story)
564+ 5. **Replace placeholder image** with actual diagram
565+ 6. **Preview** to check formatting
566+ 7. **Add publication tags** from bottom of article
567+ 8. **Publish or save as draft**
568+
569+ ### File Naming Convention
570+
571+ * Regular documentation: `TUTORIAL.md`, `README.md`
572+ * Medium-optimized version: `TUTORIAL-MEDIUM.md`
573+ * Part-specific blogs: `01-introduction-MEDIUM.md`, `02-authentication-MEDIUM.md`
574+
575+ This ensures clear separation between comprehensive technical documentation and reader-friendly Medium content.
0 commit comments