fix: correctly renders custom markdown elements

Correctly renders the custom markdown elements

package.json

@@ -43,6 +43,8 @@
     "rehype-autolink-headings": "^6.1.1",
     "rehype-parse": "^8.0.4",
     "rehype-react": "^7.1.1",
+    "rehype-sanitize": "^5.0.1",
+    "rehype-slug": "^5.1.0",
     "rehype-stringify": "^9.0.3",
     "remark": "^14.0.2",
     "remark-html": "^15.0.1",

src/components/organisms/SiteBanner/SiteBanner.jsx

@@ -130,41 +130,41 @@ export function SiteBanner({ className }) {
       <p css={subtitleCss}>
         Software Engineer and Manager specializing in Web Applicaton development.
       </p>
-      <a
+      <Link
         href="mailto:angusp@angusp.com"
         aria-label="Email angusp@angusp.com"
         title="Email"
         css={emailCss}
       >
         angusp@angusp.com
-      </a>
+      </Link>
       <div css={profileLinksListCss}>
-        <a
+        <Link
           href="https://github.com/anguspiv"
           aria-label="Github Profile"
           title="Github Profile"
           css={profileLinkCss}
         >
           <FontAwesomeIcon icon={faGithub} />
-        </a>
+        </Link>
 
-        <a
+        <Link
           href="https://twitter.com/angusp"
           aria-label="Twitter Profile"
           title="Twitter Profile"
           css={profileLinkCss}
         >
           <FontAwesomeIcon icon={faTwitter} mask={faCircle} transform="shrink-6" />
-        </a>
+        </Link>
 
-        <a
+        <Link
           href="https://www.linkedin.com/in/aperkerson"
           aria-label="LinkedIn Profile"
           title="LinkedIn Profile"
           css={profileLinkCss}
         >
           <FontAwesomeIcon icon={faLinkedinIn} mask={faCircle} transform="shrink-6" />
-        </a>
+        </Link>
       </div>
       <nav role="navigation" aria-label="Main">
         <ul css={menuCss}>

src/lib/markdownToHtml.js

@@ -1,24 +1,30 @@
-import { createElement, Fragment } from 'react';
+import ReactDOMServer from 'react-dom/server';
+import { createElement } from 'react';
 import { unified } from 'unified';
 import parse from 'remark-parse';
-import remarkRehype from 'remark-rehype';
-import rehypeReact from 'rehype-react';
-import stringify from 'rehype-stringify';
+import rehype from 'remark-rehype';
+import react from 'rehype-react';
+import slug from 'rehype-slug';
 import { Link } from '@components/atoms/Link';
+import { Divider } from '@components/atoms/Divider';
 
 export async function markdownToHtml(markdown) {
-  const result = unified()
+  const file = unified()
     .use(parse)
-    .use(remarkRehype, { allowDangerousHtml: true })
-    .use(rehypeReact, {
+    .use(rehype)
+    .use(slug)
+    .use(react, {
       createElement,
-      Fragment,
-      a: Link,
+      components: {
+        a: Link,
+        hr: Divider,
+      },
     })
-    .use(stringify)
     .processSync(markdown);
 
-  return result.toString();
+  const string = ReactDOMServer.renderToStaticMarkup(file.result);
+
+  return string;
 }
 
 export default markdownToHtml;