Starter Kit page#6628
Draft
mrdarrengriffin wants to merge 89 commits into
Draft
Conversation
✅ Deploy Preview for esphome ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
jesserockz
reviewed
May 21, 2026
Member
There was a problem hiding this comment.
These formatting changes should be made in an independent PR
… sections with responsive layouts and images
- Introduced new video files for disassembly and cable assembly in the starter kit. - Updated the Succeed and Gallery sections to include video elements with play buttons. - Added FAQ and WhatsInTheBox sections to the starter kit page. - Enhanced Card and CardGroup components to support new layout features and styling. - Improved IconTextGroup with connector animations for better visual representation. - Removed outdated image assets and replaced them with updated visuals.
- Updated IconText components in WhatsPossible.astro and YourWay.astro to use animated icons instead of static ones. - Introduced a new animated-icons.ts file to define and parse SVG icons for animations. - Enhanced the starter-kit.astro page by improving video playback handling with IntersectionObserver for lazy loading. - Adjusted CSS styles for better button class specificity and improved transition effects.
…into starter-kit
…into starter-kit
- Added fade-up animation class to TitleText component for smoother entrance effects. - Introduced delay for IconText animations in WhatsPossible and YourWay components for better visual flow. - Updated animated-icons library with new SVGs for heater and learn icons. - Implemented IntersectionObserver for animated icons and fade-up elements to trigger animations on scroll. - Defined global styles for fade-up animations to manage opacity and translation effects.
…into starter-kit
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Related issue (if applicable): fixes
Pull request in esphome with YAML changes (if applicable):
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.