PageMetaData component (#30)

* create PageMetaData component * small clean up * add page descriptions Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
2 years ago · 6ff05ed817
parent e1e2043a50
commit 6ff05ed817
6 changed files with 80 additions and 4 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/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
@ -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<Props> = ({ frontmatter, content }) => {
  return (
    <>
+      <PageMetadata
+        title={frontmatter.title}
+        description={frontmatter.description}
+      />
+
      <main>
        <Heading as='h1'>{frontmatter.title}</Heading>

--- 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}>