Merge branch 'master' into markdown-styling

2 years ago · 0c02294710
parent b382a5ad1a 20c0a6b2b3
commit 0c02294710
8 changed files with 107 additions and 29 deletions
--- a/src/components/UI/PageMetadata.tsx
+++ 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<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>
+  );
+};
--- 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';
--- 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'
        >
-          <Stack
+          <Center
            flex={1}
            color='primary'
            _hover={{
@ -37,18 +37,18 @@ export const Footer: FC = () => {
              bg: 'primary',
              color: 'bg !important'
            }}
-            justifyContent='center'
            borderRight='2px solid'
            borderColor='primary'
+            p={4}
          >
            <NextLink href={DOWNLOADS_PAGE} passHref>
              <Link _hover={{ textDecoration: 'none' }}>
-                <Text textStyle='home-section-link-label'>DOWNLOADS</Text>
+                <Text textStyle='footer-link-label'>DOWNLOADS</Text>
              </Link>
            </NextLink>
-          </Stack>
+          </Center>

-          <Stack
+          <Center
            flex={1}
            color='primary'
            _hover={{
@ -61,18 +61,18 @@ export const Footer: FC = () => {
              md: '2px solid'
            }}
            borderColor='primary'
-            justifyContent='center'
+            p={4}
          >
            <NextLink href={DOCS_PAGE} passHref>
              <Link _hover={{ textDecoration: 'none' }}>
-                <Text textStyle='home-section-link-label'>DOCUMENTATION</Text>
+                <Text textStyle='footer-link-label'>DOCUMENTATION</Text>
              </Link>
            </NextLink>
-          </Stack>
+          </Center>
        </Flex>

        <Flex sx={{ mt: '0 !important' }}>
-          <Stack
+          <Center
            flex={1}
            data-group
            borderLeft={{
@ -84,23 +84,21 @@ export const Footer: FC = () => {
            _hover={{
              bg: 'primary'
            }}
-            alignItems='center'
            p={4}
          >
            <NextLink href={GETH_TWITTER_URL} passHref>
              <Link isExternal>
-                <TwitterIcon w={8} height={8} _groupHover={{ color: 'bg' }} color='primary' />
+                <TwitterIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
              </Link>
            </NextLink>
-          </Stack>
+          </Center>

-          <Stack
+          <Center
            data-group
            flex={1}
            _hover={{
              bg: 'primary'
            }}
-            alignItems='center'
            borderWidth='2px'
            borderStyle='none solid'
            borderColor='primary'
@ -108,33 +106,30 @@ export const Footer: FC = () => {
          >
            <NextLink href={GETH_DISCORD_URL} passHref>
              <Link isExternal>
-                <DiscordIcon w={8} height={8} _groupHover={{ color: 'bg' }} color='primary' />
+                <DiscordIcon w={8} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
              </Link>
            </NextLink>
-          </Stack>
+          </Center>

-          <Stack
+          <Center
            data-group
            flex={1}
            _hover={{
              bg: 'primary'
            }}
-            alignItems='center'
            p={4}
          >
            <NextLink href={GETH_REPO_URL} passHref>
              <Link isExternal>
-                <GitHubIcon w={7} height={7} _groupHover={{ color: 'bg' }} color='primary' />
+                <GitHubIcon w={7} height='22px' _groupHover={{ color: 'bg' }} color='primary' />
              </Link>
            </NextLink>
-          </Stack>
+          </Center>
        </Flex>
      </Flex>

-      <Stack
+      <Center
        p={4}
-        textAlign='center'
-        justifyContent='center'
        borderWidth='2px'
        borderStyle={{
          base: 'none solid solid solid',
@ -144,7 +139,7 @@ export const Footer: FC = () => {
        flex={1}
      >
        <Text textStyle='footer-text'>{`© 2013–${new Date().getFullYear()}. The go-ethereum Authors.`}</Text>
-      </Stack>
+      </Center>
    </Flex>
  );
 };
--- 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';
--- 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<Props> = ({ frontmatter, content }) => {
  return (
    <>
+      <PageMetadata
+        title={frontmatter.title}
+        description={frontmatter.description}
+      />
+
      <main>
        <Stack mb={16}>
          {/* TODO: <BREADCRUMBS/> */}
--- 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<Props> = ({ data }) => {

  return (
    <>
-      {/* TODO: add PageMetadata */}
+      <PageMetadata
+        title={METADATA.DOWNLOADS_TITLE}
+        description={METADATA.DOWNLOADS_DESCRIPTION}
+      />

      <main>
        <Stack spacing={4}>
--- 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 */}
+      <PageMetadata
+        title={METADATA.HOME_TITLE}
+        description={METADATA.HOME_DESCRIPTION}
+      />

      <main>
        <Stack spacing={4}>
--- 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',