Add breadcrumbs to docs (#37)

* Add breadcrumbs to docs

* change BreadcrumbLink to NextLink

* Update src/components/docs/Breadcrumbs.tsx

Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>

* Update src/components/docs/Breadcrumbs.tsx

Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>

Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
pull/26459/head^2
Corwin Smith 2 years ago committed by GitHub
parent 20c0a6b2b3
commit 790cf04347
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 28
      src/components/docs/Breadcrumbs.tsx
  2. 1
      src/components/docs/index.ts
  3. 16
      src/pages/[...slug].tsx

@ -0,0 +1,28 @@
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react';
import NextLink from 'next/link';
import { FC } from 'react';
interface Props {
router: any;
}
export const Breadcrumbs: FC<Props> = ({ router }) => {
let pathSplit = router.asPath.split('/');
pathSplit = pathSplit.splice(1, pathSplit.length);
return (
<Breadcrumb mb={10}>
{pathSplit.map((path: string, idx: number) => {
return (
<BreadcrumbItem key={path}>
<NextLink href={`/${pathSplit.slice(0, idx + 1).join('/')}`} passHref>
<BreadcrumbLink color={idx + 1 === pathSplit.length ? 'body' : 'primary'}>
{path}
</BreadcrumbLink>
</NextLink>
</BreadcrumbItem>
);
})}
</Breadcrumb>
);
};

@ -0,0 +1 @@
export * from './Breadcrumbs'

@ -2,12 +2,16 @@ import fs from 'fs';
import matter from 'gray-matter';
import yaml from 'js-yaml';
import ReactMarkdown from 'react-markdown';
import { Heading } from '@chakra-ui/react';
import { Heading, Stack } from '@chakra-ui/react';
import MDXComponents from '../components/';
import { ParsedUrlQuery } from 'querystring';
import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
import { useRouter } from 'next/router';
import { Breadcrumbs } from '../components/docs'
import { PageMetadata } from '../components/UI';
const MATTER_OPTIONS = {
engines: {
yaml: (s: any) => yaml.load(s, { schema: yaml.JSON_SCHEMA }) as object
@ -69,6 +73,8 @@ interface Props {
}
const DocPage: NextPage<Props> = ({ frontmatter, content }) => {
const router = useRouter()
return (
<>
<PageMetadata
@ -77,9 +83,13 @@ const DocPage: NextPage<Props> = ({ frontmatter, content }) => {
/>
<main>
<Heading as='h1'>{frontmatter.title}</Heading>
<Stack py={8} px={4}>
<Breadcrumbs router={router} />
<Heading as='h1'>{frontmatter.title}</Heading>
<ReactMarkdown components={MDXComponents}>{content}</ReactMarkdown>
<ReactMarkdown components={MDXComponents}>{content}</ReactMarkdown>
</Stack>
</main>
</>
);

Loading…
Cancel
Save