merge

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>
+)

content/projects/ConceptArt and Game Design.md

@@ -12,20 +12,13 @@ From concept drawing to modeling to game engine. A neo-noir Game Concept inspire
 ### Sketches
 
 #### Character Concept
-![](https://wiki.tum.de/download/attachments/1030785260/Character%20Design%201%20rework.png?version=1&modificationDate=1642430318357&api=v2)
-![](https://wiki.tum.de/download/attachments/1030785260/Character%20Design%202.png?version=1&modificationDate=1642430320190&api=v2)
+::img-slide[https://wiki.tum.de/download/attachments/1030785260/Character%20Design%201%20rework.png?version=1&modificationDate=1642430318357&api=v2 https://wiki.tum.de/download/attachments/1030785260/Character%20Design%202.png?version=1&modificationDate=1642430320190&api=v2]{}
 
 #### Environment Concept
-![](https://wiki.tum.de/download/attachments/1030785260/Env-Design%20Skizze.png?version=1&modificationDate=1642430334223&api=v2)
-![](https://wiki.tum.de/download/attachments/1030785260/Env-Design%20Final.png?version=1&modificationDate=1642430333137&api=v2)
+::img-slide[https://wiki.tum.de/download/attachments/1030785260/Env-Design%20Skizze.png?version=1&modificationDate=1642430334223&api=v2 https://wiki.tum.de/download/attachments/1030785260/Env-Design%20Final.png?version=1&modificationDate=1642430333137&api=v2]{}
 
 ### Models
-![](https://docs.peroxy.dev/uploads/251bda2e-05e2-4fe4-828c-e3a747e5c9e8.png)
-![](https://docs.peroxy.dev/uploads/7a9e94b3-cb00-43bb-85ad-7fdf25e047fd.png)
-![](https://docs.peroxy.dev/uploads/b8c07d01-11d6-4771-af21-4f208e443216.png)
-![](https://docs.peroxy.dev/uploads/99cec6be-6239-46f3-a350-9ef9bfb60932.png)
-![](https://docs.peroxy.dev/uploads/a3f69410-3e32-41a0-9f9a-c87f35d4cbfa.png)
-![](https://docs.peroxy.dev/uploads/8b4cf730-48e4-422c-8cf5-590efd3e79b7.png)
+::img-slide[https://docs.peroxy.dev/uploads/251bda2e-05e2-4fe4-828c-e3a747e5c9e8.png https://docs.peroxy.dev/uploads/7a9e94b3-cb00-43bb-85ad-7fdf25e047fd.png https://docs.peroxy.dev/uploads/b8c07d01-11d6-4771-af21-4f208e443216.png https://docs.peroxy.dev/uploads/99cec6be-6239-46f3-a350-9ef9bfb60932.png https://docs.peroxy.dev/uploads/a3f69410-3e32-41a0-9f9a-c87f35d4cbfa.png https://docs.peroxy.dev/uploads/8b4cf730-48e4-422c-8cf5-590efd3e79b7.png]{}
 
 ### Final Render
 ![](https://wiki.tum.de/download/attachments/1030785260/render_third.png?version=1&modificationDate=1642430351370&api=v2)

content/projects/SpaceMadness.md

@@ -36,8 +36,7 @@ A Challenging mobile endless space shooter game.
 
 
 ### Gameplay Video
-
-https://www.youtube.com/watch?v=1qquNEJrA10
+::yt[Video of a cat in a box]{#1qquNEJrA10}
 
 ## Links
 

styles/globals.css

@@ -48,3 +48,50 @@ h4 > a:hover::before {
 div > code, pre > code {
   @apply p-0 m-0 !important
 }
+
+.slider {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.image {
+  width: 1000px;
+  height: 600px;
+  border-radius: 10px;
+}
+
+.right-arrow {
+  position: absolute;
+  top: 50%;
+  right: 0%;
+  font-size: 2rem;
+  rotate: 180deg;
+  color: #bdbdbd;
+  z-index: 10;
+  cursor: pointer;
+  user-select: none;
+}
+
+.left-arrow {
+  position: absolute;
+  top: 50%;
+  left: -5%;
+  font-size: 2rem;
+  color: #bdbdbd;
+  z-index: 10;
+  cursor: pointer;
+  user-select: none;
+}
+
+.slide {
+  opacity: 0;
+  transition-duration: 0.5s ease;
+}
+
+.slide.active {
+  opacity: 1;
+  transition-duration: 0.5s;
+  transform: scale(0.8);
+}