diff --git a/components/H2.tsx b/components/H2.tsx new file mode 100644 index 000000000..0fb986815 --- /dev/null +++ b/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 ( +

+ { children } +
+

+ ); +} diff --git a/components/H3.tsx b/components/H3.tsx new file mode 100644 index 000000000..33c904ac7 --- /dev/null +++ b/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 ( +

+ { children } +
+

+ ); +} diff --git a/components/markdown.module.css b/components/markdown.module.css index aed44715a..044ff4f26 100644 --- a/components/markdown.module.css +++ b/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; diff --git a/lib/clientsideUtils.ts b/lib/clientsideUtils.ts new file mode 100644 index 000000000..e0217d2d3 --- /dev/null +++ b/lib/clientsideUtils.ts @@ -0,0 +1,7 @@ +export const getAnchorFromText = (text: string): string => { + return text + .toString() + .toLowerCase() + .replace(/[^a-z0-9 ]/g, '') + .replace(/[ ]/g, '-'); +} diff --git a/lib/mdx.ts b/lib/mdx.ts index 3c3baccef..780bba15e 100644 --- a/lib/mdx.ts +++ b/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")), }; diff --git a/pages/components/[...slug].tsx b/pages/components/[...slug].tsx index ba8a7c8ad..48cbc185e 100644 --- a/pages/components/[...slug].tsx +++ b/pages/components/[...slug].tsx @@ -113,7 +113,7 @@ export const getStaticProps: GetStaticProps = async ({ // Optionally pass remark/rehype plugins mdxOptions: { // @ts-ignore - remarkPlugins: [remarkSlug, remarkAutolinkHeadings], + remarkPlugins: [remarkSlug], rehypePlugins: [], }, scope: data, diff --git a/pages/guides/[...slug].tsx b/pages/guides/[...slug].tsx index cb4a15024..42f36b6f6 100644 --- a/pages/guides/[...slug].tsx +++ b/pages/guides/[...slug].tsx @@ -113,7 +113,7 @@ export const getStaticProps: GetStaticProps = async ({ // Optionally pass remark/rehype plugins mdxOptions: { // @ts-ignore - remarkPlugins: [remarkSlug, remarkAutolinkHeadings], + remarkPlugins: [remarkSlug], rehypePlugins: [], }, scope: data, diff --git a/pages/overview/[...slug].tsx b/pages/overview/[...slug].tsx index 1ff1df90d..2a0ff347a 100644 --- a/pages/overview/[...slug].tsx +++ b/pages/overview/[...slug].tsx @@ -115,7 +115,7 @@ export const getStaticProps: GetStaticProps = async ({ // Optionally pass remark/rehype plugins mdxOptions: { // @ts-ignore - remarkPlugins: [remarkSlug, remarkAutolinkHeadings], + remarkPlugins: [remarkSlug], rehypePlugins: [], }, scope: data, diff --git a/pages/pipeline_nodes/[...slug].tsx b/pages/pipeline_nodes/[...slug].tsx index ed4873c0b..1dbc51967 100644 --- a/pages/pipeline_nodes/[...slug].tsx +++ b/pages/pipeline_nodes/[...slug].tsx @@ -113,7 +113,7 @@ export const getStaticProps: GetStaticProps = async ({ // Optionally pass remark/rehype plugins mdxOptions: { // @ts-ignore - remarkPlugins: [remarkSlug, remarkAutolinkHeadings], + remarkPlugins: [remarkSlug], rehypePlugins: [], }, scope: data, diff --git a/pages/usage/[...slug].tsx b/pages/usage/[...slug].tsx index cfc5c8e53..1a7452801 100644 --- a/pages/usage/[...slug].tsx +++ b/pages/usage/[...slug].tsx @@ -113,7 +113,7 @@ export const getStaticProps: GetStaticProps = async ({ // Optionally pass remark/rehype plugins mdxOptions: { // @ts-ignore - remarkPlugins: [remarkSlug, remarkAutolinkHeadings], + remarkPlugins: [remarkSlug], rehypePlugins: [], }, scope: data, diff --git a/public/img/anchor.svg b/public/img/anchor.svg new file mode 100644 index 000000000..45fc3f1b7 --- /dev/null +++ b/public/img/anchor.svg @@ -0,0 +1 @@ + \ No newline at end of file