Skip to content

feat(marketing): add platform detection for download button#558

Merged
t3dotgg merged 1 commit intopingdotgg:mainfrom
adityavardhansharma:feat/platform-detection-marketing-page
Mar 9, 2026
Merged

feat(marketing): add platform detection for download button#558
t3dotgg merged 1 commit intopingdotgg:mainfrom
adityavardhansharma:feat/platform-detection-marketing-page

Conversation

@adityavardhansharma
Copy link
Contributor

@adityavardhansharma adityavardhansharma commented Mar 8, 2026 •
edited by macroscopeapp bot
Loading

Summary

Adds a smart download button to the marketing landing page that automatically detects the visitor's operating system and provides the correct installer download.

What it does

  • Detects the visitor's OS (macOS, Windows, or Linux) via navigator.userAgent on page load
  • Shows the matching platform icon (Apple, Windows, or Tux logo) next to the download button using a data-platform attribute on <html> and CSS visibility rules
  • Updates the button label dynamically (e.g. "Download for macOS", "Download for Windows", "Download for Linux")
  • Fetches the latest release from the GitHub API (api.github.com/repos/pingdotgg/t3code/releases/latest) to get the available download assets
  • Links directly to the correct installer by matching the right asset from the release:
    • .exe for Windows
    • .dmg for macOS (with arm64/x64 arch detection)
    • .AppImage for Linux
  • Caches the release data in sessionStorage to avoid redundant GitHub API calls during the same browser session
  • Falls back gracefully — if OS can't be detected or the API call fails, the button shows a generic "Download now" label and links to the GitHub releases page

Platform icons

All three OS icons (Apple, Windows, Linux) are embedded as inline SVGs.

Note

Add platform detection and direct asset selection for the marketing index page Download button in index.astro

Introduce script.detectPlatform and script.pickAsset, update the hero Download anchor and label, fetch latest GitHub release on load, and set OS-specific href with icon and text via script.init.

📍Where to Start

Start with the initializer script.init in index.astro to see platform detection, release fetching, and href updates.

Macroscope summarized b9be1fe.

@coderabbitai
Copy link

coderabbitai bot commented Mar 8, 2026

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: bbe748b6-d36d-45ba-91c0-9a4eb2b59f22

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@t3dotgg
Copy link
Member

t3dotgg commented Mar 9, 2026

Nice ty for doing this with arch detection

@t3dotgg t3dotgg merged commit 96e1e3d into pingdotgg:main Mar 9, 2026
4 checks passed
This was referenced Mar 9, 2026
Closed
Merged
@nmggithub nmggithub mentioned this pull request Mar 9, 2026
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@adityavardhansharma @t3dotgg