index.tsx

import { NextSeo } from 'next-seo'
import React from 'react'

import { getMarkdownPreviewProps } from 'utils/getMarkdownPreviewProps'
import { getDocsNav } from 'utils/docs/getDocProps'
import { createTocListener } from 'utils'
import { DocsLayout, MarkdownContent } from 'components/layout'
import {
  DocGridToc,
  DocGridContent,
  DocsGrid,
  DocGridHeader,
  DocsPageTitle,
} from '../docs/[...slug]'
import Toc from 'components/toc'
import { openGraphImage } from 'utils/open-graph-image'

const GuideTemplate = ({ markdownFile, navItems, tocItems }) => {
  const { frontmatter, markdownBody, excerpt } = markdownFile.data
  const [activeIds, setActiveIds] = React.useState([])
  const isBrowser = typeof window !== `undefined`
  const contentRef = React.useRef<HTMLDivElement>(null)

  React.useEffect(() => {
    if (!isBrowser || !contentRef.current) {
      return
    }

    const activeTocListener = createTocListener(contentRef, setActiveIds)
    window.addEventListener('scroll', activeTocListener)

    return () => window.removeEventListener('scroll', activeTocListener)
  }, [contentRef])

  return (
    <>
      <NextSeo
        title={frontmatter.title}
        titleTemplate={'%s | TinaCMS Docs'}
        description={excerpt}
        openGraph={{
          title: frontmatter.title,
          description: excerpt,
          images: [openGraphImage('TinaCMS Guides')],
        }}
      />
      <DocsLayout navItems={navItems}>
        <DocsGrid>
          <DocGridHeader>
            <DocsPageTitle>{frontmatter.title}</DocsPageTitle>
          </DocGridHeader>
          <DocGridToc>
            <Toc tocItems={tocItems} activeIds={activeIds} />
          </DocGridToc>
          <DocGridContent ref={contentRef}>
            <hr />
            <MarkdownContent escapeHtml={false} content={markdownBody} />
          </DocGridContent>
        </DocsGrid>
      </DocsLayout>
    </>
  )
}

export default GuideTemplate

export const getStaticProps = async ctx => {
  const {
    props: { preview, file: markdownFile, tocItems },
  } = await getMarkdownPreviewProps(
    `content/guides/index.md`,
    ctx.preview,
    ctx.previewData
  )
  const navItems = await getDocsNav(preview, ctx.previewData)

  return {
    props: {
      slug: '/guides',
      markdownFile,
      tocItems,
      navItems: navItems.data,
    },
  }
}