Merge branch 'master' into markdown-styling

pull/26459/head^2
Paul Wackerow 2 years ago
commit 0c02294710
No known key found for this signature in database
GPG Key ID: BB63E296FE9CAB8D
  1. 49
      src/components/UI/PageMetadata.tsx
  2. 1
      src/components/UI/index.ts
  3. 45
      src/components/layouts/Footer.tsx
  4. 11
      src/constants.ts
  5. 6
      src/pages/[...slug].tsx
  6. 8
      src/pages/downloads.tsx
  7. 9
      src/pages/index.tsx
  8. 7
      src/theme/foundations/textStyles.ts

@ -0,0 +1,49 @@
import Head from 'next/head';
import { useRouter } from 'next/router';
import { SITE_NAME, SITE_URL } from '../../constants';
interface Props {
title: string;
description: string;
image?: string;
}
export const PageMetadata: React.FC<Props> = ({ title, description, image }) => {
const router = useRouter();
const url = `${SITE_URL}${router.asPath}`;
const fullTitle = `${title} | ${SITE_NAME}`;
const defaultOgImage = `${SITE_URL}/images/pages/gopher-downloads-front-light.svg`; // TODO: update with right image
const ogImage = !image ? defaultOgImage : `${SITE_URL}${image}`;
return (
<Head>
<title>{fullTitle}</title>
<meta name='title' content={fullTitle} />
<meta name='description' content={description} />
<meta name='application-name' content={SITE_NAME} />
<meta name='image' content={ogImage} />
{/* OpenGraph */}
<meta property='og:title' content={fullTitle} />
<meta property='og:description' content={description} />
<meta property='og:type' content='website' />
<meta property='og:site_name' content={SITE_NAME} />
<meta property='og:url' content={url} />
<meta property='og:image' content={ogImage} />
<meta property='og:image:url' content={ogImage} />
<meta property='og:image:secure_url' content={ogImage} />
<meta property='og:image:alt' content={SITE_NAME} />
<meta property='og:image:type' content='image/png' />
{/* Twitter */}
<meta name='twitter:card' content='summary_large_image' />
<meta property='twitter:url' content={url} />
<meta name='twitter:creator' content='@go_ethereum' />
<meta name='twitter:site' content='@go_ethereum' />
<meta name='twitter:title' content={fullTitle} />
<meta name='twitter:description' content={description} />
{/* patch to force a cache invalidation of twitter's card bot */}
<meta name='twitter:image' content={`${ogImage}/#`} />
<link rel='icon' href='/images/favicon.png' />
</Head>
);
};

@ -1,3 +1,4 @@
export * from './ButtonLinkSecondary'; export * from './ButtonLinkSecondary';
export * from './DataTable'; export * from './DataTable';
export * from './Header'; export * from './Header';
export * from './PageMetadata';

@ -1,4 +1,4 @@
import { Flex, Link, Stack, Text } from '@chakra-ui/react'; import { Center, Flex, Link, Text } from '@chakra-ui/react';
import { FC } from 'react'; import { FC } from 'react';
import NextLink from 'next/link'; import NextLink from 'next/link';
@ -29,7 +29,7 @@ export const Footer: FC = () => {
}} }}
borderColor='primary' borderColor='primary'
> >
<Stack <Center
flex={1} flex={1}
color='primary' color='primary'
_hover={{ _hover={{
@ -37,18 +37,18 @@ export const Footer: FC = () => {
bg: 'primary', bg: 'primary',
color: 'bg !important' color: 'bg !important'
}} }}
justifyContent='center'
borderRight='2px solid' borderRight='2px solid'
borderColor='primary' borderColor='primary'
p={4}
> >
<NextLink href={DOWNLOADS_PAGE} passHref> <NextLink href={DOWNLOADS_PAGE} passHref>
<Link _hover={{ textDecoration: 'none' }}> <Link _hover={{ textDecoration: 'none' }}>
<Text textStyle='home-section-link-label'>DOWNLOADS</Text> <Text textStyle='footer-link-label'>DOWNLOADS</Text>
</Link> </Link>
</NextLink> </NextLink>
</Stack> </Center>
<Stack <Center
flex={1} flex={1}
color='primary' color='primary'
_hover={{ _hover={{
@ -61,18 +61,18 @@ export const Footer: FC = () => {
md: '2px solid' md: '2px solid'
}} }}
borderColor='primary' borderColor='primary'
justifyContent='center' p={4}
> >
<NextLink href={DOCS_PAGE} passHref> <NextLink href={DOCS_PAGE} passHref>
<Link _hover={{ textDecoration: 'none' }}> <Link _hover={{ textDecoration: 'none' }}>
<Text textStyle='home-section-link-label'>DOCUMENTATION</Text> <Text textStyle='footer-link-label'>DOCUMENTATION</Text>
</Link> </Link>
</NextLink> </NextLink>
</Stack> </Center>
</Flex> </Flex>
<Flex sx={{ mt: '0 !important' }}> <Flex sx={{ mt: '0 !important' }}>
<Stack <Center
flex={1} flex={1}
data-group data-group
borderLeft={{ borderLeft={{
@ -84,23 +84,21 @@ export const Footer: FC = () => {
_hover={{ _hover={{
bg: 'primary' bg: 'primary'
}} }}
alignItems='center'
p={4} p={4}
> >
<NextLink href={GETH_TWITTER_URL} passHref> <NextLink href={GETH_TWITTER_URL} passHref>
<Link isExternal> <Link isExternal>
<TwitterIcon w={8} height={8} _groupHover={{ color: 'bg' }} color='primary' /> <TwitterIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
</Link> </Link>
</NextLink> </NextLink>
</Stack> </Center>
<Stack <Center
data-group data-group
flex={1} flex={1}
_hover={{ _hover={{
bg: 'primary' bg: 'primary'
}} }}
alignItems='center'
borderWidth='2px' borderWidth='2px'
borderStyle='none solid' borderStyle='none solid'
borderColor='primary' borderColor='primary'
@ -108,33 +106,30 @@ export const Footer: FC = () => {
> >
<NextLink href={GETH_DISCORD_URL} passHref> <NextLink href={GETH_DISCORD_URL} passHref>
<Link isExternal> <Link isExternal>
<DiscordIcon w={8} height={8} _groupHover={{ color: 'bg' }} color='primary' /> <DiscordIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
</Link> </Link>
</NextLink> </NextLink>
</Stack> </Center>
<Stack <Center
data-group data-group
flex={1} flex={1}
_hover={{ _hover={{
bg: 'primary' bg: 'primary'
}} }}
alignItems='center'
p={4} p={4}
> >
<NextLink href={GETH_REPO_URL} passHref> <NextLink href={GETH_REPO_URL} passHref>
<Link isExternal> <Link isExternal>
<GitHubIcon w={7} height={7} _groupHover={{ color: 'bg' }} color='primary' /> <GitHubIcon w={7} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
</Link> </Link>
</NextLink> </NextLink>
</Stack> </Center>
</Flex> </Flex>
</Flex> </Flex>
<Stack <Center
p={4} p={4}
textAlign='center'
justifyContent='center'
borderWidth='2px' borderWidth='2px'
borderStyle={{ borderStyle={{
base: 'none solid solid solid', base: 'none solid solid solid',
@ -144,7 +139,7 @@ export const Footer: FC = () => {
flex={1} flex={1}
> >
<Text textStyle='footer-text'>{`© 2013–${new Date().getFullYear()}. The go-ethereum Authors.`}</Text> <Text textStyle='footer-text'>{`© 2013–${new Date().getFullYear()}. The go-ethereum Authors.`}</Text>
</Stack> </Center>
</Flex> </Flex>
); );
}; };

@ -76,6 +76,17 @@ export const DOWNLOAD_OPENPGP_DEVELOPER_HEADERS = [
'Fingerprint' 'Fingerprint'
]; ];
// Metadata
export const SITE_URL = 'https://geth.ethereum.org';
export const SITE_NAME = 'go-ethereum';
export const METADATA = {
HOME_TITLE: 'Home',
HOME_DESCRIPTION:
'Go-ethereum website, home for the official Golang execution layer implementation of the Ethereum protocol',
DOWNLOADS_TITLE: 'Downloads',
DOWNLOADS_DESCRIPTION: 'All Geth releases and builds, available for download'
};
// GitHub urls // GitHub urls
export const LATEST_GETH_RELEASE_URL = export const LATEST_GETH_RELEASE_URL =
'https://api.github.com/repos/ethereum/go-ethereum/releases/latest'; 'https://api.github.com/repos/ethereum/go-ethereum/releases/latest';

@ -9,6 +9,7 @@ import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
import { textStyles } from '../theme/foundations'; import { textStyles } from '../theme/foundations';
import ChakraUIRenderer from 'chakra-ui-markdown-renderer'; import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
import gfm from 'remark-gfm'; import gfm from 'remark-gfm';
import { PageMetadata } from '../components/UI';
const MATTER_OPTIONS = { const MATTER_OPTIONS = {
engines: { engines: {
@ -73,6 +74,11 @@ interface Props {
const DocPage: NextPage<Props> = ({ frontmatter, content }) => { const DocPage: NextPage<Props> = ({ frontmatter, content }) => {
return ( return (
<> <>
<PageMetadata
title={frontmatter.title}
description={frontmatter.description}
/>
<main> <main>
<Stack mb={16}> <Stack mb={16}>
{/* TODO: <BREADCRUMBS/> */} {/* TODO: <BREADCRUMBS/> */}

@ -8,7 +8,7 @@ import {
DownloadsTable, DownloadsTable,
SpecificVersionsSection SpecificVersionsSection
} from '../components/UI/downloads'; } from '../components/UI/downloads';
import { DataTable } from '../components/UI'; import { DataTable, PageMetadata } from '../components/UI';
import { import {
ALL_GETH_COMMITS_URL, ALL_GETH_COMMITS_URL,
@ -16,6 +16,7 @@ import {
DOWNLOAD_OPENPGP_BUILD_HEADERS, DOWNLOAD_OPENPGP_BUILD_HEADERS,
DOWNLOAD_OPENPGP_DEVELOPER_HEADERS, DOWNLOAD_OPENPGP_DEVELOPER_HEADERS,
GETH_REPO_URL, GETH_REPO_URL,
METADATA,
LATEST_GETH_RELEASE_URL, LATEST_GETH_RELEASE_URL,
LATEST_SOURCES_BASE_URL, LATEST_SOURCES_BASE_URL,
LINUX_BINARY_BASE_URL, LINUX_BINARY_BASE_URL,
@ -112,7 +113,10 @@ const DownloadsPage: NextPage<Props> = ({ data }) => {
return ( return (
<> <>
{/* TODO: add PageMetadata */} <PageMetadata
title={METADATA.DOWNLOADS_TITLE}
description={METADATA.DOWNLOADS_DESCRIPTION}
/>
<main> <main>
<Stack spacing={4}> <Stack spacing={4}>

@ -10,6 +10,7 @@ import {
WhatIsEthereum, WhatIsEthereum,
WhyRunANode WhyRunANode
} from '../components/UI/homepage'; } from '../components/UI/homepage';
import { PageMetadata } from '../components/UI';
import { GopherHomeLinks } from '../components/UI/svgs'; import { GopherHomeLinks } from '../components/UI/svgs';
import { import {
@ -18,13 +19,17 @@ import {
ETHEREUM_FOUNDATION_URL, ETHEREUM_FOUNDATION_URL,
ETHEREUM_ORG_URL, ETHEREUM_ORG_URL,
GETH_REPO_URL, GETH_REPO_URL,
GO_URL GO_URL,
METADATA
} from '../constants'; } from '../constants';
const HomePage: NextPage = ({}) => { const HomePage: NextPage = ({}) => {
return ( return (
<> <>
{/* TODO: add PageMetadata */} <PageMetadata
title={METADATA.HOME_TITLE}
description={METADATA.HOME_DESCRIPTION}
/>
<main> <main>
<Stack spacing={4}> <Stack spacing={4}>

@ -102,6 +102,13 @@ export const textStyles = {
fontSize: '13px', fontSize: '13px',
fontFamily: 'body' fontFamily: 'body'
}, },
'footer-link-label': {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 700,
textTransform: 'uppercase',
lineHeight: '21.12px',
letterSpacing: '2%'
},
'footer-text': { 'footer-text': {
fontFamily: 'body', fontFamily: 'body',
lineHeight: '22px', lineHeight: '22px',

Loading…
Cancel
Save