import React from 'react' ; import { Stack } from '@chakra-ui/react' ; import { NextSeo } from 'next-seo' ; import { ExtendedPostFrontMatter , PostMetadata } from 'src/types' ; import { PageLayout , PageLayoutProps } from './PageLayout' ; import { PostHeader } from 'src/components/blog/PostHeader' ; import { PostLinks } from 'src/components/blog/PostLinks' ; import { Author } from 'src/components/blog/Author' ; import { useURL } from 'src/hooks/useURL' ; import { mdxComponents } from 'src/components/blog/Mdx' ; import { useCountPageView } from 'src/hooks/usePageViews' ; import { formatDate , formatSEOKeyValues } from 'src/ui/format' ; export interface PostLayoutProps extends Omit < PageLayoutProps , 'title' > { postMetadata : PostMetadata ; } export const PostLayout = ( { postMetadata , children , ... props } ) => { const views = useCountPageView ( postMetadata . path ) ; return ( < > < PageLayout as = "article" maxW = "2xl" { ... props } lineHeight = { 1.7 } > < PostHeader { ... postMetadata } views = { views } mb = { 12 } / > { children } < Stack as = "footer" spacing = { 8 } mt = { 8 } > < mdxComponents . hr my = { 0 } w = "100%" / > < Author /> < PostLinks { ... postMetadata } alignSelf = "center" / > < /Stack> < /PageLayout> < />); } ; export default function PostLayoutWithSEO ( { children , frontMatter : { title , url , publicationDate , description , tags , path , ... frontMatter } } ) { return ( < > < NextSeo title = { title } description = { description } additionalMetaTags = { [ { property : 'author' , content : 'François Best' } , ... ( tags ? [ { property : 'keywords' , content : tags . join ( ',' ) } ] : [ ] ) , ... formatSEOKeyValues ( { ... ( publicationDate ? { 'Posted on' : formatDate ( publicationDate ) } : { } ) , 'Reading time' : `${ Math . round ( frontMatter . readingTime . minutes ) } min` , ... ( tags ? { Tagged : tags ?. join ( ', ' ) } : { } ) , Author : 'François Best' } ) ] } canonical = { url } openGraph = { { type : 'article' , title , description , url , article : { publishedTime : publicationDate && new Date ( publicationDate ) ?. toISOString ( ) . slice ( 0 , 10 ) , authors : [ useURL ( ) ] , tags } , images : frontMatter . ogImage ? [ frontMatter . ogImage ] : undefined } } /> < PostLayout postMetadata = { { title , url , path , publicationDate , description , tags , ... frontMatter } } > { children } < /PostLayout> < />); }