fix: website downloads

.changeset/rude-suits-do.md

@@ -0,0 +1,5 @@
+---
+'website': minor
+---
+
+Downloads are now more prominent and the correct OS is preselected.

apps/website/components/CalloutCoreSoftware.tsx

@@ -4,11 +4,9 @@ import {
   Paragraph,
   Link,
   Badge,
-  Text,
 } from '@siafoundation/design-system'
 import Image from 'next/image'
 import { GitHubRelease } from '@siafoundation/data-sources'
-import { DownloadSelect } from './DownloadSelect'
 
 type Props = {
   name: string
@@ -31,10 +29,8 @@ export function CalloutCoreSoftware({
   href,
   image,
   background,
-  release,
   children,
   newTab,
-  testnetOnly,
 }: Props) {
   return (
     <PatternedPanel background={background}>
@@ -79,18 +75,6 @@ export function CalloutCoreSoftware({
         )}
         {children}
       </div>
-      {release && (
-        <div className="@container absolute bottom-0 w-full flex justify-between items-center px-3 py-2 bg-white dark:bg-graydark-200 border-t-2 border-graydark-400">
-          <Text size="14" weight="bold" className="hidden @md:flex">
-            Downloads
-          </Text>
-          <DownloadSelect
-            daemon="renterd"
-            release={release}
-            testnetOnly={testnetOnly}
-          />
-        </div>
-      )}
     </PatternedPanel>
   )
 }

apps/website/components/DownloadBar.tsx

@@ -1,5 +1,5 @@
 import { webLinks, Link, Text } from '@siafoundation/design-system'
-import { LogoGithub24, Book24 } from '@siafoundation/react-icons'
+import { LogoGithub24, Book24, Code24 } from '@siafoundation/react-icons'
 import { DownloadSelect } from './DownloadSelect'
 import { GitHubRelease } from '@siafoundation/data-sources'
 
@@ -11,23 +11,33 @@ type Props = {
 }
 
 export function DownloadBar({ daemon, release, testnetOnly }: Props) {
-  const githubUrl = webLinks.github[daemon]
+  const guideUrl = webLinks.docs[daemon]
   const docsUrl = webLinks.apiDocs[daemon]
+  const githubUrl = webLinks.github[daemon]
 
   return (
-    <div className="flex flex-wrap items-center gap-x-4 gap-y-3">
+    <div className="py-14 flex flex-col gap-3 justify-center items-center">
+      <Text size="24" weight="semibold" className="">
+        Download {daemon} software
+      </Text>
+      <DownloadSelect
+        daemon={daemon}
+        release={release}
+        testnetOnly={testnetOnly}
+      />
       <div className="flex items-center gap-x-4 gap-y-3">
-        {githubUrl && (
+        {guideUrl && (
           <Link
             weight="bold"
-            href={githubUrl}
+            href={guideUrl}
             target="_blank"
             size="14"
             underline="hover"
             className="flex items-center gap-1"
+            ellipsis
           >
-            <LogoGithub24 />
-            <span>Source code</span>
+            <Book24 />
+            <span>Setup guide</span>
           </Link>
         )}
         {docsUrl && (
@@ -38,25 +48,27 @@ export function DownloadBar({ daemon, release, testnetOnly }: Props) {
             size="14"
             underline="hover"
             className="flex items-center gap-1"
+            ellipsis
           >
-            <Book24 />
+            <Code24 />
             <span>API Docs</span>
           </Link>
         )}
+        {githubUrl && (
+          <Link
+            weight="bold"
+            href={githubUrl}
+            target="_blank"
+            size="14"
+            underline="hover"
+            className="flex items-center gap-1"
+            ellipsis
+          >
+            <LogoGithub24 />
+            <span>Source code</span>
+          </Link>
+        )}
       </div>
-      <div className="flex-1" />
-      {release ? (
-        <>
-          <Text className="hidden md:block" size="14" weight="bold">
-            Downloads
-          </Text>
-          <DownloadSelect
-            daemon={daemon}
-            release={release}
-            testnetOnly={testnetOnly}
-          />
-        </>
-      ) : null}
     </div>
   )
 }

apps/website/components/DownloadSelect.tsx

@@ -6,7 +6,7 @@ import {
   LinkButton,
 } from '@siafoundation/design-system'
 import { Download16 } from '@siafoundation/react-icons'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import { getDownloadLinks } from '../content/downloads'
 import { GitHubRelease } from '@siafoundation/data-sources'
 
@@ -21,11 +21,42 @@ export function DownloadSelect({ daemon, release, testnetOnly }: Props) {
 
   const [download, setDownload] = useState(downloadLinks[0])
 
+  useEffect(() => {
+    let d = null
+    if (navigator.userAgent.includes('Macintosh')) {
+      d = downloadLinks.find(
+        (i) =>
+          i.link.includes('darwin') &&
+          i.link.includes('arm64') &&
+          !i.link.includes('zen') &&
+          !i.link.includes('testnet')
+      )
+    } else if (navigator.userAgent.includes('Windows')) {
+      d = downloadLinks.find(
+        (i) =>
+          i.link.includes('windows') &&
+          i.link.includes('amd64') &&
+          !i.link.includes('zen') &&
+          !i.link.includes('testnet')
+      )
+    } else if (navigator.userAgent.includes('Linux')) {
+      d = downloadLinks.find(
+        (i) =>
+          i.link.includes('linux') &&
+          i.link.includes('amd64') &&
+          !i.link.includes('zen') &&
+          !i.link.includes('testnet')
+      )
+    }
+    if (d) {
+      setDownload(d)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
   return (
-    <ControlGroup>
-      <Button state="waiting" className="hidden @sm:flex">
-        {release.tag_name}
-      </Button>
+    <ControlGroup className="border-3 border-green-500 dark:border-green-300 rounded-md">
+      <Button state="waiting">{release.tag_name}</Button>
       <Select
         value={download.link}
         onChange={(e) =>

apps/website/pages/host/index.tsx

@@ -20,6 +20,7 @@ import { SectionProjects } from '../../components/SectionProjects'
 import { CalloutHostd } from '../../components/CalloutHostd'
 import { SectionTutorials } from '../../components/SectionTutorials'
 import { getHostdLatestRelease } from '../../content/releases'
+import { DownloadBar } from '../../components/DownloadBar'
 
 const title = 'Host'
 const description = 'Offer your storage space on the Sia network.'
@@ -39,7 +40,7 @@ export default function Host({
       description={description}
       path={routes.rent.index}
       heading={
-        <SectionTransparent className="pt-24 md:pt-40 pb-6 md:pb-12">
+        <SectionTransparent className="pt-24 md:pt-32 pb-0">
           <SiteHeading
             anchorLink={false}
             size="64"
@@ -52,6 +53,7 @@ export default function Host({
       previewImage={previews.nateWaterfall}
     >
       <SectionGradient className="pb-20">
+        <DownloadBar daemon="hostd" release={release} />
         <div className="flex flex-col">
           <SiteHeading
             size="32"

apps/website/pages/rent/index.tsx

@@ -20,6 +20,7 @@ import { CalloutRenterd } from '../../components/CalloutRenterd'
 import { SectionProjects } from '../../components/SectionProjects'
 import { SectionTutorials } from '../../components/SectionTutorials'
 import { getRenterdLatestRelease } from '../../content/releases'
+import { DownloadBar } from '../../components/DownloadBar'
 
 const title = 'Rent'
 const description = 'Rent storage space on the Sia network.'
@@ -39,7 +40,7 @@ export default function Rent({
       description={description}
       path={routes.rent.index}
       heading={
-        <SectionTransparent className="pt-24 md:pt-40 pb-6 md:pb-12">
+        <SectionTransparent className="pt-24 md:pt-32 pb-0">
           <SiteHeading
             anchorLink={false}
             size="64"
@@ -52,13 +53,13 @@ export default function Rent({
       previewImage={previews.leaves}
     >
       <SectionGradient className="pb-20">
+        <DownloadBar daemon="renterd" release={release} />
         <div className="flex flex-col">
           <SiteHeading
             id="core-software"
             size="32"
             title="Core Software"
             description="Official software, developed by the Sia Foundation."
-            className="mt-12 md:mt-12"
           />
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <CalloutRenterd release={release} />

apps/website/pages/software/hostd.tsx

@@ -42,7 +42,6 @@ const description = (
 type Props = AsyncReturnType<typeof getStaticProps>['props']
 
 export default function Hostd({ release, technical, tutorials }: Props) {
-  const downloadEl = <DownloadBar daemon={daemon} release={release} />
   const { ref: appRef, inView: appInView } = useInView()
 
   return (
@@ -51,7 +50,7 @@ export default function Hostd({ release, technical, tutorials }: Props) {
       description={textContent(description)}
       path={routes.software.hostd}
       heading={
-        <SectionTransparent className="pt-24 pb-0 md:pt-32 md:pb-0">
+        <SectionTransparent className="pt-24 md:pt-32 pb-0">
           <SiteHeading
             size="64"
             title={title}
@@ -65,14 +64,14 @@ export default function Hostd({ release, technical, tutorials }: Props) {
     >
       <SectionGradient className="pb:30">
         <div className="relative">
+          <DownloadBar daemon={daemon} release={release} />
           <div ref={appRef} className="absolute top-[70%]" />
           <div
             className={cx(
               'relative transition-transform',
               appInView ? 'md:scale-[1.03]' : ''
             )}
           >
-            <div className="pt-52">{downloadEl}</div>
             <CarouselHostd />
           </div>
         </div>

apps/website/pages/software/renterd.tsx

@@ -41,7 +41,6 @@ const description = (
 type Props = AsyncReturnType<typeof getStaticProps>['props']
 
 export default function Renterd({ release, technical, tutorials }: Props) {
-  const downloadEl = <DownloadBar daemon={daemon} release={release} />
   const { ref: appRef, inView: appInView } = useInView()
 
   return (
@@ -50,7 +49,7 @@ export default function Renterd({ release, technical, tutorials }: Props) {
       description={textContent(description)}
       path={routes.software.renterd}
       heading={
-        <SectionTransparent className="pt-24 pb-0 md:pt-32 md:pb-0">
+        <SectionTransparent className="pt-24 md:pt-32 pb-0">
           <SiteHeading
             size="64"
             title={title}
@@ -64,14 +63,14 @@ export default function Renterd({ release, technical, tutorials }: Props) {
     >
       <SectionGradient className="pb:30">
         <div className="relative">
+          <DownloadBar daemon={daemon} release={release} />
           <div ref={appRef} className="absolute top-[70%]" />
           <div
             className={cx(
               'relative transition-transform',
               appInView ? 'md:scale-[1.03]' : ''
             )}
           >
-            <div className="pt-52">{downloadEl}</div>
             <CarouselRenterd />
           </div>
         </div>

apps/website/pages/software/walletd.tsx

@@ -44,9 +44,6 @@ const description = (
 type Props = AsyncReturnType<typeof getStaticProps>['props']
 
 export default function Walletd({ release, technical, tutorials }: Props) {
-  const downloadEl = (
-    <DownloadBar daemon={daemon} release={release} testnetOnly />
-  )
   const { ref: appRef, inView: appInView } = useInView()
 
   return (
@@ -55,7 +52,7 @@ export default function Walletd({ release, technical, tutorials }: Props) {
       description={textContent(description)}
       path={routes.software.walletd}
       heading={
-        <SectionTransparent className="pt-24 pb-0 md:pt-32 md:pb-0">
+        <SectionTransparent className="pt-24 md:pt-32 pb-0">
           <SiteHeading
             size="64"
             title={title}
@@ -68,6 +65,7 @@ export default function Walletd({ release, technical, tutorials }: Props) {
       previewImage={previews.walletd}
     >
       <SectionGradient className="pb:30">
+        <DownloadBar daemon={daemon} release={release} testnetOnly />
         <div className="relative">
           <div ref={appRef} className="absolute top-[70%]" />
           <div
@@ -76,7 +74,6 @@ export default function Walletd({ release, technical, tutorials }: Props) {
               appInView ? 'md:scale-[1.03]' : ''
             )}
           >
-            <div className="pt-52">{downloadEl}</div>
             <CarouselWalletd />
           </div>
         </div>

apps/website/pages/wallet/index.tsx

@@ -21,6 +21,7 @@ import { SectionTutorials } from '../../components/SectionTutorials'
 import { CalloutWalletd } from '../../components/CalloutWalletd'
 import { SoftwareSectionCurrentGen } from '../../components/SoftwareSectionCurrentGen'
 import { getWalletdLatestRelease } from '../../content/releases'
+import { DownloadBar } from '../../components/DownloadBar'
 
 const title = 'Wallet'
 const description = 'Manage your wallet on the Sia network.'
@@ -39,7 +40,7 @@ export default function Wallet({
       description={description}
       path={routes.wallet.index}
       heading={
-        <SectionTransparent className="pt-24 md:pt-40 pb-6 md:pb-12">
+        <SectionTransparent className="pt-24 md:pt-32 pb-0">
           <SiteHeading
             anchorLink={false}
             size="64"
@@ -52,6 +53,7 @@ export default function Wallet({
       previewImage={previews.jungle}
     >
       <SectionGradient className="pb-20">
+        <DownloadBar daemon="walletd" release={release} testnetOnly />
         <div className="flex flex-col">
           <SiteHeading
             size="32"

libs/design-system/src/data/webLinks.ts

@@ -3,8 +3,11 @@ export const webLinks = {
   docs: {
     index: 'https://docs.sia.tech',
     sia101: 'https://docs.sia.tech/get-started-with-sia/sia101',
+    renterd: 'https://docs.sia.tech/renting/about-renting',
+    hostd: 'https://docs.sia.tech/hosting/about-hosting-on-sia',
+    walletd: 'https://docs.sia.tech/wallet/wallet-overview',
     renting: 'https://docs.sia.tech/renting/about-renting',
-    wallet: 'https://docs.sia.tech/your-sia-wallet/wallet-overview',
+    wallet: 'https://docs.sia.tech/wallet/wallet-overview',
     hosting: 'https://docs.sia.tech/hosting/about-hosting-on-sia',
     mining: 'https://docs.sia.tech/mining/about-mining-on-sia',
     embarcadero: 'https://github.com/SiaFoundation/embarcadero',