From 6ff05ed817b8e689d3d7bd7c666abae1957ea659 Mon Sep 17 00:00:00 2001 From: Corwin Smith Date: Tue, 22 Nov 2022 01:53:51 +0100 Subject: [PATCH] PageMetaData component (#30) * create PageMetaData component * small clean up * add page descriptions Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com> --- src/components/UI/PageMetadata.tsx | 49 ++++++++++++++++++++++++++++++ src/components/UI/index.ts | 1 + src/constants.ts | 11 +++++++ src/pages/[...slug].tsx | 6 ++++ src/pages/downloads.tsx | 8 +++-- src/pages/index.tsx | 9 ++++-- 6 files changed, 80 insertions(+), 4 deletions(-) create mode 100644 src/components/UI/PageMetadata.tsx 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/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 daeb911d84..ee7b7b16b7 100644 --- a/src/pages/[...slug].tsx +++ b/src/pages/[...slug].tsx @@ -6,6 +6,7 @@ import { Heading } from '@chakra-ui/react'; import MDXComponents from '../components/'; import { ParsedUrlQuery } from 'querystring'; import type { GetStaticPaths, GetStaticProps, NextPage } from 'next'; +import { PageMetadata } from '../components/UI'; const MATTER_OPTIONS = { engines: { @@ -70,6 +71,11 @@ interface Props { const DocPage: NextPage = ({ frontmatter, content }) => { return ( <> + +
{frontmatter.title} 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 */} +