2022-01-09 20:12:31 +00:00
|
|
|
import React from "react";
|
|
|
|
|
import Helmet from "react-helmet";
|
2018-11-09 20:08:48 +03:00
|
|
|
|
2022-01-09 20:12:31 +00:00
|
|
|
import { useSiteMetadata } from "@/hooks";
|
|
|
|
|
|
2022-04-16 14:25:55 +00:00
|
|
|
import * as styles from "./Layout.module.scss";
|
2022-01-09 20:12:31 +00:00
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
|
title: string;
|
|
|
|
|
description?: string;
|
|
|
|
|
socialImage?: string;
|
|
|
|
|
children: React.ReactNode;
|
|
|
|
|
}
|
2019-05-10 02:15:43 +03:00
|
|
|
|
2022-04-16 14:25:55 +00:00
|
|
|
const Layout: React.FC<Props> = ({
|
|
|
|
|
children,
|
|
|
|
|
title,
|
|
|
|
|
description,
|
|
|
|
|
socialImage = "",
|
|
|
|
|
}: Props) => {
|
2019-08-25 12:29:51 +02:00
|
|
|
const { author, url } = useSiteMetadata();
|
2020-11-01 03:47:19 +03:00
|
|
|
const metaImage = 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;
|
