2019-07-31 22:05:23 -04:00
|
|
|
// @flow strict
|
2018-11-09 20:08:48 +03:00
|
|
|
import React from 'react';
|
|
|
|
|
import Helmet from 'react-helmet';
|
2019-05-10 02:15:43 +03:00
|
|
|
import type { Node as ReactNode } from 'react';
|
2019-08-25 12:29:51 +02:00
|
|
|
import { useSiteMetadata } from '../../hooks';
|
2018-11-09 20:08:48 +03:00
|
|
|
import styles from './Layout.module.scss';
|
|
|
|
|
|
2019-05-10 02:15:43 +03:00
|
|
|
type Props = {
|
|
|
|
|
children: ReactNode,
|
|
|
|
|
title: string,
|
2019-08-25 13:20:50 +02:00
|
|
|
description?: string,
|
|
|
|
|
socialImage? :string
|
2019-05-10 02:15:43 +03:00
|
|
|
};
|
|
|
|
|
|
2019-08-25 14:15:37 +02:00
|
|
|
const Layout = ({
|
2019-08-25 13:50:36 +02:00
|
|
|
children,
|
|
|
|
|
title,
|
|
|
|
|
description,
|
|
|
|
|
socialImage
|
|
|
|
|
}: Props) => {
|
2019-08-25 12:29:51 +02:00
|
|
|
const { author, url } = useSiteMetadata();
|
2020-09-10 01:01:35 +03:00
|
|
|
const metaImage = socialImage.length > 0 ? socialImage : author.photo;
|
2020-09-10 00:42:30 +03:00
|
|
|
const metaImageUrl = url + metaImage;
|
2019-08-25 12:29:51 +02:00
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className={styles.layout}>
|
|
|
|
|
<Helmet>
|
|
|
|
|
<html lang="en" />
|
|
|
|
|
<title>{title}</title>
|
|
|
|
|
<meta name="description" content={description} />
|
|
|
|
|
<meta property="og:site_name" content={title} />
|
2019-08-25 14:50:58 +02:00
|
|
|
<meta property="og:image" content={metaImageUrl} />
|
2019-08-25 12:29:51 +02:00
|
|
|
<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>
|
2019-08-25 13:50:36 +02:00
|
|
|
);
|
2019-08-25 12:29:51 +02:00
|
|
|
};
|
2018-11-09 20:08:48 +03:00
|
|
|
|
|
|
|
|
export default Layout;
|
