Add mdx plugins

Author: pomber

next.config.js

@@ -1,3 +1,10 @@
-const withMDX = require("@next/mdx")()
+const withMDX = require("@next/mdx")({
+  options: {
+    remarkPlugins: [
+      require("@silvenon/remark-smartypants"),
+    ],
+    rehypePlugins: [],
+  },
+})
 
 module.exports = withMDX()

package.json

@@ -8,6 +8,7 @@
     "@mdx-js/loader": "^1.6.5",
     "@mdx-js/react": "^1.0.6",
     "@next/mdx": "^9.4.4",
+    "@silvenon/remark-smartypants": "^1.0.0",
     "next": "^9.5.3",
     "raw-loader": "^4.0.1",
     "react": "^16.13.1",

src/headings.js

@@ -0,0 +1,41 @@
+import React from "react"
+
+export const headings = {
+  h2: heading("h2"),
+  h3: heading("h3"),
+  h4: heading("h4"),
+  h5: heading("h5"),
+}
+
+function heading(type) {
+  return function Heading({ children }) {
+    const match = /^.+(\s*\{#([a-z0-9\-_]+?)\}\s*)$/.exec(
+      children
+    )
+
+    const id = match[2]
+
+    return React.createElement(
+      type,
+      {
+        id,
+        className: "heading",
+      },
+      <a href={`#${id}`} aria-hidden>
+        <svg
+          aria-hidden="true"
+          height="16"
+          version="1.1"
+          viewBox="0 0 16 16"
+          width="16"
+        >
+          <path
+            fillRule="evenodd"
+            d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
+          ></path>
+        </svg>
+      </a>,
+      children.replace(match[1], "")
+    )
+  }
+}

src/page.js

@@ -1,5 +1,7 @@
 import s from "./page.module.css"
 import Content from "./tutorial.mdx"
+import { MDXProvider } from "@mdx-js/react"
+import { headings } from "./headings"
 
 export { Page }
 
@@ -10,8 +12,14 @@ function Page() {
         <h1>Tutorial: Intro to React</h1>
       </header>
       <main>
-        <Content />
+        <MDXProvider components={components}>
+          <Content />
+        </MDXProvider>
       </main>
     </article>
   )
 }
+
+const components = {
+  ...headings,
+}

src/page.module.css

@@ -128,3 +128,18 @@
   background: rgba(255, 229, 100, 0.2);
   color: #1a1a1a;
 }
+
+.article :global(.heading) a {
+  float: left;
+  padding-right: 4px;
+  margin-left: -20px;
+  visibility: hidden;
+  background-color: inherit;
+  border-bottom: inherit;
+  color: inherit;
+}
+.article :global(.heading):hover a {
+  visibility: visible;
+  background-color: inherit;
+  border-bottom-color: inherit;
+}