fix(landing): address PR #487 review feedback

- Preserve canonical camelCase platform aliases (macArm, macIntel) in the
  /download/[platform] redirect so those URLs don't lose their platform param.
- Add accessible title + role="img" to the inline Windows SVG so it passes
  Biome's a11y rule and announces to screen readers.
- On /api/releases fetch failure, show an explicit error state with a single
  intentional link to GitHub releases — no more silent GitHub fallback or
  disabled-button UX lie. Keeps normies off GitHub unless they opt in.

Co-Authored-By: Claude Opus 4.7 (1M context) <[email protected]>
This commit is contained in:
James Pine
2026-04-18 23:31:34 -07:00
co-authored by Claude Opus 4.7
parent a179b826cd
commit a6ac8ceba7
3 changed files with 60 additions and 38 deletions
@@ -9,7 +9,9 @@ export const dynamic = 'force-dynamic';
// to GitHub or direct asset URLs. // to GitHub or direct asset URLs.
const PLATFORM_ALIAS: Record<string, string> = { const PLATFORM_ALIAS: Record<string, string> = {
'mac-arm': 'macArm', 'mac-arm': 'macArm',
macArm: 'macArm',
'mac-intel': 'macIntel', 'mac-intel': 'macIntel',
macIntel: 'macIntel',
windows: 'windows', windows: 'windows',
}; };
+20 -3
View File
@@ -13,7 +13,7 @@ import Link from 'next/link';
import { useEffect, useMemo, useState } from 'react'; import { useEffect, useMemo, useState } from 'react';
import { AppleIcon, LinuxIcon, WindowsIcon } from '@/components/PlatformIcons'; import { AppleIcon, LinuxIcon, WindowsIcon } from '@/components/PlatformIcons';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { DONATE_URL, GITHUB_REPO } from '@/lib/constants'; import { DONATE_URL, GITHUB_RELEASES_PAGE, GITHUB_REPO } from '@/lib/constants';
import type { DownloadLinks } from '@/lib/releases'; import type { DownloadLinks } from '@/lib/releases';
type Platform = keyof DownloadLinks; type Platform = keyof DownloadLinks;
@@ -168,11 +168,11 @@ export default function DownloadPage() {
) : ( ) : (
<> <>
<h1 className="text-4xl md:text-5xl font-semibold tracking-tight text-foreground mb-4"> <h1 className="text-4xl md:text-5xl font-semibold tracking-tight text-foreground mb-4">
Download Voicebox {linksError ? "We couldn't load the latest release." : 'Download Voicebox'}
</h1> </h1>
<p className="text-lg text-muted-foreground"> <p className="text-lg text-muted-foreground">
{linksError {linksError
? "We couldn't reach the release server. Pick your platform manually below." ? 'Our release server is temporarily unreachable. Please try again in a moment.'
: 'Pick your platform to get started.'} : 'Pick your platform to get started.'}
</p> </p>
</> </>
@@ -181,6 +181,22 @@ export default function DownloadPage() {
</div> </div>
{/* Platform buttons — always visible as a fallback */} {/* Platform buttons — always visible as a fallback */}
{linksError ? (
<div className="mt-12 rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6 text-center">
<p className="text-sm text-muted-foreground mb-4">
If this keeps happening, you can{' '}
<a
href={`${GITHUB_RELEASES_PAGE}/latest`}
target="_blank"
rel="noopener noreferrer"
className="text-accent underline underline-offset-2 hover:text-accent/80"
>
browse releases on GitHub
</a>
{' '}and grab the build for your platform manually.
</p>
</div>
) : (
<div className="mt-12 rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6"> <div className="mt-12 rounded-xl border border-border bg-card/60 backdrop-blur-sm p-6">
<h2 className="text-sm font-medium text-foreground mb-4"> <h2 className="text-sm font-medium text-foreground mb-4">
{triggered ? 'Download not working?' : 'Choose your platform'} {triggered ? 'Download not working?' : 'Choose your platform'}
@@ -217,6 +233,7 @@ export default function DownloadPage() {
})} })}
</div> </div>
</div> </div>
)}
{/* Donate — prominent, heartfelt, post-click context */} {/* Donate — prominent, heartfelt, post-click context */}
<div className="mt-16 rounded-2xl border border-border bg-gradient-to-br from-card via-card/80 to-background backdrop-blur-sm p-8 md:p-10 overflow-hidden relative"> <div className="mt-16 rounded-2xl border border-border bg-gradient-to-br from-card via-card/80 to-background backdrop-blur-sm p-8 md:p-10 overflow-hidden relative">
+3
View File
@@ -19,7 +19,10 @@ export function WindowsIcon({ className }: { className?: string }) {
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="currentColor" fill="currentColor"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
role="img"
aria-label="Windows"
> >
<title>Windows</title>
<path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4l-13.051.149M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801" /> <path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4l-13.051.149M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801" />
</svg> </svg>
); );