feat: add rehype plugins for linkable content

next.config.js

@@ -1,4 +1,9 @@
 const withMdxEnhanced = require('next-mdx-enhanced');
+var link = require('rehype-autolink-headings');
+var slug = require('rehype-slug');
+const linkOptions = {
+  behavior: 'wrap',
+};
 
 const nextConfig = {
   distDir: 'nextjs',
@@ -14,7 +19,7 @@ module.exports = withMdxEnhanced({
   defaultLayout: true,
   fileExtensions: ['mdx'],
   remarkPlugins: [],
-  rehypePlugins: [],
+  rehypePlugins: [slug, [link, linkOptions]],
   usesSrc: true,
   extendFrontMatter: {
     process: (mdxContent, frontMatter) => {},

package.json

@@ -39,6 +39,8 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-icons": "^3.11.0",
+    "rehype-autolink-headings": "^4.0.0",
+    "rehype-slug": "^3.0.0",
     "remark": "^12.0.1",
     "remark-html": "^12.0.0",
     "swr": "^0.2.0"

src/layouts/Mdx.tsx

@@ -1,16 +1,23 @@
 import { fromUnixTime } from 'date-fns';
-import * as React from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import MDXComponents from 'src/components/MdxComponents';
 import Layout from './Layout';
 import { Heading } from '@chakra-ui/core';
+import { even, useRouter } from 'next/router';
+import { useEffect, useState } from 'react';
 
 export interface IMdxProps {
   children?: React.ReactNode;
   frontMatter;
 }
 
 export default function Mdx({ frontMatter, children }: IMdxProps) {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.push(window.location.hash);
+  }, []);
+
   return (
     <Layout>
       <Heading mb="1rem">{frontMatter.title}</Heading>