add custom directives

components/ImageSlide.tsx

@@ -0,0 +1,41 @@
+import React, {Children, useState} from "react";
+import {AiFillLeftCircle} from 'react-icons/ai';
+
+
+export const ImageSlide = ({children}:any) => {
+    const [current, setCurrent] = useState(0);
+    const length = children.length;
+    
+    const array = Children.toArray(children);
+    console.log(array)
+    
+    const nextSlide = () => {
+        setCurrent(current === length - 1 ? 0 : current + 2);
+    };
+
+    const prevSlide = () => {
+        setCurrent(current === 0 ? length - 1 : current - 2);
+    };
+    if(children.length <= 0){
+        return null;
+    };
+
+    return(
+      <section className='slider'>
+        <AiFillLeftCircle className='left-arrow' onClick={prevSlide} />
+        <AiFillLeftCircle className='right-arrow' onClick={nextSlide} />
+        {children.map((slide : any, index : any) => {
+          return (
+            <div
+              className={index === current ? 'slide active' : 'slide'}
+              key={index}
+            >
+              {index === current && (
+                <img src={slide.props.children[0]} alt='travel image' className='image' />
+              )}
+            </div>
+          );
+        })}
+      </section>
+    );
+};

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>

components/Youtube.tsx

@@ -0,0 +1,9 @@
+export const YouTubeVideo = ({id, children} : any) => (
+    <iframe
+      src={'https://www.youtube.com/embed/' + id}
+      width="640"
+      height="360"
+    >
+      {children}
+    </iframe>
+)