import React from "react"; import { Link, graphql } from "gatsby"; import TableOfContents, { Item } from "../components/TableOfContents"; import { device } from "../utils/devices"; import { MDXRenderer } from "gatsby-plugin-mdx"; import styled from "styled-components"; // import Bio from "../components/bio" import Layout from "../components/Layout"; import Seo from "../components/Seo"; import { rhythm, scale } from "../utils/typography"; import { Node } from "../utils/types"; import { useSiteMetadata } from "../queries/useSiteMetadata"; import "katex/dist/katex.min.css"; const Toc = styled.ul` background-color: white; z-index: 5; @media screen and ${device.mobileS} { position: sticky; margin: 0 auto; top: 64px; max-height: 50vh; display: flex; border-bottom: 1px solid black; } @media screen and ${device.laptop} { position: fixed; left: calc(50% + 360px); top: 64px; max-height: 70vh; width: 15%; border: 0; } `; const InnerScroll = styled.div` width: 100%; overflow-y: scroll; &::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: ${(props) => props.theme.colors.backgroundColor}; } &::-webkit-scrollbar { width: 6px; background-color: ${(props) => props.theme.colors.backgroundColor}; } &::-webkit-scrollbar-thumb { background-color: gray; } scrollbar-color: gray; scrollbar-width: thin; `; interface Props { data: { mdx: { id: number; excerpt: string; body: string; tableOfContents: { items: Item[]; }; frontmatter: { title: string; date: string; description: string; author: string; }; }; }; location: Record<string, string>; pageContext: { previous?: Node; next?: Node; }; } const BlogPostTemplate: React.FC<Props> = ({ data, pageContext, location }) => { const post = data.mdx; const siteTitle = useSiteMetadata().title; const { previous, next } = pageContext; const tocData = data.mdx; return ( <Layout location={location} title={siteTitle}> <Seo title={post.frontmatter.title} description={post.frontmatter.description || post.excerpt} /> {/*TODO: This render method needs investigating*/} {tocData?.tableOfContents?.items && ( <Toc> <InnerScroll> <TableOfContents items={tocData.tableOfContents.items} /> </InnerScroll> </Toc> )} <article> <header> <h1 style={{ marginTop: rhythm(1), marginBottom: 0, }} > {post.frontmatter.title} </h1> <div style={{ ...scale(-1 / 5), display: `block`, marginBottom: rhythm(1), }} > <p style={{ float: "left", }} > {post.frontmatter.date} </p> <p style={{ float: "right", }} > {post.frontmatter.author} </p> </div> <div style={{ clear: "both" }}></div> </header> <MDXRenderer>{post.body}</MDXRenderer> <hr style={{ marginBottom: rhythm(1), }} /> <footer> {/* <Bio /> TODO: Same as the other bio, we need to fix the bio component*/} </footer> </article> <nav> <ul style={{ display: `flex`, flexWrap: `wrap`, justifyContent: `space-between`, listStyle: `none`, padding: 0, }} > <li> {previous && ( <Link to={previous.fields.slug} rel="prev"> ← {previous.frontmatter.title} </Link> )} </li> <li> {next && ( <Link to={next.fields.slug} rel="next"> {next.frontmatter.title} → </Link> )} </li> </ul> </nav> </Layout> ); }; export default BlogPostTemplate; export const pageQuery = graphql` query BlogPostBySlug($slug: String!) { mdx(fields: { slug: { eq: $slug } }) { id excerpt(pruneLength: 160) body tableOfContents(maxDepth: 5) frontmatter { title date(formatString: "MMMM DD, YYYY") description author } } } `;