open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

SEO component

Browse Source
This commit is contained in:
mantikoros 2021-12-16 12:40:23 -06:00
parent 99637d913d
commit 4be9c3d80c
3 changed files with 52 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
web/components/SEO.tsx Normal file
View File

@ -0,0 +1,40 @@
import Head from 'next/head'
export function SEO(props: {
title: string
description: string
url?: string
children?: any[]
}) {
const { title, description, url, children } = props
return (
<Head>
<title>{title} | Mantic Markets</title>
<meta
property="og:title"
name="twitter:title"
content={title}
key="title"
/>
<meta name="description" content={description} key="description1" />
<meta
property="og:description"
name="twitter:description"
content={description}
key="description2"
/>
{url && (
<meta
property="og:url"
content={'https://mantic.markets' + url}
key="url"
/>
)}
{children}
</Head>
)
}

29
web/pages/[username]/[contractId].tsx
View File

@ -1,5 +1,4 @@
import React from 'react' import React from 'react'
import Head from 'next/head'
import clsx from 'clsx' import clsx from 'clsx'
import { useContractWithPreload } from '../../hooks/use-contract' import { useContractWithPreload } from '../../hooks/use-contract'
@ -15,13 +14,15 @@ import { Title } from '../../components/title'
import { Spacer } from '../../components/layout/spacer' import { Spacer } from '../../components/layout/spacer'
import { User } from '../../lib/firebase/users' import { User } from '../../lib/firebase/users'
import { Contract, getContract } from '../../lib/firebase/contracts' import { Contract, getContract } from '../../lib/firebase/contracts'
import { SEO } from '../../components/SEO'
export async function getStaticProps(props: { params: any }) { export async function getStaticProps(props: { params: any }) {
const { contractId } = props.params const { username, contractId } = props.params
const contract = (await getContract(contractId)) || null const contract = (await getContract(contractId)) || null
return { return {
props: { props: {
username,
contractId, contractId,
contract, contract,
}, },
@ -37,6 +38,7 @@ export async function getStaticPaths() {
export default function ContractPage(props: { export default function ContractPage(props: {
contract: Contract | null contract: Contract | null
contractId: string contractId: string
username: string
}) { }) {
const user = useUser() const user = useUser()
@ -51,26 +53,11 @@ export default function ContractPage(props: {
return ( return (
<Col className="max-w-7xl mx-auto sm:px-6 lg:px-8"> <Col className="max-w-7xl mx-auto sm:px-6 lg:px-8">
<Head> <SEO
<title>{contract.question} | Mantic Markets</title> title={contract.question}
<meta description={contract.description}
property="og:title" url={`/${props.username}/${props.contractId}`}
name="twitter:title"
content={contract.question}
key="title"
/> />
<meta
name="description"
content={contract.description}
key="description1"
/>
<meta
property="og:description"
name="twitter:description"
content={contract.description}
key="description2"
/>
</Head>
<Header /> <Header />

4
web/pages/_app.tsx
View File

@ -17,13 +17,15 @@ function MyApp({ Component, pageProps }: AppProps) {
<meta <meta
name="description" name="description"
content="Mantic Markets is creating better forecasting through user-created prediction markets." content="Mantic Markets is creating better forecasting through user-created prediction markets."
key="description1"
/> />
<meta <meta
property="og:description" property="og:description"
name="twitter:description" name="twitter:description"
content="Mantic Markets is creating better forecasting through user-created prediction markets." content="Mantic Markets is creating better forecasting through user-created prediction markets."
key="description2"
/> />
<meta property="og:url" content="https://mantic.markets" /> <meta property="og:url" content="https://mantic.markets" key="url" />
<meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@manticmarkets" /> <meta name="twitter:site" content="@manticmarkets" />
<meta <meta