From 8477cc30c46a708317654b2cb97949920b7c04a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=A1s=20Quiroz?= Date: Tue, 25 Oct 2022 19:10:19 -0500 Subject: [PATCH] feat: homepage desktop layout & header component --- public/images/pages/glyph-home-light.svg | 14 +- src/components/UI/DataTable.tsx | 111 ++--- src/components/UI/Header.tsx | 114 +++++ src/components/UI/downloads/DownloadsHero.tsx | 100 ++--- .../UI/downloads/DownloadsSection.tsx | 18 +- .../UI/downloads/DownloadsTable.tsx | 107 ++--- src/components/UI/downloads/index.ts | 4 +- src/components/UI/homepage/Gopher.tsx | 9 +- src/components/UI/homepage/HomeHero.tsx | 8 +- src/components/UI/homepage/HomeSection.tsx | 3 +- src/components/UI/homepage/QuickLinks.tsx | 5 +- src/components/UI/homepage/WhatIsEthereum.tsx | 67 +++ src/components/UI/homepage/WhyRunANode.tsx | 64 +++ src/components/UI/homepage/index.ts | 2 + src/components/UI/icons/HamburguerIcon.tsx | 16 + src/components/UI/icons/LensIcon.tsx | 14 + src/components/UI/icons/MoonIcon.tsx | 14 + src/components/UI/icons/index.ts | 3 + src/components/UI/index.ts | 2 + src/components/layouts/Layout.tsx | 7 +- src/constants.ts | 20 +- src/data/test/download-testdata.ts | 28 +- src/data/test/pgpbuild-testdata.ts | 44 +- src/data/test/pgpdeveloper-testdata.ts | 28 +- src/pages/docs/fundamentals/index.md | 3 +- src/pages/downloads.tsx | 389 +++++++++--------- src/pages/index.tsx | 248 +++++------ src/theme/foundations/shadows.ts | 2 +- src/theme/foundations/textStyles.ts | 10 +- 29 files changed, 835 insertions(+), 619 deletions(-) create mode 100644 src/components/UI/Header.tsx create mode 100644 src/components/UI/homepage/WhatIsEthereum.tsx create mode 100644 src/components/UI/homepage/WhyRunANode.tsx create mode 100644 src/components/UI/icons/HamburguerIcon.tsx create mode 100644 src/components/UI/icons/LensIcon.tsx create mode 100644 src/components/UI/icons/MoonIcon.tsx create mode 100644 src/components/UI/icons/index.ts create mode 100644 src/components/UI/index.ts diff --git a/public/images/pages/glyph-home-light.svg b/public/images/pages/glyph-home-light.svg index 2570757c50..36fed55efc 100644 --- a/public/images/pages/glyph-home-light.svg +++ b/public/images/pages/glyph-home-light.svg @@ -1,8 +1,8 @@ - - - - - - - + + + + + + + diff --git a/src/components/UI/DataTable.tsx b/src/components/UI/DataTable.tsx index c1a260293b..c94cbc2d4d 100644 --- a/src/components/UI/DataTable.tsx +++ b/src/components/UI/DataTable.tsx @@ -1,35 +1,23 @@ -import { - Table, - Thead, - Tr, - Th, - TableContainer, - Text, - Tbody, - Td, -} from '@chakra-ui/react'; +import { Table, Thead, Tr, Th, TableContainer, Text, Tbody, Td } from '@chakra-ui/react'; import { FC } from 'react'; interface Props { - columnHeaders: string[] - data: any + columnHeaders: string[]; + data: any; } -export const DataTable: FC = ({ - columnHeaders, - data, -}) => { +export const DataTable: FC = ({ columnHeaders, data }) => { return ( = ({ - { - columnHeaders.map((columnHeader, idx) => { - return ( - - ) - }) - } + {columnHeader} + + + ); + })} - { - data.map((item: any, idx: number) => { - return ( - - { - columnHeaders.map((columnHeader, idx) => { - // TODO: Make the font size smaller (refer to design system) - return ( - - ) - }) - } - - ) - }) - } + {data.map((item: any, idx: number) => { + return ( + + {columnHeaders.map((columnHeader, idx) => { + // TODO: Make the font size smaller (refer to design system) + return ( + + ); + })} + + ); + })}
{ + return ( + + - - {columnHeader} - -
- {item[columnHeader.toLowerCase()]} -
+ {item[columnHeader.toLowerCase()]} +
- ) -} \ No newline at end of file + ); +}; diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx new file mode 100644 index 0000000000..e32c175aae --- /dev/null +++ b/src/components/UI/Header.tsx @@ -0,0 +1,114 @@ +import { Box, Flex, Input, InputGroup, Link, Stack, Text } from '@chakra-ui/react'; +import { FC } from 'react'; +import NextLink from 'next/link'; + +import { HamburguerIcon, LensIcon, MoonIcon } from '../UI/icons'; +import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../constants'; + +export const Header: FC = () => { + return ( + + + + go-ethereum + + + + + {/* DOWNLOADS */} + + + + + downloads + + + + + + {/* DOCUMENTATION */} + + + + + documentation + + + + + + {/* SEARCH */} + + + + + + + + + + + {/* DARK MODE SWITCH */} + + + + + {/* HAMBURGUER MENU */} + + + + + + ); +}; diff --git a/src/components/UI/downloads/DownloadsHero.tsx b/src/components/UI/downloads/DownloadsHero.tsx index 67b30355be..2c01270953 100644 --- a/src/components/UI/downloads/DownloadsHero.tsx +++ b/src/components/UI/downloads/DownloadsHero.tsx @@ -2,16 +2,16 @@ 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' +import { DOWNLOAD_HEADER_BUTTONS } from '../../../constants'; interface DownloadsHero { - currentBuildName: string - currentBuildVersion: string - linuxBuildURL: string - macOSBuildURL: string - releaseNotesURL: string - sourceCodeURL: string - windowsBuildURL: string + currentBuildName: string; + currentBuildVersion: string; + linuxBuildURL: string; + macOSBuildURL: string; + releaseNotesURL: string; + sourceCodeURL: string; + windowsBuildURL: string; } export const DownloadsHero: FC = ({ @@ -23,22 +23,19 @@ export const DownloadsHero: FC = ({ 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 + 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 ( - Gopher plugged in + Gopher plugged in - + Download go-ethereum @@ -52,52 +49,37 @@ export const DownloadsHero: FC = ({ - 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. + 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. - { - Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => { - return ( - - - - ) - }) - } + {Object.keys(DOWNLOAD_HEADER_BUTTONS).map((key: string) => { + return ( + + + + ); + })} - + Release notes for {currentBuildName} {currentBuildVersion} diff --git a/src/components/UI/downloads/DownloadsSection.tsx b/src/components/UI/downloads/DownloadsSection.tsx index 5e0fdf26a2..365bb49411 100644 --- a/src/components/UI/downloads/DownloadsSection.tsx +++ b/src/components/UI/downloads/DownloadsSection.tsx @@ -6,16 +6,10 @@ interface Props { id: string; imgSrc?: string; imgAltText?: string; - sectionTitle: string + sectionTitle: string; } -export const DownloadsSection: FC = ({ - children, - imgSrc, - imgAltText, - sectionTitle, - id -}) => { +export const DownloadsSection: FC = ({ children, imgSrc, imgAltText, sectionTitle, id }) => { return ( {!!imgSrc && ( @@ -36,9 +30,7 @@ export const DownloadsSection: FC = ({ - - {children} - + {children} - ) -} \ No newline at end of file + ); +}; diff --git a/src/components/UI/downloads/DownloadsTable.tsx b/src/components/UI/downloads/DownloadsTable.tsx index 6fc7288b35..7dd5e52aac 100644 --- a/src/components/UI/downloads/DownloadsTable.tsx +++ b/src/components/UI/downloads/DownloadsTable.tsx @@ -1,99 +1,56 @@ -import { - Stack, - Tabs, - TabList, - Tab, - Text, - TabPanel, - TabPanels, -} from '@chakra-ui/react'; +import { Stack, Tabs, TabList, Tab, Text, TabPanel, TabPanels } from '@chakra-ui/react'; import { FC } from 'react'; -import { - DOWNLOAD_TABS, - DOWNLOAD_TAB_COLUMN_HEADERS -} from '../../../constants' +import { DOWNLOAD_TABS, DOWNLOAD_TAB_COLUMN_HEADERS } from '../../../constants'; -import { DataTable } from '../DataTable' +import { DataTable } from '../../UI'; interface Props { - data: any + data: any; } -export const DownloadsTable: FC = ({ - data -}) => { +export const DownloadsTable: FC = ({ data }) => { return ( - + - - { - DOWNLOAD_TABS.map((tab, idx) => { - return ( - - - {tab} - - - ) - }) - } + + {DOWNLOAD_TABS.map((tab, idx) => { + return ( + + {tab} + + ); + })} - + - + - + - + - + - ) -} \ No newline at end of file + ); +}; diff --git a/src/components/UI/downloads/index.ts b/src/components/UI/downloads/index.ts index 597af494c8..11310c63fc 100644 --- a/src/components/UI/downloads/index.ts +++ b/src/components/UI/downloads/index.ts @@ -1,3 +1,3 @@ export * from './DownloadsHero'; -export * from './DownloadsSection' -export * from './DownloadsTable' \ No newline at end of file +export * from './DownloadsSection'; +export * from './DownloadsTable'; diff --git a/src/components/UI/homepage/Gopher.tsx b/src/components/UI/homepage/Gopher.tsx index a98275fd17..1a4cb47e7e 100644 --- a/src/components/UI/homepage/Gopher.tsx +++ b/src/components/UI/homepage/Gopher.tsx @@ -3,7 +3,14 @@ import { FC } from 'react'; export const Gopher: FC = () => { return ( - + Gopher greeting ); diff --git a/src/components/UI/homepage/HomeHero.tsx b/src/components/UI/homepage/HomeHero.tsx index b72354f27c..b6a6e4e543 100644 --- a/src/components/UI/homepage/HomeHero.tsx +++ b/src/components/UI/homepage/HomeHero.tsx @@ -6,7 +6,13 @@ import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../../constants'; export const HomeHero: FC = () => { return ( - + = ({ children }) => { return ( - + {!!imgSrc && ( {/* TODO: use NextImage */} @@ -45,6 +45,7 @@ export const HomeSection: FC = ({ borderBottom='2px solid' borderColor='brand.light.primary' sx={{ mt: '0 !important' }} + h='100%' > {children} diff --git a/src/components/UI/homepage/QuickLinks.tsx b/src/components/UI/homepage/QuickLinks.tsx index 370226f288..bd7df05b9a 100644 --- a/src/components/UI/homepage/QuickLinks.tsx +++ b/src/components/UI/homepage/QuickLinks.tsx @@ -13,7 +13,10 @@ export const QuickLinks: FC = () => { - + {/* get started */} = ({ children }) => { + return ( + + + + + + What is Ethereum + + + + + {children} + + + + + + {/* TODO: use NextImage */} + Ethereum glyph + + + + + + + + Learn more on Ethereum.org + + + + + ); +}; diff --git a/src/components/UI/homepage/WhyRunANode.tsx b/src/components/UI/homepage/WhyRunANode.tsx new file mode 100644 index 0000000000..f9cb05c75b --- /dev/null +++ b/src/components/UI/homepage/WhyRunANode.tsx @@ -0,0 +1,64 @@ +import { Box, Grid, GridItem, Image, Link, Stack, Text } from '@chakra-ui/react'; +import { FC } from 'react'; +import NextLink from 'next/link'; + +import { ETHEREUM_ORG_RUN_A_NODE_URL } from '../../../constants'; + +interface Props { + children: React.ReactNode; +} + +export const WhyRunANode: FC = ({ children }) => { + return ( + + + + + + Why run a node? + + + + + {children} + + + + + + {/* TODO: use NextImage */} + Gopher staring at nodes + + + + + + + + Read more about running a node + + + + + ); +}; diff --git a/src/components/UI/homepage/index.ts b/src/components/UI/homepage/index.ts index 861cb5112f..95f8371b8c 100644 --- a/src/components/UI/homepage/index.ts +++ b/src/components/UI/homepage/index.ts @@ -1,4 +1,6 @@ export * from './Gopher'; export * from './HomeHero'; export * from './HomeSection'; +export * from './WhatIsEthereum'; +export * from './WhyRunANode'; export * from './QuickLinks'; diff --git a/src/components/UI/icons/HamburguerIcon.tsx b/src/components/UI/icons/HamburguerIcon.tsx new file mode 100644 index 0000000000..e352774f86 --- /dev/null +++ b/src/components/UI/icons/HamburguerIcon.tsx @@ -0,0 +1,16 @@ +import { createIcon } from '@chakra-ui/icons'; + +export const HamburguerIcon = createIcon({ + displayName: 'HamburguerIcon', + viewBox: '0 0 22 14', + path: ( + + + + ) +}); diff --git a/src/components/UI/icons/LensIcon.tsx b/src/components/UI/icons/LensIcon.tsx new file mode 100644 index 0000000000..b38e00a37c --- /dev/null +++ b/src/components/UI/icons/LensIcon.tsx @@ -0,0 +1,14 @@ +import { createIcon } from '@chakra-ui/icons'; + +export const LensIcon = createIcon({ + displayName: 'LensIcon', + viewBox: '0 0 17 18', + path: ( + + + + ) +}); diff --git a/src/components/UI/icons/MoonIcon.tsx b/src/components/UI/icons/MoonIcon.tsx new file mode 100644 index 0000000000..75153bd354 --- /dev/null +++ b/src/components/UI/icons/MoonIcon.tsx @@ -0,0 +1,14 @@ +import { createIcon } from '@chakra-ui/icons'; + +export const MoonIcon = createIcon({ + displayName: 'MoonIcon', + viewBox: '0 0 22 22', + path: ( + + + + ) +}); diff --git a/src/components/UI/icons/index.ts b/src/components/UI/icons/index.ts new file mode 100644 index 0000000000..8f0d249008 --- /dev/null +++ b/src/components/UI/icons/index.ts @@ -0,0 +1,3 @@ +export * from './HamburguerIcon'; +export * from './LensIcon'; +export * from './MoonIcon'; diff --git a/src/components/UI/index.ts b/src/components/UI/index.ts new file mode 100644 index 0000000000..322eabe70a --- /dev/null +++ b/src/components/UI/index.ts @@ -0,0 +1,2 @@ +export * from './DataTable'; +export * from './Header'; diff --git a/src/components/layouts/Layout.tsx b/src/components/layouts/Layout.tsx index c78ec5a3ab..ac9844526e 100644 --- a/src/components/layouts/Layout.tsx +++ b/src/components/layouts/Layout.tsx @@ -1,14 +1,17 @@ import { Container } from '@chakra-ui/react'; import { FC } from 'react'; +import { Header } from '../UI'; + interface Props { children?: React.ReactNode; } -// TODO: if mobile, getMobileLayout, else getDesktopLayout export const Layout: FC = ({ children }) => { return ( - + +
+ {children} ); diff --git a/src/constants.ts b/src/constants.ts index 59222639cb..4151f8cf4f 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -13,7 +13,9 @@ 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;}} = { +export const DOWNLOAD_HEADER_BUTTONS: { + [index: string]: { name: string; image: string; imageAlt: string; buildURL: string }; +} = { linuxBuild: { name: 'Linux', image: '/images/pages/linux-penguin.svg', @@ -38,14 +40,8 @@ export const DOWNLOAD_HEADER_BUTTONS: {[index: string]: {name: string; image: st imageAlt: 'Source branch logo', buildURL: '' } -} -export const DOWNLOAD_TABS = [ - 'Linux', - 'macOS', - 'Windows', - 'iOS', - 'Android' -] +}; +export const DOWNLOAD_TABS = ['Linux', 'macOS', 'Windows', 'iOS', 'Android']; export const DOWNLOAD_TAB_COLUMN_HEADERS = [ 'Release', 'Commit', @@ -55,16 +51,16 @@ export const DOWNLOAD_TAB_COLUMN_HEADERS = [ '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' -] \ No newline at end of file +]; diff --git a/src/data/test/download-testdata.ts b/src/data/test/download-testdata.ts index 910e7c1936..7dff5e4753 100644 --- a/src/data/test/download-testdata.ts +++ b/src/data/test/download-testdata.ts @@ -7,7 +7,7 @@ export const testDownloadData = [ size: '11.71 MB', published: 'Last Wednesday at 11:11 AM', signature: 'Signature', - "checksum (md5)": 'c93b0339413a8f2b95aa4b23b32d64af' + 'checksum (md5)': 'c93b0339413a8f2b95aa4b23b32d64af' }, { release: 'Geth 1.10.23', @@ -17,7 +17,7 @@ export const testDownloadData = [ size: '11.71 MB', published: 'Last Wednesday at 11:11 AM', signature: 'Signature', - "checksum (md5)": 'c93b0339413a8f2b95aa4b23b32d64af' + 'checksum (md5)': 'c93b0339413a8f2b95aa4b23b32d64af' }, { release: 'Geth 1.10.23', @@ -27,7 +27,7 @@ export const testDownloadData = [ size: '11.71 MB', published: 'Last Wednesday at 11:11 AM', signature: 'Signature', - "checksum (md5)": 'c93b0339413a8f2b95aa4b23b32d64af' + 'checksum (md5)': 'c93b0339413a8f2b95aa4b23b32d64af' }, { release: 'Geth 1.10.23', @@ -37,7 +37,7 @@ export const testDownloadData = [ size: '11.71 MB', published: 'Last Wednesday at 11:11 AM', signature: 'Signature', - "checksum (md5)": 'c93b0339413a8f2b95aa4b23b32d64af' + 'checksum (md5)': 'c93b0339413a8f2b95aa4b23b32d64af' }, { release: 'Geth 1.10.23', @@ -47,7 +47,7 @@ export const testDownloadData = [ size: '11.71 MB', published: 'Last Wednesday at 11:11 AM', signature: 'Signature', - "checksum (md5)": 'c93b0339413a8f2b95aa4b23b32d64af' + 'checksum (md5)': 'c93b0339413a8f2b95aa4b23b32d64af' }, { release: 'Geth 1.10.23', @@ -57,7 +57,7 @@ export const testDownloadData = [ size: '11.71 MB', published: 'Last Wednesday at 11:11 AM', signature: 'Signature', - "checksum (md5)": 'c93b0339413a8f2b95aa4b23b32d64af' + 'checksum (md5)': 'c93b0339413a8f2b95aa4b23b32d64af' }, { release: 'Geth 1.10.23', @@ -67,7 +67,7 @@ export const testDownloadData = [ size: '11.71 MB', published: 'Last Wednesday at 11:11 AM', signature: 'Signature', - "checksum (md5)": 'c93b0339413a8f2b95aa4b23b32d64af' + 'checksum (md5)': 'c93b0339413a8f2b95aa4b23b32d64af' }, { release: 'Geth 1.10.23', @@ -77,7 +77,7 @@ export const testDownloadData = [ size: '11.71 MB', published: 'Last Wednesday at 11:11 AM', signature: 'Signature', - "checksum (md5)": 'c93b0339413a8f2b95aa4b23b32d64af' + 'checksum (md5)': 'c93b0339413a8f2b95aa4b23b32d64af' }, { release: 'Geth 1.10.23', @@ -87,7 +87,7 @@ export const testDownloadData = [ size: '11.71 MB', published: 'Last Wednesday at 11:11 AM', signature: 'Signature', - "checksum (md5)": 'c93b0339413a8f2b95aa4b23b32d64af' + 'checksum (md5)': 'c93b0339413a8f2b95aa4b23b32d64af' }, { release: 'Geth 1.10.23', @@ -97,7 +97,7 @@ export const testDownloadData = [ size: '11.71 MB', published: 'Last Wednesday at 11:11 AM', signature: 'Signature', - "checksum (md5)": 'c93b0339413a8f2b95aa4b23b32d64af' + 'checksum (md5)': 'c93b0339413a8f2b95aa4b23b32d64af' }, { release: 'Geth 1.10.23', @@ -107,7 +107,7 @@ export const testDownloadData = [ size: '11.71 MB', published: 'Last Wednesday at 11:11 AM', signature: 'Signature', - "checksum (md5)": 'c93b0339413a8f2b95aa4b23b32d64af' + 'checksum (md5)': 'c93b0339413a8f2b95aa4b23b32d64af' }, { release: 'Geth 1.10.23', @@ -117,6 +117,6 @@ export const testDownloadData = [ size: '11.71 MB', published: 'Last Wednesday at 11:11 AM', signature: 'Signature', - "checksum (md5)": 'c93b0339413a8f2b95aa4b23b32d64af' - }, -] \ No newline at end of file + 'checksum (md5)': 'c93b0339413a8f2b95aa4b23b32d64af' + } +]; diff --git a/src/data/test/pgpbuild-testdata.ts b/src/data/test/pgpbuild-testdata.ts index a016016edf..c69facc1b3 100644 --- a/src/data/test/pgpbuild-testdata.ts +++ b/src/data/test/pgpbuild-testdata.ts @@ -1,32 +1,32 @@ export const pgpBuildTestData = [ { - "build server": "Android Builder", - "unique id": "Go Ethereum Android Builder ", - "openpgp key": "F9585DE6", - "fingerprint": "8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6" + 'build server': 'Android Builder', + 'unique id': 'Go Ethereum Android Builder ', + 'openpgp key': 'F9585DE6', + fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6' }, { - "build server": "iOS Builder", - "unique id": "Go Ethereum iOS Builder ", - "openpgp key": "F9585DE6", - "fingerprint": "8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6" + 'build server': 'iOS Builder', + 'unique id': 'Go Ethereum iOS Builder ', + 'openpgp key': 'F9585DE6', + fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6' }, { - "build server": "Linux Builder", - "unique id": "Go Ethereum Linux Builder ", - "openpgp key": "F9585DE6", - "fingerprint": "8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6" + 'build server': 'Linux Builder', + 'unique id': 'Go Ethereum Linux Builder ', + 'openpgp key': 'F9585DE6', + fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6' }, { - "build server": "macOS Builder", - "unique id": "Go Ethereum macOS Builder ", - "openpgp key": "F9585DE6", - "fingerprint": "8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6" + 'build server': 'macOS Builder', + 'unique id': 'Go Ethereum macOS Builder ', + 'openpgp key': 'F9585DE6', + fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6' }, { - "build server": "Windows Builder", - "unique id": "Go Ethereum Windows Builder ", - "openpgp key": "F9585DE6", - "fingerprint": "8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6" - }, -] \ No newline at end of file + 'build server': 'Windows Builder', + 'unique id': 'Go Ethereum Windows Builder ', + 'openpgp key': 'F9585DE6', + fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6' + } +]; diff --git a/src/data/test/pgpdeveloper-testdata.ts b/src/data/test/pgpdeveloper-testdata.ts index 85d16adfd6..b5a3fa17d5 100644 --- a/src/data/test/pgpdeveloper-testdata.ts +++ b/src/data/test/pgpdeveloper-testdata.ts @@ -1,20 +1,20 @@ export const pgpDeveloperTestData = [ { - "developer": "Felix Lange", - "unique id": "Felix Lange ", - "openpgp key": "F9585DE6", - "fingerprint": "8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6" + developer: 'Felix Lange', + 'unique id': 'Felix Lange ', + 'openpgp key': 'F9585DE6', + fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6' }, { - "developer": "Martin Holst Swende", - "unique id": "Martin Holst Swende ", - "openpgp key": "F9585DE6", - "fingerprint": "8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6" + developer: 'Martin Holst Swende', + 'unique id': 'Martin Holst Swende ', + 'openpgp key': 'F9585DE6', + fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6' }, { - "developer": "Péter Szilágyi", - "unique id": "Péter Szilágyi ", - "openpgp key": "F9585DE6", - "fingerprint": "8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6" - }, -] \ No newline at end of file + developer: 'Péter Szilágyi', + 'unique id': 'Péter Szilágyi ', + 'openpgp key': 'F9585DE6', + fingerprint: '8272 1824 F4D7 46E0 B5A7 AB95 70AD 154B F958 5DE6' + } +]; diff --git a/src/pages/docs/fundamentals/index.md b/src/pages/docs/fundamentals/index.md index 7b9dcb38a5..0a09e2cb2f 100644 --- a/src/pages/docs/fundamentals/index.md +++ b/src/pages/docs/fundamentals/index.md @@ -1,6 +1,6 @@ --- title: Geth fundamentals -description: Documentation for foundational Geth topics +description: Documentation for foundational Geth topics --- ## Geth fundamentals @@ -12,4 +12,3 @@ This is where you will find information about how to manage a Geth node and unde For example, the pages here will help you to understand the underlying architecture of your Geth node, how to start it in different configurations using command line options, how to sync the blockchain and how to manage accounts. There is a page on security practices that will help you to keep your Geth node safe from adversaries. Note also that there is a page explaining common log messages that are often queried on the Geth discord and Github - this will help users to interpret the messages displayed to the console and know what actions to take. - diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx index 72c098f71b..c612af2d6c 100644 --- a/src/pages/downloads.tsx +++ b/src/pages/downloads.tsx @@ -1,229 +1,214 @@ -import { - Code, - Link, - ListItem, - Stack, - Text, - UnorderedList, -} from '@chakra-ui/react'; +import { Code, Link, ListItem, Stack, Text, UnorderedList } from '@chakra-ui/react'; import type { NextPage } from 'next'; -import { useState } from 'react' +import { useState } from 'react'; -import { - DownloadsHero, - DownloadsSection, - DownloadsTable, -} from '../components/UI/downloads'; -import { DataTable } from '../components/UI/DataTable'; +import { DownloadsHero, DownloadsSection, DownloadsTable } from '../components/UI/downloads'; +import { DataTable } from '../components/UI'; import { DEFAULT_BUILD_AMOUNT_TO_SHOW, DOWNLOAD_OPENPGP_BUILD_HEADERS, DOWNLOAD_OPENPGP_DEVELOPER_HEADERS, GETH_REPO_URL -} from '../constants' +} from '../constants'; -import { testDownloadData } from '../data/test/download-testdata' +import { testDownloadData } from '../data/test/download-testdata'; import { pgpBuildTestData } from '../data/test/pgpbuild-testdata'; import { pgpDeveloperTestData } from '../data/test/pgpdeveloper-testdata'; const DownloadsPage: NextPage = () => { - const [amountStableReleases, updateAmountStables] = useState(DEFAULT_BUILD_AMOUNT_TO_SHOW) - const [amountDevelopBuilds, updateAmountDevelopBuilds] = useState(DEFAULT_BUILD_AMOUNT_TO_SHOW) + const [amountStableReleases, updateAmountStables] = useState(DEFAULT_BUILD_AMOUNT_TO_SHOW); + const [amountDevelopBuilds, updateAmountDevelopBuilds] = useState(DEFAULT_BUILD_AMOUNT_TO_SHOW); const showMoreStableReleases = () => { - updateAmountStables(amountStableReleases+10) - } + updateAmountStables(amountStableReleases + 10); + }; const showMoreDevelopBuilds = () => { - updateAmountDevelopBuilds(amountDevelopBuilds+10) - } + updateAmountDevelopBuilds(amountDevelopBuilds + 10); + }; return ( <> - {/* TODO: add PageMetadata */} - -
- - {/* TODO: replace hardcoded strings with build information */} - - - - - - If you're looking for a specific release, operating system or architecture, below you will find: - - - - - - All stable and develop builds of Geth and tools - - - - - Archives for non-primary processor architectures - - - - - Android library archives and iOS XCode frameworks + {/* TODO: add PageMetadata */} + +
+ + {/* TODO: replace hardcoded strings with build information */} + + + + + + If you're looking for a specific release, operating system or architecture, + below you will find: + + + + + + All stable and develop builds of Geth and tools + + + + + Archives for non-primary processor architectures + + + + + Android library archives and iOS XCode frameworks + + + + + + 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{' '} + + OpenPGP + {' '} + Signatures for details). + + + + + + + + These are the current and previous stable releases of go-ethereum, updated + automatically when a new version is tagged in our{' '} + + GitHub repository. + + + + + {/* TODO: swap test data for real data */} + + + + + + Show older releases - - - - - 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{' '} - - OpenPGP - {' '} - Signatures for details). - - - - - - - - These are the current and previous stable releases of go-ethereum, updated automatically when a new version is tagged in our{' '} - - GitHub repository. - - - - {/* TODO: swap test data for real data */} - - - - - - Show older releases + + + + + + + These are the develop snapshots of go-ethereum, updated automatically when a new + commit is pushed into our{' '} + + GitHub repository. + - - - - - - - - These are the develop snapshots of go-ethereum, updated automatically when a new commit is pushed into our{' '} - - GitHub repository. + + + {/* TODO: swap for real data */} + + + + + + Show older releases + - - - - {/* TODO: swap for real data */} - - - - - - Show older releases + + + + + + + All the binaries available from this page are signed via our build server PGP keys: + + + + {/* TODO: swap for real data */} + + + + + {/* TODO: swap for real data */} + + + + + + + + + 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 + + + + + Similarly you can import all the developer public keys by grabbing them directly + from the keyserver network: - - - - - - - - All the binaries available from this page are signed via our build server PGP keys: - - - - {/* TODO: swap for real data */} - - - - - {/* TODO: swap for real data */} - - - - - - - - - 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 - - - - - - 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 - - - - - - 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 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: + + + {/* TODO: These keys depends on the binary */} + gpg --verify geth-linux-amd64-1.5.0-d0c820ac.tar.gz.asc + + + +
- ) -} + ); +}; -export default DownloadsPage \ No newline at end of file +export default DownloadsPage; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b8bced19fb..48640427ac 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,16 +1,22 @@ -import { Link, Stack, Text } from '@chakra-ui/react'; +import { Box, Grid, GridItem, Link, Stack, Text } from '@chakra-ui/react'; import type { NextPage } from 'next'; -import { Gopher, HomeHero, HomeSection, QuickLinks } from '../components/UI/homepage'; +import { + Gopher, + HomeHero, + HomeSection, + QuickLinks, + WhatIsEthereum, + WhyRunANode +} from '../components/UI/homepage'; import { CONTRIBUTING_PAGE, DOCS_PAGE, ETHEREUM_FOUNDATION_URL, - ETHEREUM_ORG_RUN_A_NODE_URL, ETHEREUM_ORG_URL, GETH_REPO_URL, - GO_URL, + GO_URL } from '../constants'; const HomePage: NextPage = ({}) => { @@ -22,118 +28,128 @@ const HomePage: NextPage = ({}) => { - {/* SECTION: What is Geth */} - - - Geth (go-ethereum) is a{' '} - - Go - {' '} - implementation of{' '} - - Ethereum - {' '} - - a gateway into the decentralized web. - - - - Geth has been a core part of Etheruem since the very beginning. Geth was one of the - original Ethereum implementations making it the most battle-hardened and tested - client. - - - - Geth is an Ethereum{' '} - - execution client - {' '} - meaning it handles transactions, deployment and execution of smart contracts and - contains an embedded computer known as the{' '} - - Ethereum Virtual Machine - - . - - - - Running Geth alongside a consensus client turns a computer into an Ethereum node. - - - - {/* SECTION: What is Ethereum */} - - - Ethereum is a technology for building apps and organizations, holding assets, - transacting and communicating without being controlled by a central authority. It is - the base of a new, decentralized internet. - - - - {/* SECTION: Why run a Node */} - - - Running your own node enables you to use Ethereum in a truly private, self-sufficient - and trustless manner. You don't need to trust information you receive because you - can verify the data yourself using your Geth instance. - - - - “Don't trust, verify” - - - - {/* SECTION:Contribute to Geth */} - - - We welcome contributions from anyone on the internet, and are grateful for even the - smallest of fixes! If you'd like to contribute to the Geth source code, please - fork the{' '} - - Github repository - - , fix, commit and send a pull request for the maintainers to review and merge into the - main code base. - - - - {/* SECTION: About the Team */} - - - The Geth team comprises 10 developers distributed across the world. The Geth team is - funded directly by The Ethereum Foundation. - - - - {/* TODO: replace with animated/video version */} - - - + + + {/* SECTION: What is Geth */} + + + Geth (go-ethereum) is a{' '} + + Go + {' '} + implementation of{' '} + + Ethereum + {' '} + - a gateway into the decentralized web. + + + + Geth has been a core part of Etheruem since the very beginning. Geth was one of + the original Ethereum implementations making it the most battle-hardened and + tested client. + + + + Geth is an Ethereum{' '} + + execution client + {' '} + meaning it handles transactions, deployment and execution of smart contracts and + contains an embedded computer known as the{' '} + + Ethereum Virtual Machine + + . + + + + Running Geth alongside a consensus client turns a computer into an Ethereum node. + + + + + + {/* SECTION: What is Ethereum (has different styles than the other sections so it uses a different component) */} + + + Ethereum is a technology for building apps and organizations, holding assets, + transacting and communicating without being controlled by a central authority. It + is the base of a new, decentralized internet. + + + + + + {/* SECTION: Why run a node (has different styles than the other sections so it uses a different component) */} + + + Running your own node enables you to use Ethereum in a truly private, + self-sufficient and trustless manner. You don't need to trust information you + receive because you can verify the data yourself using your Geth instance. + + + + “Don't trust, verify” + + + + + + + + {/* SECTION: Contribute to Geth */} + + + We welcome contributions from anyone on the internet, and are grateful for even + the smallest of fixes! If you'd like to contribute to the Geth source code, + please fork the{' '} + + Github repository + + , fix, commit and send a pull request for the maintainers to review and merge into + the main code base. + + + + + + {/* SECTION: About the Team */} + + + The Geth team comprises 10 developers distributed across the world. The Geth team + is funded directly by The Ethereum Foundation. + + + + + + + + + {/* TODO: replace with animated/video version */} + + + + + + + + diff --git a/src/theme/foundations/shadows.ts b/src/theme/foundations/shadows.ts index d870a80e6b..800de4768d 100644 --- a/src/theme/foundations/shadows.ts +++ b/src/theme/foundations/shadows.ts @@ -1,3 +1,3 @@ export const shadows = { linkBoxShadow: '0 0 0 1px #11866f !important' -} \ No newline at end of file +}; diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts index 0443497cee..304bc5ddeb 100644 --- a/src/theme/foundations/textStyles.ts +++ b/src/theme/foundations/textStyles.ts @@ -54,17 +54,17 @@ export const textStyles = { fontFamily: '"Inter", sans-serif' }, 'downloads-button-label': { - fontFamily:'"JetBrains Mono", monospace', - color:'yellow.50', - fontSize:'xs', - textTransform:'uppercase', + fontFamily: '"JetBrains Mono", monospace', + color: 'yellow.50', + fontSize: 'xs', + textTransform: 'uppercase' }, 'download-tab-label': { fontFamily: '"JetBrains Mono", monospace', fontWeight: 700, textTransform: 'uppercase', textAlign: 'center', - fontSize: 'sm', + fontSize: 'sm' }, // TODO: refactor w/ semantic tokens for light/dark mode 'link-light': {},