interesting
/
go-ethereum
mirror of https://github.com/ethereum/go-ethereum.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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 2022-11-22 01:53:51 +01:00 committed by GitHub
parent e1e2043a50
commit 6ff05ed817
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 80 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/UI/PageMetadata.tsx Normal file
View File

@ -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
src/components/UI/index.ts
View File

@ -1,3 +1,4 @@
export * from './ButtonLinkSecondary'; export * from './ButtonLinkSecondary';
export * from './DataTable'; export * from './DataTable';
export * from './Header'; export * from './Header';
export * from './PageMetadata';

11
src/constants.ts
View File

@ -76,6 +76,17 @@ export const DOWNLOAD_OPENPGP_DEVELOPER_HEADERS = [
'Fingerprint' '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 // GitHub urls
export const LATEST_GETH_RELEASE_URL = export const LATEST_GETH_RELEASE_URL =
'https://api.github.com/repos/ethereum/go-ethereum/releases/latest'; 'https://api.github.com/repos/ethereum/go-ethereum/releases/latest';

6
src/pages/[...slug].tsx
View File

@ -6,6 +6,7 @@ import { Heading } from '@chakra-ui/react';
import MDXComponents from '../components/'; import MDXComponents from '../components/';
import { ParsedUrlQuery } from 'querystring'; import { ParsedUrlQuery } from 'querystring';
import type { GetStaticPaths, GetStaticProps, NextPage } from 'next'; import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
import { PageMetadata } from '../components/UI';
const MATTER_OPTIONS = { const MATTER_OPTIONS = {
engines: { engines: {
@ -70,6 +71,11 @@ interface Props {
const DocPage: NextPage<Props> = ({ frontmatter, content }) => { const DocPage: NextPage<Props> = ({ frontmatter, content }) => {
return ( return (
<> <>
<PageMetadata
title={frontmatter.title}
description={frontmatter.description}
/>
<main> <main>
<Heading as='h1'>{frontmatter.title}</Heading> <Heading as='h1'>{frontmatter.title}</Heading>

8
src/pages/downloads.tsx
View File

@ -8,7 +8,7 @@ import {
DownloadsTable, DownloadsTable,
SpecificVersionsSection SpecificVersionsSection
} from '../components/UI/downloads'; } from '../components/UI/downloads';
import { DataTable } from '../components/UI'; import { DataTable, PageMetadata } from '../components/UI';
import { import {
ALL_GETH_COMMITS_URL, ALL_GETH_COMMITS_URL,
@ -16,6 +16,7 @@ import {
DOWNLOAD_OPENPGP_BUILD_HEADERS, DOWNLOAD_OPENPGP_BUILD_HEADERS,
DOWNLOAD_OPENPGP_DEVELOPER_HEADERS, DOWNLOAD_OPENPGP_DEVELOPER_HEADERS,
GETH_REPO_URL, GETH_REPO_URL,
METADATA,
LATEST_GETH_RELEASE_URL, LATEST_GETH_RELEASE_URL,
LATEST_SOURCES_BASE_URL, LATEST_SOURCES_BASE_URL,
LINUX_BINARY_BASE_URL, LINUX_BINARY_BASE_URL,
@ -112,7 +113,10 @@ const DownloadsPage: NextPage<Props> = ({ data }) => {
return ( return (
<> <>
{/* TODO: add PageMetadata */} <PageMetadata
title={METADATA.DOWNLOADS_TITLE}
description={METADATA.DOWNLOADS_DESCRIPTION}
/>
<main> <main>
<Stack spacing={4}> <Stack spacing={4}>

9
src/pages/index.tsx
View File

@ -10,6 +10,7 @@ import {
WhatIsEthereum, WhatIsEthereum,
WhyRunANode WhyRunANode
} from '../components/UI/homepage'; } from '../components/UI/homepage';
import { PageMetadata } from '../components/UI';
import { GopherHomeLinks } from '../components/UI/svgs'; import { GopherHomeLinks } from '../components/UI/svgs';
import { import {
@ -18,13 +19,17 @@ import {
ETHEREUM_FOUNDATION_URL, ETHEREUM_FOUNDATION_URL,
ETHEREUM_ORG_URL, ETHEREUM_ORG_URL,
GETH_REPO_URL, GETH_REPO_URL,
GO_URL GO_URL,
METADATA
} from '../constants'; } from '../constants';
const HomePage: NextPage = ({}) => { const HomePage: NextPage = ({}) => {
return ( return (
<> <>
{/* TODO: add PageMetadata */} <PageMetadata
title={METADATA.HOME_TITLE}
description={METADATA.HOME_DESCRIPTION}
/>
<main> <main>
<Stack spacing={4}> <Stack spacing={4}>