diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx index 2c01270953..c31edbc37a 100644 --- a/src/components/UI/downloads/DownloadsHero.tsx +++ b/src/components/UI/downloads/DownloadsHero.tsx @@ -1,11 +1,11 @@ -import { Box, Button, Image, Link, Stack, HStack, Text } from '@chakra-ui/react'; +import { Box, Center, Button, Grid, 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; + currentBuild: string; currentBuildVersion: string; linuxBuildURL: string; macOSBuildURL: string; @@ -15,7 +15,7 @@ interface DownloadsHero { } export const DownloadsHero: FC = ({ - currentBuildName, + currentBuild, currentBuildVersion, linuxBuildURL, macOSBuildURL, @@ -29,61 +29,99 @@ export const DownloadsHero: FC = ({ DOWNLOAD_HEADER_BUTTONS.sourceCode.buildURL = sourceCodeURL; return ( - - - Gopher plugged in - - - - - Download go-ethereum - - - + + - {currentBuildName} ({currentBuildVersion}) - + + + Download go-ethereum + - - 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're looking to install Geth and/or associated tools via your favorite - package manager, please check our installation guide. - + + {currentBuild} + - {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => { - return ( - - - - ); - })} + + 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're looking to install Geth and/or associated tools + via your favorite package manager, please check our installation guide. + + + + +
+ Gopher plugged in +
+ + + + + {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => { + return ( + + + + ); + })} + - Release notes for {currentBuildName} {currentBuildVersion} + Release notes for {currentBuild} - - + + +
+ Gopher plugged in +
+ ); }; diff --git a/src/components/UI/downloads/DownloadsSection.tsx b/src/components/UI/downloads/DownloadsSection.tsx index 365bb49411..adf55abe6e 100644 --- a/src/components/UI/downloads/DownloadsSection.tsx +++ b/src/components/UI/downloads/DownloadsSection.tsx @@ -1,4 +1,4 @@ -import { Box, Image, Stack } from '@chakra-ui/react'; +import { Center, Flex, Image, Stack, Text } from '@chakra-ui/react'; import { FC } from 'react'; interface Props { @@ -6,10 +6,18 @@ interface Props { id: string; imgSrc?: string; imgAltText?: string; + sectionDescription?: React.ReactNode; sectionTitle: string; } -export const DownloadsSection: FC = ({ children, imgSrc, imgAltText, sectionTitle, id }) => { +export const DownloadsSection: FC = ({ + children, + imgSrc, + imgAltText, + sectionDescription, + sectionTitle, + id +}) => { return ( {!!imgSrc && ( @@ -19,18 +27,33 @@ export const DownloadsSection: FC = ({ children, imgSrc, imgAltText, sect )} - - - {sectionTitle} - - + +
+ + {sectionTitle} + +
+ - {children} + {sectionDescription && ( +
+ {sectionDescription} +
+ )} + + + + {children} + ); }; diff --git a/src/components/UI/downloads/SpecificVersionsSection.tsx b/src/components/UI/downloads/SpecificVersionsSection.tsx new file mode 100644 index 0000000000..d7f9279771 --- /dev/null +++ b/src/components/UI/downloads/SpecificVersionsSection.tsx @@ -0,0 +1,42 @@ +import { Box, Flex, Image, Stack } from '@chakra-ui/react'; +import { FC } from 'react'; + +interface Props { + children: React.ReactNode; +} + +export const SpecificVersionsSection: FC = ({ children }) => { + return ( + + + {/* TODO: use NextImage */} + Gopher facing right + + + + + Specific Versions + + + {children} + + + ); +}; diff --git a/src/components/UI/downloads/index.ts b/src/components/UI/downloads/index.ts index 11310c63fc..9c5b9ae8c4 100644 --- a/src/components/UI/downloads/index.ts +++ b/src/components/UI/downloads/index.ts @@ -1,3 +1,4 @@ export * from './DownloadsHero'; export * from './DownloadsSection'; export * from './DownloadsTable'; +export * from './SpecificVersionsSection'; diff --git a/src/components/UI/homepage/HomeHero.tsx b/src/components/UI/homepage/HomeHero.tsx index 40e4f28bd9..cb68860bdb 100644 --- a/src/components/UI/homepage/HomeHero.tsx +++ b/src/components/UI/homepage/HomeHero.tsx @@ -19,7 +19,7 @@ export const HomeHero: FC = () => { textStyle='h1' mb={{ base: 2, md: 4 }} textAlign={{ base: 'center', md: 'left' }} - fontSize={{ base: '3rem', md: '6rem' }} + fontSize={{ base: '5xl', md: '8xl' }} lineHeight={{ md: '6rem' }} fontWeight='500' > diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx index 6917c4b5f5..fae4ca1bdd 100644 --- a/src/components/layouts/Footer.tsx +++ b/src/components/layouts/Footer.tsx @@ -82,7 +82,7 @@ export const Footer: FC = () => { }} borderColor='brand.light.primary !important' _hover={{ - bg: 'brand.light.primary', + bg: 'brand.light.primary' }} alignItems='center' p={4} @@ -91,10 +91,10 @@ export const Footer: FC = () => { @@ -106,7 +106,7 @@ export const Footer: FC = () => { data-group flex={1} _hover={{ - bg: 'brand.light.primary', + bg: 'brand.light.primary' }} alignItems='center' borderWidth='2px' @@ -118,10 +118,10 @@ export const Footer: FC = () => { @@ -133,7 +133,7 @@ export const Footer: FC = () => { data-group flex={1} _hover={{ - bg: 'brand.light.primary', + bg: 'brand.light.primary' }} alignItems='center' p={4} @@ -142,10 +142,10 @@ export const Footer: FC = () => { diff --git a/src/constants.ts b/src/constants.ts index 274b4fae6e..e7002d00cc 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -66,3 +66,19 @@ export const DOWNLOAD_OPENPGP_DEVELOPER_HEADERS = [ 'OpenPGP Key', 'Fingerprint' ]; + +// GitHub urls +export const LATEST_GETH_RELEASE_URL = + 'https://api.github.com/repos/ethereum/go-ethereum/releases/latest'; +export const ALL_GETH_RELEASES_URL = 'https://api.github.com/repos/ethereum/go-ethereum/releases'; +export const ALL_GETH_COMMITS_URL = 'https://api.github.com/repos/ethereum/go-ethereum/commits/'; + +export const LINUX_BINARY_BASE_URL = + 'https://gethstore.blob.core.windows.net/builds/geth-linux-amd64-'; +export const MACOS_BINARY_BASE_URL = + 'https://gethstore.blob.core.windows.net/builds/geth-darwin-amd64-'; +export const WINDOWS_BINARY_BASE_URL = + 'https://gethstore.blob.core.windows.net/builds/geth-windows-amd64-'; + +export const LATEST_SOURCES_BASE_URL = 'https://github.com/ethereum/go-ethereum/archive/'; +export const RELEASE_NOTES_BASE_URL = 'https://github.com/ethereum/go-ethereum/releases/tag/'; diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx index c612af2d6c..c0d1ab2156 100644 --- a/src/pages/downloads.tsx +++ b/src/pages/downloads.tsx @@ -1,22 +1,100 @@ -import { Code, Link, ListItem, Stack, Text, UnorderedList } from '@chakra-ui/react'; -import type { NextPage } from 'next'; +import { Center, Code, Flex, Link, ListItem, Stack, Text, UnorderedList } from '@chakra-ui/react'; +import type { GetServerSideProps, NextPage } from 'next'; import { useState } from 'react'; -import { DownloadsHero, DownloadsSection, DownloadsTable } from '../components/UI/downloads'; +import { + DownloadsHero, + DownloadsSection, + DownloadsTable, + SpecificVersionsSection +} from '../components/UI/downloads'; import { DataTable } from '../components/UI'; import { + ALL_GETH_COMMITS_URL, DEFAULT_BUILD_AMOUNT_TO_SHOW, DOWNLOAD_OPENPGP_BUILD_HEADERS, DOWNLOAD_OPENPGP_DEVELOPER_HEADERS, - GETH_REPO_URL + GETH_REPO_URL, + LATEST_GETH_RELEASE_URL, + LATEST_SOURCES_BASE_URL, + LINUX_BINARY_BASE_URL, + MACOS_BINARY_BASE_URL, + RELEASE_NOTES_BASE_URL, + WINDOWS_BINARY_BASE_URL } from '../constants'; import { testDownloadData } from '../data/test/download-testdata'; import { pgpBuildTestData } from '../data/test/pgpbuild-testdata'; import { pgpDeveloperTestData } from '../data/test/pgpdeveloper-testdata'; -const DownloadsPage: NextPage = () => { +export const getServerSideProps: GetServerSideProps = async () => { + // Latest release name & version number + const { versionNumber, releaseName } = await fetch(LATEST_GETH_RELEASE_URL) + .then(response => response.json()) + .then(release => { + return { + versionNumber: release.tag_name, + releaseName: release.name + }; + }); + // Latest release commit hash + const commit = await fetch(`${ALL_GETH_COMMITS_URL}/${versionNumber}`) + .then(response => response.json()) + .then(commit => commit.sha.slice(0, 8)); + + // Latest binaries urls + const LATEST_LINUX_BINARY_URL = `${LINUX_BINARY_BASE_URL}${versionNumber.slice( + 1 + )}-${commit}.tar.gz`; + const LATEST_MACOS_BINARY_URL = `${MACOS_BINARY_BASE_URL}${versionNumber.slice( + 1 + )}-${commit}.tar.gz`; + const LATEST_WINDOWS_BINARY_URL = `${WINDOWS_BINARY_BASE_URL}${versionNumber.slice( + 1 + )}-${commit}.exe`; + + // Sources urls + const LATEST_SOURCES_URL = `${LATEST_SOURCES_BASE_URL}${versionNumber}.tar.gz`; + const RELEASE_NOTES_URL = `${RELEASE_NOTES_BASE_URL}${versionNumber}`; + + const LATEST_RELEASES_DATA = { + versionNumber, + releaseName, + urls: { + LATEST_LINUX_BINARY_URL, + LATEST_MACOS_BINARY_URL, + LATEST_WINDOWS_BINARY_URL, + LATEST_SOURCES_URL, + RELEASE_NOTES_URL + } + }; + + return { + props: { + data: { LATEST_RELEASES_DATA } + } + }; +}; + +interface Props { + data: { + // TODO: define interfaces after adding the rest of the logic + LATEST_RELEASES_DATA: { + versionNumber: string; + releaseName: string; + urls: { + LATEST_LINUX_BINARY_URL: string; + LATEST_MACOS_BINARY_URL: string; + LATEST_WINDOWS_BINARY_URL: string; + LATEST_SOURCES_URL: string; + RELEASE_NOTES_URL: string; + }; + }; + }; +} + +const DownloadsPage: NextPage = ({ data }) => { const [amountStableReleases, updateAmountStables] = useState(DEFAULT_BUILD_AMOUNT_TO_SHOW); const [amountDevelopBuilds, updateAmountDevelopBuilds] = useState(DEFAULT_BUILD_AMOUNT_TO_SHOW); @@ -28,35 +106,27 @@ const DownloadsPage: NextPage = () => { updateAmountDevelopBuilds(amountDevelopBuilds + 10); }; + const { + LATEST_RELEASES_DATA: { releaseName, versionNumber, urls } + } = data; + return ( <> {/* TODO: add PageMetadata */}
- {/* TODO: replace hardcoded strings with build information */} - + If you're looking for a specific release, operating system or architecture, @@ -92,10 +162,11 @@ const DownloadsPage: NextPage = () => { Signatures for details). - + - - + These are the current and previous stable releases of go-ethereum, updated automatically when a new version is tagged in our{' '} @@ -103,28 +174,48 @@ const DownloadsPage: NextPage = () => { GitHub repository. - - + } + sectionTitle='Stable releases' + > {/* TODO: swap test data for real data */} - - - - Show older releases - - - + + +
+ {/* TODO: swap testDownloadData with actual data */} + + Showing {amountStableReleases} latest releases of a total{' '} + {testDownloadData.length} releases + +
+ + + + + Show older releases + + + + - - + These are the develop snapshots of go-ethereum, updated automatically when a new commit is pushed into our{' '} @@ -132,33 +223,54 @@ const DownloadsPage: NextPage = () => { GitHub repository. - - + } + sectionTitle='Develop builds' + > {/* TODO: swap for real data */} - - - - Show older releases - - - + + +
+ {/* TODO: swap testDownloadData with actual data */} + + Showing {amountDevelopBuilds} latest releases of a total{' '} + {testDownloadData.length} releases + +
+ + + + + Show older releases + + + + - - + All the binaries available from this page are signed via our build server PGP keys: - - + } + sectionTitle='OpenPGP Signatures' + > {/* TODO: swap for real data */} @@ -173,37 +285,67 @@ const DownloadsPage: NextPage = () => { - - - - You can import the build server public keys by grabbing the individual keys directly - from the keyserver network: - + + + + + You can import the build server public keys by grabbing the individual keys + directly from the keyserver network: + + - {/* TODO: These keys depends on the binary */} - gpg --recv-keys F9585DE6 C2FF8BBF 9BA28146 7B9E2481 D2A67EAC - + + {/* TODO: These keys depends on the binary */} + gpg --recv-keys F9585DE6 C2FF8BBF 9BA28146 7B9E2481 D2A67EAC + + - - - Similarly you can import all the developer public keys by grabbing them directly - from the keyserver network: - + + + + Similarly you can import all the developer public keys by grabbing them directly + from the keyserver network: + + - {/* TODO: These are developer keys, do we need to change? */} - gpg --recv-keys E058A81C 05A5DDF0 1CCB7DD2 - + + {/* TODO: These are developer keys, do we need to change? */} + gpg --recv-keys E058A81C 05A5DDF0 1CCB7DD2 + + - - - From the download listings above you should see a link both to the downloadable - archives as well as detached signature files. To verify the authenticity of any - downloaded data, grab both files and then run: - + + + + From the download listings above you should see a link both to the downloadable + archives as well as detached signature files. To verify the authenticity of any + downloaded data, grab both files and then run: + + - {/* TODO: These keys depends on the binary */} - gpg --verify geth-linux-amd64-1.5.0-d0c820ac.tar.gz.asc - + + {/* TODO: These keys depends on the binary */} + gpg --verify geth-linux-amd64-1.5.0-d0c820ac.tar.gz.asc + +
diff --git a/src/theme/components/Button.ts b/src/theme/components/Button.ts index 5d953f46c0..db07f8e61c 100644 --- a/src/theme/components/Button.ts +++ b/src/theme/components/Button.ts @@ -12,6 +12,19 @@ export const Button = { boxShadow: 'inset 0 0 0 2px #06fece !important' }, _active: { borderTop: '4px solid', borderColor: 'green.200', pt: '4px' } + }, + downloadsHeader: { + py: '8px', + px: '32px', + borderRadius: 0, + width: { base: '188px', md: 'auto' }, + bg: 'brand.light.primary', + _hover: { bg: 'brand.light.secondary' }, + _focus: { + bg: 'brand.light.primary', + boxShadow: 'inset 0 0 0 2px #06fece !important' + }, + _active: { borderTop: '4px solid', borderColor: 'green.200' } } } }; diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts index df3252d467..03e747bd61 100644 --- a/src/theme/foundations/textStyles.ts +++ b/src/theme/foundations/textStyles.ts @@ -67,7 +67,13 @@ export const textStyles = { 'downloads-button-label': { fontFamily: '"JetBrains Mono", monospace', color: 'yellow.50', - fontSize: 'xs', + fontSize: { base: 'md', lg: 'xl' }, + textTransform: 'uppercase' + }, + 'downloads-button-sublabel': { + fontFamily: '"JetBrains Mono", monospace', + color: 'yellow.50', + fontSize: { base: 'xs', lg: 'sm' }, textTransform: 'uppercase' }, 'download-tab-label': {