src/templates/PageTemplate/PageTemplate.tsx
import React from "react";
import { graphql } from "gatsby";
import { Layout } from "@/components/Layout";
import { Meta } from "@/components/Meta";
import { Page } from "@/components/Page";
import { Sidebar } from "@/components/Sidebar";
import { useSiteMetadata } from "@/hooks";
import { Node } from "@/types";
interface Props {
data: {
markdownRemark: Node;
};
}
const PageTemplate: React.FC<Props> = ({ data }: Props) => {
const { html: body } = data.markdownRemark;
const { frontmatter } = data.markdownRemark;
const { title } = frontmatter;
return (
<Layout>
<Sidebar />
<Page title={title}>
<div dangerouslySetInnerHTML={{ __html: body }} />
</Page>
</Layout>
);
};
export const query = graphql`
query PageTemplate($slug: String!) {
markdownRemark(fields: { slug: { eq: $slug } }) {
id
html
frontmatter {
title
date
description
socialImage {
publicURL
}
}
}
}
`;
export const Head: React.FC<Props> = ({ data }) => {
const { title, subtitle, url } = useSiteMetadata();
const {
frontmatter: {
title: pageTitle,
description: pageDescription = "",
socialImage,
},
} = data.markdownRemark;
const description = pageDescription || subtitle;
const image = socialImage?.publicURL && url.concat(socialImage?.publicURL);
return (
<Meta
title={`${pageTitle} - ${title}`}
description={description}
image={image}
/>
);
};
export default PageTemplate;