155 lines
4.0 KiB
JavaScript
155 lines
4.0 KiB
JavaScript
import React, { Component } from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { graphql } from 'gatsby'
|
|
import { Helmet } from 'react-helmet'
|
|
import Layout from '../components/Layout'
|
|
import Content from '../components/Content'
|
|
import HeaderSection from '../components/HeaderSection'
|
|
import Sidebar from '../components/Sidebar'
|
|
import DocToc from '../components/DocToc'
|
|
import DocContent from '../components/DocContent'
|
|
import DocHeader from '../components/DocHeader'
|
|
import DocFooter from '../components/DocFooter'
|
|
import Seo from '../components/Seo'
|
|
import styles from './Doc.module.scss'
|
|
|
|
const DocMain = ({ title, description, tableOfContents, post, single }) => (
|
|
<article className={single ? styles.mainSingle : styles.main}>
|
|
<DocHeader title={title} description={description} />
|
|
|
|
{tableOfContents && <DocToc tableOfContents={tableOfContents} />}
|
|
|
|
<DocContent html={post.html} htmlAst={post.htmlAst} />
|
|
<DocFooter post={post} />
|
|
</article>
|
|
)
|
|
|
|
DocMain.propTypes = {
|
|
title: PropTypes.string.isRequired,
|
|
description: PropTypes.string,
|
|
tableOfContents: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
|
|
post: PropTypes.object.isRequired,
|
|
single: PropTypes.bool
|
|
}
|
|
|
|
export default class DocTemplate extends Component {
|
|
static propTypes = {
|
|
data: PropTypes.object.isRequired,
|
|
location: PropTypes.object.isRequired
|
|
}
|
|
|
|
// output section title as defined in sections.yml
|
|
sectionTitle = this.props.data.allSectionsYaml.edges.map(({ node }) => {
|
|
// compare section against section title from sections.yml
|
|
if (
|
|
node.title
|
|
.toLowerCase()
|
|
.includes(this.props.data.markdownRemark.fields.section)
|
|
) {
|
|
return node.title
|
|
}
|
|
})
|
|
|
|
render() {
|
|
const { location } = this.props
|
|
const post = this.props.data.markdownRemark
|
|
const { section, slug } = post.fields
|
|
const { title, description } = post.frontmatter
|
|
const { tableOfContents } = post
|
|
|
|
const isApiSection = location.pathname.includes('/references/')
|
|
|
|
return (
|
|
<>
|
|
<Helmet>
|
|
<body className={section} />
|
|
</Helmet>
|
|
|
|
<Seo
|
|
title={title}
|
|
description={description}
|
|
slug={slug}
|
|
article
|
|
location={location}
|
|
/>
|
|
|
|
<Layout location={location}>
|
|
<HeaderSection title={section ? this.sectionTitle : title} />
|
|
|
|
<Content>
|
|
{section ? (
|
|
<main className={styles.wrapper}>
|
|
<aside className={styles.sidebar}>
|
|
<Sidebar
|
|
location={location}
|
|
sidebar={section}
|
|
collapsed={isApiSection}
|
|
toc={
|
|
isApiSection &&
|
|
!location.pathname.includes('/references/introduction/')
|
|
}
|
|
tableOfContents={tableOfContents}
|
|
/>
|
|
</aside>
|
|
<DocMain
|
|
title={title}
|
|
description={description}
|
|
tableOfContents={!isApiSection && tableOfContents}
|
|
post={post}
|
|
/>
|
|
</main>
|
|
) : (
|
|
<DocMain
|
|
title={title}
|
|
description={description}
|
|
tableOfContents={tableOfContents}
|
|
post={post}
|
|
single
|
|
/>
|
|
)}
|
|
</Content>
|
|
</Layout>
|
|
</>
|
|
)
|
|
}
|
|
}
|
|
|
|
export const pageQuery = graphql`
|
|
query DocBySlug($slug: String!) {
|
|
markdownRemark(fields: { slug: { eq: $slug } }) {
|
|
id
|
|
tableOfContents(maxDepth: 3)
|
|
html
|
|
htmlAst
|
|
frontmatter {
|
|
title
|
|
description
|
|
}
|
|
fields {
|
|
section
|
|
slug
|
|
}
|
|
...PageFooter
|
|
}
|
|
|
|
allSectionsYaml {
|
|
edges {
|
|
node {
|
|
title
|
|
description
|
|
link
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
fragment PageFooter on MarkdownRemark {
|
|
parent {
|
|
... on File {
|
|
relativePath
|
|
sourceInstanceName
|
|
}
|
|
}
|
|
}
|
|
`
|