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

+

+ Also on: GitHub releases · Obtainium · F-Droid (under review) · What's the difference? +

Screen mirroring Music & lyrics @@ -169,13 +172,38 @@ const [latest] = await releases('en');
-
-
-
-

Open source, and open to you

-

CastBay is open source under GPL-3.0, built on UxPlay, libplist, Apple's ALAC decoder and Media3 ExoPlayer. Issues and ideas are welcome on GitHub.

+
+
diff --git a/web/src/pages/zh/faq.md b/web/src/pages/zh/faq.md index f622717..f6ea946 100644 --- a/web/src/pages/zh/faq.md +++ b/web/src/pages/zh/faq.md @@ -28,7 +28,7 @@ Android 6.0 及以上的安卓设备:电视、电视盒子、车机和平板 有两个渠道: -- **本网站或 GitHub**([CastBay.apk](/apk)、[所有版本](https://github.com/weenas/castbay/releases)):使用映湾自己的签名。映湾会自动检查新版本,在"关于"页里就能下载安装。 +- **本网站或 GitHub**([CastBay.apk](/apk)、[所有版本](https://github.com/weenas/castbay/releases)):使用映湾自己的签名。映湾会自动检查新版本,在"关于"页里就能下载安装。也可以用 [Obtainium](https://github.com/ImranR98/Obtainium) 跟踪 GitHub 上的新版本(同一个签名,可以互相升级)。 - **F-Droid**(已提交,审核中):由 F-Droid 自己从源码编译并用 F-Droid 的签名发布;通过 F-Droid 客户端更新,映湾本身不会检查更新。 安卓只允许用签名相同的版本覆盖安装,所以**F-Droid 版和其他渠道的版本不能互相覆盖升级**:要换渠道,需要先卸载映湾(设置和已允许的设备会一并清除),再从另一个渠道安装。本网站和 GitHub 之间切换则不需要卸载。 diff --git a/web/src/pages/zh/index.astro b/web/src/pages/zh/index.astro index 3603bc3..d37a1af 100644 --- a/web/src/pages/zh/index.astro +++ b/web/src/pages/zh/index.astro @@ -31,6 +31,9 @@ const [latest] = await releases('zh'); 版本 {latest.data.version} · {formatDate('zh', latest.data.date)} · 更新内容
适用于 Android 6.0 及以上的安卓电视、电视盒子、车机和平板

+

+ 其他渠道:GitHub 所有版本 · Obtainium · F-Droid(审核中)· 有什么区别? +

屏幕镜像 音乐与歌词 @@ -171,13 +174,38 @@ const [latest] = await releases('zh');
-
-