Merge pull request #194 from czepluch/fix/links-in-section-headers

Add anchor links to blog post section headers

Author: kuzdogan

package.json

@@ -38,6 +38,7 @@
     "react-icons": "^4.9.0",
     "react-leaflet": "^4.2.1",
     "react-syntax-highlighter": "^15.5.0",
+    "rehype-slug": "^6.0.0",
     "remove-markdown": "^0.5.0",
     "typescript": "4.9.4"
   },

src/components/BlogPost.tsx

@@ -1,5 +1,6 @@
 import { Box, type BoxProps } from '@chakra-ui/react'
 import ReactMarkdown from 'react-markdown'
+import rehypeSlug from 'rehype-slug'
 import gfm from 'remark-gfm'
 import { MDStyles } from '@/styles'
 
@@ -9,7 +10,11 @@ interface BlogPostProps extends BoxProps {
 export const BlogPost: React.FC<BlogPostProps> = ({ content, ...boxProps }) => (
   <>
     <Box as="article" {...boxProps}>
-      <ReactMarkdown components={MDStyles} remarkPlugins={[gfm]}>
+      <ReactMarkdown
+        components={MDStyles}
+        remarkPlugins={[gfm]}
+        rehypePlugins={[rehypeSlug]}
+      >
         {content}
       </ReactMarkdown>
     </Box>

src/components/HeadingWithAnchor.tsx

@@ -0,0 +1,34 @@
+import {
+  Heading,
+  type HeadingProps,
+  Link as ChakraLink,
+} from '@chakra-ui/react'
+import { LinkIcon } from '@chakra-ui/icons'
+
+interface HeadingWithAnchorProps extends HeadingProps {
+  id?: string
+}
+
+export const HeadingWithAnchor: React.FC<HeadingWithAnchorProps> = ({
+  children,
+  id,
+  ...props
+}) => (
+  <Heading id={id} role="group" display="flex" alignItems="center" {...props}>
+    {children}
+    {id && (
+      <ChakraLink
+        href={`#${id}`}
+        aria-label="Link to this section"
+        ml={2}
+        opacity={0}
+        _groupHover={{ opacity: 1 }}
+        transition="opacity 0.1s"
+        color="secondary"
+        display="inline"
+      >
+        <LinkIcon boxSize="0.5em" />
+      </ChakraLink>
+    )}
+  </Heading>
+)

src/components/index.ts

@@ -17,6 +17,7 @@ export * from './EventPreview'
 export * from './Fonts'
 export * from './Footer'
 export * from './Header'
+export * from './HeadingWithAnchor'
 export * from './Hero'
 export * from './UseCaseCard'
 export * from './Link'

src/pages/[event].tsx

@@ -1,5 +1,6 @@
 import fs from 'fs'
 import matter from 'gray-matter'
+import rehypeSlug from 'rehype-slug'
 import gfm from 'remark-gfm'
 import { ParsedUrlQuery } from 'querystring'
 import ReactMarkdown from 'react-markdown'
@@ -145,6 +146,7 @@ const EventPage: React.FC<EventPost> = ({ frontmatter, content }) => {
           <ReactMarkdown
             components={EventMDStyles}
             remarkPlugins={[gfm]}
+            rehypePlugins={[rehypeSlug]}
             skipHtml
           >
             {content}

src/styles/EventMDStyles.tsx

@@ -1,10 +1,10 @@
-import { Heading } from '@chakra-ui/react'
+import { HeadingWithAnchor } from '@/components'
 import { MDStyles } from '@/styles'
 
 export const EventMDStyles = {
   ...MDStyles,
   h2: ({ children, id }: any) => (
-    <Heading
+    <HeadingWithAnchor
       as="h2"
       id={id}
       textStyle="h2"
@@ -14,17 +14,17 @@ export const EventMDStyles = {
       textAlign="center"
     >
       {children}
-    </Heading>
+    </HeadingWithAnchor>
   ),
   h3: ({ children, id }: any) => (
-    <Heading
+    <HeadingWithAnchor
       as="h3"
       id={id}
       textStyle="h3"
       color="text"
       my={{ base: 4, md: 6 }}
     >
       {children}
-    </Heading>
+    </HeadingWithAnchor>
   ),
 }

src/styles/MDStyles.tsx

@@ -1,14 +1,5 @@
-import {
-  Box,
-  Divider,
-  Flex,
-  Heading,
-  Image,
-  Stack,
-  Table,
-  Text,
-} from '@chakra-ui/react'
-import { Code, Link } from '@/components'
+import { Box, Divider, Flex, Image, Stack, Table, Text } from '@chakra-ui/react'
+import { Code, HeadingWithAnchor, Link } from '@/components'
 // TODO: Debug tables
 
 export const MDStyles = {
@@ -23,7 +14,7 @@ export const MDStyles = {
     </Link>
   ),
   h2: ({ children, id }: any) => (
-    <Heading
+    <HeadingWithAnchor
       as="h2"
       id={id}
       textStyle="h2"
@@ -33,10 +24,10 @@ export const MDStyles = {
       mb={{ base: 4, md: 6 }}
     >
       {children}
-    </Heading>
+    </HeadingWithAnchor>
   ),
   h3: ({ children, id }: any) => (
-    <Heading
+    <HeadingWithAnchor
       as="h3"
       id={id}
       textStyle="h3"
@@ -46,10 +37,10 @@ export const MDStyles = {
       mb={{ base: 4, md: 6 }}
     >
       {children}
-    </Heading>
+    </HeadingWithAnchor>
   ),
   h4: ({ children, id }: any) => (
-    <Heading
+    <HeadingWithAnchor
       as="h4"
       id={id}
       textStyle="h4"
@@ -59,31 +50,33 @@ export const MDStyles = {
       mb={{ base: 4, md: 6 }}
     >
       {children}
-    </Heading>
+    </HeadingWithAnchor>
   ),
-  h5: ({ children }: any) => (
-    <Heading
+  h5: ({ children, id }: any) => (
+    <HeadingWithAnchor
       as="h5"
+      id={id}
       textStyle="h5-mono"
       fontSize="xl"
       color="text"
       mt={{ base: 6, md: 8 }}
       mb={{ base: 2, md: 4 }}
     >
       {children}
-    </Heading>
+    </HeadingWithAnchor>
   ),
-  h6: ({ children }: any) => (
-    <Heading
+  h6: ({ children, id }: any) => (
+    <HeadingWithAnchor
       as="h6"
+      id={id}
       textStyle="h6-mono"
       fontSize="lg"
       color="text"
       mt={{ base: 4, md: 6 }}
       mb={{ base: 2, md: 4 }}
     >
       {children}
-    </Heading>
+    </HeadingWithAnchor>
   ),
   pre: ({ children }: any) => (
     <Stack mb={5}>

yarn.lock

@@ -649,6 +649,13 @@
   dependencies:
     "@types/unist" "^2"
 
+"@types/hast@^3.0.0":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/hast/-/hast-3.0.4.tgz#1d6b39993b82cea6ad783945b0508c25903e15aa"
+  integrity sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==
+  dependencies:
+    "@types/unist" "*"
+
 "@types/js-yaml@^4.0.5":
   version "4.0.9"
   resolved "https://registry.npmjs.org/@types/js-yaml/-/js-yaml-4.0.9.tgz"
@@ -760,6 +767,11 @@
   resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.26.0.tgz"
   integrity sha512-WFHp9YUJQ6CKshqoC37iOlHnQSmxNc795UhB26CyBBttrN9svdIrUjl/NjnNmfcwtncN0h/0PPAFWv9ovP8mLA==
 
+"@types/unist@*", "@types/unist@^3.0.0":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/unist/-/unist-3.0.3.tgz#acaab0f919ce69cce629c2d4ed2eb4adc1b6c20c"
+  integrity sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==
+
 "@types/unist@^2", "@types/unist@^2.0.0":
   version "2.0.11"
   resolved "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz"
@@ -2123,6 +2135,11 @@ get-tsconfig@^4.10.0:
   dependencies:
     resolve-pkg-maps "^1.0.0"
 
+github-slugger@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/github-slugger/-/github-slugger-2.0.0.tgz#52cf2f9279a21eb6c59dd385b410f0c0adda8f1a"
+  integrity sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==
+
 glob-parent@^5.1.2:
   version "5.1.2"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
@@ -2269,6 +2286,13 @@ hast-util-from-parse5@^7.0.0:
     vfile-location "^4.0.0"
     web-namespaces "^2.0.0"
 
+hast-util-heading-rank@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/hast-util-heading-rank/-/hast-util-heading-rank-3.0.0.tgz#2d5c6f2807a7af5c45f74e623498dd6054d2aba8"
+  integrity sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==
+  dependencies:
+    "@types/hast" "^3.0.0"
+
 hast-util-parse-selector@^2.0.0:
   version "2.2.5"
   resolved "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-2.2.5.tgz"
@@ -2334,6 +2358,13 @@ hast-util-to-string@^2.0.0:
   dependencies:
     "@types/hast" "^2.0.0"
 
+hast-util-to-string@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/hast-util-to-string/-/hast-util-to-string-3.0.1.tgz#a4f15e682849326dd211c97129c94b0c3e76527c"
+  integrity sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==
+  dependencies:
+    "@types/hast" "^3.0.0"
+
 hast-util-whitespace@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-2.0.1.tgz"
@@ -3907,6 +3938,17 @@ rehype-prism-plus@1.6.3:
     unist-util-filter "^4.0.0"
     unist-util-visit "^4.0.0"
 
+rehype-slug@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/rehype-slug/-/rehype-slug-6.0.0.tgz#1d21cf7fc8a83ef874d873c15e6adaee6344eaf1"
+  integrity sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==
+  dependencies:
+    "@types/hast" "^3.0.0"
+    github-slugger "^2.0.0"
+    hast-util-heading-rank "^3.0.0"
+    hast-util-to-string "^3.0.0"
+    unist-util-visit "^5.0.0"
+
 rehype-stringify@^9.0.0:
   version "9.0.4"
   resolved "https://registry.npmjs.org/rehype-stringify/-/rehype-stringify-9.0.4.tgz"
@@ -4520,6 +4562,13 @@ unist-util-is@^5.0.0:
   dependencies:
     "@types/unist" "^2.0.0"
 
+unist-util-is@^6.0.0:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-6.0.1.tgz#d0a3f86f2dd0db7acd7d8c2478080b5c67f9c6a9"
+  integrity sha512-LsiILbtBETkDz8I9p1dQ0uyRUWuaQzd/cuEeS1hoRSyW5E5XGmTzlwY1OrNzzakGowI9Dr/I8HVaw4hTtnxy8g==
+  dependencies:
+    "@types/unist" "^3.0.0"
+
 unist-util-position@^4.0.0:
   version "4.0.4"
   resolved "https://registry.npmjs.org/unist-util-position/-/unist-util-position-4.0.4.tgz"
@@ -4542,6 +4591,14 @@ unist-util-visit-parents@^5.0.0, unist-util-visit-parents@^5.1.1:
     "@types/unist" "^2.0.0"
     unist-util-is "^5.0.0"
 
+unist-util-visit-parents@^6.0.0:
+  version "6.0.2"
+  resolved "https://registry.yarnpkg.com/unist-util-visit-parents/-/unist-util-visit-parents-6.0.2.tgz#777df7fb98652ce16b4b7cd999d0a1a40efa3a02"
+  integrity sha512-goh1s1TBrqSqukSc8wrjwWhL0hiJxgA8m4kFxGlQ+8FYQ3C/m11FcTs4YYem7V664AhHVvgoQLk890Ssdsr2IQ==
+  dependencies:
+    "@types/unist" "^3.0.0"
+    unist-util-is "^6.0.0"
+
 unist-util-visit@^4.0.0:
   version "4.1.2"
   resolved "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-4.1.2.tgz"
@@ -4551,6 +4608,15 @@ unist-util-visit@^4.0.0:
     unist-util-is "^5.0.0"
     unist-util-visit-parents "^5.1.1"
 
+unist-util-visit@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-5.1.0.tgz#9a2a28b0aa76a15e0da70a08a5863a2f060e2468"
+  integrity sha512-m+vIdyeCOpdr/QeQCu2EzxX/ohgS8KbnPDgFni4dQsfSCtpz8UqDyY5GjRru8PDKuYn7Fq19j1CQ+nJSsGKOzg==
+  dependencies:
+    "@types/unist" "^3.0.0"
+    unist-util-is "^6.0.0"
+    unist-util-visit-parents "^6.0.0"
+
 unrs-resolver@^1.6.2:
   version "1.11.1"
   resolved "https://registry.npmjs.org/unrs-resolver/-/unrs-resolver-1.11.1.tgz"