Skip to content

Commit f8c68b0

Browse files
alexfreskaalexfreska
committed
feat: website update download sections
1 parent 24b4756 commit f8c68b0

25 files changed

+746
-215
lines changed

‎.changeset/brown-pandas-look.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@siafoundation/data-sources': minor
3+
---
4+
5+
Added methods for fetching the latest desktop app versions.

‎.changeset/friendly-jeans-whisper.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@siafoundation/design-system': patch
3+
---
4+
5+
The Checkbox text label is now center aligned.

‎.changeset/purple-icons-explode.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'website': minor
3+
---
4+
5+
The website download sections now prompt and link to the terms of service. Closes https://github.com/SiaFoundation/web/issues/548

‎.changeset/slimy-pears-return.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'website': minor
3+
---
4+
5+
The website now displays both desktop and terminal/daemon downloads. Closes https://github.com/SiaFoundation/web/issues/649 Closes https://github.com/SiaFoundation/web/issues/548

‎apps/website/components/CalloutCoreSoftware.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,13 @@ import {
66
Badge,
77
} from '@siafoundation/design-system'
88
import Image from 'next/image'
9-
import { GitHubRelease } from '@siafoundation/data-sources'
109

1110
type Props = {
1211
name: string
1312
status?: string
1413
description: React.ReactNode
1514
href?: string
1615
daemon?: 'renterd' | 'hostd' | 'walletd'
17-
release?: GitHubRelease
1816
newTab?: boolean
1917
image?: string
2018
background: string

‎apps/website/components/CalloutHostd.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
11
import { routes } from '../config/routes'
22
import { CalloutCoreSoftware } from './CalloutCoreSoftware'
33
import { patterns, getAssetUrl } from '../content/assets'
4-
import { GitHubRelease } from '@siafoundation/data-sources'
54

6-
type Props = {
7-
release: GitHubRelease
8-
}
9-
10-
export function CalloutHostd({ release }: Props) {
5+
export function CalloutHostd() {
116
return (
127
<CalloutCoreSoftware
138
name="hostd"
149
description={
1510
'A next-generation Sia host, developed by the Sia Foundation. Built for performance and reliability.'
1611
}
1712
daemon="hostd"
18-
release={release}
1913
href={routes.software.hostd}
2014
image={getAssetUrl('assets/hostd/metrics.png')}
2115
background={patterns.nateTrickle}

‎apps/website/components/CalloutRenterd.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,15 @@
11
import { routes } from '../config/routes'
22
import { CalloutCoreSoftware } from './CalloutCoreSoftware'
33
import { patterns, getAssetUrl } from '../content/assets'
4-
import { GitHubRelease } from '@siafoundation/data-sources'
54

6-
type Props = {
7-
release: GitHubRelease
8-
}
9-
10-
export function CalloutRenterd({ release }: Props) {
5+
export function CalloutRenterd() {
116
return (
127
<CalloutCoreSoftware
138
name="renterd"
149
description={
1510
'A next-generation Sia renter, developed by the Sia Foundation. Smart defaults and a highly extensible API.'
1611
}
1712
daemon="renterd"
18-
release={release}
1913
href={routes.software.renterd}
2014
image={getAssetUrl('assets/renterd/files.png')}
2115
background={patterns.natePath}

‎apps/website/components/CalloutWalletd.tsx

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
import { routes } from '../config/routes'
22
import { CalloutCoreSoftware } from './CalloutCoreSoftware'
33
import { patterns, getAssetUrl } from '../content/assets'
4-
import { GitHubRelease } from '@siafoundation/data-sources'
54

6-
type Props = {
7-
release: GitHubRelease
8-
}
9-
10-
export function CalloutWalletd({ release }: Props) {
5+
export function CalloutWalletd() {
116
return (
127
<CalloutCoreSoftware
138
name="walletd"
@@ -16,7 +11,6 @@ export function CalloutWalletd({ release }: Props) {
1611
}
1712
status="alpha"
1813
daemon="walletd"
19-
release={release}
2014
testnetOnly
2115
href={routes.software.walletd}
2216
image={getAssetUrl('assets/walletd/send.png')}

‎apps/website/components/DownloadCard.tsx

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import {
2+
Text,
3+
Heading,
4+
PatternedPanel,
5+
Checkbox,
6+
Link,
7+
Badge,
8+
} from '@siafoundation/design-system'
9+
import { useTermsOfService } from '../hooks/useTermsOfService'
10+
import { routes } from '../config/routes'
11+
12+
type Props = {
13+
background: string
14+
title: string
15+
status?: string
16+
description: string
17+
downloadSelect: React.ReactNode
18+
}
19+
20+
export function DownloadCard({
21+
background,
22+
title,
23+
status,
24+
description,
25+
downloadSelect,
26+
}: Props) {
27+
const { accepted, setAccepted } = useTermsOfService()
28+
29+
return (
30+
<PatternedPanel background={background}>
31+
<div className="flex flex-col p-3">
32+
<div className="flex justify-between gap-2">
33+
<Heading size="20" className="pb-1">
34+
{title}
35+
</Heading>
36+
{status && (
37+
<div className="relative top-0.5">
38+
<Badge variant="amber">{status}</Badge>
39+
</div>
40+
)}
41+
</div>
42+
<Text className="pb-3" color="subtle">
43+
{description}
44+
</Text>
45+
<div className="flex flex-col gap-2">
46+
<div className="flex items-center flex-1">
47+
<Checkbox
48+
aria-label="Acept the Terms of Service"
49+
onCheckedChange={(checked) => setAccepted(!!checked)}
50+
checked={accepted}
51+
/>
52+
<Text
53+
size="14"
54+
className="flex items-center gap-1"
55+
ellipsis
56+
onClick={() => setAccepted(!accepted)}
57+
>
58+
I accept the{' '}
59+
<Link
60+
href={routes.terms.index}
61+
target="_blank"
62+
size="14"
63+
ellipsis
64+
onClick={(e) => {
65+
e.stopPropagation()
66+
}}
67+
>
68+
Terms of Service
69+
</Link>
70+
</Text>
71+
</div>
72+
{downloadSelect}
73+
</div>
74+
</div>
75+
</PatternedPanel>
76+
)
77+
}

‎apps/website/components/DownloadDaemonSelect.tsx

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
import {
2+
Select,
3+
Option,
4+
Button,
5+
LinkButton,
6+
triggerToast,
7+
} from '@siafoundation/design-system'
8+
import { Download16 } from '@siafoundation/react-icons'
9+
import { useEffect, useState } from 'react'
10+
import {
11+
findUserDefaultDownload,
12+
getDownloadLinksDaemon,
13+
} from '../content/downloads'
14+
import { GitHubRelease } from '@siafoundation/data-sources'
15+
import { useTermsOfService } from '../hooks/useTermsOfService'
16+
17+
type Props = {
18+
daemon: 'renterd' | 'hostd' | 'walletd'
19+
release: GitHubRelease
20+
testnetOnly?: boolean
21+
}
22+
23+
export function DownloadDaemonSelect({ daemon, release, testnetOnly }: Props) {
24+
const downloadLinks = getDownloadLinksDaemon(daemon, release)
25+
const { accepted } = useTermsOfService()
26+
27+
const [download, setDownload] = useState(downloadLinks[0])
28+
29+
useEffect(() => {
30+
const d = findUserDefaultDownload(downloadLinks)
31+
if (d) {
32+
setDownload(d)
33+
}
34+
// eslint-disable-next-line react-hooks/exhaustive-deps
35+
}, [])
36+
37+
return (
38+
<div className="flex items-center gap-1">
39+
<Button state="waiting">{release.tag_name}</Button>
40+
<Select
41+
className="flex-1"
42+
value={download.link}
43+
onChange={(e) =>
44+
setDownload(
45+
downloadLinks.find((i) => i.link === e.currentTarget.value)
46+
)
47+
}
48+
>
49+
{downloadLinks.map((i) => (
50+
<Option key={i.link} value={i.link}>
51+
{testnetOnly ? `Testnet only: ${i.title}` : i.title}
52+
</Option>
53+
))}
54+
</Select>
55+
<div className="flex border-3 border-green-500 dark:border-green-300 rounded-md">
56+
{accepted ? (
57+
<LinkButton
58+
href={accepted ? download.link : undefined}
59+
tip="Download binary"
60+
icon="contrast"
61+
>
62+
<Download16 />
63+
Download
64+
</LinkButton>
65+
) : (
66+
<Button
67+
onClick={() =>
68+
triggerToast({
69+
title: 'Please accept the Terms of Service',
70+
body: 'You must accept the Terms of Service to download the software.',
71+
})
72+
}
73+
tip="Download binary"
74+
icon="contrast"
75+
>
76+
<Download16 />
77+
Download
78+
</Button>
79+
)}
80+
</div>
81+
</div>
82+
)
83+
}

‎apps/website/components/DownloadDesktopSelect.tsx

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
import {
2+
Select,
3+
Option,
4+
Button,
5+
LinkButton,
6+
triggerToast,
7+
} from '@siafoundation/design-system'
8+
import { Download16 } from '@siafoundation/react-icons'
9+
import { useEffect, useState } from 'react'
10+
import {
11+
findUserDefaultDownload,
12+
getDownloadLinksDesktop,
13+
} from '../content/downloads'
14+
import { GitHubRelease } from '@siafoundation/data-sources'
15+
import { useTermsOfService } from '../hooks/useTermsOfService'
16+
17+
type Props = {
18+
daemon: 'renterd' | 'hostd' | 'walletd'
19+
release: GitHubRelease
20+
testnetOnly?: boolean
21+
}
22+
23+
export function DownloadDesktopSelect({ daemon, release, testnetOnly }: Props) {
24+
const downloadLinks = getDownloadLinksDesktop(daemon, release)
25+
const { accepted } = useTermsOfService()
26+
27+
const [download, setDownload] = useState(downloadLinks[0])
28+
29+
useEffect(() => {
30+
const d = findUserDefaultDownload(downloadLinks)
31+
if (d) {
32+
setDownload(d)
33+
}
34+
// eslint-disable-next-line react-hooks/exhaustive-deps
35+
}, [])
36+
37+
if (!release || !download) {
38+
return null
39+
}
40+
41+
return (
42+
<div className="flex items-center gap-1">
43+
<Button state="waiting">
44+
{release.tag_name.replace(`${daemon}@`, 'v')}
45+
</Button>
46+
<Select
47+
className="flex-1"
48+
value={download.link}
49+
onChange={(e) =>
50+
setDownload(
51+
downloadLinks.find((i) => i.link === e.currentTarget.value)
52+
)
53+
}
54+
>
55+
{downloadLinks.map((i) => (
56+
<Option key={i.link} value={i.link}>
57+
{testnetOnly ? `Testnet only: ${i.title}` : i.title}
58+
</Option>
59+
))}
60+
</Select>
61+
<div className="flex border-3 border-green-500 dark:border-green-300 rounded-md">
62+
{accepted ? (
63+
<LinkButton
64+
href={accepted ? download.link : undefined}
65+
tip="Download installer"
66+
icon="contrast"
67+
>
68+
<Download16 />
69+
Download
70+
</LinkButton>
71+
) : (
72+
<Button
73+
onClick={() =>
74+
triggerToast({
75+
title: 'Please accept the Terms of Service',
76+
body: 'You must accept the Terms of Service to download the software.',
77+
})
78+
}
79+
tip="Download installer"
80+
icon="contrast"
81+
>
82+
<Download16 />
83+
Download
84+
</Button>
85+
)}
86+
</div>
87+
</div>
88+
)
89+
}

0 commit comments

Comments
 (0)