dynamic website download links

.changeset/moody-eels-itch.md

@@ -0,0 +1,5 @@
+---
+'website': minor
+---
+
+The download selectors now dynamically show all published GitHub assets.

apps/website/components/CalloutCoreSoftware.tsx

@@ -5,17 +5,14 @@ import {
   Link,
   Badge,
 } from '@siafoundation/design-system'
-import { cx } from 'class-variance-authority'
 import Image from 'next/image'
-import { DownloadWidget } from './DownloadWidget'
 
 type Props = {
   name: string
   status?: string
   description: React.ReactNode
   href?: string
   daemon?: 'renterd' | 'hostd' | 'walletd'
-  version?: string
   newTab?: boolean
   image?: string
   background: string
@@ -27,8 +24,6 @@ export function CalloutCoreSoftware({
   status,
   description,
   href,
-  daemon,
-  version,
   image,
   background,
   children,
@@ -75,18 +70,6 @@ export function CalloutCoreSoftware({
         )}
         {children}
       </div>
-      {version && daemon && (
-        <div
-          className={cx(
-            'absolute bottom-0 w-full bg-gray-200 px-6 py-2',
-            'bg-white dark:bg-graydark-200',
-            'border-t',
-            'border-gray-400 dark:border-graydark-400'
-          )}
-        >
-          <DownloadWidget daemon={daemon} version={version} />
-        </div>
-      )}
     </PatternedPanel>
   )
 }

apps/website/components/CalloutHostd.tsx

@@ -2,19 +2,14 @@ import { routes } from '../config/routes'
 import { CalloutCoreSoftware } from './CalloutCoreSoftware'
 import { patterns, getAssetUrl } from '../content/assets'
 
-type Props = {
-  version?: string
-}
-
-export function CalloutHostd({ version }: Props) {
+export function CalloutHostd() {
   return (
     <CalloutCoreSoftware
       name="hostd"
       description={
         'A next-generation Sia host, developed by the Sia Foundation. Built for performance and reliability.'
       }
       daemon="hostd"
-      version={version}
       href={routes.software.hostd}
       image={getAssetUrl('assets/hostd/metrics.png')}
       background={patterns.nateTrickle}

apps/website/components/CalloutRenterd.tsx

@@ -2,19 +2,14 @@ import { routes } from '../config/routes'
 import { CalloutCoreSoftware } from './CalloutCoreSoftware'
 import { patterns, getAssetUrl } from '../content/assets'
 
-type Props = {
-  version?: string
-}
-
-export function CalloutRenterd({ version }: Props) {
+export function CalloutRenterd() {
   return (
     <CalloutCoreSoftware
       name="renterd"
       description={
         'A next-generation Sia renter, developed by the Sia Foundation. Smart defaults and a highly extensible API.'
       }
       daemon="renterd"
-      version={version}
       href={routes.software.renterd}
       image={getAssetUrl('assets/renterd/files.png')}
       background={patterns.natePath}

apps/website/components/CalloutWalletd.tsx

@@ -2,11 +2,7 @@ import { routes } from '../config/routes'
 import { CalloutCoreSoftware } from './CalloutCoreSoftware'
 import { patterns, getAssetUrl } from '../content/assets'
 
-type Props = {
-  version?: string
-}
-
-export function CalloutWalletd({ version }: Props) {
+export function CalloutWalletd() {
   return (
     <CalloutCoreSoftware
       name="walletd"
@@ -15,7 +11,6 @@ export function CalloutWalletd({ version }: Props) {
       }
       status="alpha"
       daemon="walletd"
-      version={version}
       href={routes.software.walletd}
       image={getAssetUrl('assets/walletd/send.png')}
       background={patterns.nateTrickle}

apps/website/components/DownloadWidgetLarge.tsx → apps/website/components/DownloadBar.tsx

@@ -1,14 +1,15 @@
 import { webLinks, Link, Text } from '@siafoundation/design-system'
 import { LogoGithub24, Book24 } from '@siafoundation/react-icons'
-import { DownloadWidgetSelect } from './DownloadWidgetSelect'
+import { DownloadSelect } from './DownloadSelect'
+import { GitHubRelease } from '@siafoundation/data-sources'
 
 type Daemon = 'renterd' | 'hostd' | 'walletd'
 type Props = {
   daemon: Daemon
-  version: string
+  release: GitHubRelease
 }
 
-export function DownloadWidgetLarge({ daemon, version }: Props) {
+export function DownloadBar({ daemon, release }: Props) {
   const githubUrl = webLinks.github[daemon]
   const docsUrl = webLinks.apiDocs[daemon]
 
@@ -43,12 +44,12 @@ export function DownloadWidgetLarge({ daemon, version }: Props) {
         )}
       </div>
       <div className="flex-1" />
-      {version ? (
+      {release ? (
         <>
           <Text className="hidden md:block" size="14" weight="bold">
             Downloads
           </Text>
-          <DownloadWidgetSelect daemon={daemon} version={version} />
+          <DownloadSelect daemon={daemon} release={release} />
         </>
       ) : null}
     </div>

apps/website/components/DownloadSelect.tsx

@@ -0,0 +1,45 @@
+import {
+  Select,
+  Option,
+  ControlGroup,
+  Button,
+  LinkButton,
+} from '@siafoundation/design-system'
+import { Download16 } from '@siafoundation/react-icons'
+import { useState } from 'react'
+import { getDownloadLinks } from '../content/downloads'
+import { GitHubRelease } from '@siafoundation/data-sources'
+
+type Props = {
+  daemon: 'renterd' | 'hostd' | 'walletd'
+  release: GitHubRelease
+}
+
+export function DownloadSelect({ daemon, release }: Props) {
+  const downloadLinks = getDownloadLinks(daemon, release)
+
+  const [download, setDownload] = useState(downloadLinks[0])
+
+  return (
+    <ControlGroup>
+      <Button state="waiting">{release.tag_name}</Button>
+      <Select
+        value={download.link}
+        onChange={(e) =>
+          setDownload(
+            downloadLinks.find((i) => i.link === e.currentTarget.value)
+          )
+        }
+      >
+        {downloadLinks.map((i) => (
+          <Option key={i.link} value={i.link}>
+            {i.title}
+          </Option>
+        ))}
+      </Select>
+      <LinkButton href={download.link} tip="Download binary" icon="contrast">
+        <Download16 />
+      </LinkButton>
+    </ControlGroup>
+  )
+}