From aa3bb66d5ebdecd4f6c70d948dbba7853c865abb Mon Sep 17 00:00:00 2001 From: Lukas Moungos Date: Sat, 11 Feb 2023 21:00:28 +0100 Subject: [PATCH] add custom directives --- components/ImageSlide.tsx | 41 ++++++++++++++++ components/StyledMarkdown.tsx | 30 ++++-------- components/Youtube.tsx | 9 ++++ .../projects/ConceptArt and Game Design.md | 13 ++--- content/projects/{RE:Chess.md => RE_Chess.md} | 0 content/projects/SpaceMadness.md | 3 +- styles/globals.css | 47 +++++++++++++++++++ 7 files changed, 110 insertions(+), 33 deletions(-) create mode 100644 components/ImageSlide.tsx create mode 100644 components/Youtube.tsx rename content/projects/{RE:Chess.md => RE_Chess.md} (100%) diff --git a/components/ImageSlide.tsx b/components/ImageSlide.tsx new file mode 100644 index 0000000..397f59f --- /dev/null +++ b/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( +
+ + + {children.map((slide : any, index : any) => { + return ( +
+ {index === current && ( + travel image + )} +
+ ); + })} +
+ ); +}; \ No newline at end of file diff --git a/components/StyledMarkdown.tsx b/components/StyledMarkdown.tsx index 25a412f..112d3b8 100644 --- a/components/StyledMarkdown.tsx +++ b/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 ( - - ); - } - } catch (e) { - //console.log(e); - } - - return ; - }, - h1: (props: any) => { const arr = props.children; let heading = ""; @@ -199,6 +183,10 @@ export const StyledMarkdown = ({ html }: { html: string }) => { ); }, + //custom directives + //@ts-ignore + 'yt': YouTubeVideo, + 'img-slide': ImageSlide, }; return ( @@ -216,7 +204,7 @@ export const StyledMarkdown = ({ html }: { html: string }) => { diff --git a/components/Youtube.tsx b/components/Youtube.tsx new file mode 100644 index 0000000..2940674 --- /dev/null +++ b/components/Youtube.tsx @@ -0,0 +1,9 @@ +export const YouTubeVideo = ({id, children} : any) => ( + +) \ No newline at end of file diff --git a/content/projects/ConceptArt and Game Design.md b/content/projects/ConceptArt and Game Design.md index 8e624d7..ef98a89 100644 --- a/content/projects/ConceptArt and Game Design.md +++ b/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) diff --git a/content/projects/RE:Chess.md b/content/projects/RE_Chess.md similarity index 100% rename from content/projects/RE:Chess.md rename to content/projects/RE_Chess.md diff --git a/content/projects/SpaceMadness.md b/content/projects/SpaceMadness.md index 3cc19e2..f762b61 100644 --- a/content/projects/SpaceMadness.md +++ b/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 diff --git a/styles/globals.css b/styles/globals.css index 9408e3e..4d5ab0d 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -47,4 +47,51 @@ 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); } \ No newline at end of file