Skip to content

Add social follow modal after downloads#78

Merged
SeoFood merged 1 commit into
mainfrom
seofood/download-social-modal
May 25, 2026
Merged

Add social follow modal after downloads#78
SeoFood merged 1 commit into
mainfrom
seofood/download-social-modal

Conversation

@SeoFood
Copy link
Copy Markdown
Contributor

@SeoFood SeoFood commented May 25, 2026

Summary

  • Show a centered social follow modal after download CTA clicks
  • Keep macOS and Windows file downloads in the current tab while preserving new-tab behavior for TestFlight and social links
  • Add localized modal copy and Playwright coverage for modal behavior, icon rendering, and download target handling

Tests

  • npm run test:i18n
  • npm run test:unit
  • npm run build
  • npm run test:e2e

Summary by CodeRabbit

  • New Features

    • Added a social sharing banner that appears when users click download buttons, featuring localized options to share on X, Reddit, Discord, and GitHub.
  • Localization

    • Added English and German translations for the new social sharing banner.
  • Tests

    • Added test coverage for download routing and social banner interactions.

Review Change Stack

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 25, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 7129e0ba-3862-4c41-8474-ff57f2ba9ee5

📥 Commits

Reviewing files that changed from the base of the PR and between c78cfd1 and c2124d3.

📒 Files selected for processing (16)
  • src/components/landing/download-cta.tsx
  • src/components/landing/hero.tsx
  • src/components/landing/platform-download-menu.tsx
  • src/components/landing/platforms-coming-soon.tsx
  • src/components/layout/download-social-banner.astro
  • src/components/layout/header.tsx
  • src/components/use-cases/use-case-cta.tsx
  • src/components/use-cases/use-case-hero.tsx
  • src/i18n/locales/de/common.json
  • src/i18n/locales/en/common.json
  • src/layouts/BaseLayout.astro
  • src/pages/[locale]/business.astro
  • src/pages/[locale]/release-status.astro
  • src/pages/docs/_ios.tsx
  • src/pages/use-cases/_index.tsx
  • tests/download-routing.spec.ts

📝 Walkthrough

Walkthrough

The PR introduces a social follow banner component that displays when users click download links, with platform-aware routing: iOS downloads open in the same tab, while other platforms open in new tabs. All download links across landing, documentation, and business pages gain a data-download-social-trigger attribute to trigger the banner, which renders localized follow/share options for X, Reddit, Discord, and GitHub.

Changes

Download Social Banner Feature

Layer / File(s) Summary
Platform Type Contract
src/components/landing/platforms-coming-soon.tsx
Platform type imported and platform: Platform discriminator added to PlatformInfo interface; macOS, Windows, and iOS platform entries now set this discriminator value.
Download Social Banner Component & Layout Integration
src/components/layout/download-social-banner.astro, src/i18n/locales/en/common.json, src/i18n/locales/de/common.json, src/layouts/BaseLayout.astro
New Astro component renders a fixed modal dialog with localized banner text (kicker, title, description) and a grid of share/follow links. Client-side script shows the banner when clicks originate from [data-download-social-trigger] elements, hides on backdrop/Escape, focuses the close button on show, and auto-hides after 14 seconds. Component integrated into BaseLayout with locale prop. English and German translations added for banner text and social link labels.
Platform-Aware Download Routing & Instrumentation
src/components/landing/download-cta.tsx, src/components/landing/hero.tsx, src/components/landing/platform-download-menu.tsx, src/components/landing/platforms-coming-soon.tsx, src/components/layout/header.tsx, src/components/use-cases/use-case-cta.tsx, src/components/use-cases/use-case-hero.tsx, src/pages/[locale]/business.astro, src/pages/[locale]/release-status.astro, src/pages/docs/_ios.tsx, src/pages/use-cases/_index.tsx
Download links across landing components, header, pages, and use-case components now conditionally set target="_blank" and rel="noopener noreferrer" based on platform (omitted for iOS, set for macOS/Windows). All download anchors gain data-download-social-trigger attribute to trigger banner display on click. Applies to hero download CTA, footer CTA, platform menu links, coming-soon TestFlight link, business page Mac DMG link, release-status platform links, iOS TestFlight docs links, use-case CTAs, and use-cases index link.
Test Coverage
tests/download-routing.spec.ts
Extended LandingScenario type with opensNewTab boolean field. Landing test scenarios now include platform-specific flags (false for macOS/Windows, true for iOS). Hero and footer CTA routing assertions check conditional target="_blank" presence based on the flag. New Playwright test verifies banner appears when download button is clicked, validates localized text content, and confirms presence of follow/share links and social icons. Release-status assertions updated for both English and German locales to verify platform-specific target="_blank" behavior: latest/beta builds must omit the attribute while TestFlight links retain it.

Sequence Diagram

sequenceDiagram
  participant User
  participant DownloadLink as Download Link<br/>[data-download-social-trigger]
  participant DownloadSocialBanner as Social Banner
  participant SocialService as Social Platform<br/>(X/Reddit/Discord/GitHub)
  User->>DownloadLink: click to download
  DownloadLink->>DownloadSocialBanner: trigger show event
  alt platform === 'ios'
    DownloadLink->>User: start download (same tab)
  else macOS or Windows
    DownloadLink->>User: start download (new tab)
  end
  DownloadSocialBanner->>User: display follow/share banner
  User->>DownloadSocialBanner: click social link
  DownloadSocialBanner->>SocialService: navigate to platform
  User->>DownloadSocialBanner: click close or wait 14s
  DownloadSocialBanner->>DownloadSocialBanner: hide banner
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

A banner springs forth with social cheer,
When downloads begin, we gather here,
iOS stays put, the rest fly wide,
Share to X, Discord, Reddit's tide!
Fourteen seconds to join the fun,
Then close the door when all is done. 🐰

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title 'Add social follow modal after downloads' clearly summarizes the main change: introducing a modal dialog that appears following download interactions.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch seofood/download-social-modal

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

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint skipped: no ESLint configuration detected in root package.json. To enable, add eslint to devDependencies.


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

@SeoFood SeoFood merged commit d429298 into main May 25, 2026
2 checks passed
@SeoFood SeoFood deleted the seofood/download-social-modal branch May 25, 2026 12:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant