add custom directives

components/StyledMarkdown.tsx

@@ -17,7 +17,10 @@ import smartypants from "remark-smartypants";
 import rehypeRaw from "rehype-raw";
 import emoji from "remark-emoji";
 import oembed from "@agentofuser/remark-oembed";
-import YouTube from "react-youtube";
+import remarkDirective from 'remark-directive'
+import remarkDirectiveRehype from 'remark-directive-rehype'
+import { YouTubeVideo } from "./Youtube";
+import { ImageSlide } from "./ImageSlide";
 //import rehypeSanitize from "rehype-sanitize";
 
 SyntaxHighlighter.registerLanguage("tsx", tsx);
@@ -30,25 +33,6 @@ SyntaxHighlighter.registerLanguage("json", json);
 
 export const StyledMarkdown = ({ html }: { html: string }) => {
   const MarkdownComponents: Components = {
-    
-    a: (props : any) => {
-      try {
-        const url = new URL(props.href);
-        if (
-          url.origin.includes("youtube.com") &&
-          props.node.position.start.column === 1
-        ){
-          return (
-            <YouTube videoId={url.searchParams.get("v") || "dQw4w9WgXcQ"} />
-          );
-        }
-      } catch (e) {
-        //console.log(e);
-      }
-
-      return <a {...props} />;
-    },
-
     h1: (props: any) => {
       const arr = props.children;
       let heading = "";
@@ -199,6 +183,10 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
         <code className={className} {...props} />
       );
     },
+    //custom directives
+    //@ts-ignore
+    'yt': YouTubeVideo, 
+    'img-slide': ImageSlide,
   };
 
   return (
@@ -216,7 +204,7 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
       <ReactMarkdown
         components={MarkdownComponents}
         rehypePlugins={[rehypeRaw]}
-        remarkPlugins={[oembed, remarkGfm, remarkTypograf, smartypants, emoji]}
+        remarkPlugins={[remarkDirective, remarkDirectiveRehype, oembed, remarkGfm, smartypants, emoji, remarkTypograf]}
         children={html}
       />
     </div>