Skip to content

Commit b2d426e

Browse files
Aniket-EnggAniket-Engg
authored
Merge branch 'master' into refactor/learneth-plugin
2 parents 4bd639f + ff0fb5b commit b2d426e

File tree

7 files changed

+779
-13
lines changed

7 files changed

+779
-13
lines changed

‎apps/remix-ide/src/app/tabs/locales/en/desktopDownload.json‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"desktopDownload.loading": "Loading desktop app info...",
3+
"desktopDownload.error": "Unable to load desktop app. Check the {link} for downloads.",
4+
"desktopDownload.title": "Remix Desktop",
5+
"desktopDownload.releaseDate": "Released {date}",
6+
"desktopDownload.downloadSpan": "Download Remix Desktop {platform} {version}",
7+
"desktopDownload.downloadSpanGeneric": "Download Remix Desktop {version}",
8+
"desktopDownload.downloadCompactFull": "Download Remix Desktop {platform} {version}",
9+
"desktopDownload.downloadCompactGeneric": "Download Remix Desktop {version}",
10+
"desktopDownload.downloadButton": "Download for {platform}",
11+
"desktopDownload.viewReleases": "View Downloads",
12+
"desktopDownload.otherVersions": "Other versions and platforms",
13+
"desktopDownload.noAutoDetect": "Available for Windows, macOS, and Linux"
14+
}

‎libs/remix-ui/desktop-download/README.md‎

Lines changed: 139 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,139 @@
1+
# Desktop Download Component
2+
3+
A React component for downloading the latest Remix Desktop application from GitHub releases.
4+
5+
## Features
6+
7+
- **Auto OS Detection**: Automatically detects the user's operating system (Windows, macOS, Linux) and suggests the appropriate download
8+
- **Architecture Support**: Detects Apple Silicon Macs and provides ARM64 builds when available
9+
- **Smart Caching**: Caches release data for 30 minutes to reduce API calls
10+
- **Internationalization**: Fully supports i18n with FormattedMessage components
11+
- **Responsive Design**: Works on both desktop and mobile devices
12+
- **Error Handling**: Graceful fallback when GitHub API is unavailable
13+
14+
## Usage
15+
16+
```tsx
17+
import { DesktopDownload } from '@remix-ui/desktop-download'
18+
19+
function MyComponent() {
20+
return (
21+
<div>
22+
{/* Compact layout with tracking */}
23+
<DesktopDownload trackingContext="navbar" />
24+
25+
{/* Full layout */}
26+
<DesktopDownload compact={false} trackingContext="home" />
27+
28+
{/* Span variant for dropdowns */}
29+
<DesktopDownload variant="span" trackingContext="dropdown" />
30+
</div>
31+
)
32+
}
33+
```
34+
35+
### Compact Layout (Default)
36+
Perfect for navigation bars, toolbars, or anywhere space is limited. Shows a button with "Download Remix Desktop {OS} {version}" and a small muted link to other releases below.
37+
38+
```tsx
39+
<DesktopDownload />
40+
<DesktopDownload compact={true} />
41+
```
42+
43+
### Full Layout
44+
Great for landing pages, cards, or dedicated download sections. Shows detailed information including release date, file size, and platform-specific icons.
45+
46+
```tsx
47+
<DesktopDownload compact={false} />
48+
```
49+
50+
### Span Variant
51+
Perfect for dropdown items or anywhere you need a simple link without button styling.
52+
53+
```tsx
54+
<DesktopDownload variant="span" />
55+
```
56+
57+
### With custom styling
58+
59+
```tsx
60+
<DesktopDownload className="my-custom-class" compact={false} />
61+
<DesktopDownload style={{ color: '#007bff', fontSize: '14px' }} />
62+
<DesktopDownload variant="span" style={{ fontWeight: 'bold' }} />
63+
```
64+
65+
## Props
66+
67+
| Prop | Type | Default | Description |
68+
|------|------|---------|-------------|
69+
| `className` | `string` | `''` | Additional CSS classes |
70+
| `compact` | `boolean` | `true` | Use compact layout |
71+
| `variant` | `'button' \| 'span'` | `'button'` | Display variant |
72+
| `style` | `CSSProperties` | `{}` | Inline styles |
73+
| `trackingContext` | `string` | `'unknown'` | Context for Matomo analytics (e.g., 'hometab', 'dropdown', 'navbar') |
74+
75+
## Analytics Tracking
76+
77+
The component includes automatic Matomo analytics tracking for all download interactions. Set the `trackingContext` prop to identify where the component is used:
78+
79+
```tsx
80+
<DesktopDownload trackingContext="hometab" />
81+
```
82+
83+
**Tracking Events:**
84+
- Category: `desktopDownload`
85+
- Action: `{context}-{variant}` (e.g., `hometab-compact`, `dropdown-span`)
86+
- Name: `{platform}-{filename}` or `releases-page` for fallbacks
87+
88+
**Examples:**
89+
- `['trackEvent', 'desktopDownload', 'hometab-compact', 'linux-remix-desktop_1.1.0_amd64.deb']`
90+
- `['trackEvent', 'desktopDownload', 'dropdown-span', 'windows-remix-desktop-1.1.0-setup.exe']`
91+
- `['trackEvent', 'desktopDownload', 'navbar-full-fallback', 'releases-page']`
92+
93+
## Platform Support
94+
95+
The component automatically detects and provides downloads for:
96+
97+
- **Windows**: `.exe` installer
98+
- **macOS**: `.dmg` disk image (ARM64 for Apple Silicon, Intel for older Macs)
99+
- **Linux**: `.deb` package (with `.AppImage` fallback)
100+
101+
## API
102+
103+
The component fetches release data from:
104+
`https://api.github.com/repos/remix-project-org/remix-desktop/releases/latest`
105+
106+
## Caching
107+
108+
Release data is cached in localStorage for 30 minutes to reduce GitHub API calls and improve performance.
109+
110+
## Dependencies
111+
112+
- React 18+
113+
- @remix-ui/helper (for CustomTooltip)
114+
- react-intl (for internationalization)
115+
- Bootstrap CSS classes (for styling)
116+
- FontAwesome icons (for platform icons)
117+
118+
## Internationalization
119+
120+
The component is fully internationalized using react-intl. Translation strings are located in:
121+
122+
- `apps/remix-ide/src/app/tabs/locales/en/desktopDownload.json` - All translation keys for the component
123+
124+
### Translation Keys
125+
126+
| Key | Default Message | Description |
127+
|-----|-----------------|-------------|
128+
| `desktopDownload.loading` | "Loading desktop app info..." | Loading state message |
129+
| `desktopDownload.error` | "Unable to load desktop app. Check the {link} for downloads." | Error fallback message |
130+
| `desktopDownload.title` | "Remix Desktop" | Main title in full layout |
131+
| `desktopDownload.releaseDate` | "Released {date}" | Release date display |
132+
| `desktopDownload.downloadSpan` | "Download Remix Desktop {platform} {version}" | Span variant with platform |
133+
| `desktopDownload.downloadSpanGeneric` | "Download Remix Desktop {version}" | Span variant without platform |
134+
| `desktopDownload.downloadCompactFull` | "Download Remix Desktop {platform} {version}" | Compact button with platform |
135+
| `desktopDownload.downloadCompactGeneric` | "Download Remix Desktop {version}" | Compact button without platform |
136+
| `desktopDownload.downloadButton` | "Download for {platform}" | Full layout button text |
137+
| `desktopDownload.viewReleases` | "View Downloads" | Fallback button text |
138+
| `desktopDownload.otherVersions` | "Other versions and platforms" | Link to releases page |
139+
| `desktopDownload.noAutoDetect` | "Available for Windows, macOS, and Linux" | Platform availability message |

‎libs/remix-ui/desktop-download/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './lib/desktop-download'

‎libs/remix-ui/desktop-download/lib/desktop-download.css‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
.desktop-download {
2+
max-width: 350px;
3+
}
4+
5+
.desktop-download.compact {
6+
max-width: none;
7+
}
8+
9+
.desktop-download.compact .btn {
10+
white-space: normal; /* Allow text wrapping */
11+
text-align: center;
12+
line-height: 1.3;
13+
min-height: 2.5rem; /* Ensure consistent button height */
14+
display: flex;
15+
align-items: center;
16+
justify-content: center;
17+
}
18+
19+
.desktop-download.compact .text-muted {
20+
font-size: 0.75rem;
21+
text-align: center;
22+
}
23+
24+
.desktop-download.span-variant {
25+
max-width: none;
26+
}
27+
28+
.desktop-download.span-variant a {
29+
color: inherit !important;
30+
text-decoration: none !important;
31+
position: relative;
32+
z-index: 10;
33+
}
34+
35+
.desktop-download.span-variant a:hover {
36+
color: inherit !important;
37+
opacity: 0.8;
38+
}
39+
40+
.desktop-download.span-variant .d-flex {
41+
pointer-events: auto;
42+
}
43+
44+
.desktop-download .btn {
45+
border-radius: 8px;
46+
font-weight: 500;
47+
transition: all 0.2s ease;
48+
white-space: normal; /* Allow text wrapping on all buttons */
49+
text-align: center;
50+
line-height: 1.3;
51+
}
52+
53+
.desktop-download .btn:hover {
54+
transform: translateY(-1px);
55+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
56+
}
57+
58+
.desktop-download .badge {
59+
font-size: 0.75rem;
60+
padding: 0.25rem 0.5rem;
61+
border-radius: 4px;
62+
}
63+
64+
.desktop-download .text-muted a:hover {
65+
text-decoration: underline !important;
66+
}
67+
68+
.desktop-download .spinner-border-sm {
69+
width: 1rem;
70+
height: 1rem;
71+
}
72+
73+
.desktop-download .fab,
74+
.desktop-download .fas,
75+
.desktop-download .far {
76+
min-width: 1.2rem;
77+
}
78+
79+
/* Dark mode support - removed custom colors to use app defaults */
80+
81+
@media (max-width: 768px) {
82+
.desktop-download.full {
83+
max-width: 100%;
84+
}
85+
86+
.desktop-download.full .btn {
87+
width: 100%;
88+
justify-content: center;
89+
}
90+
91+
.desktop-download.full h5 {
92+
font-size: 1.1rem;
93+
}
94+
95+
.desktop-download.compact .btn {
96+
font-size: 0.875rem;
97+
}
98+
}

0 commit comments

Comments
 (0)