283 - Add scroll anchors to h2 and h3 for mdx based pages

components/H2.tsx

@@ -0,0 +1,12 @@
+import { getAnchorFromText } from "lib/clientsideUtils";
+
+export default function H2({ children }: { children: string }) {
+  const anchor = getAnchorFromText(children);
+  const link = `#${anchor}`;
+  return (
+    <h2 id={anchor}>
+      { children }
+      <a href={link}><div /></a>
+    </h2>
+  );
+}

components/H3.tsx

@@ -0,0 +1,12 @@
+import { getAnchorFromText } from "lib/clientsideUtils";
+
+export default function H3({ children }: { children: string }) {
+  const anchor = getAnchorFromText(children);
+  const link = `#${anchor}`;
+  return (
+    <h3 id={anchor}>
+      { children }
+      <a href={link}><div /></a>
+    </h3>
+  );
+}

components/markdown.module.css

@@ -10,6 +10,21 @@
   @apply text-2xl sm:text-3xl mb-4 font-semibold;
 }
 
+.markdown h2 a div {
+  margin-left: 10px;
+  opacity: 0;
+  background: url('/img/anchor.svg') center no-repeat;
+  min-width: 20px;
+  min-height: 20px;
+  color: white;
+  display: inline-block;
+}
+
+.markdown h2:hover a div {
+  opacity: 1;
+  cursor: pointer;
+}
+
 .markdown h2::before {
   content: "";
   display: block;
@@ -22,6 +37,21 @@
   @apply text-xl sm:text-2xl mb-4 font-semibold;
 }
 
+.markdown h3 a div {
+  margin-left: 10px;
+  opacity: 0;
+  background: url('/img/anchor.svg') center no-repeat;
+  min-width: 20px;
+  min-height: 20px;
+  color: white;
+  display: inline-block;
+}
+
+.markdown h2:hover a div {
+  opacity: 1;
+  cursor: pointer;
+}
+
 .markdown h3::before {
   content: "";
   display: block;

lib/clientsideUtils.ts

@@ -0,0 +1,7 @@
+export const getAnchorFromText = (text: string): string => {
+  return text
+    .toString()
+    .toLowerCase()
+    .replace(/[^a-z0-9 ]/g, '')
+    .replace(/[ ]/g, '-');
+}

lib/mdx.ts

@@ -10,4 +10,6 @@ export const components = {
   Swagger: dynamic(() => import("components/Swagger")),
   pre: dynamic(() => import("components/Pre")),
   code: dynamic(() => import("components/Code")),
+  h2: dynamic(() => import("components/H2")),
+  h3: dynamic(() => import("components/H3")),
 };

pages/components/[...slug].tsx

@@ -110,7 +110,7 @@ export const getStaticProps: GetStaticProps<StaticPageProps> = async ({
       // Optionally pass remark/rehype plugins
       mdxOptions: {
         // @ts-ignore
-        remarkPlugins: [remarkSlug, remarkAutolinkHeadings],
+        remarkPlugins: [remarkSlug],
         rehypePlugins: [],
       },
       scope: data,

pages/guides/[...slug].tsx

@@ -110,7 +110,7 @@ export const getStaticProps: GetStaticProps<StaticPageProps> = async ({
       // Optionally pass remark/rehype plugins
       mdxOptions: {
         // @ts-ignore
-        remarkPlugins: [remarkSlug, remarkAutolinkHeadings],
+        remarkPlugins: [remarkSlug],
         rehypePlugins: [],
       },
       scope: data,

pages/overview/[...slug].tsx

@@ -113,7 +113,7 @@ export const getStaticProps: GetStaticProps<StaticPageProps> = async ({
       // Optionally pass remark/rehype plugins
       mdxOptions: {
         // @ts-ignore
-        remarkPlugins: [remarkSlug, remarkAutolinkHeadings],
+        remarkPlugins: [remarkSlug],
         rehypePlugins: [],
       },
       scope: data,

pages/pipeline_nodes/[...slug].tsx

@@ -110,7 +110,7 @@ export const getStaticProps: GetStaticProps<StaticPageProps> = async ({
       // Optionally pass remark/rehype plugins
       mdxOptions: {
         // @ts-ignore
-        remarkPlugins: [remarkSlug, remarkAutolinkHeadings],
+        remarkPlugins: [remarkSlug],
         rehypePlugins: [],
       },
       scope: data,

pages/usage/[...slug].tsx

@@ -110,7 +110,7 @@ export const getStaticProps: GetStaticProps<StaticPageProps> = async ({
       // Optionally pass remark/rehype plugins
       mdxOptions: {
         // @ts-ignore
-        remarkPlugins: [remarkSlug, remarkAutolinkHeadings],
+        remarkPlugins: [remarkSlug],
         rehypePlugins: [],
       },
       scope: data,