renttrent/peroxy_site
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add custom directives

Browse Source
This commit is contained in:
Lukas Moungos
2023-02-11 21:00:28 +01:00
parent 4902006130
commit aa3bb66d5e
7 changed files with 110 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
components/ImageSlide.tsx Normal file
View File

@@ -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>
);
};

30
components/StyledMarkdown.tsx
View File

@@ -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>

9
components/Youtube.tsx Normal file
View File

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

13
content/projects/ConceptArt and Game Design.md
View File

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

0
content/projects/RE:Chess.md → content/projects/RE_Chess.md
View File

3
content/projects/SpaceMadness.md
View File

@@ -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

47
styles/globals.css
View File

@@ -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);
}