Add install page for ESPHome Device Builder#6669
Conversation
New /install page covering installation as a Home Assistant app or as a native desktop app on macOS, Windows, and Linux. OS detection auto-selects the matching tab; Linux supports x86_64 and arm64 across deb, rpm, AUR, and AppImage.
✅ Deploy Preview for esphome ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
There was a problem hiding this comment.
Pull request overview
Adds a new Starlight-styled /install documentation page for installing ESPHome Device Builder across Home Assistant and desktop OSes, backed by a new interactive InstallSelector component.
Changes:
- Added
src/content/docs/install.mdxwith a new install landing page that embeds an interactive selector. - Added
src/components/InstallSelector.astroimplementing OS tabs, per-OS install instructions, and basic UA-based auto-selection.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| src/content/docs/install.mdx | New install landing page content and entry point for the selector UI. |
| src/components/InstallSelector.astro | New interactive tabbed selector with OS detection and platform-specific download/install instructions. |
|
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 an InstallSelector Astro component with OS- and architecture-aware download links, segmented controls, and client-side logic, plus a new install documentation page embedding the component and describing first-launch desktop behavior. ChangesInstallation Component & Documentation
Sequence DiagramsequenceDiagram
participant User
participant StarlightTabs as starlight-tabs
participant InstallSelector
participant UA_CH as navigator.userAgentData
participant GitHub as GitHubReleases
User->>InstallSelector: interact (select platform/arch/format)
Note right of InstallSelector: updates aria-pressed, shows/hides panels
InstallSelector->>GitHub: set DownloadButton href (derived from releases base + tag)
StarlightTabs-->>InstallSelector: component defined/upgrade event
InstallSelector->>StarlightTabs: auto-select appropriate tab
InstallSelector->>UA_CH: getHighEntropyValues(["architecture"]) (optional)
UA_CH-->>InstallSelector: architecture hint (optional)
InstallSelector->>GitHub: update DMG/Linux URL if arch/format changed
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested labels
🚥 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
🤖 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/components/InstallSelector.astro`:
- Around line 402-407: The UA-CH call can be undefined and calling .then/.catch
on it throws; guard the chain by first obtaining the potential promise via
navigator.userAgentData?.getHighEntropyValues?.(["architecture"]) and only
attach .then/.catch if that value is a Promise (e.g., check p && typeof p.then
=== "function"). In other words, in the inline script replace the direct
navigator.userAgentData?.getHighEntropyValues(...).then(...) with a guarded flow
that assigns the result to a variable (p) and conditionally calls p.then(info =>
{ if (info.architecture === "x86") selectArch("x64"); }).catch(...) so browsers
without navigator.userAgentData or getHighEntropyValues don't throw and the rest
of the script still runs.
🪄 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: 0ead0acd-e66d-4e86-b0fc-f622dcccdfd7
📒 Files selected for processing (2)
src/components/InstallSelector.astrosrc/content/docs/install.mdx
- detectOs() now returns null for iOS and desktop-mode iPad UAs so mobile Safari no longer auto-selects the macOS download. - HA Container instructions now point at http://localhost:6052 and note the -p 6052:6052 alternative for Docker Desktop. - Scope the "First Launch" section to desktop installs and direct HA users to the Open Web UI button.
Description
Adds a new
/installpage that walks users through installing the ESPHome Device Builder, with native Starlight chrome (header, sidebar, footer) and theming. The interactiveInstallSelectorcomponent fetches data from a hard-codedversionconstant — bump it manually when a significantesphome-desktoprelease ships.The page has four OS tabs (Home Assistant, Windows, macOS, Linux). OS detection auto-selects the matching tab on load via
navigator.userAgentData+ UA fallback. Within each tab:docker runcommand lifted from the command-line guide).dialout→uucpwhen Arch is selected.Download buttons use Starlight's native
<LinkButton>so they pick up theme colors automatically. The only custom CSS left is the segmented-control styling (Starlight doesn't ship one) and minor layout helpers.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.