// @flow strict
import React from 'react';
import Helmet from 'react-helmet';
import type { Node as ReactNode } from 'react';
import { useSiteMetadata } from '../../hooks';
import styles from './Layout.module.scss';
type Props = {
children: ReactNode,
title: string,
description?: string,
socialImage? :string
};
const Layout = ({
children,
title,
description,
socialImage
}: Props) => {
const { author, url } = useSiteMetadata();
const metaImage = socialImage != null ? socialImage : author.photo;
const metaImageUrl = url + metaImage;
return (
<div className={styles.layout}>
<Helmet>
<html lang="en" />
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:site_name" content={title} />
<meta property="og:image" content={metaImageUrl} />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={metaImageUrl} />
</Helmet>
{children}
</div>
);
};
export default Layout;