update link and header styling

src/components/MDXComponents.tsx

@@ -80,7 +80,7 @@ const MDXComponents = {
       <NextLink href={href} passHref>
         <Link
           isExternal={href.startsWith('http') && !href.includes('geth.ethereum.org')}
-          color='primary'
+          variant='light'
         >
           {children}
         </Link>
@@ -97,7 +97,7 @@ const MDXComponents = {
   },
   h2: ({ children }: any) => {
     return (
-      <Heading as='h2' textAlign='start' mb={4} {...header2}>
+      <Heading as='h2' textAlign='start' mt='16 !important' mb={4} {...header2}>
         {children}
       </Heading>
     );
@@ -116,7 +116,6 @@ const MDXComponents = {
       </Heading>
     );
   },
-  // lists
   // tables
   table: ({ children }: any) => (
     <Flex maxW='min(100%, 100vw)' overflowX='scroll'>

src/pages/[...slug].tsx

@@ -2,7 +2,7 @@ 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 { Stack, Heading } from '@chakra-ui/react';
 import MDXComponents from '../components/';
 import { ParsedUrlQuery } from 'querystring';
 import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
@@ -74,7 +74,13 @@ const DocPage: NextPage<Props> = ({ frontmatter, content }) => {
   return (
     <>
       <main>
-        <Heading as='h1' mb={5} {...textStyles.header1}>{frontmatter.title}</Heading>
+        <Stack mb={16}>
+          {/* TODO: <BREADCRUMBS/> */}
+          <Heading as='h1' mt='4 !important' mb={0} {...textStyles.header1}>
+            {frontmatter.title}
+          </Heading>
+          {/* <Text as='span' mt='0 !important'>last edited {TODO: get last edited date}</Text> */}
+        </Stack>
         <ReactMarkdown remarkPlugins={[gfm]} components={ChakraUIRenderer(MDXComponents)}>{content}</ReactMarkdown>
       </main>
     </>