Merge pull request #9 from ethereum/homepage-mobile

Homepage mobile

src/components/MDXComponents.tsx

@@ -43,6 +43,7 @@ const MDXComponents = {
       <NextLink href={href} passHref>
         <Link
           isExternal={href.startsWith('http') && !href.includes('geth.ethereum.org')}
+          // TODO: move color to theme
           color='#18bc9c'
         >
           {children}

src/components/UI/homepage/Gopher.tsx

@@ -0,0 +1,10 @@
+import { Image, Stack } from '@chakra-ui/react';
+import { FC } from 'react';
+
+export const Gopher: FC = () => {
+  return (
+    <Stack alignItems='center' p={4} border='2px solid' borderColor='brand.light.primary'>
+      <Image src='/images/pages/gopher-home-side-mobile.svg' alt='Gopher greeting' />
+    </Stack>
+  );
+};

src/components/UI/homepage/HomeHero.tsx

@@ -0,0 +1,55 @@
+import { Box, Button, Flex, Stack, Text } from '@chakra-ui/react';
+import { FC } from 'react';
+import NextLink from 'next/link';
+
+import { DOCS_PAGE, DOWNLOADS_PAGE } from '../../../constants';
+
+export const HomeHero: FC = () => {
+  return (
+    <Stack border='2px solid' borderColor='brand.light.primary' px={4} py={{ base: 8, md: 5 }}>
+      <Box mb={4}>
+        <Box
+          as='h1'
+          textStyle='h1'
+          mb={{ base: 2, md: 4 }}
+          textAlign={{ base: 'center', md: 'left' }}
+        >
+          go-ethereum
+        </Box>
+
+        <Text textStyle='homepage-description'>
+          Official Go implementation of the Ethereum protocol
+        </Text>
+      </Box>
+
+      <Flex
+        direction={{ base: 'column', md: 'row' }}
+        alignItems={{ base: 'center', md: 'flex-start' }}
+      >
+        <Flex direction='column' alignItems='center' mr={{ md: 6 }}>
+          <NextLink href={DOWNLOADS_PAGE} passHref>
+            <Button variant='primary' as='a' mb={1}>
+              <Text textStyle='homepage-primary-label'>Download</Text>
+            </Button>
+          </NextLink>
+
+          <Text mt={1} mb={5} textStyle='hero-text-small'>
+            Get our latest releases
+          </Text>
+        </Flex>
+
+        <Flex direction='column' alignItems='center'>
+          <NextLink href={DOCS_PAGE} passHref>
+            <Button variant='primary' as='a' mb={1}>
+              <Text textStyle='homepage-primary-label'>Documentation</Text>
+            </Button>
+          </NextLink>
+
+          <Text mt={1} fontSize='13px' fontFamily='"Inter", sans-serif' alignSelf='center'>
+            Read our documentation
+          </Text>
+        </Flex>
+      </Flex>
+    </Stack>
+  );
+};

src/components/UI/homepage/HomeSection.tsx

@@ -0,0 +1,61 @@
+import { Box, Image, Link, Stack, Text } from '@chakra-ui/react';
+import { FC } from 'react';
+import NextLink from 'next/link';
+
+interface Props {
+  imgSrc?: string;
+  imgAltText?: string;
+  sectionTitle: string;
+  linkLabel: string;
+  buttonHref: string;
+  children?: React.ReactNode;
+}
+
+export const HomeSection: FC<Props> = ({
+  imgSrc,
+  imgAltText,
+  sectionTitle,
+  linkLabel,
+  buttonHref,
+  children
+}) => {
+  return (
+    <Stack border='2px solid' borderColor='brand.light.primary'>
+      {!!imgSrc && (
+        <Stack alignItems='center' p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
+          {/* TODO: use NextImage */}
+          <Image src={imgSrc} alt={imgAltText} />
+        </Stack>
+      )}
+
+      <Stack
+        p={4}
+        borderBottom='2px solid'
+        borderColor='brand.light.primary'
+        sx={{ mt: '0 !important' }}
+      >
+        <Box as='h2' textStyle='h2'>
+          {sectionTitle}
+        </Box>
+      </Stack>
+
+      <Stack
+        p={4}
+        spacing={4}
+        borderBottom='2px solid'
+        borderColor='brand.light.primary'
+        sx={{ mt: '0 !important' }}
+      >
+        {children}
+      </Stack>
+
+      <Stack sx={{ mt: '0 !important' }}>
+        <NextLink href={buttonHref} passHref>
+          <Link variant='button-link-secondary' isExternal={buttonHref.startsWith('http')}>
+            <Text textStyle='home-section-link-label'>{linkLabel}</Text>
+          </Link>
+        </NextLink>
+      </Stack>
+    </Stack>
+  );
+};

src/components/UI/homepage/QuickLinks.tsx

@@ -0,0 +1,141 @@
+import { Box, Grid, GridItem, Link, Stack, Text } from '@chakra-ui/react';
+import { FC } from 'react';
+import NextLink from 'next/link';
+
+import { CONTRIBUTING_PAGE, DOCS_PAGE, FAQ_PAGE } from '../../../constants';
+
+export const QuickLinks: FC = () => {
+  return (
+    <Stack border='2px solid' borderColor='brand.light.primary'>
+      <Stack p={4} borderBottom='2px solid' borderColor='brand.light.primary'>
+        <Box as='h2' textStyle='h2'>
+          Quick Links
+        </Box>
+      </Stack>
+
+      <Grid templateColumns='repeat(2, 1fr)' sx={{ mt: '0 !important' }}>
+        {/* get started */}
+        <GridItem
+          borderRight='2px solid'
+          borderBottom='2px solid'
+          borderColor='brand.light.primary'
+        >
+          <Stack p={4} h='100%'>
+            <Text textStyle='quick-link-text' mb={-1}>
+              Don&apos;t know where to start?
+            </Text>
+
+            <Text textStyle='quick-link-text'>We can help.</Text>
+          </Stack>
+        </GridItem>
+        <GridItem borderBottom='2px solid' borderColor='brand.light.primary'>
+          <NextLink href={`${DOCS_PAGE}/getting-started`} passHref>
+            <Link _hover={{ textDecoration: 'none' }}>
+              <Stack
+                data-group
+                bg='green.50'
+                _hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
+                _focus={{
+                  textDecoration: 'none',
+                  bg: 'brand.light.primary',
+                  color: 'yellow.50',
+                  boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
+                }}
+                _active={{
+                  textDecoration: 'none',
+                  bg: 'brand.light.secondary',
+                  color: 'yellow.50'
+                }}
+                justifyContent='center'
+                h='100%'
+                p={4}
+              >
+                <Text textStyle='quick-link-label'>Get started</Text>
+              </Stack>
+            </Link>
+          </NextLink>
+        </GridItem>
+
+        {/* faq */}
+        <GridItem
+          borderRight='2px solid'
+          borderBottom='2px solid'
+          borderColor='brand.light.primary'
+        >
+          <Stack p={4} h='100%'>
+            <Text textStyle='quick-link-text' mb={-1}>
+              Have doubts?
+            </Text>
+
+            <Text textStyle='quick-link-text'>Check the FAQ section in the documentation.</Text>
+          </Stack>
+        </GridItem>
+        <GridItem borderBottom='2px solid' borderColor='brand.light.primary'>
+          <NextLink href={FAQ_PAGE} passHref>
+            <Link _hover={{ textDecoration: 'none' }}>
+              <Stack
+                data-group
+                bg='green.50'
+                _hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
+                _focus={{
+                  textDecoration: 'none',
+                  bg: 'brand.light.primary',
+                  color: 'yellow.50',
+                  boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
+                }}
+                _active={{
+                  textDecoration: 'none',
+                  bg: 'brand.light.secondary',
+                  color: 'yellow.50'
+                }}
+                justifyContent='center'
+                h='100%'
+                p={4}
+              >
+                <Text textStyle='quick-link-label'>Go to the FAQ</Text>
+              </Stack>
+            </Link>
+          </NextLink>
+        </GridItem>
+
+        {/* how to contribute */}
+        <GridItem borderRight='2px solid' borderColor='brand.light.primary'>
+          <Stack p={4} h='100%'>
+            <Text textStyle='quick-link-text' mb={-1}>
+              Want to know how to contribute?
+            </Text>
+
+            <Text textStyle='quick-link-text'>Get more information in the documentation.</Text>
+          </Stack>
+        </GridItem>
+        <GridItem>
+          <NextLink href={CONTRIBUTING_PAGE} passHref>
+            <Link _hover={{ textDecoration: 'none' }}>
+              <Stack
+                data-group
+                bg='green.50'
+                _hover={{ textDecoration: 'none', bg: 'brand.light.primary', color: 'yellow.50' }}
+                _focus={{
+                  textDecoration: 'none',
+                  bg: 'brand.light.primary',
+                  color: 'yellow.50',
+                  boxShadow: 'inset 0 0 0 3px #f0f2e2 !important'
+                }}
+                _active={{
+                  textDecoration: 'none',
+                  bg: 'brand.light.secondary',
+                  color: 'yellow.50'
+                }}
+                justifyContent='center'
+                h='100%'
+                p={4}
+              >
+                <Text textStyle='quick-link-label'>How to contribute</Text>
+              </Stack>
+            </Link>
+          </NextLink>
+        </GridItem>
+      </Grid>
+    </Stack>
+  );
+};

src/components/UI/homepage/index.ts

@@ -0,0 +1,4 @@
+export * from './Gopher';
+export * from './HomeHero';
+export * from './HomeSection';
+export * from './QuickLinks';

src/components/layouts/Layout.tsx

@@ -5,9 +5,10 @@ interface Props {
   children?: React.ReactNode;
 }
 
+// TODO: if mobile, getMobileLayout, else getDesktopLayout
 export const Layout: FC<Props> = ({ children }) => {
   return (
-    <Container maxW='container.lg' my={7}>
+    <Container maxW={{ sm: 'container.sm' }} my={7}>
       {children}
     </Container>
   );

src/constants.ts

@@ -0,0 +1,12 @@
+// internal pages
+export const DOWNLOADS_PAGE = '/downloads';
+export const DOCS_PAGE = '/docs';
+export const FAQ_PAGE = '/docs/faq';
+export const CONTRIBUTING_PAGE = `${DOCS_PAGE}/developers/contributing`;
+
+// external links
+export const ETHEREUM_ORG_URL = 'https://ethereum.org';
+export const ETHEREUM_ORG_RUN_A_NODE_URL = 'https://ethereum.org/en/run-a-node/';
+export const ETHEREUM_FOUNDATION_URL = 'https://ethereum.foundation';
+export const GETH_REPO_URL = 'https://github.com/ethereum/go-ethereum';
+export const GO_URL = 'https://go.dev/';

src/pages/_document.tsx

@@ -0,0 +1,29 @@
+import { Html, Head, Main, NextScript } from 'next/document';
+
+export default function Document() {
+  return (
+    <Html>
+      <Head>
+        {/* fonts are being loaded here to enable optimization (https://nextjs.org/docs/basic-features/font-optimization) */}
+        {/* JetBrains Mono */}
+        <link rel='preconnect' href='https://fonts.googleapis.com' />
+        <link rel='preconnect' href='https://fonts.gstatic.com' crossOrigin='true' />
+        <link
+          href='https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap'
+          rel='stylesheet'
+        />
+
+        {/* Inter */}
+        <link
+          href='https://fonts.googleapis.com/css2?family=Inter&display=swap'
+          rel='stylesheet'
+        ></link>
+      </Head>
+
+      <body>
+        <Main />
+        <NextScript />
+      </body>
+    </Html>
+  );
+}

src/pages/docs/developers/dapp-developer/native.md

@@ -25,7 +25,7 @@ The libraries are updated synchronously with the Geth Github repository. The Go
 
 Péter Szilágyi (@karalabe) gave a high level overview of the Go libraries in a talk at DevCon2 in Shanghai in 2016. The slides are still a useful resource ([available here](https://ethereum.karalabe.com/talks/2016-devcon.html)) and the talk itself can be viewed by clicking the image below (it is also archived on [IPFS](https://ipfs.io/ipfs/QmQRuKPKWWJAamrMqAp9rytX6Q4NvcXUKkhvu3kuREKqXR)).
 
-[![Peter's Devcon2 talk](/images/devcon2_labelled.webp)](https://www.youtube.com/watch?v=R0Ia1U9Gxjg)
+[![Peter's Devcon2 talk](/images/docs/devcon2_labelled.webp)](https://www.youtube.com/watch?v=R0Ia1U9Gxjg)
 
 ## Go packages
 

src/pages/docs/developers/geth-developer/dev-mode.md

@@ -196,15 +196,15 @@ Solidity is a high-level language that makes code executable by the Ethereum vir
 
 In a web browser, open <https://remix.ethereum.org>. This opens an online smart contract development environment. On the left-hand side of the screen there is a side-bar menu that toggles between several toolboxes that are displayed in a vertical panel. On the right hand side of the screen there is an editor and a terminal. This layout is similar to the default layout of many other IDEs such as [VSCode](https://code.visualstudio.com/). The contract defined in the previous section, `Storage.sol` is already available in the `Contracts` directory in Remix. It can be opened and reviewed in the editor.
 
-![Remix](/images/remix.png)
+![Remix](/images/docs/remix.png)
 
 The Solidity logo is present as an icon in the Remix side-bar. Clicking this icon opens the Solidity compiler wizard. This can be used to compile `Storage.sol` ready. With `Solidity.sol` open in the editor window, simply click the `Compile 1_Storage.sol` button. A green tick will appear next to the Solidity icon to confirm that the contract has compiled successfully. This means the contract bytecode is available.
 
-![Remix-compiler](/images/remix-compiler.png)
+![Remix-compiler](/images/docs/remix-compiler.png)
 
 Below the Solidity icon is a fourth icon that includes the Ethereum logo. Clicking this opens the Deploy menu. In this menu, Remix can be configured to connect to the local Geth node. In the drop-down menu labelled `ENVIRONMENT`, select `Injected Web3`. This will open an information pop-up with instructions for configuring Geth - these can be ignored as they were completed earlier in this tutorial. However, at the bottom of this pop-up is a box labelled `Web3 Provider Endpoint`. This should be set to Geth's 8545 port on `localhost` (`127.0.0.1:8545`). Click OK. The `ACCOUNT` field should automatically populate with the address of the account created earlier using the Geth Javascript console.
 
-![Remix-deploy](/images/remix-deploy.png)
+![Remix-deploy](/images/docs/remix-deploy.png)
 
 To deploy `Storage.sol`, click `DEPLOY`.
 
@@ -224,7 +224,7 @@ The contract is now deployed on a local testnet version of the Etheruem blockcha
 
 After deploying the contract in Remix, the `Deployed Contracts` tab in the sidebar automatically populates with the public functions exposed by `Storage.sol`. To send a value to the contract storage, type a number in the field adjacent to the `store` button, then click the button.
 
-![Remix-func](/images/remix-func.png)
+![Remix-func](/images/docs/remix-func.png)
 
 In the Geth terminal, the following logs confirm that the transaction was successful (the actual values will vary from the example below):