Fix Build the automation list mangled by CloudCannon edit#865
Conversation
CloudCannon's d3e17f8 inserted the new add-automation.gif at the top level, which split the 1-5 numbered list into two short lists and restarted numbering at "Set up the trigger". It also reindented the bullets inside both <div class="annotate" markdown> blocks to 10 spaces, which python-markdown then rendered as a single paragraph, so the bullets came out joined inline with literal dashes. Restore the original continuous 1-5 list, move the new gif inside step 2 with 4-space continuation indent, fix the annotate block indentation back to 4 spaces, and restore the trailing newline.
WalkthroughDocumentation for the ESPHome button-controlled LEDs automation tutorial is restructured with a cleaner HTML annotate block layout. The trigger and action setup steps are reformatted with updated step numbering and content organization, while the functional guidance (Button "On Click" → RGB LEDs "Toggle") and light ID dropdown note are preserved. A formatting adjustment is also made to the concluding paragraph. ChangesTutorial Layout Restructuring
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@docs/products/ESPHome-Starter-Kit/automations/button-controlled-leds.md`:
- Line 26: The image markdown has no alt text; update the image tag that
references esphome-device-builder-add-automation.gif to include a concise,
descriptive alt string (e.g., "ESPhome device builder: add automation GIF") by
changing the markup from  to
something like  so screen readers can describe
the image.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 43d80cc5-c2ac-4446-a3f3-da40b588cbc2
📒 Files selected for processing (1)
docs/products/ESPHome-Starter-Kit/automations/button-controlled-leds.md
| 2. In the editor's left pane, expand the **Automations** dropdown and click **Add Automation**. | ||
|
|
||
|  | ||
|  |
There was a problem hiding this comment.
Add alt text to the image for accessibility.
The image is missing alternative text, which is required for screen readers and accessibility compliance.
♿ Proposed fix to add descriptive alt text
- 
+ 📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
|  | |
|  |
🧰 Tools
🪛 markdownlint-cli2 (0.22.1)
[warning] 26-26: Images should have alternate text (alt text)
(MD045, no-alt-text)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@docs/products/ESPHome-Starter-Kit/automations/button-controlled-leds.md` at
line 26, The image markdown has no alt text; update the image tag that
references esphome-device-builder-add-automation.gif to include a concise,
descriptive alt string (e.g., "ESPhome device builder: add automation GIF") by
changing the markup from  to
something like  so screen readers can describe
the image.
1 participant
What does this implement/fix?
A previous CloudCannon edit (d3e17f8) on
docs/products/ESPHome-Starter-Kit/automations/button-controlled-leds.mdmangled the Build the automation section:add-automation.gifat the top level, between steps 2 and 3.<div class="annotate" markdown>blocks were reindented to 10 spaces, which python-markdown then rendered as a single paragraph. The result on the live page is bullets joined inline with literal-characters instead of rendering as a list.This PR restores the original structure:
add-automation.giflives inside step 2 with 4-space continuation indent, so it doesn't break list numbering.<div class="annotate" markdown>with 4-space bullet indent.The two new images CloudCannon added (
add-automation.gifandexample-rgb-button-automation.webp, plus the existinginstall-button-component.gif) are kept where they belong.Types of changes
mkdocs.yml)Checklist:
devbranch (notmain)mkdocs servemkdocs.ymlmkdocs.ymlSummary by CodeRabbit