chore: Upgrade remark-directive version

Author: eottabom

lib/posts.ts

@@ -63,7 +63,7 @@ export async function getPostData(id: string): Promise<PostData> {
 
   const mdxSource = await serialize(content, {
     mdxOptions: {
-      remarkPlugins: [remarkGfm, remarkDirective, remarkDirectiveTransformer],
+      remarkPlugins: [remarkDirective, remarkDirectiveTransformer, remarkGfm],
       rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings, rehypePrism],
     },
     scope: data,

lib/remarkDirectiveTransformer.ts

@@ -6,12 +6,12 @@ import { Node } from 'unist';
 const remarkDirectiveTransformer: Plugin = () => {
   return (tree: Node) => {
     visit(tree, (node: Node) => {
-      if ((node as ContainerDirective).type === 'containerDirective') {
-        const container = node as ContainerDirective;
+      if ((node as unknown as ContainerDirective).type === 'containerDirective') {
+        const container = node as unknown as ContainerDirective;
 
         if (!container.data) container.data = {};
-        container.data.hName = container.name;
-        container.data.hProperties = container.attributes || {};
+        (container.data as any).hName = container.name;
+        (container.data as any).hProperties = container.attributes || {};
       }
     });
   };

package.json

@@ -22,7 +22,7 @@
     "rehype-prism-plus": "^1.6.0",
     "prism-themes": "^1.9.0",
     "rehype-slug": "5.0.1",
-    "remark-directive": "2.0.1",
+    "remark-directive": "^3.0.0",
     "remark-gfm": "3.0.1",
     "@fortawesome/fontawesome-free": "^6.5.0"
   },

pages/post/[id].tsx

@@ -14,6 +14,7 @@ import { useEffect, useRef, useState } from 'react';
 import Link from 'next/link';
 import { List } from 'lucide-react';
 import { ArrowDownCircle } from 'lucide-react';
+import { Tabs, Tab } from "../../components/Tabs";
 
 type PostData = {
   id: string;
@@ -65,6 +66,8 @@ export default function Post({ postData }: InferGetStaticPropsType<typeof getSta
     BlueText,
     RedText,
     GreenText,
+    Tabs,
+    Tab
   };
 
   return (