change requests

This commit is contained in:
Corwin Smith 2022-10-10 06:56:44 -06:00
parent 4ebe14a478
commit 649d22ba37
6 changed files with 148 additions and 258 deletions

@ -2,6 +2,8 @@ import { Box, Button, Image, Link, Stack, HStack, Text } from '@chakra-ui/react'
import { FC } from 'react';
import NextLink from 'next/link';
import { DOWNLOAD_HEADER_BUTTONS } from '../../../constants'
interface DownloadsHero {
currentBuildName: string
currentBuildVersion: string
@ -21,11 +23,16 @@ export const DownloadsHero: FC<DownloadsHero> = ({
sourceCodeURL,
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 (
<Stack border='3px solid' borderColor='brand.light.primary' py={4} px={4}>
<Box>
<Image w={'180px'} m={'auto'} src='/images/pages/gopher-downloads-front-light.svg' alt='Gopher greeting' />
</Box>
<Stack alignItems='center'>
<Image src='/images/pages/gopher-downloads-front-light.svg' alt='Gopher plugged in' />
</Stack>
<Box mb={4}>
<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.
</Text>
<NextLink href={linuxBuildURL} passHref>
<Button
as='a'
variant='primary'
width={{ base: '100%' }}
p={8}
mb={4}
>
<HStack spacing={4}>
<Box>
<Image m={'auto'} src='/images/pages/linux-penguin.svg' alt='Gopher greeting' />
</Box>
<Box>
<Text textStyle='downloads-button-label'>
For linux
</Text>
<Text textStyle='downloads-button-label'>
geth {currentBuildName}
</Text>
</Box>
</HStack>
</Button>
</NextLink>
<NextLink href={macOSBuildURL} passHref>
<Button
as='a'
variant='primary'
width={{ base: '100%' }}
p={8}
mb={4}
>
<HStack spacing={4}>
<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>
{
Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string, idx) => {
return (
<NextLink
key={idx}
href={DOWNLOAD_HEADER_BUTTONS[key].buildURL}
passHref
>
<Button
as='a'
variant='primary'
width={{ base: '100%' }}
p={8}
mb={4}
>
<HStack spacing={4}>
<Stack alignItems='center'>
<Image
src={DOWNLOAD_HEADER_BUTTONS[key].image}
alt={DOWNLOAD_HEADER_BUTTONS[key].imageAlt}
/>
</Stack>
<Box>
<Text textStyle='downloads-button-label'>
For {DOWNLOAD_HEADER_BUTTONS[key].name}
</Text>
<Text textStyle='downloads-button-label'>
geth {currentBuildName}
</Text>
</Box>
</HStack>
</Button>
</NextLink>
)
})
}
<Box textAlign={'center'}>
<Link
href={releaseNotesURL}
isExternal
variant='href'
variant='light'
>
Release notes for {currentBuildName} {currentBuildVersion}
</Link>

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

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

@ -13,4 +13,58 @@ export const GO_URL = 'https://go.dev/';
// Downloads
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 {
DEFAULT_BUILD_AMOUNT_TO_SHOW,
DOWNLOAD_OPENPGP_BUILD_HEADERS,
DOWNLOAD_OPENPGP_DEVELOPER_HEADERS,
GETH_REPO_URL
} 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{' '}
<Link
href={'#pgpsignatures'}
variant='href'
variant='light'
>
OpenPGP
</Link>{' '}
@ -95,7 +97,7 @@ const DownloadsPage: NextPage = ({}) => {
<Link
href={GETH_REPO_URL}
isExternal
variant='href'
variant='light'
>
GitHub repository.
</Link>
@ -116,7 +118,7 @@ const DownloadsPage: NextPage = ({}) => {
textAlign='center'
p={4}
>
SHOW OLDER RELEASES
Show older releases
</Text>
</Link>
</Stack>
@ -129,7 +131,7 @@ const DownloadsPage: NextPage = ({}) => {
<Link
href={GETH_REPO_URL}
isExternal
variant='href'
variant='light'
>
GitHub repository.
</Link>
@ -150,7 +152,7 @@ const DownloadsPage: NextPage = ({}) => {
textAlign='center'
p={4}
>
SHOW OLDER RELEASES
Show older releases
</Text>
</Link>
</Stack>
@ -166,12 +168,7 @@ const DownloadsPage: NextPage = ({}) => {
{/* TODO: swap for real data */}
<Stack borderBottom='2px solid' borderColor='brand.light.primary'>
<DataTable
columnHeaders={[
'Build Server',
'Unique ID',
'OpenPGP Key',
'Fingerprint'
]}
columnHeaders={DOWNLOAD_OPENPGP_BUILD_HEADERS}
data={pgpBuildTestData}
/>
</Stack>
@ -179,12 +176,7 @@ const DownloadsPage: NextPage = ({}) => {
{/* TODO: swap for real data */}
<Stack>
<DataTable
columnHeaders={[
'Developer',
'Unique ID',
'OpenPGP Key',
'Fingerprint'
]}
columnHeaders={DOWNLOAD_OPENPGP_DEVELOPER_HEADERS}
data={pgpDeveloperTestData}
/>
</Stack>

@ -12,22 +12,6 @@ export const Link = {
},
_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: {
textDecoration: 'underline',
color: 'brand.light.primary',