✨ Added Links to Post Headings (#93)

 Added rehype plugin to add ids to headings, and Added heading with links like chakra website

_posts/use-next-link-with-chakra-ui.mdx

@@ -247,7 +247,7 @@ function IndexPage() {
 ```
 
 At the time of writing this post, Chakra has just included their own next integration for Link component to support Next v13 updates. View their documentatiom on
-using the same: [Chakra UI with Next.js Link](https://chakra-ui.com/getting-started/nextjs-guide#chakra-ui-with-nextjs-link). To note this new component integration has some open issues, so please read carefuly before using it. View the issue [ESM Import Error in chakra next link](https://github.com/chakra-ui/chakra-ui/issues/7363)
+using the same: [Chakra UI with Next.js Link](https://v2.chakra-ui.com/getting-started/nextjs-app-guide#styling-nextjs-link). To note this new component integration has some open issues, so please read carefully before using it. View the issue [ESM Import Error in chakra next link](https://github.com/chakra-ui/chakra-ui/issues/7363)
 
 ## Sandbox Links
 

components/chakra-link.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, Ref } from 'react';
-import { Link, LinkProps, useColorModeValue } from '@chakra-ui/react';
+import { Heading, HeadingProps, Link, LinkProps, useColorModeValue } from '@chakra-ui/react';
 
 /**
  * Refer to sidebar-link.tsx of chakra-ui
@@ -46,4 +46,28 @@ const ChakraMDXLink = ({ href, ...rest }: LinkProps): ReturnType<typeof Link> =>
     );
 };
 
-export { ChakraLink, ChakraMDXLink };
+type ChakraHeadingLinkProps = {
+    id: string;
+    children: React.ReactNode;
+} & HeadingProps;
+
+const ChakraHeadingLink = ({ id, as = 'h2', children, ...props }: ChakraHeadingLinkProps) => {
+    return (
+        <>
+            <Heading {...props} id={id} role="group" as={as}>
+                {children}
+                <ChakraMDXLink
+                    ml={2}
+                    href={`#${id}`}
+                    aria-current={undefined}
+                    opacity={0}
+                    _focus={{ opacity: 1, boxShadow: 'outline' }}
+                    _groupHover={{ opacity: 1 }}>
+                    #
+                </ChakraMDXLink>
+            </Heading>
+        </>
+    );
+};
+
+export { ChakraLink, ChakraMDXLink, ChakraHeadingLink };

components/mdx/components/index.tsx

@@ -1,6 +1,6 @@
 import { Alert, Box, Heading, chakra, Center, Code as ChakraCode } from '@chakra-ui/react';
 import { Code, preToCodeBlock } from './code';
-import { ChakraMDXLink } from 'components/chakra-link';
+import { ChakraHeadingLink, ChakraMDXLink } from 'components/chakra-link';
 import { ChakraNextImage } from 'components/chakra-next-image';
 import { ReactElement } from 'react';
 import { QuizHighlight } from './quiz-highlight';
@@ -34,10 +34,10 @@ const TData = (props: object): ReactElement => (
 const Pre = (props) => <chakra.div my="2em" borderRadius="sm" {...props} />;
 
 const MDXComponents = {
-    h1: (props): ReactElement => <Heading as="h2" {...props} />,
-    h2: (props): ReactElement => <Heading {...props} />,
-    h3: (props): ReactElement => <Heading as="h3" {...props} />,
-    h4: (props): ReactElement => <Heading as="h4" {...props} />,
+    h1: (props): ReactElement => <Heading {...props} />,
+    h2: (props) => <ChakraHeadingLink {...props} />,
+    h3: (props) => <ChakraHeadingLink as="h3" {...props} />,
+    h4: (props) => <ChakraHeadingLink as="h4" {...props} />,
     strong: (props): ReactElement => <Box as="strong" fontWeight="extrabold" {...props} />,
     pre: (preProps) => {
         // Refer Kent C Dodds Implementation below

package.json

@@ -36,6 +36,7 @@
     "react-dom": "^18.2.0",
     "react-icons": "^5.2.1",
     "react-vertical-timeline-component": "^3.3.3",
+    "rehype-slug": "^6.0.0",
     "remark": "11.0.2",
     "remark-html": "10.0.0",
     "remark-mdx-code-meta": "^2.0.0",

pages/blog/[slug].tsx

@@ -12,6 +12,7 @@ import { getBasePath, getRandom5digit } from 'utils/utils';
 import { getPlaiceholder } from 'plaiceholder';
 import { PlaiceHolderProps } from 'types/cover';
 import remarkMdxCodeMeta from 'remark-mdx-code-meta';
+import rehypeSlug from 'rehype-slug';
 
 type PostProps = {
     post: PostType;
@@ -106,7 +107,8 @@ export const getStaticProps: GetStaticProps = async ({ params }: Params) => {
 
     const mdxSource = await serialize(post.content, {
         mdxOptions: {
-            remarkPlugins: [remarkMdxCodeMeta]
+            remarkPlugins: [remarkMdxCodeMeta],
+            rehypePlugins: [rehypeSlug]
         }
     });