Merge branch 'master' into markdown-styling

pull/26459/head^2
Paul Wackerow 2 years ago
commit 3620978f69
No known key found for this signature in database
GPG Key ID: BB63E296FE9CAB8D
  1. 2
      src/components/MDXComponents.tsx
  2. 38
      src/components/UI/docs/Code.tsx
  3. 1
      src/components/UI/docs/index.tsx
  4. 28
      src/components/docs/Breadcrumbs.tsx
  5. 1
      src/components/docs/index.ts
  6. 19
      src/pages/[...slug].tsx
  7. 14
      src/theme/foundations/textStyles.ts
  8. 3
      src/theme/index.ts
  9. 1
      src/utils/index.ts

@ -3,6 +3,8 @@ import NextLink from 'next/link';
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
import { nightOwl, prism } from 'react-syntax-highlighter/dist/cjs/styles/prism';
// import { Code } from './UI/docs'
import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
import go from 'react-syntax-highlighter/dist/cjs/languages/prism/go';
import graphql from 'react-syntax-highlighter/dist/cjs/languages/prism/graphql';

@ -0,0 +1,38 @@
// Libraries
import { Code as ChakraCode, Stack, Text } from '@chakra-ui/react';
import { FC } from 'react';
interface Props {
code: any;
}
export const Code: FC<Props> = ({ code }) => {
return (
!!code.inline ?
(
<Text
as='span'
background='code-bg'
textStyle='inline-code-snippet'
pb={2}
mb={-2}
>
{code.children[0]}
</Text>
)
:
(
<Stack>
<ChakraCode
overflow='auto'
p={6}
background='code-bg-contrast'
textStyle='code-block'
color='code-text'
>
{code.children[0]}
</ChakraCode>
</Stack>
)
);
};

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

@ -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'

@ -1,15 +1,20 @@
import fs from 'fs';
import matter from 'gray-matter';
import yaml from 'js-yaml';
import ReactMarkdown from 'react-markdown';
import { Stack, Heading } from '@chakra-ui/react';
import MDXComponents from '../components/';
import { ParsedUrlQuery } from 'querystring';
import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
import { textStyles } from '../theme/foundations';
import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
import ReactMarkdown from 'react-markdown';
import gfm from 'remark-gfm';
import { ParsedUrlQuery } from 'querystring';
import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
import { useRouter } from 'next/router';
import MDXComponents from '../components/';
import { Breadcrumbs } from '../components/docs'
import { PageMetadata } from '../components/UI';
import { textStyles } from '../theme/foundations';
const MATTER_OPTIONS = {
engines: {
@ -72,6 +77,8 @@ interface Props {
}
const DocPage: NextPage<Props> = ({ frontmatter, content }) => {
const router = useRouter()
return (
<>
<PageMetadata
@ -81,7 +88,7 @@ const DocPage: NextPage<Props> = ({ frontmatter, content }) => {
<main>
<Stack mb={16}>
{/* TODO: <BREADCRUMBS/> */}
<Breadcrumbs router={router} />
<Heading as='h1' mt='4 !important' mb={0} {...textStyles.header1}>
{frontmatter.title}
</Heading>

@ -134,6 +134,20 @@ export const textStyles = {
textAlign: 'center',
fontSize: 'sm'
},
'inline-code-snippet': {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 400,
fontSize: 'md',
lineHeight: 4,
letterSpacing: '1%'
},
'code-block': {
fontFamily: '"JetBrains Mono", monospace',
fontWeight: 400,
fontSize: 'md',
lineHeight: '21.12px',
letterSpacing: '1%'
},
// TODO: refactor w/ semantic tokens for light/dark mode
'link-light': {},
// TODO: refactor w/ semantic tokens for light/dark mode

@ -30,7 +30,8 @@ const overrides = {
body: { _light: 'gray.800', _dark: 'yellow.50' },
'code-bg': { _light: 'gray.200', _dark: 'gray.700' },
'code-bg-contrast': { _light: 'gray.800', _dark: 'gray.900' },
bg: { _light: 'yellow.50', _dark: 'gray.800' }
'code-text': { _light: 'green.50', _dark: 'green.50' },
bg: { _light: 'yellow.50', _dark: 'gray.800' },
}
}
};

@ -1 +0,0 @@
export * from './getProgrammingLanguageName';
Loading…
Cancel
Save