fix: better mdx loader, frontmatter, clean up

lib/mdx-frontmatter-loader.js

@@ -0,0 +1,55 @@
+const fm = require('gray-matter');
+const remark = require('remark');
+const strip = require('strip-markdown');
+const readingTime = require('reading-time');
+
+const getReadingTime = mdxContent => readingTime(mdxContent);
+
+const getHeadings = mdxContent => {
+  const regex = /\n(#+)(.*)/gm;
+  const found = mdxContent.match(regex);
+  const getLevel = string => string.split('#');
+  const headings =
+    found && found.length
+      ? found.map(f => {
+          const md = f.split('# ')[1];
+          let content = md;
+          remark()
+            .use(strip)
+            .process(md, (err, file) => {
+              if (err) throw err;
+              content = file.contents.toString().trim();
+            });
+          const level = getLevel(f).length;
+          return { content, level };
+        })
+      : [];
+  return headings;
+};
+
+// @see https://github.com/expo/expo/blob/master/docs/common/md-loader.js
+async function mdxFrontmatterLoader(src) {
+  const callback = this.async();
+  const { content, data } = fm(src);
+  const headings = getHeadings(content);
+  const duration = getReadingTime(content).text;
+  const code =
+    `import { MDWrapper } from '@components/layouts/markdown-wrapper';
+export default function Layout({ children, ...props }){
+  return (
+    <MDWrapper frontmatter={${JSON.stringify({
+      duration,
+      ...data,
+      headings,
+    })}} {...props}>
+      {children}
+    </MDWrapper>
+)
+}
+
+` + content;
+
+  return callback(null, code);
+}
+
+module.exports = mdxFrontmatterLoader;

next.config.js

@@ -309,12 +309,13 @@ module.exports = withFonts(
         use: [
           options.defaultLoaders.babel,
           {
-            loader: './lib/mdx-loader',
+            loader: '@mdx-js/loader',
             options: {
               remarkPlugins,
               rehypePlugins,
             },
           },
+          path.join(__dirname, './lib/mdx-frontmatter-loader'),
         ],
       });
 

src/common/data/mdx.ts

@@ -1,4 +1,4 @@
-import { MDXComponents } from '@components/mdx/mdx-components';
+import { Components } from '@components/mdx/mdx-components';
 import renderToString from 'next-mdx-remote/render-to-string';
 const { remarkPlugins } = require('../../../lib/remark-plugins');
 const { rehypePlugins } = require('../../../lib/rehype-plugins');
@@ -7,8 +7,8 @@ export const wrapValueInTicks = value => '`' + value.replace('`', '').replace('`
 
 export const convertRemoteDataToMDX = async (arr: any[], key: string) =>
   Promise.all(
-    arr.map(entry => renderToString(entry[key], MDXComponents, { remarkPlugins, rehypePlugins }))
+    arr.map(entry => renderToString(entry[key], Components, { remarkPlugins, rehypePlugins }))
   );
 
 export const renderMdx = async (content: string) =>
-  renderToString(content, MDXComponents, { remarkPlugins, rehypePlugins });
+  renderToString(content, Components, { remarkPlugins, rehypePlugins });

src/common/navigation.yaml

@@ -95,10 +95,19 @@ sections:
       - path: /references
         usePageTitles: true
         pages:
-          - path: /clarity-language
           - path: /blockstack-cli
+          - path: /clarity-language
           - path: /stacks-blockchain
           - path: /stacks-rpc-api
+          - external:
+              href: 'https://blockstack.github.io/blockstack.js/'
+              title: blockstack.js
+          - external:
+              href: 'https://blockstack.github.io/blockstack-android/'
+              title: Android SDK
+          - external:
+              href: 'https://blockstack.github.io/blockstack-ios/'
+              title: iOS SDK
           - external:
               href: 'https://blockstack.zendesk.com/hc/en-us'
               title: FAQs

src/common/routes/get-routes.js

@@ -58,7 +58,7 @@ const getHeadings = mdContent => {
   const found = mdContent.match(regex);
   return found && found.length
     ? found.map(f => f && f.split('# ')[1]).filter(f => typeof f !== 'undefined')
-    : undefined;
+    : null;
 };
 
 const routes = allRoutes.map(route => {

src/components/clarity-ref.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MDXComponents } from '@components/mdx/mdx-components';
+import { Components } from '@components/mdx/mdx-components';
 import { TableOfContents } from '@components/toc';
 import hydrate from 'next-mdx-remote/hydrate';
 import { space } from '@blockstack/ui';
@@ -8,7 +8,7 @@ export const ClarityKeywordReference = ({ content, headings }) => {
   return (
     <>
       <TableOfContents mb={space('extra-loose')} label="Contents" headings={headings} />
-      {hydrate(content, { ...MDXComponents, wrapper: undefined })}
+      {hydrate(content, Components)}
     </>
   );
 };
@@ -20,6 +20,6 @@ export const ClarityFunctionReference = ({ content, headings }) => (
       label="Contents"
       headings={headings}
     />
-    {hydrate(content, { ...MDXComponents, wrapper: undefined })}
+    {hydrate(content, Components)}
   </>
 );

src/components/cli-reference.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { cliReferenceData } from '@common/../_data/cliRef';
-import { MDXComponents } from '@components/mdx/mdx-components';
+import { Components } from '@components/mdx/mdx-components';
 import { Grid, Box, color } from '@blockstack/ui';
 import { border } from '@common/utils';
 import hydrate from 'next-mdx-remote/hydrate';
@@ -11,27 +11,26 @@ const styles = {
   overflowY: 'hidden',
   whiteSpace: 'pre',
 };
-const InlineCode = props => <MDXComponents.inlineCode {...styles} {...props} />;
+const InlineCode = props => <Components.inlineCode {...styles} {...props} />;
 
 const ReferenceEntry = ({ entry, usage }) => (
   <>
-    <MDXComponents.h4>{entry.command}</MDXComponents.h4>
+    <Components.h4>{entry.command}</Components.h4>
 
-    <MDXComponents.p>
+    <Components.p>
       <strong>Group:</strong> {entry.group}
-    </MDXComponents.p>
+    </Components.p>
 
     {hydrate(usage, {
-      ...MDXComponents,
+      ...Components,
-      wrapper: undefined,
       p: (props: any) => (
-        <MDXComponents.p
+        <Components.p
           {...props}
           style={{ display: 'block', wordBreak: 'break-word', hyphens: 'auto' }}
         />
       ),
     })}
-    <MDXComponents.h3>Arguments</MDXComponents.h3>
+    <Components.h3>Arguments</Components.h3>
     <Grid
       mb="tight"
       pb="base-tight"

src/components/faq.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MDXComponents } from '@components/mdx';
+import { Components } from '@components/mdx';
 import { Box, Flex, ChevronIcon, space, color } from '@blockstack/ui';
 import hydrate from 'next-mdx-remote/hydrate';
 import { Accordion, AccordionItem, AccordionButton, AccordionPanel } from '@reach/accordion';
@@ -43,15 +43,15 @@ const FAQItem = React.memo(({ faq, ...rest }: any) => {
           },
         })}
       >
-        <MDXComponents.h4 id={id} my="0px !important" color="currentColor">
+        <Components.h4 id={id} my="0px !important" color="currentColor">
           {faq.question}
-        </MDXComponents.h4>
+        </Components.h4>
         <Box color={color('text-caption')} pl={space('base-loose')}>
           <ChevronIcon direction="down" size="22px" />
         </Box>
       </Flex>
       <Box px={space('extra-loose')} pb={space('extra-loose')} as={AccordionPanel}>
-        {hydrate(faq.answer, { ...MDXComponents, wrapper: undefined })}
+        {hydrate(faq.answer, Components)}
       </Box>
     </Box>
   );

src/components/glossary.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, space } from '@blockstack/ui';
 import hydrate from 'next-mdx-remote/hydrate';
-import { MDXComponents } from '@components/mdx/mdx-components';
+import { Components } from '@components/mdx/mdx-components';
 import { slugify } from '@common/utils';
 import { css } from '@styled-system/css';
 import { TableOfContents } from '@components/toc';
@@ -18,9 +18,9 @@ export const Glossary = ({ data }) => {
       />
       {data.map(entry => (
         <>
-          <MDXComponents.h3 pl={space('extra-loose')} id={slugify(entry.term)}>
+          <Components.h3 pl={space('extra-loose')} id={slugify(entry.term)}>
             {entry.term}
-          </MDXComponents.h3>
+          </Components.h3>
 
           <Box
             css={css({
@@ -37,7 +37,7 @@ export const Glossary = ({ data }) => {
               },
             })}
           >
-            {hydrate(entry.definition, { ...MDXComponents, wrapper: undefined })}
+            {hydrate(entry.definition, Components)}
           </Box>
         </>
       ))}

src/components/header.tsx

@@ -78,8 +78,9 @@ const HeaderTextItem: React.FC<BoxProps & LinkProps> = ({ children, href, as, ..
     color={color('invert')}
     css={css({
       ...getCapsizeStyles(16, 26),
-      ...rest,
       color: 'currentColor',
+      ...rest,
+      fontWeight: '400',
       ':hover': {
         cursor: 'pointer',
         textDecoration: href ? 'underline' : 'none',

src/components/mdx/md-contents.tsx

@@ -1,15 +1,238 @@
 import React from 'react';
-import { Box, space } from '@blockstack/ui';
+import { Box, space, themeColor, color } from '@blockstack/ui';
-
 import { ContentWrapper } from '../content-wrapper';
 import { TableOfContents } from '@components/toc';
-
 import { css } from '@styled-system/css';
 import { TOC_WIDTH } from '@common/constants';
-import { styleOverwrites } from '@components/mdx/styles';
-import { border } from '@common/utils';
 import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
+import { getHeadingStyles } from '@components/mdx/typography';
+import { border } from '@common/utils';
+import { getCapsizeStyles } from '@components/mdx/typography';
+
+export const styleOverwrites = {
+  section: {
+    '&:first-child > h2:first-child': {
+      mt: 0,
+    },
+    '& > *:not(pre):not(ul):not(ol):not(img):not([data-reach-accordion]):not(section):not(hr)': {
+      px: space(['extra-loose', 'extra-loose', 'none', 'none']),
+    },
+    'ul, ol': {
+      // pr: space('extra-loose'),
+      px: space(['64px', '64px', 'extra-loose', 'extra-loose']),
+      // pl: '64px',
+      'ul, ol': {
+        pl: space('extra-loose'),
+      },
+    },
+    '*:not(pre) a > code': {
+      color: color('accent'),
+      textDecoration: 'inherit',
+    },
+    pre: {
+      // px: space(['none', 'none', 'extra-loose', 'extra-loose']),
+    },
+    img: {
+      mx: 'auto',
+    },
+  },
+  pre: {
+    display: 'block',
+    my: space('extra-loose'),
+    '& > div': {
+      borderRight: [0, 0, border()],
+      borderLeft: [0, 0, border()],
+      borderBottom: border(),
+      borderTop: border(),
+      borderRadius: [0, 0, '12px'],
+      bg: themeColor('ink'),
+    },
+    '& > div > code': {
+      whiteSpace: 'pre',
+      overflowX: 'auto',
+      maxWidth: '100%',
+      '& + h2, & + h3': {
+        mt: space('extra-loose'),
+      },
+      '& + h4, & + h5, & + h6, & + blockquote, & + ul, & + ol': {
+        mt: 0,
+      },
+      boxShadow: 'none',
+    },
+  },
+  p: {
+    width: '100%',
+  },
+  'p, li, a': {
+    display: 'inline-block',
+    ...getCapsizeStyles(16, 28),
+  },
+  li: {
+    display: 'list-item',
+    pb: space('base-tight'),
+    ':last-child': {
+      mb: 0,
+      pb: 0,
+    },
+    '*:last-child:not(pre):not(blockquote)': {
+      mb: 0,
+    },
+    p: {
+      display: 'inline',
+    },
+    'ol, ul': {
+      mt: space('base-loose'),
+    },
+    ':before': {
+      verticalAlign: 'top',
+    },
+    ':marker': {
+      verticalAlign: 'top',
+    },
+    mb: space('base'),
+    'p + p': {
+      mt: space('extra-loose'),
+    },
+    'p + p, ul + p, ol + p': {
+      display: 'inline-block',
+      mt: space('extra-loose'),
+    },
+  },
+  'p + p, ul + p, ol + p': {
+    display: 'inline-block',
+    mt: space('extra-loose'),
+  },
+  'li pre': {
+    '& > div': {
+      border: border(),
+      borderRadius: '12px',
+    },
+  },
+  '*:not(pre) code': {
+    fontFamily: '"Soehne Mono", "Fira Code", monospace',
+    // ...getCapsizeStyles(14, 24),
+    // padding: '3px 2px',
+  },
+  'pre code': {
+    fontFamily: '"Soehne Mono", "Fira Code", monospace',
+    fontSize: '14px',
+    lineHeight: '24px',
+  },
+  h2: {
+    mt: '64px',
+    '&, & > *': {
+      ...getHeadingStyles('h2'),
+    },
+    '& > code': {
+      px: space('tight'),
+      py: space('extra-tight'),
+      mr: '2px',
+      fontSize: '22px',
+    },
+    '& + section > h3': {
+      mt: 0,
+    },
+  },
+  h3: {
+    mt: '64px',
+    '&, & > *': {
+      ...getHeadingStyles('h3'),
+    },
+    '& + section > h4': {
+      mt: 0,
+    },
+  },
+  h4: {
+    mt: '64px',
+    '&, & > *': {
+      ...getHeadingStyles('h4'),
+    },
+    '& + section > h5': {
+      mt: 0,
+    },
+  },
+  h5: {
+    mt: space('extra-loose'),
+    '&, & > *': {
+      ...getHeadingStyles('h5'),
+    },
+  },
+  h6: {
+    mt: space('extra-loose'),
+    '&, & > *': {
+      ...getHeadingStyles('h6'),
+    },
+  },
+  h1: {
+    mt: space('extra-loose'),
+    '&, & > *': {
+      ...getHeadingStyles('h1'),
+    },
+    '& + *': {
+      mt: space('extra-loose'),
+    },
+  },
+  'h1, h2, h3, h4, h5, h6': {
+    mb: space('extra-loose'),
+    '& + pre': {
+      mt: '0',
+    },
+    '& + ul, & + ol': {
+      mt: '0',
+    },
+    '& + blockquote': {
+      mt: '0',
+    },
+  },
+  'ol, ul': {
+    mb: 0,
+    mt: space('extra-loose'),
+  },
+  blockquote: {
+    '& + blockquote': {
+      mt: space('extra-tight'),
+    },
+    '& > div > div > *:first-child': {
+      mt: 0,
+    },
+    '& + pre': {
+      mt: '0',
+    },
+    '& + h3, & + h4': {
+      mt: space('extra-loose'),
+    },
+  },
+  img: {
+    my: space('extra-loose'),
+  },
+  table: {
+    '*': {
+      fontSize: '14px',
+      lineHeight: '24px',
+      '::before': {
+        display: 'none',
+      },
+      '::after': {
+        display: 'none',
+      },
+      '& code': {
+        fontSize: '10px',
+        lineHeight: '12px',
+        transform: 'translateY(4px)',
+      },
+    },
+    '& code': {
+      maxWidth: '100%',
+      overflowX: 'auto',
+      overflowY: 'hidden',
+      whiteSpace: 'pre',
+    },
+    'td:last-child, th:last-child': {
+      borderRight: 0,
+    },
+  },
+};
 
 const Search = dynamic(() => import('@components/search'));
 
@@ -38,14 +261,7 @@ export const MDContents: React.FC<any> = ({ pageTop: PageTop = null, headings, c
         >
           <Box position="sticky" top={0} pt="64px">
             <Search mb={space('extra-loose')} />
-            {TOCShowing ? (
+            <TableOfContents headings={headings} />
-              <TableOfContents
-                pl={space('base')}
-                borderLeft={border()}
-                headings={headings}
-                limit={2}
-              />
-            ) : null}
           </Box>
         </Box>
       ) : null}

src/components/mdx/mdx-components.tsx

@@ -26,7 +26,7 @@ import { Code } from '@components/mdx/components';
 import { PageReference } from '@components/custom-blocks/page-reference';
 import { MDWrapper } from '@components/layouts/markdown-wrapper';
 
-export const MDXComponents = {
+export const Components = {
   h1: () => null,
   h2: H2,
   h3: H3,
@@ -50,6 +50,9 @@ export const MDXComponents = {
   blockquote: Blockquote,
   sup: Sup,
   section: Section,
+};
+
+export const MDXComponents = {
+  ...Components,
   pagereference: PageReference,
-  wrapper: MDWrapper,
 };

src/components/mdx/overrides.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+import { color } from '@blockstack/ui';
+import { createGlobalStyle } from 'styled-components';
+
+const GlobalStyles = createGlobalStyle`
+* {
+  font-feature-settings: 'ss01' on;
+}
+section{
+  content-visibility: auto;
+  contain-intrinsic-size: 1000px;
+}
+html, body {
+  font-family: 'Soehne', Inter, sans-serif;
+}
+@counter-style list {
+ pad: "0";
+}
+img{
+  image-rendering: crisp-edges;
+  will-change: transform;
+}
+.headroom {
+  top: 0;
+  left: 0;
+  right: 0;
+  zIndex: 1;
+}
+.headroom--unfixed {
+  position: relative;
+  transform: translateY(0);
+}
+.headroom--scrolled {
+  transition: transform 200ms ease-in-out;
+}
+.headroom--unpinned {
+  position: fixed;
+  transform: translateY(-100%);
+}
+.headroom--pinned {
+  position: fixed;
+  transform: translateY(0%);
+}
+:root{
+--docsearch-modal-background:  ${color('bg')};
+--docsearch-text-color:  ${color('text-title')};
+--docsearch-icon-color:  ${color('text-caption')};
+--docsearch-primary-color: ${color('accent')};
+--docsearch-input-color: ${color('text-title')};
+--docsearch-highlight-color: ${color('bg-alt')};
+--docsearch-placeholder-color: ${color('text-caption')};
+--docsearch-container-background: rgba(22,22,22,0.75);
+--docsearch-modal-shadow: inset 0px 0px 1px 1px ${color('border')};
+--docsearch-searchbox-background: var(--ifm-color-emphasis-300);
+--docsearch-searchbox-focus-background: ${color('bg')};;
+--docsearch-searchbox-shadow: inset 0px 0px 1px 1px ${color('border')};
+--docsearch-hit-color: var(--ifm-color-emphasis-800);
+--docsearch-hit-active-color: ${color('text-title')};
+--docsearch-hit-background: ${color('bg')};
+--docsearch-hit-shadow: inset 0px 0px 1px 1px ${color('border')};
+--docsearch-key-gradient: transparent;
+--docsearch-key-shadow: inset 0px -2px 0px 0px transparent,inset 0px 0px 1px 1px transparent,0px 1px 2px 1px transparent;
+--docsearch-footer-background: ${color('bg')};
+--docsearch-footer-shadow: inset 0px 0px 1px 1px ${color('border')};
+--docsearch-logo-color: #5468ff;
+--docsearch-muted-color: #969faf;
+--docsearch-modal-width: 560px;
+--docsearch-modal-height: 600px;
+--docsearch-searchbox-height: 56px;
+--docsearch-hit-height: 56px;
+--docsearch-footer-height: 44px;
+--docsearch-spacing: 12px;
+--docsearch-icon-stroke-width: 1.4;
+}
+.DocSearch-Container{
+  z-index: 99999;
+}
+.DocSearch-SearchBar{
+  padding: var(--docsearch-spacing);
+}
+.DocSearch-Reset:hover{
+  color: ${color('accent')};
+}
+.DocSearch-Form{
+  input{
+    color: ${color('text-title')};
+  }
+  &:focus-within{
+    box-shadow: 0 0 0 3px rgba(170, 179, 255, 0.75);
+  }
+}
+.DocSearch-Help{
+  text-align: center;
+}
+.DocSearch-Prefill{
+  color: ${color('accent')} !important;
+}
+.DocSearch-Hit{
+  mark{
+    color: ${color('accent')} !important;
+  }
+}
+.DocSearch-Hit-source{
+  color: ${color('text-caption')};
+}
+.DocSearch-MagnifierLabel{
+  color: ${color('accent')};
+}
+
+pre{
+  display: inline-block;
+}
+p, ul, ol, table {
+  color: ${color('text-body')};
+  a > pre {
+    color: ${color('accent')} !important;
+  }
+}
+`;
+export const MdxOverrides: React.FC<any> = props => (
+  <>
+    <GlobalStyles />
+  </>
+);

src/components/mdx/styles.tsx

@@ -1,126 +1,9 @@
 import React from 'react';
 import { color, space, themeColor } from '@blockstack/ui';
-import { createGlobalStyle } from 'styled-components';
 import { getHeadingStyles } from '@components/mdx/typography';
 import { border } from '@common/utils';
 import { getCapsizeStyles } from '@components/mdx/typography';
 
-export const MdxOverrides = createGlobalStyle`
-* {
-  font-feature-settings: 'ss01' on;
-}
-section{
-  content-visibility: auto;
-  contain-intrinsic-size: 1000px;
-}
-html, body {
-  font-family: 'Soehne', Inter, sans-serif;
-}
-@counter-style list {
- pad: "0";
-}
-img{
-  image-rendering: crisp-edges;
-  will-change: transform;
-}
-.headroom {
-  top: 0;
-  left: 0;
-  right: 0;
-  zIndex: 1;
-}
-.headroom--unfixed {
-  position: relative;
-  transform: translateY(0);
-}
-.headroom--scrolled {
-  transition: transform 200ms ease-in-out;
-}
-.headroom--unpinned {
-  position: fixed;
-  transform: translateY(-100%);
-}
-.headroom--pinned {
-  position: fixed;
-  transform: translateY(0%);
-}
-:root{
---docsearch-modal-background:  ${color('bg')};
---docsearch-text-color:  ${color('text-title')};
---docsearch-icon-color:  ${color('text-caption')};
---docsearch-primary-color: ${color('accent')};
---docsearch-input-color: ${color('text-title')};
---docsearch-highlight-color: ${color('bg-alt')};
---docsearch-placeholder-color: ${color('text-caption')};
---docsearch-container-background: rgba(22,22,22,0.75);
---docsearch-modal-shadow: inset 0px 0px 1px 1px ${color('border')};
---docsearch-searchbox-background: var(--ifm-color-emphasis-300);
---docsearch-searchbox-focus-background: ${color('bg')};;
---docsearch-searchbox-shadow: inset 0px 0px 1px 1px ${color('border')};
---docsearch-hit-color: var(--ifm-color-emphasis-800);
---docsearch-hit-active-color: ${color('text-title')};
---docsearch-hit-background: ${color('bg')};
---docsearch-hit-shadow: inset 0px 0px 1px 1px ${color('border')};
---docsearch-key-gradient: transparent;
---docsearch-key-shadow: inset 0px -2px 0px 0px transparent,inset 0px 0px 1px 1px transparent,0px 1px 2px 1px transparent;
---docsearch-footer-background: ${color('bg')};
---docsearch-footer-shadow: inset 0px 0px 1px 1px ${color('border')};
---docsearch-logo-color: #5468ff;
---docsearch-muted-color: #969faf;
---docsearch-modal-width: 560px;
---docsearch-modal-height: 600px;
---docsearch-searchbox-height: 56px;
---docsearch-hit-height: 56px;
---docsearch-footer-height: 44px;
---docsearch-spacing: 12px;
---docsearch-icon-stroke-width: 1.4;
-}
-.DocSearch-Container{
-  z-index: 99999;
-}
-.DocSearch-SearchBar{
-  padding: var(--docsearch-spacing);
-}
-.DocSearch-Reset:hover{
-  color: ${color('accent')};
-}
-.DocSearch-Form{
-  input{
-    color: ${color('text-title')};
-  }
-  &:focus-within{
-    box-shadow: 0 0 0 3px rgba(170, 179, 255, 0.75);
-  }
-}
-.DocSearch-Help{
-  text-align: center;
-}
-.DocSearch-Prefill{
-  color: ${color('accent')} !important;
-}
-.DocSearch-Hit{
-  mark{
-    color: ${color('accent')} !important;
-  }
-}
-.DocSearch-Hit-source{
-  color: ${color('text-caption')};
-}
-.DocSearch-MagnifierLabel{
-  color: ${color('accent')};
-}
-
-pre{
-  display: inline-block;
-}
-p, ul, ol, table {
-  color: ${color('text-body')};
-  a > pre {
-    color: ${color('accent')} !important;
-  }
-}
-`;
-
 export const styleOverwrites = {
   section: {
     '&:first-child > h2:first-child': {

src/components/toc.tsx

@@ -7,6 +7,7 @@ import { useActiveHeading } from '@common/hooks/use-active-heading';
 import NextLink from 'next/link';
 import { getHeadingStyles } from '@components/mdx/typography';
 import { css } from '@styled-system/css';
+
 const getLevelPadding = (level: number) => {
   switch (level) {
     case 2:
@@ -18,12 +19,24 @@ const getLevelPadding = (level: number) => {
   }
 };
 
-const Item = ({ slug, label, level, limit }) => {
+const Item = ({
+  slug,
+  label,
+  level,
+  limit,
+}: {
+  slug: string;
+  label: string;
+  level: number;
+  limit?: number;
+}) => {
   const { isActive: _isActive, slugInView } = useActiveHeading(slug);
   const isOnScreen = slugInView === slug;
 
   const isActive = isOnScreen || _isActive;
-  return !limit || level <= limit + 1 ? (
+
+  const render = !limit || level <= limit + 1;
+  return render ? (
     <Box pl={getLevelPadding(level - 2)} py={space('extra-tight')}>
       <NextLink href={`#${slug}`} passHref>
         <Link
@@ -36,11 +49,6 @@ const Item = ({ slug, label, level, limit }) => {
             color: color('accent'),
           }}
           pointerEvents={isActive ? 'none' : 'unset'}
-          css={css({
-            display: 'block',
-            ...getHeadingStyles('h6'),
-            mb: space('base-tight'),
-          })}
         >
           <Box as="span" dangerouslySetInnerHTML={{ __html: label }} />
         </Link>
@@ -90,7 +98,7 @@ export const TableOfContents = ({
               : `repeat(${columns}, 1fr)`
           }
         >
-          {headings.map((heading, index) => {
+          {headings?.map((heading, index) => {
             return index > 0 ? (
               <Item
                 limit={limit}

src/pages/_app.tsx

@@ -4,9 +4,8 @@ import { useMediaQuery } from '@common/hooks/use-media-query';
 import { MDXProvider } from '@mdx-js/react';
 import { MDXComponents } from '@components/mdx';
 import { AppStateProvider } from '@components/app-state';
-import { MdxOverrides } from '@components/mdx/styles';
+import { MdxOverrides } from '@components/mdx/overrides';
 import { ProgressBar } from '@components/progress-bar';
-import GoogleFonts from 'next-google-fonts';
 import '@docsearch/css';
 import { BaseLayout } from '@components/layouts/base-layout';
 import { THEME_STORAGE_KEY } from '@common/constants';

yarn.lock

@@ -9618,6 +9618,11 @@ vm-browserify@^1.0.1:
   resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
+"vscode-textmate@git+https://github.com/octref/vscode-textmate.git":
+  version "4.0.1"
+  uid e65aabe2227febda7beaad31dd0fca1228c5ddf3
+  resolved "git+https://github.com/octref/vscode-textmate.git#e65aabe2227febda7beaad31dd0fca1228c5ddf3"
+
 "vscode-textmate@https://github.com/octref/vscode-textmate":
   version "4.0.1"
   resolved "https://github.com/octref/vscode-textmate#e65aabe2227febda7beaad31dd0fca1228c5ddf3"