From e6d477c1d0a752617124ca64da5bbfae22d3f8d9 Mon Sep 17 00:00:00 2001
From: Eason Xiang
Date: Sun, 4 Oct 2026 21:52:56 +0800
Subject: [PATCH] Website: download in the header, other channels, community
cards
Ideas from projectivylauncher.com that fit CastBay:
- A Download button in the sticky header, so it is a click away however
far down a page is read (not on phones, where it would squeeze the
wordmark and the hero's button is just below).
- Under the hero's buttons, the other ways to get CastBay: GitHub
releases, Obtainium, F-Droid (under review), and the FAQ entry on how
they differ. The FAQ also mentions Obtainium.
- The open-source paragraph becomes four cards: report a problem (with
Diagnostics' one-step log upload), source code, device compatibility,
and following updates (RSS, Obtainium).
Co-Authored-By: Claude Opus 5.5
---
web/public/assets/style.css | 20 +++++++++++++++++-
web/src/i18n.ts | 2 ++
web/src/layouts/Page.astro | 2 ++
web/src/pages/faq.md | 2 +-
web/src/pages/index.astro | 40 ++++++++++++++++++++++++++++++------
web/src/pages/zh/faq.md | 2 +-
web/src/pages/zh/index.astro | 40 ++++++++++++++++++++++++++++++------
7 files changed, 93 insertions(+), 15 deletions(-)
diff --git a/web/public/assets/style.css b/web/public/assets/style.css
index 8e38074..afb3a98 100644
--- a/web/public/assets/style.css
+++ b/web/public/assets/style.css
@@ -71,12 +71,19 @@ img { max-width: 100%; display: block; }
.nav a { color: var(--text-2); font-size: 15px; white-space: nowrap; }
.nav a:hover { color: var(--text); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--text); font-weight: 600; }
+.nav-cta {
+ background: var(--accent-strong); color: #fff; border-radius: 999px;
+ padding: 7px 16px; font-size: 14px; font-weight: 600; white-space: nowrap; flex: none;
+}
+.nav-cta:hover { text-decoration: none; box-shadow: 0 6px 20px var(--accent-glow); }
+/* On a phone it would squeeze the wordmark; the hero's own button is just below. */
+@media (max-width: 600px) { .top .nav-cta { display: none; } .top .theme { margin-left: auto; } }
/* Below this the mark, five links and the two buttons don't fit a line: the links fold into a
menu under the three-line button, which opens them as a panel below the header. */
.menu-btn { display: none; }
@media (max-width: 920px) {
.nav { display: none; }
- .theme { margin-left: auto; }
+ .nav-cta { margin-left: auto; }
.menu-btn {
display: flex; flex-direction: column; justify-content: center; gap: 5px;
width: 38px; height: 38px; padding: 0 8px; border: 0; background: none; cursor: pointer; flex: none;
@@ -231,6 +238,17 @@ details p { margin: 0 0 18px; color: var(--text-2); font-size: 15.5px; }
/* Open source */
.oss { display: flex; flex-wrap: wrap; gap: 28px; align-items: center; justify-content: space-between; }
.oss p { color: var(--text-2); max-width: 40em; margin: 8px 0 0; }
+/* The community cards are links as a whole. */
+a.card { display: flex; flex-direction: column; color: inherit; }
+/* Four, or two by two, or one under another: never three and a lone one. */
+.community { grid-template-columns: repeat(4, 1fr); }
+@media (max-width: 1100px) { .community { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 600px) { .community { grid-template-columns: 1fr; } }
+a.card:hover { text-decoration: none; }
+a.card .more { display: inline-block; margin-top: auto; padding-top: 14px; color: var(--accent); font-size: 14.5px; font-weight: 600; }
+/* Under the download buttons: the other ways to get CastBay. */
+.channels { color: var(--text-3); font-size: 14px; margin-top: 14px; }
+.channels a { color: var(--text-2); }
/* Footer */
footer { border-top: 1px solid var(--line); padding: 36px 0 48px; color: var(--text-3); font-size: 14px; }
diff --git a/web/src/i18n.ts b/web/src/i18n.ts
index ce702db..685e794 100644
--- a/web/src/i18n.ts
+++ b/web/src/i18n.ts
@@ -23,6 +23,7 @@ export const strings = {
feedback: 'Feedback',
privacy: 'Privacy',
releases: 'Releases',
+ download: 'Download',
trademarks: 'AirPlay, iPhone, iPad and Mac are trademarks of Apple Inc.; Android TV and Google TV are trademarks of Google LLC. CastBay is not affiliated with Apple or Google.',
},
zh: {
@@ -43,6 +44,7 @@ export const strings = {
feedback: '反馈',
privacy: '隐私政策',
releases: '版本下载',
+ download: '下载',
trademarks: 'AirPlay、iPhone、iPad、Mac 是 Apple Inc. 的商标;Android TV、Google TV 是 Google LLC 的商标。映湾(CastBay)与 Apple、Google 均无关联。',
},
} as const;
diff --git a/web/src/layouts/Page.astro b/web/src/layouts/Page.astro
index acd6881..e60a2d0 100644
--- a/web/src/layouts/Page.astro
+++ b/web/src/layouts/Page.astro
@@ -110,6 +110,8 @@ const structuredData =
+
+ {s.download}{strings[other].label}
diff --git a/web/src/pages/faq.md b/web/src/pages/faq.md
index 4cdc332..7feb7b5 100644
--- a/web/src/pages/faq.md
+++ b/web/src/pages/faq.md
@@ -28,7 +28,7 @@ Each release is built by GitHub from the tagged source, not on anyone's computer
From two places:
-- **This website or GitHub** ([CastBay.apk](/apk), [releases](https://github.com/weenas/castbay/releases)): signed with CastBay's own key. CastBay checks for new versions and installs them from About.
+- **This website or GitHub** ([CastBay.apk](/apk), [releases](https://github.com/weenas/castbay/releases)): signed with CastBay's own key. CastBay checks for new versions and installs them from About. [Obtainium](https://github.com/ImranR98/Obtainium) can also follow the GitHub releases (same key, so they update each other).
- **F-Droid** (submitted, under review): F-Droid builds CastBay from its source code itself and signs it with its own key; updates come through the F-Droid client, and CastBay doesn't check for updates there.
Android only installs an update with the same signature as the app already installed, so **the F-Droid build and the others can't replace each other**: to switch between them, uninstall CastBay first (its settings and allowed devices are removed with it), then install from the other source. Switching between the website and GitHub needs no uninstall.
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index 58ed99b..7b807d6 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -29,6 +29,9 @@ const [latest] = await releases('en');
Version {latest.data.version} · {formatDate('en', latest.data.date)} · What's new
For Android TVs, TV boxes, car displays and tablets on Android 6.0 or later