change requests

pull/26459/head^2
Corwin Smith 2 years ago
parent 4ebe14a478
commit 649d22ba37
  1. 146
      src/components/UI/downloads/DownloadsHero.tsx
  2. 2
      src/components/UI/downloads/DownloadsSection.tsx
  3. 160
      src/components/UI/downloads/DownloadsTable.tsx
  4. 56
      src/constants.ts
  5. 26
      src/pages/downloads.tsx
  6. 16
      src/theme/components/Link.ts

@ -2,6 +2,8 @@ import { Box, Button, Image, Link, Stack, HStack, Text } from '@chakra-ui/react'
import { FC } from 'react'; import { FC } from 'react';
import NextLink from 'next/link'; import NextLink from 'next/link';
import { DOWNLOAD_HEADER_BUTTONS } from '../../../constants'
interface DownloadsHero { interface DownloadsHero {
currentBuildName: string currentBuildName: string
currentBuildVersion: string currentBuildVersion: string
@ -21,11 +23,16 @@ export const DownloadsHero: FC<DownloadsHero> = ({
sourceCodeURL, sourceCodeURL,
windowsBuildURL windowsBuildURL
}) => { }) => {
DOWNLOAD_HEADER_BUTTONS.linuxBuild.buildURL = linuxBuildURL
DOWNLOAD_HEADER_BUTTONS.macOSBuild.buildURL = macOSBuildURL
DOWNLOAD_HEADER_BUTTONS.windowsBuild.buildURL = windowsBuildURL
DOWNLOAD_HEADER_BUTTONS.sourceCode.buildURL = sourceCodeURL
return ( return (
<Stack border='3px solid' borderColor='brand.light.primary' py={4} px={4}> <Stack border='3px solid' borderColor='brand.light.primary' py={4} px={4}>
<Box> <Stack alignItems='center'>
<Image w={'180px'} m={'auto'} src='/images/pages/gopher-downloads-front-light.svg' alt='Gopher greeting' /> <Image src='/images/pages/gopher-downloads-front-light.svg' alt='Gopher plugged in' />
</Box> </Stack>
<Box mb={4}> <Box mb={4}>
<Box <Box
@ -48,107 +55,48 @@ export const DownloadsHero: FC<DownloadsHero> = ({
You can download the latest 64-bit stable release of Geth for our primary platforms below. Packages for all supported platforms, as well as develop builds, can be found further down the page. If you&apos;re looking to install Geth and/or associated tools via your favorite package manager, please check our installation guide. You can download the latest 64-bit stable release of Geth for our primary platforms below. Packages for all supported platforms, as well as develop builds, can be found further down the page. If you&apos;re looking to install Geth and/or associated tools via your favorite package manager, please check our installation guide.
</Text> </Text>
<NextLink href={linuxBuildURL} passHref> {
<Button Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string, idx) => {
as='a' return (
variant='primary' <NextLink
width={{ base: '100%' }} key={idx}
p={8} href={DOWNLOAD_HEADER_BUTTONS[key].buildURL}
mb={4} passHref
> >
<HStack spacing={4}> <Button
<Box> as='a'
<Image m={'auto'} src='/images/pages/linux-penguin.svg' alt='Gopher greeting' /> variant='primary'
</Box> width={{ base: '100%' }}
<Box> p={8}
<Text textStyle='downloads-button-label'> mb={4}
For linux >
</Text> <HStack spacing={4}>
<Text textStyle='downloads-button-label'> <Stack alignItems='center'>
geth {currentBuildName} <Image
</Text> src={DOWNLOAD_HEADER_BUTTONS[key].image}
</Box> alt={DOWNLOAD_HEADER_BUTTONS[key].imageAlt}
</HStack> />
</Button> </Stack>
</NextLink> <Box>
<Text textStyle='downloads-button-label'>
<NextLink href={macOSBuildURL} passHref> For {DOWNLOAD_HEADER_BUTTONS[key].name}
<Button </Text>
as='a' <Text textStyle='downloads-button-label'>
variant='primary' geth {currentBuildName}
width={{ base: '100%' }} </Text>
p={8} </Box>
mb={4} </HStack>
> </Button>
<HStack spacing={4}> </NextLink>
<Box> )
<Image m={'auto'} src='/images/pages/macos-logo.svg' alt='Gopher greeting' /> })
</Box> }
<Box>
<Text textStyle='downloads-button-label'>
For macos
</Text>
<Text textStyle='downloads-button-label'>
geth {currentBuildName}
</Text>
</Box>
</HStack>
</Button>
</NextLink>
<NextLink href={windowsBuildURL} passHref>
<Button
as='a'
variant='primary'
width={{ base: '100%' }}
p={8}
mb={4}
>
<HStack spacing={4}>
<Box>
<Image m={'auto'} src='/images/pages/windows-logo.svg' alt='Gopher greeting' />
</Box>
<Box>
<Text textStyle='downloads-button-label'>
For windows
</Text>
<Text textStyle='downloads-button-label'>
geth {currentBuildName}
</Text>
</Box>
</HStack>
</Button>
</NextLink>
<NextLink href={sourceCodeURL} passHref>
<Button
as='a'
variant='primary'
width={{ base: '100%' }}
p={8}
mb={4}
>
<HStack spacing={4}>
<Box>
<Image m={'auto'} src='/images/pages/source-branch.svg' alt='Gopher greeting' />
</Box>
<Box>
<Text textStyle='downloads-button-label'>
Sources
</Text>
<Text textStyle='downloads-button-label'>
geth {currentBuildName}
</Text>
</Box>
</HStack>
</Button>
</NextLink>
<Box textAlign={'center'}> <Box textAlign={'center'}>
<Link <Link
href={releaseNotesURL} href={releaseNotesURL}
isExternal isExternal
variant='href' variant='light'
> >
Release notes for {currentBuildName} {currentBuildVersion} Release notes for {currentBuildName} {currentBuildVersion}
</Link> </Link>

@ -2,7 +2,7 @@ import { Box, Image, Stack } from '@chakra-ui/react';
import { FC } from 'react'; import { FC } from 'react';
interface Props { interface Props {
children?: React.ReactNode; children: React.ReactNode;
id: string; id: string;
imgSrc?: string; imgSrc?: string;
imgAltText?: string; imgAltText?: string;

@ -9,6 +9,11 @@ import {
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { FC } from 'react'; import { FC } from 'react';
import {
DOWNLOAD_TABS,
DOWNLOAD_TAB_COLUMN_HEADERS
} from '../../../constants'
import { DataTable } from '../DataTable' import { DataTable } from '../DataTable'
interface Props { interface Props {
@ -29,154 +34,61 @@ export const DownloadsTable: FC<Props> = ({
color='brand.light.primary' color='brand.light.primary'
bg='green.50' bg='green.50'
> >
<Tab {
w={'20%'} DOWNLOAD_TABS.map((tab, idx) => {
p={4} return (
_selected={{ <Tab
bg: 'brand.light.primary', key={idx}
color: 'yellow.50', w={'20%'}
}} p={4}
borderRight='2px solid' _selected={{
borderBottom='2px solid' bg: 'brand.light.primary',
borderColor='brand.light.primary' color: 'yellow.50',
> }}
<Text textStyle='download-tab-label'> borderBottom='2px solid'
LINUX borderRight={
</Text> idx === (DOWNLOAD_TABS.length - 1)
</Tab> ?'none'
<Tab :'2px solid'
w={'20%'} }
p={4} borderColor='brand.light.primary'
_selected={{ >
bg: 'brand.light.primary', <Text textStyle='download-tab-label'>
color: 'yellow.50', {tab}
}} </Text>
borderRight='2px solid' </Tab>
borderBottom='2px solid' )
borderColor='brand.light.primary' })
> }
<Text textStyle='download-tab-label'>
MACOS
</Text>
</Tab>
<Tab
w={'20%'}
p={4}
_selected={{
bg: 'brand.light.primary',
color: 'yellow.50',
}}
borderRight='2px solid'
borderBottom='2px solid'
borderColor='brand.light.primary'
>
<Text textStyle='download-tab-label'>
WINDOWS
</Text>
</Tab>
<Tab
w={'20%'}
p={4}
_selected={{
bg: 'brand.light.primary',
color: 'yellow.50',
}}
borderRight='2px solid'
borderBottom='2px solid'
borderColor='brand.light.primary'
>
<Text textStyle='download-tab-label'>
IOS
</Text>
</Tab>
<Tab
w={'20%'}
p={4}
_selected={{
bg: 'brand.light.primary',
color: 'yellow.50',
}}
borderBottom='2px solid'
borderColor='brand.light.primary'
>
<Text textStyle='download-tab-label'>
ANDROID
</Text>
</Tab>
</TabList> </TabList>
<TabPanels> <TabPanels>
<TabPanel p={0}> <TabPanel p={0}>
<DataTable <DataTable
columnHeaders={[ columnHeaders={DOWNLOAD_TAB_COLUMN_HEADERS}
'Release',
'Commit',
'Kind',
'Arch',
'Size',
'Published',
'Signature',
'Checksum (MD5)'
]}
data={data} data={data}
/> />
</TabPanel> </TabPanel>
<TabPanel p={0}> <TabPanel p={0}>
<DataTable <DataTable
columnHeaders={[ columnHeaders={DOWNLOAD_TAB_COLUMN_HEADERS}
'Release',
'Commit',
'Kind',
'Arch',
'Size',
'Published',
'Signature',
'Checksum (MD5)'
]}
data={data} data={data}
/> />
</TabPanel> </TabPanel>
<TabPanel p={0}> <TabPanel p={0}>
<DataTable <DataTable
columnHeaders={[ columnHeaders={DOWNLOAD_TAB_COLUMN_HEADERS}
'Release',
'Commit',
'Kind',
'Arch',
'Size',
'Published',
'Signature',
'Checksum (MD5)'
]}
data={data} data={data}
/> />
</TabPanel> </TabPanel>
<TabPanel p={0}> <TabPanel p={0}>
<DataTable <DataTable
columnHeaders={[ columnHeaders={DOWNLOAD_TAB_COLUMN_HEADERS}
'Release',
'Commit',
'Kind',
'Arch',
'Size',
'Published',
'Signature',
'Checksum (MD5)'
]}
data={data} data={data}
/> />
</TabPanel> </TabPanel>
<TabPanel p={0}> <TabPanel p={0}>
<DataTable <DataTable
columnHeaders={[ columnHeaders={DOWNLOAD_TAB_COLUMN_HEADERS}
'Release',
'Commit',
'Kind',
'Arch',
'Size',
'Published',
'Signature',
'Checksum (MD5)'
]}
data={data} data={data}
/> />
</TabPanel> </TabPanel>

@ -13,4 +13,58 @@ export const GO_URL = 'https://go.dev/';
// Downloads // Downloads
export const DEFAULT_BUILD_AMOUNT_TO_SHOW = 10; export const DEFAULT_BUILD_AMOUNT_TO_SHOW = 10;
export const DOWNLOAD_HEADER_BUTTONS: {[index: string]: {name: string; image: string; imageAlt: string; buildURL: string;}} = {
linuxBuild: {
name: 'Linux',
image: '/images/pages/linux-penguin.svg',
imageAlt: 'Linux logo',
buildURL: ''
},
macOSBuild: {
name: 'macOS',
image: '/images/pages/macos-logo.svg',
imageAlt: 'macOS logo',
buildURL: ''
},
windowsBuild: {
name: 'Windows',
image: '/images/pages/windows-logo.svg',
imageAlt: 'Windows logo',
buildURL: ''
},
sourceCode: {
name: 'Sources',
image: '/images/pages/source-branch.svg',
imageAlt: 'Source branch logo',
buildURL: ''
}
}
export const DOWNLOAD_TABS = [
'Linux',
'macOS',
'Windows',
'iOS',
'Android'
]
export const DOWNLOAD_TAB_COLUMN_HEADERS = [
'Release',
'Commit',
'Kind',
'Arch',
'Size',
'Published',
'Signature',
'Checksum (MD5)'
]
export const DOWNLOAD_OPENPGP_BUILD_HEADERS = [
'Build Server',
'Unique ID',
'OpenPGP Key',
'Fingerprint'
]
export const DOWNLOAD_OPENPGP_DEVELOPER_HEADERS = [
'Developer',
'Unique ID',
'OpenPGP Key',
'Fingerprint'
]

@ -18,6 +18,8 @@ import { DataTable } from '../components/UI/DataTable';
import { import {
DEFAULT_BUILD_AMOUNT_TO_SHOW, DEFAULT_BUILD_AMOUNT_TO_SHOW,
DOWNLOAD_OPENPGP_BUILD_HEADERS,
DOWNLOAD_OPENPGP_DEVELOPER_HEADERS,
GETH_REPO_URL GETH_REPO_URL
} from '../constants' } from '../constants'
@ -79,7 +81,7 @@ const DownloadsPage: NextPage = ({}) => {
Please select your desired platform from the lists below and download your bundle of choice. Please be aware that the MD5 checksums are provided by our binary hosting platform (Azure Blobstore) to help check for download errors. For security guarantees please verify any downloads via the attached PGP signature files (see{' '} Please select your desired platform from the lists below and download your bundle of choice. Please be aware that the MD5 checksums are provided by our binary hosting platform (Azure Blobstore) to help check for download errors. For security guarantees please verify any downloads via the attached PGP signature files (see{' '}
<Link <Link
href={'#pgpsignatures'} href={'#pgpsignatures'}
variant='href' variant='light'
> >
OpenPGP OpenPGP
</Link>{' '} </Link>{' '}
@ -95,7 +97,7 @@ const DownloadsPage: NextPage = ({}) => {
<Link <Link
href={GETH_REPO_URL} href={GETH_REPO_URL}
isExternal isExternal
variant='href' variant='light'
> >
GitHub repository. GitHub repository.
</Link> </Link>
@ -116,7 +118,7 @@ const DownloadsPage: NextPage = ({}) => {
textAlign='center' textAlign='center'
p={4} p={4}
> >
SHOW OLDER RELEASES Show older releases
</Text> </Text>
</Link> </Link>
</Stack> </Stack>
@ -129,7 +131,7 @@ const DownloadsPage: NextPage = ({}) => {
<Link <Link
href={GETH_REPO_URL} href={GETH_REPO_URL}
isExternal isExternal
variant='href' variant='light'
> >
GitHub repository. GitHub repository.
</Link> </Link>
@ -150,7 +152,7 @@ const DownloadsPage: NextPage = ({}) => {
textAlign='center' textAlign='center'
p={4} p={4}
> >
SHOW OLDER RELEASES Show older releases
</Text> </Text>
</Link> </Link>
</Stack> </Stack>
@ -166,12 +168,7 @@ const DownloadsPage: NextPage = ({}) => {
{/* TODO: swap for real data */} {/* TODO: swap for real data */}
<Stack borderBottom='2px solid' borderColor='brand.light.primary'> <Stack borderBottom='2px solid' borderColor='brand.light.primary'>
<DataTable <DataTable
columnHeaders={[ columnHeaders={DOWNLOAD_OPENPGP_BUILD_HEADERS}
'Build Server',
'Unique ID',
'OpenPGP Key',
'Fingerprint'
]}
data={pgpBuildTestData} data={pgpBuildTestData}
/> />
</Stack> </Stack>
@ -179,12 +176,7 @@ const DownloadsPage: NextPage = ({}) => {
{/* TODO: swap for real data */} {/* TODO: swap for real data */}
<Stack> <Stack>
<DataTable <DataTable
columnHeaders={[ columnHeaders={DOWNLOAD_OPENPGP_DEVELOPER_HEADERS}
'Developer',
'Unique ID',
'OpenPGP Key',
'Fingerprint'
]}
data={pgpDeveloperTestData} data={pgpDeveloperTestData}
/> />
</Stack> </Stack>

@ -12,22 +12,6 @@ export const Link = {
}, },
_active: { textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' } _active: { textDecoration: 'none', bg: 'brand.light.secondary', color: 'yellow.50' }
}, },
href: {
color: 'brand.light.primary',
_hover: {
color: 'brand.light.body',
textDecorationColor: 'brand.light.body'
},
_focus: {
color: 'brand.light.primary',
boxShadow: 'linkBoxShadow',
textDecoration: 'none'
},
_pressed: {
color: 'brand.light.secondary',
textDecorationColor: 'brand.light.secondary'
}
},
light: { light: {
textDecoration: 'underline', textDecoration: 'underline',
color: 'brand.light.primary', color: 'brand.light.primary',

Loading…
Cancel
Save