69 lines
1.5 KiB
TypeScript
69 lines
1.5 KiB
TypeScript
import * as React from 'react'
|
|
import { graphql, PageProps } from 'gatsby'
|
|
import styled from 'styled-components'
|
|
|
|
import Layout from '../components/layout'
|
|
import Seo from '../components/seo'
|
|
|
|
import { Section } from '../components/shared'
|
|
|
|
import type { PostNode, PageContext } from '../types'
|
|
|
|
const StyledMarkdown = styled.div`
|
|
color: rgb(102, 102, 102);
|
|
h2,
|
|
h3,
|
|
h4,
|
|
strong {
|
|
color: rgb(34, 34, 34);
|
|
}
|
|
h2 {
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
font-family:
|
|
'Montserrat', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial,
|
|
sans-serif;
|
|
}
|
|
`
|
|
|
|
interface MarkdownPageData {
|
|
markdownRemark: PostNode
|
|
}
|
|
|
|
const MarkdownPageTemplate: React.FC<
|
|
PageProps<MarkdownPageData, PageContext>
|
|
> = ({ data, location }) => {
|
|
const { frontmatter, html } = data.markdownRemark
|
|
return (
|
|
<Layout
|
|
location={location}
|
|
heading={frontmatter.heading}
|
|
desc={frontmatter.desc}
|
|
>
|
|
<Section color="black" bgColor="white" bottomArrow={false}>
|
|
<StyledMarkdown dangerouslySetInnerHTML={{ __html: html }} />
|
|
</Section>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
export default MarkdownPageTemplate
|
|
|
|
export const Head: React.FC<{ data: MarkdownPageData }> = ({ data }) => (
|
|
<Seo title={data.markdownRemark.frontmatter.title} />
|
|
)
|
|
|
|
export const pageQuery = graphql`
|
|
query ($id: String!) {
|
|
markdownRemark(id: { eq: $id }) {
|
|
html
|
|
frontmatter {
|
|
slug
|
|
title
|
|
heading
|
|
desc
|
|
}
|
|
}
|
|
}
|
|
`
|