import React from 'react' ; import styled from 'styled-components' ; import { NextSeo } from 'next-seo' ; import { GetStaticProps , GetStaticPaths } from 'next' ; import { DocsLayout , MarkdownContent } from 'components/layout' ; import { NavToggle , DocsPagination , LastEdited } from 'components/ui' ; import { InlineTextarea } from 'react-tinacms-inline' ; import { useGithubMarkdownForm } from 'react-tinacms-github' ; import { getDocProps } from 'utils/docs/getDocProps' ; import { InlineGithubForm } from 'components/layout/InlineGithubForm' ; import { GithubError } from 'next-tinacms-github' ; import { InlineWysiwyg } from 'components/inline-wysiwyg' ; import { usePlugin } from 'tinacms' ; import Toc from '../../components/toc' ; import { useTocListener } from 'utils' ; import { useLastEdited } from 'utils/useLastEdited' ; import { openGraphImage } from 'utils/open-graph-image' ; import Error from 'next/error' ; import { NotFoundError } from 'utils/error/NotFoundError' ; import { useRouter } from 'next/router' ; import { CloudDisclaimer } from 'components/cloud-beta-disclaimer' ; import * as ga from '../../utils/ga' ; import { Breadcrumbs } from 'components/DocumentationNavigation/Breadcrumbs' ; export function DocTemplate ( props ) { if ( props . notFound ) { return < Error statusCode = { 404 } />; } const router = useRouter ( ) ; const isCloudDocs = router . asPath . includes ( 'tina-cloud' ) ; const [ data , form ] = useGithubMarkdownForm ( props . file , formOptions ) ; const isBrowser = typeof window !== `undefined` ; const frontmatter = data . frontmatter ; const markdownBody = data . markdownBody ; const excerpt = props . file . data . excerpt ; const tocItems = props . tocItems ; const { activeIds , contentRef } = useTocListener ( data ) ; usePlugin ( form ) ; useLastEdited ( form ) ; React . useEffect ( ( ) => { const handleRouteChange = url => { ga . pageview ( url ) ; } ; router . events . on ( 'routeChangeComplete' , handleRouteChange ) ; return ( ) => { router . events . off ( 'routeChangeComplete' , handleRouteChange ) ; } ; } , [ router . events ] ) ; return ( < InlineGithubForm form = { form } > < NextSeo title = { frontmatter . title } titleTemplate = { '%s | TinaCMS Docs' } description = { excerpt } openGraph = { { title : frontmatter . title , description : excerpt , images : [ openGraphImage ( frontmatter . title , '| TinaCMS Docs' ) ] , } } /> < DocsLayout navItems = { props . docsNav } > < DocsGrid > < DocGridHeader > < Breadcrumbs navItems = { props . docsNav } /> < DocsPageTitle > < InlineTextarea name = "frontmatter.title" / > < /DocsPageTitle> < /DocGridHeader> < DocGridToc > < Toc tocItems = { tocItems } activeIds = { activeIds } / > < /DocGridToc> < DocGridContent ref = { contentRef } > < hr /> { isCloudDocs ? < CloudDisclaimer /> : null} < InlineWysiwyg name = "markdownBody" > < MarkdownContent escapeHtml = { false } content = { markdownBody } / > < /InlineWysiwyg> < LastEdited date = { frontmatter . last_edited } / > { ( props . prevPage ?. slug !== null || props . nextPage ?. slug !== null ) && ( < DocsPagination prevPage = { props . prevPage } nextPage = { props . nextPage } / > ) } < /DocGridContent> < /DocsGrid> < /DocsLayout> < /InlineGithubForm>); } export default DocTemplate ; export const getStaticProps = async function ( props ) { let { slug : slugs } = props . params ; const slug = slugs . join ( '/' ) ; try { return await getDocProps ( props , slug ) ; } catch ( e ) { if ( e instanceof GithubError ) { return { props : { error : { ... e } , } , } ; } else if ( e instanceof NotFoundError ) { return { props : { notFound : true , } , } ; } } } ; export const getStaticPaths = async function ( ) { const fg = require ( 'fast-glob' ) ; const contentDir = './content/docs/' ; const files = await fg ( `${ contentDir }**/*.md` ) ; return { fallback : false , paths : files . filter ( file => ! file . endsWith ( 'index.md' ) ) . map ( file => { const path = file . substring ( contentDir . length , file . length - 3 ) ; return { params : { slug : path . split ( '/' ) } } ; } ) , } ; } ; const formOptions = { label : 'Tina Doc' , fields : [ { label : 'Title' , name : 'frontmatter.title' , component : 'text' , } , { label : 'Previous Doc' , name : 'frontmatter.prev' , component : 'text' , } , { label : 'Next Doc' , name : 'frontmatter.next' , component : 'text' , } , { label : 'Documentation Body' , name : 'markdownBody' , component : 'markdown' , } , ] , } ; export const DocsGrid = styled . div `
  display: block;
  width: 100%;
  position: relative;
  padding: 1rem 2rem 3rem 2rem;
  max-width: 768px;
  margin: 0 auto;

  @media (min-width: 500px) {
    padding: 1rem 3rem 3rem 3rem;
  }

  @media (min-width: 1200px) {
    display: grid;
    max-width: none;
    padding: 2rem 0rem 4rem 0rem;
    grid-template-areas:
      '. header header .'
      '. content toc .';
    grid-auto-columns: minmax(0, auto) minmax(300px, 800px)
      clamp(17.5rem, 10rem + 10vw, 21.25rem) minmax(0, auto);
    grid-column-gap: 3rem;
  }
` ; export const DocGridHeader = styled . div `
  grid-area: header;
  width: 100%;
` ; export const DocGridToc = styled . div `
  grid-area: toc;
  width: 100%;

  @media (min-width: 1200px) {
    padding-top: 4.5rem;
  }
` ; interface ContentProps { ref : any ; } export const DocGridContent = styled . div < ContentProps > `
  grid-area: content;
  width: 100%;
` ; export const DocsPageTitle = styled . h1 `
  font-size: 2rem;
  line-height: 1.2 !important;
  letter-spacing: 0.1px;
  color: var(--color-orange);
  position: relative;
  font-family: var(--font-tuner);
  font-style: normal;

  margin: 0 0 0 0 !important;

  @media (max-width: 1199px) {
    margin: 0 0 1.25rem 0 !important;
  }
` ; export const DocsNavToggle = styled ( NavToggle ) `
  position: fixed;
  margin-top: 1.25rem;
  left: 1rem;
  z-index: 500;

  @media (min-width: 999px) {
    display: none;
  }
` ;