Heading anchor links

components/content/Content.tsx

@@ -20,10 +20,11 @@ import Solution from "./Solution"
 import { first } from "cypress/types/lodash"
 import remarkDirective from "remark-directive"
 import remarkDirectiveRehype from "remark-directive-rehype"
-import { CodeComponent, CodeProps, ReactMarkdownProps } from "react-markdown/lib/ast-to-react"
+import { CodeComponent, CodeProps, HeadingProps, ReactMarkdownProps } from "react-markdown/lib/ast-to-react"
 import Callout from "../Callout"
 import { Course, Section, Theme } from "lib/material"
 import Paragraph from "./Paragraph"
+import Heading from "./Heading"
 
 function reactMarkdownRemarkDirective() {
   return (tree: any) => {
@@ -56,6 +57,13 @@ const list = (sectionStr: string) => {
   return list
 }
 
+const h = (sectionStr: string, tag: string) => {
+  function h({ node, children, ...props }: HeadingProps) {
+    return <Heading content={children} section={sectionStr} tag={tag} />
+  }
+  return h
+}
+
 let solutionCount = 0
 function solution({ node, children, ...props }: ReactMarkdownProps) {
   solutionCount++
@@ -161,6 +169,9 @@ const Content: React.FC<Props> = ({ markdown, theme, course, section }) => {
           code,
           p: p(sectionStr),
           li: list(sectionStr),
+          h2: h(sectionStr, "h2"),
+          h3: h(sectionStr, "h3"),
+          h4: h(sectionStr, "h4"),
         }}
       >
         {markdown}

components/content/Heading.tsx

@@ -0,0 +1,43 @@
+import React, { useState } from "react"
+import CopyToClipboard from "react-copy-to-clipboard"
+import { FaLink } from "react-icons/fa"
+
+interface HeadingProps {
+  content: React.ReactNode
+  section: string
+  tag: string
+}
+
+const Heading: React.FC<HeadingProps> = ({ content, section, tag }) => {
+  const Tag = tag as keyof JSX.IntrinsicElements
+  const headingContent = content?.toString().replaceAll(" ", "-")
+  const [isCopied, setIsCopied] = useState(false)
+
+  const generateHeadingURL = () => {
+    const href: string = typeof window !== "undefined" ? window.location.href.split("#")[0] : ""
+    return href + "#" + headingContent ?? ""
+  }
+
+  const onCopyHandler = () => {
+    setIsCopied(true)
+    setTimeout(() => {
+      setIsCopied(false)
+    }, 1500)
+  }
+
+  return (
+    <>
+      <Tag id={headingContent} className="flex gap-3">
+        {content}
+        <CopyToClipboard text={generateHeadingURL()}>
+          <button className="text-xs align-top" onClick={onCopyHandler}>
+            <FaLink className="group-hover:text-white" />
+          </button>
+        </CopyToClipboard>
+        {isCopied && <span className="text-xs text-green-500 flex items-center">Copied to clipboard!</span>}
+      </Tag>
+    </>
+  )
+}
+
+export default Heading