Use ESPHome logo on readme page according to theme (light/dark) #4526
Conversation
dougiteixeira
changed the title
WalkthroughThe pull request updates the ESPHome documentation's Changes
Possibly related PRs
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (1)README.md (1)Pattern 🔇 Additional comments (2)README.md (2)
The anchor tag appropriately wraps the logo and points to the main website.
Fix HTML syntax issues in the picture element There are a couple of syntax issues in the implementation:
Apply this diff to fix the issues: <picture>
- <source media="(prefers-color-scheme: dark)" srcset="https://esphome.io/_static/logo-text-on-dark.svg", alt="ESPHome Logo">
+ <source media="(prefers-color-scheme: dark)" srcset="https://esphome.io/_static/logo-text-on-dark.svg">
<img src="https://esphome.io/_static/logo-text-on-light.svg" alt="ESPHome Logo">
</picture>Let's verify the accessibility of both logo URLs: ✅ Verification successfulFix HTML syntax issues in the picture element The HTML syntax issues need to be fixed, but both logo URLs are confirmed to be accessible:
Apply this diff to fix the issues: <picture>
- <source media="(prefers-color-scheme: dark)" srcset="https://esphome.io/_static/logo-text-on-dark.svg", alt="ESPHome Logo">
+ <source media="(prefers-color-scheme: dark)" srcset="https://esphome.io/_static/logo-text-on-dark.svg">
<img src="https://esphome.io/_static/logo-text-on-light.svg" alt="ESPHome Logo">
</picture>🏁 Scripts executedThe following scripts were executed for the analysis: Script: #!/bin/bash
# Description: Verify that both logo images are accessible
# Check both light and dark mode logo URLs
for url in "https://esphome.io/_static/logo-text-on-light.svg" "https://esphome.io/_static/logo-text-on-dark.svg"; do
echo "Checking $url..."
if curl --output /dev/null --silent --head --fail "$url"; then
echo "✓ URL is accessible"
else
echo "✗ URL is not accessible"
fi
done
Length of output: 790 Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
✅ Deploy Preview for esphome ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
But then the ESPHome Docs logo is no longer visible |
The ESPHome Docs logo was created in 2019. I don't see much coherence in keeping it, I don't think it fits the visual identity used by ESPHome/HomeAssistant, in which case it doesn't add much. But I'm open to feedback and may come back to it with light/dark versions. |
Description:
Use ESPHome logo on readme page according to theme (light/dark)
Related issue (if applicable): fixes
Pull request in esphome with YAML changes (if applicable): esphome/esphome#
Checklist:
I am merging into
nextbecause this is new documentation that has a matching pull-request in esphome as linked above.or
I am merging into
currentbecause this is a fix, change and/or adjustment in the current documentation and is not for a new component or feature.Link added in
/index.rstwhen creating new documents for new components or cookbook.