PageMetaData component (#30)
* create PageMetaData component * small clean up * add page descriptions Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
This commit is contained in:
Corwin Smith
GitHub
parent
e1e2043a50
commit
6ff05ed817
|
|
@ -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 './DataTable';
|
||||
export * from './Header';
|
||||
export * from './PageMetadata';
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
|
|
@ -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}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue