import React from 'react' ; import { graphql } from 'gatsby' ; import { Helmet } from 'react-helmet' ; import { RouteComponentProps } from '@reach/router' ; import { getPageById } from 'utils/helpers' ; import { MenuNode , Edge } from 'interfaces/nodes' ; import { SiteMetadata } from 'interfaces/gatsby' ; import { Page } from 'components/layout/Page' ; import { Container } from 'components/layout/Container' ; import { DocsWrapper } from 'components/docs/DocsWrapper' ; import { DocsHeader } from 'components/docs/DocsHeader' ; import { MarkdownContent } from 'components/page/Markdown' ; import { FooterWrapper , Footer } from 'components/layout/Footer' ; import { Pagination } from 'components/ui/Pagination' ; import { TocWrapper , TocFloatingButton } from 'components/docs/TableOfContents' ; import IndexLayout from 'layouts' ; import renderAst from 'utils/renderAst' ; interface PageTemplateProps extends RouteComponentProps { data : { site : { siteMetadata : SiteMetadata ; } ; sectionList : { edges : Edge < MenuNode > [ ] ; } ; markdownRemark : { htmlAst : any ; tableOfContents : string ; excerpt : string ; frontmatter : { id : string ; title : string ; description ? : string ; prev ? : string ; next ? : string ; } ; } ; } ; } const PageTemplate = ( { data } ) => { const [ tocIsOpen , setTocIsOpen ] = React . useState ( false ) ; const { markdownRemark , sectionList , site } = data ; const { prev , next } = markdownRemark . frontmatter ; const prevPage = getPageById ( sectionList . edges , prev ) ; const nextPage = getPageById ( sectionList . edges , next ) ; return ( < IndexLayout > < Page docsPage > < Helmet > < title > { markdownRemark . frontmatter . title } & middot ; { site . siteMetadata . title } < /title> < meta name = "description" content = { markdownRemark . excerpt } / > < meta property = "og:title" content = { markdownRemark . frontmatter . title } / > < meta property = "og:description" content = { markdownRemark . excerpt } / > < /Helmet> < DocsWrapper hasToc = { ! ! markdownRemark . tableOfContents } > { markdownRemark . tableOfContents && ( < TocWrapper isOpen = { tocIsOpen } onClick = { ( ) => setTocIsOpen ( ! tocIsOpen ) } dangerouslySetInnerHTML = { { __html : markdownRemark . tableOfContents } } />)} < Container > < DocsHeader title = { markdownRemark . frontmatter . title } subtitle = { markdownRemark . frontmatter . description } / > < MarkdownContent > { renderAst ( markdownRemark . htmlAst ) } < /MarkdownContent> < FooterWrapper > { ( prevPage || nextPage ) && < Pagination prevPage = { prevPage } nextPage = { nextPage } / > } < Footer /> < /FooterWrapper> < /Container> < TocFloatingButton tocIsOpen = { tocIsOpen } onClick = { ( ) => setTocIsOpen ( ! tocIsOpen ) } /> < /DocsWrapper> < /Page> < /IndexLayout>); } ; export default PageTemplate ; export const query = graphql `
  query PageTemplateQuery($slug: String!) {
    site {
      siteMetadata {
        title
        description
        siteUrl
        keywords
        author {
          name
          url
          email
        }
      }
    }
    sectionList: allTocJson {
      edges {
        node {
          title
          items {
            id
            slug
            title
          }
        }
      }
    }
    markdownRemark(fields: { slug: { eq: $slug } }) {
      htmlAst
      tableOfContents
      excerpt
      frontmatter {
        id
        title
        prev
        next
      }
    }
  }
` ;