diff --git a/src/components/UI/PageMetadata.tsx b/src/components/UI/PageMetadata.tsx new file mode 100644 index 0000000000..5cb76a4ae6 --- /dev/null +++ b/src/components/UI/PageMetadata.tsx @@ -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 = ({ 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 ( + + {fullTitle} + + + + + {/* OpenGraph */} + + + + + + + + + + + {/* Twitter */} + + + + + + + {/* patch to force a cache invalidation of twitter's card bot */} + + + + ); +}; diff --git a/src/components/UI/index.ts b/src/components/UI/index.ts index e2b19e38c8..edd3e095a6 100644 --- a/src/components/UI/index.ts +++ b/src/components/UI/index.ts @@ -1,3 +1,4 @@ export * from './ButtonLinkSecondary'; export * from './DataTable'; export * from './Header'; +export * from './PageMetadata'; diff --git a/src/components/layouts/Footer.tsx b/src/components/layouts/Footer.tsx index b3eb492b11..14db5fddfe 100644 --- a/src/components/layouts/Footer.tsx +++ b/src/components/layouts/Footer.tsx @@ -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 NextLink from 'next/link'; @@ -29,7 +29,7 @@ export const Footer: FC = () => { }} borderColor='primary' > - { bg: 'primary', color: 'bg !important' }} - justifyContent='center' borderRight='2px solid' borderColor='primary' + p={4} > - DOWNLOADS + DOWNLOADS - + - { md: '2px solid' }} borderColor='primary' - justifyContent='center' + p={4} > - DOCUMENTATION + DOCUMENTATION - + - { _hover={{ bg: 'primary' }} - alignItems='center' p={4} > - + - + - { > - + - + - - + - + - { flex={1} > {`© 2013–${new Date().getFullYear()}. The go-ethereum Authors.`} - + ); }; diff --git a/src/constants.ts b/src/constants.ts index 5abd377b56..61fecffb85 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -76,6 +76,17 @@ export const DOWNLOAD_OPENPGP_DEVELOPER_HEADERS = [ '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 export const LATEST_GETH_RELEASE_URL = 'https://api.github.com/repos/ethereum/go-ethereum/releases/latest'; diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx index 4e4908c030..d391271a16 100644 --- a/src/pages/[...slug].tsx +++ b/src/pages/[...slug].tsx @@ -9,6 +9,7 @@ import type { GetStaticPaths, GetStaticProps, NextPage } from 'next'; import { textStyles } from '../theme/foundations'; import ChakraUIRenderer from 'chakra-ui-markdown-renderer'; import gfm from 'remark-gfm'; +import { PageMetadata } from '../components/UI'; const MATTER_OPTIONS = { engines: { @@ -73,6 +74,11 @@ interface Props { const DocPage: NextPage = ({ frontmatter, content }) => { return ( <> + +
{/* TODO: */} diff --git a/src/pages/downloads.tsx b/src/pages/downloads.tsx index 3a674688da..5222cd34e3 100644 --- a/src/pages/downloads.tsx +++ b/src/pages/downloads.tsx @@ -8,7 +8,7 @@ import { DownloadsTable, SpecificVersionsSection } from '../components/UI/downloads'; -import { DataTable } from '../components/UI'; +import { DataTable, PageMetadata } from '../components/UI'; import { ALL_GETH_COMMITS_URL, @@ -16,6 +16,7 @@ import { DOWNLOAD_OPENPGP_BUILD_HEADERS, DOWNLOAD_OPENPGP_DEVELOPER_HEADERS, GETH_REPO_URL, + METADATA, LATEST_GETH_RELEASE_URL, LATEST_SOURCES_BASE_URL, LINUX_BINARY_BASE_URL, @@ -112,7 +113,10 @@ const DownloadsPage: NextPage = ({ data }) => { return ( <> - {/* TODO: add PageMetadata */} +
diff --git a/src/pages/index.tsx b/src/pages/index.tsx index e37364a150..d1b710a248 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -10,6 +10,7 @@ import { WhatIsEthereum, WhyRunANode } from '../components/UI/homepage'; +import { PageMetadata } from '../components/UI'; import { GopherHomeLinks } from '../components/UI/svgs'; import { @@ -18,13 +19,17 @@ import { ETHEREUM_FOUNDATION_URL, ETHEREUM_ORG_URL, GETH_REPO_URL, - GO_URL + GO_URL, + METADATA } from '../constants'; const HomePage: NextPage = ({}) => { return ( <> - {/* TODO: add PageMetadata */} +
diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts index 37951de963..f0ad126aa2 100644 --- a/src/theme/foundations/textStyles.ts +++ b/src/theme/foundations/textStyles.ts @@ -102,6 +102,13 @@ export const textStyles = { fontSize: '13px', fontFamily: 'body' }, + 'footer-link-label': { + fontFamily: '"JetBrains Mono", monospace', + fontWeight: 700, + textTransform: 'uppercase', + lineHeight: '21.12px', + letterSpacing: '2%' + }, 'footer-text': { fontFamily: 'body', lineHeight: '22px',