Website: download in the header, other channels, community cards

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; }

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;

web/src/layouts/Page.astro

@@ -110,6 +110,8 @@ const structuredData =
     <nav class="nav" id="site-nav">
       {nav.map(({ href, text }) => <a href={href} aria-current={href === current ? 'page' : undefined}>{text}</a>)}
     </nav>
+    <!-- Download stays a click away however far down the page is read. -->
+    <a class="nav-cta" href={APK_URL}>{s.download}</a>
     <button id="theme-btn" class="theme" type="button" title={s.themeTitle} aria-label={s.themeToLight} data-to-light={s.themeToLight} data-to-dark={s.themeToDark}><svg class="moon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"/></svg><svg class="sun" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14.828 14.828a4 4 0 1 0-5.656-5.656 4 4 0 0 0 5.656 5.656M6.343 17.657l-1.414 1.414M6.343 6.343 4.929 4.929M17.657 6.343l1.414-1.414M17.657 17.657l1.414 1.414M4 12H2M12 4V2M20 12h2M12 20v2"/></svg></button>
     <a class="lang" href={page ? pagePath(other, page) : strings[other].prefix} hreflang={strings[other].htmlLang} lang={strings[other].htmlLang} data-lang-link={other}>{strings[other].label}</a>
     <!-- Narrow screens: the links fold into a menu under this button (site.js). -->

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.

web/src/pages/index.astro

@@ -29,6 +29,9 @@ const [latest] = await releases('en');
         Version {latest.data.version} · {formatDate('en', latest.data.date)} · <a href="/changelog">What's new</a><br>
         For Android TVs, TV boxes, car displays and tablets on Android 6.0 or later
       </p>
+      <p class="channels">
+        Also on: <a href="https://github.com/weenas/castbay/releases">GitHub releases</a> · <a href="https://apps.obtainium.imranr.dev/redirect?r=obtainium://add/https://github.com/weenas/castbay">Obtainium</a> · F-Droid (under review) · <a href="/faq#where-can-i-get-castbay-and-can-i-switch-between-sources">What's the difference?</a>
+      </p>
       <div class="chips">
         <span class="chip">Screen mirroring</span>
         <span class="chip">Music &amp; lyrics</span>
@@ -169,13 +172,38 @@ const [latest] = await releases('en');
     </div>
   </section>
 
-  <section class="alt">
-    <div class="wrap oss">
-      <div>
-        <h2 style="margin:0;font-size:clamp(26px,3.2vw,34px)">Open source, and open to you</h2>
-        <p>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.</p>
+  <section class="alt" id="community">
+    <div class="wrap">
+      <div class="section-head">
+        <h2>Open source, and open to you</h2>
+        <p>CastBay is open source: your feedback and testing make it work well on more TVs and cars.</p>
+      </div>
+      <div class="grid community">
+        <a class="card" href="/feedback">
+          <div class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
+          <h3>Report a problem</h3>
+          <p>Report problems and suggest ideas on GitHub. In the app, About → Diagnostics uploads a log in one step: just give its report ID.</p>
+          <span class="more">How to give feedback →</span>
+        </a>
+        <a class="card" href="https://github.com/weenas/castbay">
+          <div class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg></div>
+          <h3>Source code</h3>
+          <p>Open source under GPL-3.0, built on UxPlay, libplist, Apple's ALAC decoder and Media3 ExoPlayer. The code, how to build it and every release are on GitHub.</p>
+          <span class="more">github.com/weenas/castbay →</span>
+        </a>
+        <a class="card" href="/compatibility">
+          <div class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="13" rx="2"/><path d="m9 10.5 2 2 4-4M8 21h8"/></svg></div>
+          <h3>Device compatibility</h3>
+          <p>Does CastBay work on your TV, box or car? Tell us the model and Android version, and save the next person the guesswork.</p>
+          <span class="more">See the compatibility list →</span>
+        </a>
+        <a class="card" href="/changelog.xml">
+          <div class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg></div>
+          <h3>Follow updates</h3>
+          <p>Subscribe to the changelog by RSS; on a tablet, Obtainium can also follow new releases on GitHub. CastBay on a TV checks for updates itself.</p>
+          <span class="more">Subscribe by RSS →</span>
+        </a>
       </div>
-      <a class="btn btn-ghost" href="https://github.com/weenas/castbay">github.com/weenas/castbay</a>
     </div>
   </section>
 </main>

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 之间切换则不需要卸载。

web/src/pages/zh/index.astro

@@ -31,6 +31,9 @@ const [latest] = await releases('zh');
         版本 {latest.data.version} · {formatDate('zh', latest.data.date)} · <a href="/zh/changelog">更新内容</a><br>
         适用于 Android 6.0 及以上的安卓电视、电视盒子、车机和平板
       </p>
+      <p class="channels">
+        其他渠道：<a href="https://github.com/weenas/castbay/releases">GitHub 所有版本</a> · <a href="https://apps.obtainium.imranr.dev/redirect?r=obtainium://add/https://github.com/weenas/castbay">Obtainium</a> · F-Droid（审核中）· <a href="/zh/faq#在哪里可以下载映湾不同渠道之间能互相升级吗">有什么区别？</a>
+      </p>
       <div class="chips">
         <span class="chip">屏幕镜像</span>
         <span class="chip">音乐与歌词</span>
@@ -171,13 +174,38 @@ const [latest] = await releases('zh');
     </div>
   </section>
 
-  <section class="alt">
-    <div class="wrap oss">
-      <div>
-        <h2 style="margin:0;font-size:clamp(26px,3.2vw,34px)">开源，也欢迎参与</h2>
-        <p>映湾以 GPL-3.0 协议开源，基于 UxPlay、libplist、Apple ALAC 解码器和 Media3 ExoPlayer。欢迎在 GitHub 上提交问题和建议。</p>
+  <section class="alt" id="community">
+    <div class="wrap">
+      <div class="section-head">
+        <h2>开源，也欢迎参与</h2>
+        <p>映湾是开源项目，你的反馈和测试会让它在更多电视和车机上好用。</p>
+      </div>
+      <div class="grid community">
+        <a class="card" href="/zh/feedback">
+          <div class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg></div>
+          <h3>反馈问题</h3>
+          <p>在 GitHub 上报告问题或提出建议。App 里"关于 → 诊断信息"可以一键上传日志，反馈时附上报告编号即可。</p>
+          <span class="more">怎么反馈 →</span>
+        </a>
+        <a class="card" href="https://github.com/weenas/castbay">
+          <div class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 18 6-6-6-6M8 6l-6 6 6 6"/></svg></div>
+          <h3>源代码</h3>
+          <p>GPL-3.0 开源，基于 UxPlay、libplist、Apple ALAC 解码器和 Media3 ExoPlayer。代码、构建方法和所有版本都在 GitHub 上。</p>
+          <span class="more">github.com/weenas/castbay →</span>
+        </a>
+        <a class="card" href="/zh/compatibility">
+          <div class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="13" rx="2"/><path d="m9 10.5 2 2 4-4M8 21h8"/></svg></div>
+          <h3>设备兼容性</h3>
+          <p>映湾在你的电视、盒子或车机上能用吗？告诉我们型号和系统版本，帮更多人少走弯路。</p>
+          <span class="more">查看兼容性列表 →</span>
+        </a>
+        <a class="card" href="/zh/changelog.xml">
+          <div class="icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16"/><circle cx="5" cy="19" r="1"/></svg></div>
+          <h3>关注更新</h3>
+          <p>用 RSS 订阅更新日志；平板上也可以用 Obtainium 跟踪 GitHub 上的新版本。电视上的映湾会自己检查更新。</p>
+          <span class="more">订阅 RSS →</span>
+        </a>
       </div>
-      <a class="btn btn-ghost" href="https://github.com/weenas/castbay">github.com/weenas/castbay</a>
     </div>
   </section>
 </main>