[light] Add scannable effects index with CSS-animated previews#6692
[light] Add scannable effects index with CSS-animated previews#6692bharvey88 wants to merge 2 commits into
Conversation
✅ Deploy Preview for esphome ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
✅ Files skipped from review due to trivial changes (1)
WalkthroughAdds a new ChangesLight Effects Visual Documentation
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 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)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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
🧹 Nitpick comments (1)
src/content/docs/components/light/index.mdx (1)
589-590: ⚡ Quick winConsider using CSS custom properties for the scan animation.
The
translateX(133px)value is hardcoded based on the current pixel sizing (19 positions × 7px). If the pixel count or sizing in the HTML changes, this animation will break.♻️ Recommended approach using CSS variables
Define variables at the top of the style block:
:root { --fx-pixel-width: 6px; --fx-pixel-gap: 1px; --fx-strip-pixels: 20; }Then use
calc():`@keyframes` fx-scan { from { transform: translateX(0); } to { transform: translateX(calc((var(--fx-strip-pixels) - 1) * (var(--fx-pixel-width) + var(--fx-pixel-gap)))); } }🤖 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 `@src/content/docs/components/light/index.mdx` around lines 589 - 590, Replace the hardcoded translateX(133px) in the fx-scan keyframes with a calc() expression using CSS variables so the animation adapts when pixel size/count changes: introduce variables like --fx-pixel-width, --fx-pixel-gap and --fx-strip-pixels (e.g., in :root or the component scope) and change the fx-scan keyframe's to transform to use translateX(calc((var(--fx-strip-pixels) - 1) * (var(--fx-pixel-width) + var(--fx-pixel-gap)))) so the animation moves by (pixels - 1) times the pixel width+gap instead of a fixed 133px.
🤖 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 `@src/content/docs/components/light/index.mdx`:
- Line 784: The anchor link for the E1.31 effect is broken because the table
link uses href="`#e131-effect`" while the actual section anchor is
id="e131-light-effect"; update the table link href (the anchor in the <td
class="fx-name"> that currently points to "`#e131-effect`") to
"`#e131-light-effect`" so it matches the existing explicit anchor id for the E1.31
effect (id="e131-light-effect").
---
Nitpick comments:
In `@src/content/docs/components/light/index.mdx`:
- Around line 589-590: Replace the hardcoded translateX(133px) in the fx-scan
keyframes with a calc() expression using CSS variables so the animation adapts
when pixel size/count changes: introduce variables like --fx-pixel-width,
--fx-pixel-gap and --fx-strip-pixels (e.g., in :root or the component scope) and
change the fx-scan keyframe's to transform to use
translateX(calc((var(--fx-strip-pixels) - 1) * (var(--fx-pixel-width) +
var(--fx-pixel-gap)))) so the animation moves by (pixels - 1) times the pixel
width+gap instead of a fixed 133px.
🪄 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: 16ed5d22-3cd3-469e-8388-9afb01aff568
📒 Files selected for processing (1)
src/content/docs/components/light/index.mdx
Move the inline <style> block and raw HTML effect tables into a LightEffectPreview.astro component with scoped CSS, and replace the three HTML tables with markdown tables that call the component. The rendered output is equivalent; the MDX source goes from ~300 lines of inline HTML/CSS to a handful of markdown rows.
|
What are the requirements for the animated representations to work? |
|
The gifs load for me on Firefox for iOS.
Brandon Harvey
…On Tue, May 26, 2026 at 5:18 AM H. Árkosi Róbert ***@***.***> wrote:
*nagyrobi* left a comment (esphome/esphome.io#6692)
<#6692 (comment)>
What are the requirements for the animated representations to work?
I tried the preview
<https://deploy-preview-6692--esphome.netlify.app/components/light/#basic-animations>
in both Firefox (151.0) and Chrome (148.0.7778.179), the images don't
animate.
—
Reply to this email directly, view it on GitHub
<#6692>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/AB53NZWTOFECHMW65VYIRQD44VVP7AVCNFSM6AAAAACZM3ZVO6VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHM2DKNBTGI4TQMRQGU>
.
You are receiving this because you authored the thread.Message ID:
***@***.***>
|
They are css animations Those browser versions work for me on Linux, and that chrome version on macOS |
3 participants
Description
Adds a scannable index at the top of the Light Effects section of
src/content/docs/components/light/index.mdx. Three grouped tables list every effect with a CSS-animated preview, anchor-linked name, one-line description, and parameter list. The existing per-effect reference subsections (prose, YAML examples, configuration variables) below the index are unchanged.The change is one file, +300 lines, no new dependencies. Inline
<style>block plus raw HTML tables; Goldmark already passes HTML through. Reduced-motion fallback included.Discord context: discussed in the ESPHome Discord; this PR incorporates @jesserockz's feedback (open against upstream rather than fork, rebase onto current, fix the scan effect to bounce back and forth).
Related issue (if applicable): n/a
Pull request in esphome with YAML changes (if applicable): n/a
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
/src/content/docs/components/index.mdxwhen creating new documents for new components or cookbook.New Component Images
If you are adding a new component to ESPHome, you can automatically generate a standardized black and white component name image for the documentation.
To generate a component image:
Comment on this pull request with the following command, replacing
component_namewith your component name in lower_case format with underscores (e.g.,bme280,sht3x,dallas_temp):The ESPHome bot will respond with a downloadable ZIP file containing the SVG image.
Extract the SVG file and place it in the
/public/images/folder of this repository.Use the image in your component's index table entry in
/src/content/docs/components/index.mdx.Example: For a component called "DHT22 Temperature Sensor", use:
Note: All images used in ImgTable components must be placed in
/public/images/as the component resolves them to absolute paths.