From 71d00bcc4ae9da8d6a0da86da791bf1ee3e8d338 Mon Sep 17 00:00:00 2001
From: Tim Won <timothy.k.won@pwc.com>
Date: Thu, 24 Sep 2020 09:53:48 -0400
Subject: [PATCH] feat: add rehype plugins for linkable content

---
 next.config.js      |  7 ++++++-
 package-lock.json   | 48 +++++++++++++++++++++++++++++++++++++++++++++
 package.json        |  2 ++
 src/layouts/Mdx.tsx |  9 ++++++++-
 4 files changed, 64 insertions(+), 2 deletions(-)

diff --git a/next.config.js b/next.config.js
index fe78170..d0c7941 100644
--- a/next.config.js
+++ b/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) => {},
diff --git a/package-lock.json b/package-lock.json
index c6c2bc6..ed4c8b6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4989,6 +4989,21 @@
       "resolved": "https://registry.npmjs.org/get-value/-/get-value-2.0.6.tgz",
       "integrity": "sha1-3BXKHGcjh8p2vTesCjlbogQqLCg="
     },
+    "github-slugger": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/github-slugger/-/github-slugger-1.3.0.tgz",
+      "integrity": "sha512-gwJScWVNhFYSRDvURk/8yhcFBee6aFjye2a7Lhb2bUyRulpIoek9p0I9Kt7PT67d/nUlZbFu8L9RLiA0woQN8Q==",
+      "requires": {
+        "emoji-regex": ">=6.0.0 <=6.1.1"
+      },
+      "dependencies": {
+        "emoji-regex": {
+          "version": "6.1.1",
+          "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.1.1.tgz",
+          "integrity": "sha1-xs0OwbBkLio8Z6ETfvxeeW2k+I4="
+        }
+      }
+    },
     "glob": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -5244,6 +5259,11 @@
         "web-namespaces": "^1.0.0"
       }
     },
+    "hast-util-has-property": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-1.0.4.tgz",
+      "integrity": "sha512-ghHup2voGfgFoHMGnaLHOjbYFACKrRh9KFttdCzMCbFoBMJXiNi2+XTrPP8+q6cDJM/RSqlCfVWrjp1H201rZg=="
+    },
     "hast-util-is-element": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-1.1.0.tgz",
@@ -5308,6 +5328,11 @@
         "zwitch": "^1.0.0"
       }
     },
+    "hast-util-to-string": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-1.0.4.tgz",
+      "integrity": "sha512-eK0MxRX47AV2eZ+Lyr18DCpQgodvaS3fAQO2+b9Two9F5HEoRPhiUMNzoXArMJfZi2yieFzUBMRl3HNJ3Jus3w=="
+    },
     "hast-util-whitespace": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-1.0.4.tgz",
@@ -7561,6 +7586,29 @@
         }
       }
     },
+    "rehype-autolink-headings": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-4.0.0.tgz",
+      "integrity": "sha512-2lglJ+4S3A4RCz+zlKVWj1wHvwO4bjunAoEOgMfjphT59EVXwdMiJzrL/A2fuAX/33k/LhkGW6BEK1Cl1I5WQw==",
+      "requires": {
+        "extend": "^3.0.1",
+        "hast-util-has-property": "^1.0.0",
+        "hast-util-is-element": "^1.0.0",
+        "unist-util-visit": "^2.0.0"
+      }
+    },
+    "rehype-slug": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-slug/-/rehype-slug-3.0.0.tgz",
+      "integrity": "sha512-zFnj5BCEJXV6+URwaz8yW+9BdjDwO5iVzlQui3+7cCJ9MXlIEL0IY8VefcT/03Gw+2Hutdrx+zXnS7bnOrepZg==",
+      "requires": {
+        "github-slugger": "^1.1.1",
+        "hast-util-has-property": "^1.0.0",
+        "hast-util-is-element": "^1.0.0",
+        "hast-util-to-string": "^1.0.0",
+        "unist-util-visit": "^2.0.0"
+      }
+    },
     "remark": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/remark/-/remark-12.0.1.tgz",
diff --git a/package.json b/package.json
index f7b414c..e538ea5 100644
--- a/package.json
+++ b/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"
diff --git a/src/layouts/Mdx.tsx b/src/layouts/Mdx.tsx
index b8c753b..9808825 100644
--- a/src/layouts/Mdx.tsx
+++ b/src/layouts/Mdx.tsx
@@ -1,9 +1,10 @@
 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;
@@ -11,6 +12,12 @@ export interface IMdxProps {
 }
 
 export default function Mdx({ frontMatter, children }: IMdxProps) {
+  const router = useRouter();
+
+  useEffect(() => {
+    router.push(window.location.hash);
+  }, []);
+
   return (
     <Layout>
       <Heading mb="1rem">{frontMatter.title}</Heading>