Skip to content

Restructure homepage layout and components for improved user experience#6928

Draft
dan-long-dev wants to merge 3 commits into
currentfrom
homepage-restructure
Draft

Restructure homepage layout and components for improved user experience#6928
dan-long-dev wants to merge 3 commits into
currentfrom
homepage-restructure

Conversation

@dan-long-dev

Copy link
Copy Markdown
Contributor
  • Add Hero component with full-bleed image and dark overlay
  • Update GettingStartedGrid to include latest blog post
  • Enhance index.mdx with new feature grid and updated hero image
  • Revise header navigation items for better accessibility
  • Introduce custom styles for code comparison and homepage layout

Description

Related issue (if applicable): fixes

Pull request in esphome with YAML changes (if applicable):

  • esphome/esphome#

Checklist

  • I am merging into next because this is new documentation that has a matching pull-request in esphome as linked above.
    or

  • I am merging into current because 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.mdx when 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:

  1. Comment on this pull request with the following command, replacing component_name with your component name in lower_case format with underscores (e.g., bme280, sht3x, dallas_temp):

    @esphomebot generate image component_name
    
  2. The ESPHome bot will respond with a downloadable ZIP file containing the SVG image.

  3. Extract the SVG file and place it in the /public/images/ folder of this repository.

  4. 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:

@esphomebot generate image dht22

Note: All images used in ImgTable components must be placed in /public/images/ as the component resolves them to absolute paths.

- Add Hero component with full-bleed image and dark overlay
- Update GettingStartedGrid to include latest blog post
- Enhance index.mdx with new feature grid and updated hero image
- Revise header navigation items for better accessibility
- Introduce custom styles for code comparison and homepage layout
@esphome esphome Bot added the current label Jul 6, 2026
@netlify

netlify Bot commented Jul 6, 2026

Copy link
Copy Markdown

Deploy Preview for esphome ready!

Name Link
🔨 Latest commit aab1fc9
🔍 Latest deploy log https://app.netlify.com/projects/esphome/deploys/6a4babdc72a05a0008cb2e67
😎 Deploy Preview https://deploy-preview-6928--esphome.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant