Fix build errors on Mermaid chart malformed graphs

Author: webstackdev

.cache/pages.json

@@ -2,10 +2,84 @@
   "about",
   {
     "articles": [
+      "alert-fatigue-reduction-triage-actionable-alerts",
+      "api-deprecation-sunset-headers-consumer-migration",
+      "api-gateway-metrics-traces-logs-debugging",
+      "api-usage-metering-quotas-cost-attribution",
+      "api-versioning-deprecation-sunset-headers-migration",
+      "argocd-sync-failures-gitops-debugging-troubleshooting",
+      "availability-targets-five-nines-cost-benefit-analysis",
+      "backpressure-load-shedding-admission-control-overload",
+      "blameless-postmortem-incident-analysis-systemic-causes",
+      "blue-green-canary-deployment-strategy-comparison",
       "building-with-astro",
-      "typescript-best-practices",
-      "useful-vs-code-extensions",
-      "writing-library-code"
+      "cdn-edge-caching-cache-keys-vary-headers",
+      "chaos-engineering-failure-injection-low-cost-experiments",
+      "ci-pipeline-caching-docker-layers-dependency-cache",
+      "circuit-breaker-retry-budget-cascade-failure-prevention",
+      "consumer-driven-contract-testing-pact-internal-apis",
+      "container-vulnerability-scanning-ci-shift-left-security",
+      "contract-testing-consumer-driven-api-breaking-changes",
+      "database-schema-migrations-continuous-deployment-zero-downtime",
+      "dead-letter-queue-design-replay-debugging",
+      "deployment-rollback-state-dependencies-feature-flags",
+      "distributed-tracing-sampling-strategies-head-tail",
+      "eol-runtime-upgrade-dependency-hell-migration",
+      "ephemeral-preview-environments-cost-control-cleanup",
+      "error-budget-policy-slo-velocity-reliability-tradeoffs",
+      "event-schema-versioning-compatibility-evolution",
+      "flaky-test-diagnosis-race-conditions-e2e-stabilization",
+      "golden-paths-developer-experience-standardization-autonomy",
+      "grafana-dashboard-hygiene-pruning-actionable-metrics",
+      "graphql-federation-caching-challenges-vs-rest",
+      "helm-release-management-drift-detection-debugging",
+      "idempotent-message-handlers-deduplication-retries",
+      "internal-cli-kubectl-terraform-wrapper-abstraction",
+      "internal-developer-portal-platform-self-service-actions",
+      "internal-platform-api-versioning-deprecation-breaking-changes",
+      "kubernetes-cluster-upgrade-playbook-risk-reduction",
+      "kubernetes-cost-optimization-resource-sizing-spot-instances",
+      "kubernetes-decision-framework-when-not-to-use",
+      "kubernetes-dns-debugging-ndots-coredns-troubleshooting",
+      "kubernetes-hpa-autoscaling-metrics-tuning-latency",
+      "kubernetes-ingress-gateway-api-comparison-migration",
+      "kubernetes-multi-cluster-fleet-management-configuration",
+      "kubernetes-pod-disruption-budget-autoscaler-node-rotation",
+      "kubernetes-pod-resource-requests-limits-qos-classes",
+      "kubernetes-secrets-external-secrets-operator-csi-vault",
+      "legacy-code-testing-characterization-tests-seams",
+      "monorepo-affected-builds-remote-caching-ci-optimization",
+      "mtls-certificate-rotation-service-mesh-authentication",
+      "nginx-haproxy-reverse-proxy-production-tuning",
+      "on-call-rotation-small-teams-sustainable-coverage",
+      "opa-conftest-policy-as-code-infrastructure-guardrails",
+      "openapi-spec-documentation-sdk-generation-validation",
+      "opentelemetry-span-design-granularity-overhead",
+      "performance-testing-load-models-benchmark-accuracy",
+      "platform-architecture-control-plane-data-plane-separation",
+      "platform-engineering-metrics-lead-time-developer-friction",
+      "postgresql-connection-pooling-saturation-sizing",
+      "private-networking-dns-routing-tls-debugging",
+      "prometheus-high-cardinality-metrics-label-design",
+      "rate-limiting-token-bucket-leaky-bucket-implementation",
+      "release-quality-gates-automated-deployment-validation",
+      "retry-storm-prevention-exponential-backoff-jitter",
+      "reverse-engineering-documentation-legacy-systems",
+      "service-catalog-metadata-schema-ownership-tracking",
+      "service-decommissioning-scream-test-shutdown",
+      "sli-selection-user-centric-service-level-indicators",
+      "slo-adoption-internal-services-reliability-culture",
+      "slsa-build-provenance-artifact-signing-supply-chain",
+      "strangler-fig-migration-observability-traffic-shifting",
+      "strangler-fig-monolith-auth-extraction-migration",
+      "structured-logging-correlation-ids-log-schema-design",
+      "symptom-based-alerting-runbooks-alert-design",
+      "synthetic-test-data-pii-anonymization-fixtures",
+      "terraform-module-design-defaults-versioning-interfaces",
+      "terraform-state-locking-corruption-recovery-backend",
+      "workload-identity-federation-keyless-cloud-authentication",
+      "writing-library-code",
+      "zero-downtime-database-migration-expand-contract"
     ]
   },
   {
@@ -37,14 +111,14 @@
   },
   {
     "tags": [
-      "api-platforms-and-edge",
-      "cloud-infrastructure",
-      "legacy-systems-and-modernization",
-      "observability",
-      "platform-engineering-and-developer-experience",
-      "release-engineering",
-      "reliability-engineering",
-      "typescript"
+      "apis-and-gateways",
+      "build-and-deploy",
+      "cloud-platforms",
+      "observability-and-telemetry",
+      "platform-engineering",
+      "reliability-and-testing",
+      "system-modernization",
+      "systems-and-development"
     ]
   }
 ]

.github/instructions/markdown.instructions.md

@@ -1,5 +1,5 @@
 ---
-applyTo: "**/*.md"
+applyTo: "**/*.{md,mdx}"
 ---
 
 # Markdown Linting Instructions
@@ -24,6 +24,26 @@ applyTo: "**/*.md"
 - Ordered lists should use consistent numbering (`MD029`). Either use sequential numbering (1, 2, 3) or all ones (1, 1, 1). Do not mix styles (e.g., 1, 2, 3, 4 is correct; 1, 2, 3, 4 where one item is numbered 2 when it should be 3 is incorrect).
 - No trailing spaces on lines (`MD009`), except when intentionally using two trailing spaces for a line break.
 
+## MDX And Inline Code Safety
+
+- When you mean the less-than operator (e.g. `a < b`), do not write a raw `<` in prose.
+	- Prefer `&lt;` (and `&gt;` when needed), or wrap the expression in backticks.
+- Always wrap code-y snippets in backticks so the Markdown/MDX parser doesn’t treat them as HTML/JSX.
+	- Examples: `{ param, ... }`, `generic<T>`, `Array<string>`, `T extends Foo`.
+
+## Mermaid Diagram Authoring
+
+- This repo renders Mermaid during builds; invalid or unsupported Mermaid syntax will fail `npm run build`.
+- Subgraphs:
+	- Do not use quoted subgraph titles like `subgraph "Title"`.
+	- Prefer a simple subgraph id with a simple label in brackets: `subgraph myGroup[My Group]`.
+	- Avoid punctuation-heavy labels in subgraph brackets (parentheses, `+`, `%`, em-dashes). Keep labels plain words.
+- Labels:
+	- Avoid double quotes inside node labels like `A[When is a trace "complete"?]`.
+	- Avoid `@` in node labels (it can be parsed as a reserved token in some Mermaid flowchart grammars).
+- Diagram types:
+	- Do not use `quadrantChart` (not supported by the current renderer); use `graph TD` (or another supported type) instead.
+
 ## How to Apply These Rules
 
 - If you are generating a new Markdown file, follow these rules from the beginning.

.vscode/settings.json

@@ -30,9 +30,11 @@
     "DTEND",
     "Dynatrace",
     "ecommerce",
+    "elbv",
     "enddt",
     "fastly",
     "Favicons",
+    "fbclid",
     "Fedi",
     "Fedibird",
     "Fediverse",
@@ -43,6 +45,7 @@
     "fosstodon",
     "FOUC",
     "fprintf",
+    "gclid",
     "gemoji",
     "glidejs",
     "gomodule",
@@ -75,6 +78,7 @@
     "moyai",
     "MTTD",
     "MTTR",
+    "myapp",
     "nanostores",
     "navigations",
     "ndots",
@@ -96,6 +100,7 @@
     "Poslovski",
     "Postg",
     "postgrest",
+    "preemptible",
     "psql",
     "Pulumi",
     "pylint",
@@ -135,6 +140,7 @@
     "tsdoc",
     "tseslint",
     "tshirt",
+    "TTFB",
     "Turborepo",
     "Tursa",
     "Turso",

src/components/Breadcrumbs/index.astro

@@ -36,14 +36,12 @@ const breadcrumbSchema =
   breadcrumbs.length > 1 && (
     <div id="breadcrumbs" class="mt-4">
       <nav aria-label="Breadcrumbs" class="breadcrumbs pl-8">
-        <ol class="flex items-center space-x-2 text-sm text-content-offset">
+        <ol class="flex items-center space-x-2 text-sm text-primary-offset">
           {breadcrumbs.map((item, index) => (
             <li class="flex items-center">
               {index > 0 && (
                 <svg
-                  class="w-4 h-4 mx-2 text-content-offset opacity-60"
-                  fill="none"
-                  stroke="currentColor"
+                  class="w-4 h-4 mx-2 opacity-60 fill-none stroke-primary-offset"
                   viewBox="0 0 24 24"
                   aria-hidden="true"
                   focusable="false"
@@ -58,13 +56,13 @@ const breadcrumbSchema =
               )}
 
               {item.isCurrentPage ? (
-                <span class="text-content font-medium" aria-current="page">
+                <span aria-current="page">
                   {item.label}
                 </span>
               ) : (
                 <a
                   href={item.href}
-                  class="text-primary hover:text-primary-offset hover:underline focus:text-primary-offset focus:underline focus:outline-none transition-colors duration-200"
+                  class="text-inherit underline decoration-current decoration-dotted hover:text-secondary focus:text-secondary focus:outline-none transition-colors duration-200"
                 >
                   {item.label}
                 </a>

src/content.config.ts

@@ -31,6 +31,7 @@ const createBaseCollectionSchema = ({ image }: SchemaContext) =>
     featured: z.boolean().default(false),
     isDraft: z.boolean().default(false),
     publishDate: z.date(),
+    modifiedDate: z.date().optional(),
   })
 
 const createSocialCollectionSchema = () =>

src/content/articles/api-versioning-deprecation-sunset-headers-migration/index.mdx

@@ -491,7 +491,7 @@ GET /v2/users HTTP/1.1
 Authorization: Bearer your-access-token
 ```
 
-[Detailed OAuth 2.0 setup guide](./oauth-setup.md)
+`[Detailed OAuth 2.0 setup guide](./oauth-setup.md)`
 
 ### Step 2: Update Pagination
 ...
@@ -781,7 +781,7 @@ Authorization: Bearer {token}
 
 <Callout type="warning">
 API v1 is deprecated and will be removed on June 1, 2025.
-[Migration guide →](/migration/v1-to-v2)
+`[Migration guide →](/migration/v1-to-v2)`
 </Callout>
 
 ### Request

src/content/articles/availability-targets-five-nines-cost-benefit-analysis/index.mdx

@@ -488,7 +488,7 @@ Figure: Four-nines architecture with multi-region deployment.
 - Cross-region database replication
 - Automated regional failover
 - Zero-downtime deployments required
-- 24/7 on-call with <15 minute response
+- 24/7 on-call with &lt15 minute response
 
 ### Five Nines (99.999%): Exotic Territory
 

src/content/articles/blameless-postmortem-incident-analysis-systemic-causes/index.mdx

@@ -95,13 +95,13 @@ Explain how knowing the outcome distorts our analysis of the decision-making pro
 
 ```mermaid
 graph LR
-    subgraph "At Decision Time"
+    subgraph decision[At Decision Time]
         A[Multiple Options] --> B[Reasonable Choice]
         C[Incomplete Information] --> B
         D[Time Pressure] --> B
     end
 
-    subgraph "After Incident (Hindsight)"
+    subgraph hindsight[After Incident Hindsight]
         B --> E[Outcome Known]
         E --> F["Obviously wrong choice"]
         E --> G["Should have known better"]
@@ -419,20 +419,20 @@ Introduce systems-theoretic analysis for complex incidents.
 
 ```mermaid
 graph TD
-    subgraph "Control Structure"
+    subgraph control[Control Structure]
         A[Company Leadership] -->|Sets priorities| B[Engineering Management]
         B -->|Allocates resources| C[Platform Team]
         C -->|Creates tools| D[Deploy Pipeline]
         D -->|Enables| E[Engineer Actions]
     end
 
-    subgraph "Feedback Loops"
+    subgraph feedback[Feedback Loops]
         E -->|Incident reports| C
         C -->|Metrics| B
         B -->|Performance data| A
     end
 
-    subgraph "Analysis Questions"
+    subgraph questions[Analysis Questions]
         F[What control was missing?]
         G[What feedback was absent?]
         H[What constraint was violated?]
@@ -491,19 +491,23 @@ Explain how to prioritize remediations when there are many potential actions.
 Table: Prioritization matrix for remediation action items.
 
 ```mermaid
-quadrantChart
-    title Remediation Prioritization
-    x-axis Low Effort --> High Effort
-    y-axis Low Impact --> High Impact
-    quadrant-1 Do Now (P0)
-    quadrant-2 Plan (P1)
-    quadrant-3 Defer (P3-P4)
-    quadrant-4 Quick Wins (P2)
-    Add config validation: [0.2, 0.9]
-    Canary deployments: [0.8, 0.95]
-    Update runbook: [0.15, 0.4]
-    Redesign config system: [0.9, 0.6]
-    Better error messages: [0.3, 0.3]
+graph TD
+  subgraph doNow[Do Now P0 High impact low effort]
+    A[Add config validation]
+  end
+
+  subgraph plan[Plan P1 High impact high effort]
+    B[Canary deployments]
+  end
+
+  subgraph quickWins[Quick Wins P2 Medium impact low effort]
+    C[Update runbook]
+    D[Better error messages]
+  end
+
+  subgraph defer[Defer P3 P4 Medium low impact high effort]
+    E[Redesign config system]
+  end
 ```
 Figure: Quadrant chart for visualizing remediation prioritization.
 

src/content/articles/blue-green-canary-deployment-strategy-comparison/index.mdx

@@ -469,7 +469,7 @@ Provide a comprehensive comparison for decision-making.
 
 | Factor | Blue/Green | Canary |
 |--------|------------|--------|
-| **Rollback speed** | Instant (<1s) | Fast (10-30s) |
+| **Rollback speed** | Instant (&lt1s) | Fast (10-30s) |
 | **Blast radius control** | All or nothing | Gradual |
 | **Resource overhead** | 2x during deploy | 1.1x-1.5x |
 | **Complexity** | Medium | High |

src/content/articles/cdn-edge-caching-cache-keys-vary-headers/index.mdx

@@ -231,7 +231,7 @@ Each unique combination = separate cache entry
 
 ```mermaid
 graph TD
-    A[/products] --> B{Vary: Accept-Language}
+  A["/products"] --> B{Vary: Accept-Language}
     B -->|en-US| C[English Response]
     B -->|es-ES| D[Spanish Response]
     B -->|fr-FR| E[French Response]
@@ -279,7 +279,7 @@ caching:
 Code: Vary header configuration with normalization.
 
 <Callout type="danger">
-`Vary: *` means "this response is unique to every request"—it effectively disables caching. Never use `Vary: *` unless you truly intend to make the response uncacheable.
+`Vary: *` means "this response is unique to every request"—it effectively disables caching. Never use `Vary: *` unless you truly intend to make the response noncacheable.
 </Callout>
 
 ### The Cookie Vary Trap
@@ -458,10 +458,10 @@ graph TD
     A[Product 123 Updated] --> B[Purge tag: product-123]
     B --> C[All URLs with tag invalidated]
 
-    C --> D[/products/123]
-    C --> E[/api/products/123]
-    C --> F[/categories/shoes includes 123]
-    C --> G[/brands/nike includes 123]
+  C --> D["/products/123"]
+  C --> E["/api/products/123"]
+  C --> F["/categories/shoes includes 123"]
+  C --> G["/brands/nike includes 123"]
 ```
 Figure: Tag-based purging invalidating all related content.
 
@@ -738,8 +738,8 @@ Key metrics and what they indicate.
 |--------|------|---------|----------------|
 | Cache Hit Ratio | >90% | 70-90% | Analyze cache keys, extend TTL |
 | Origin Load | Low, stable | Spiky | Check for cache misses, warming |
-| TTFB (cached) | <50ms | 50-200ms | Check PoP coverage, edge compute |
-| Purge Latency | <5s | 5-30s | Consider cache tags |
+| TTFB (cached) | &lt50ms | 50-200ms | Check PoP coverage, edge compute |
+| Purge Latency | &lt5s | 5-30s | Consider cache tags |
 | Cache Fill Rate | Low | High | Check TTL, invalidation frequency |
 
 Table: Cache performance metrics and targets.