fix: typestyles #689, add toc back in

src/components/custom-blocks/page-reference.tsx

@@ -7,6 +7,7 @@ import Link from 'next/link';
 import routes from '@common/routes';
 import { Img } from '@components/mdx/image';
 import { css } from '@styled-system/css';
+import { getCapsizeStyles, getHeadingStyles } from '@components/mdx/typography';
 const Image = ({
   src,
   isHovered,
@@ -36,15 +37,27 @@ const Image = ({
 );
 
 const Title = ({ children, ...props }: BoxProps) => (
-  <Text fontWeight="500" display="block" {...props}>
+  <Text
+    css={css({
+      ...getHeadingStyles('h3'),
+    })}
+    {...props}
+  >
     {children}
   </Text>
 );
 
 const Description = ({ children, ...props }) => (
-  <Caption maxWidth="50ch" {...props}>
+  <Text
+    {...props}
+    css={css({
+      ...getCapsizeStyles(16, 26),
+      mt: space('base-tight'),
+      color: color('text-body'),
+    })}
+  >
     {children}
-  </Caption>
+  </Text>
 );
 
 const FloatingLink = ({ href, ...props }: any) => (
@@ -195,8 +208,8 @@ export const PageReference: React.FC<BoxProps> = React.memo(({ children }) => {
     <Grid
       width="100%"
       mt={space('extra-loose')}
-      gridColumnGap={space('loose')}
-      gridRowGap={space('loose')}
+      gridColumnGap={space('extra-loose')}
+      gridRowGap={space('extra-loose')}
       gridTemplateColumns={[
         `repeat(1, 1fr)`,
         `repeat(${pages.length === 1 ? 1 : 2}, 1fr)`,

src/components/mdx/md-contents.tsx

@@ -15,7 +15,7 @@ const Search = dynamic(() => import('@components/search'));
 
 export const MDContents: React.FC<any> = ({ pageTop: PageTop = null, headings, children }) => {
   const router = useRouter();
-  const isHome = router?.pathname === '/';
+  const isHome = router.pathname === '/';
 
   const TOCShowing = !isHome && headings && headings?.length > 1;
   return (
@@ -38,7 +38,14 @@ export const MDContents: React.FC<any> = ({ pageTop: PageTop = null, headings, c
         >
           <Box position="sticky" top={0} pt="64px">
             <Search mb={space('extra-loose')} />
-            {TOCShowing ? null : null}
+            {TOCShowing ? (
+              <TableOfContents
+                pl={space('base')}
+                borderLeft={border()}
+                headings={headings}
+                limit={2}
+              />
+            ) : null}
           </Box>
         </Box>
       ) : null}