use next seo on slug page

This commit is contained in:
tmshv committed 2022-09-06 15:21:04 +03:00
1 parent a4ea8230e4
commit d44db287de
1 file changed
+103 -81
+103 -81
View File
@@ -2,7 +2,7 @@ import Head from "next/head"
import { App } from "src/components/App" import { App } from "src/components/App"
import { tail } from "lodash" import { tail } from "lodash"
import { Page } from "src/components/Page" import { Page } from "src/components/Page"
import { Meta } from "src/components/Meta" import { NextSeo } from "next-seo"
import { MetaBuilder } from "src/lib/meta" import { MetaBuilder } from "src/lib/meta"
import { apiGet } from "@/next-lib" import { apiGet } from "@/next-lib"
import { GetStaticProps, NextPage } from "next" import { GetStaticProps, NextPage } from "next"
@@ -57,94 +57,116 @@ const Index: NextPage<Props> = props => {
} }
return ( return (
<App <>
contentStyle={{ {!props.meta ? null : (
marginTop: "var(--size-l)", <NextSeo
marginBottom: "var(--size-xl)", title={props.meta.title}
}} description={props.meta.description}
menu={props.menu} canonical="https://art.shlisselburg.org/"
breadcrumbs={props.breadcrumb} openGraph={{
> url: props.meta.url,
<Head> title: props.meta.title,
<title>{props.title}</title> description: props.meta.description,
{!props.meta ? null : ( images: [
<Meta meta={props.meta} /> {
)} url: props.meta.image,
</Head> width: props.meta.imageWidth,
height: props.meta.imageHeight,
alt: props.meta.description,
type: "image/jpeg",
},
],
site_name: props.meta.siteName,
}}
/>
)}
<Page <App
tags={props.tags} contentStyle={{
date={props.date ? new Date(props.date) : undefined} marginTop: "var(--size-l)",
marginBottom: "var(--size-xl)",
}}
menu={props.menu}
breadcrumbs={props.breadcrumb}
> >
<article className={"article"}> <Head>
{props.tokens.map((x, i) => { <title>{props.title}</title>
switch (x.token) { </Head>
case "html":
return (
<Html
key={i}
html={x.data}
/>
)
case "instagram": <Page
return ( tags={props.tags}
<Html date={props.date ? new Date(props.date) : undefined}
key={i} >
html={x.data.embed} <article className={"article"}>
/> {props.tokens.map((x, i) => {
) switch (x.token) {
case "html":
return (
<Html
key={i}
html={x.data}
/>
)
case "youtube": case "instagram":
return ( return (
<Youtube <Html
key={i} key={i}
url={x.data.url} html={x.data.embed}
/> />
) )
case "image": case "youtube":
return ( return (
<Picture <Youtube
key={i} key={i}
src={x.data.src} url={x.data.url}
alt={x.data.alt} />
width={x.data.width} )
height={x.data.height}
caption={x.data.caption}
blur={x.data.blur}
wide={x.wide}
/>
)
case "file": case "image":
return ( return (
<FileCard <Picture
key={i} key={i}
sign={props.documentSignature} src={x.data.src}
{...x.data} alt={x.data.alt}
/> width={x.data.width}
) height={x.data.height}
caption={x.data.caption}
blur={x.data.blur}
wide={x.wide}
/>
)
case "grid": case "file":
return ( return (
<PageGrid <FileCard
key={i} key={i}
items={x.data.items} sign={props.documentSignature}
/> {...x.data}
) />
)
default: case "grid":
return ( return (
<pre key={i}> <PageGrid
{JSON.stringify(x)} key={i}
</pre> items={x.data.items}
) />
} )
})}
</article> default:
</Page> return (
</App> <pre key={i}>
{JSON.stringify(x)}
</pre>
)
}
})}
</article>
</Page>
</App>
</>
) )
} }