Add blue-green-canary-deployment-strategy-comparison article

Author: webstackdev

COVERS.md

@@ -179,3 +179,25 @@ Create an image of a single incident (represented as a fallen tree or withered p
 ### Prompt 5: The Learning Loop
 
 Design a visualization of a continuous improvement cycle: Incident → Analysis → Learning → Improvement → Resilience → (back to start but at a higher level, spiral upward). The emphasis is on forward motion and growth, not punishment or backward-looking blame. Style: abstract/geometric, upward spiral motion, gradient from darker (incident) to lighter (resilience), 16:9 aspect ratio.
+
+## blue-green-canary-deployment-strategy-comparison
+
+### Prompt 1: The Two Paths
+
+Create an image showing two distinct deployment paths from a single source. One path (blue/green) shows a clean switchover between two parallel environments. The other path (canary) shows a gradual flow splitting and merging. Both lead to a "Production" destination. Style: clean technical illustration, blue and green on one side, yellow/gold (canary) on the other, 16:9 aspect ratio.
+
+### Prompt 2: The Traffic Controller
+
+Design an image of an air traffic control tower overlooking a runway (representing production). Two planes (blue and green) are on the ground, while small birds (canaries) fly in a test pattern. The controller decides which traffic to route. Style: stylized aviation illustration, clean lines, blue sky background, 16:9 aspect ratio.
+
+### Prompt 3: The Deployment Spectrum
+
+Illustrate a horizontal spectrum/gradient showing deployment strategies from simple (left) to complex (right). Recreate → Rolling → Blue/Green → Canary → Progressive. Each strategy is represented by an abstract icon showing its traffic pattern. Style: infographic art, gradient colors from warm to cool, minimalist icons, 16:9 aspect ratio.
+
+### Prompt 4: The Safety Net Comparison
+
+Create a split-screen image. Left side shows blue/green: a tightrope walker with a complete safety net below (instant rollback). Right side shows canary: a tightrope walker with spotters gradually increasing support (gradual validation). Both are crossing safely but with different safety mechanisms. Style: circus/performance art aesthetic, dramatic lighting, 16:9 aspect ratio.
+
+### Prompt 5: The Decision Tree
+
+Design an image of an elegant decision tree where a path forks based on questions (traffic control available? instant rollback needed? observability mature?). Different paths lead to different deployment strategy icons. The tree grows from "requirements" soil into "strategy" branches. Style: botanical illustration meets flowchart, organic shapes with technical elements, earth and sky tones, 16:9 aspect ratio.

_TODO.md

@@ -176,6 +176,7 @@ To overlay an article title and published date on a cover image, use CSS positio
 - When adding backticks in a callout, it gets the standard grey background for a code block in light theme. But it should get an offset of the callout color, like "info-offset".
 - Inline code blocks are not wrapping. They're breaking to a new line. An example is in the "Scenario: CRD Sync Order Problem" section of argocd-sync-failures-gitops-debugging-troubleshooting#specific-failure-scenarios.
 - The spacing on unordered task lists nested in an ordered list is wrong, see "Questions to Ask Before Setting Targets" in src/content/articles/availability-targets-five-nines-cost-benefit-analysis/index.mdx
+- There's too much space at the bottom of callouts, a full line of extra space in the colored background area.
 
 ## Project Stuff
 
@@ -275,8 +276,8 @@ __implement_article__
 
 I renamed our longer article to pdf.mdx and created an empty index.mdx template. Ignore the coverAlt frontmatter line that has "TODO". It will be added later when cover art is added. Use a single underscore for emphasis style, not asterisks. Use plain quotations and apostrophes, not smart quotes. Do not start the article with an H1 in the Markdown - the system automatically adds the title frontmatter key as an H1 header. Let's implement the article we just outlined. The captions for tables and other elements use a prefix like ("Table: ") to let the unified markdown pipeline know to convert this into a caption - don't worry about the prefixes, they'll be normalized later.
 
-Add suggested text for a call to action to download the longer PDF at the bottom of the article under an HR. Do not worry about optimizing this text for the total word count of the article - it is not included in the word count since it will be used in a CTA, and I will handle deducting so there's no need to worry about complex calculations to the word count. Don't include a link in the CTA. Do not mention the word length. Do not worry about formatting - the content will be used as props for a dedicated Component. Do not include multiple tables, code blocks, or mermaid diagrams in a row without text between them to break them up.
+Add suggested text for a call to action to download the longer PDF at the bottom of the article under an HR. Do not worry about optimizing this text for the total word count of the article - it is not included in the word count since it will be used in a CTA, and I will handle deducting so there's no need to worry about complex calculations to the word count. Don't include a link in the CTA. Do not mention the word length. Do not worry about formatting - the content will be used as props for a dedicated Component. Do not include multiple tables, code blocks, or mermaid diagrams in a row without text between them to break them up. Do not import the Callout component, it is automatic.
 
 __review_article__
 
-Let's review the article in its entirety now, and make any suggestions you find that would improve the readability or quality of the article. Do not make any changes - just review and put together a list of suggestions to discuss.
+Let's review the article in its entirety now, and make any suggestions you find that would improve the readability or quality of the article. Do not make any changes - just review and put together a list of suggestions to discuss. Ignore the call to action at the bottom of the article.