Merge branch 'dev'

add Blur
kollors
2023-02-24 13:17:16 +01:00 · 2023-02-24 13:16:50 +01:00 · 2023-02-15 18:46:29 +01:00 · 2023-02-15 18:29:52 +01:00 · 2023-02-15 17:57:47 +01:00 · 2023-02-15 16:43:14 +01:00
19 changed files with 2860 additions and 1927 deletions
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,2 @@
+{
+}
--- a/components/ImageSlide.tsx
+++ b/components/ImageSlide.tsx
@@ -0,0 +1,41 @@
+import React, { useState } from "react";
+import { AiFillLeftCircle } from "react-icons/ai";
+
+export const ImageSlide = ({ children }: any) => {
+  const [current, setCurrent] = useState(0);
+  const length = children.length;
+
+  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>
+  );
+};
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -13,7 +13,7 @@ export const Navbar = () => {
  const [showMenu, setShowMenu] = useState(false);

  return (
-    <nav className="py-4 xl:px-10 px-4 flex flex-row justify-between sticky top-0 bg-slate-100 dark:bg-gradient-dark z-50 border-b dark:border-gradient-light border-gray-200">
+    <nav className="py-4 xl:px-10 px-4 flex flex-row justify-between sticky top-0 z-50 bg-gradient-to-b from-black/50 to-black/30">
      <Link
        href="/"
        id="logo"
@@ -28,7 +28,7 @@ export const Navbar = () => {
      <div className="hidden xl:flex flex-row gap-10 items-center font-medium font-mono">
        {links.map(({ name, href }) => (
          <Link href={href} key={name}>
-            <button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out text-white">
+            <button className="px-10 py-1 rounded-sm bg-gradient-to-r from-indigo-500/30 to-fuchsia-500/20 hover:bg-primary/50 transition-all duration-150 ease-out text-white">
              {name}
            </button>
          </Link>
--- a/components/R3Background.tsx
+++ b/components/R3Background.tsx
@@ -1,8 +1,8 @@
-import { useRef, useMemo } from 'react'
-import { Canvas, useFrame } from '@react-three/fiber'
+import { useRef, useMemo } from "react";
+import { Canvas, useFrame } from "@react-three/fiber";
 import { BufferGeometry, Material, MathUtils, Mesh } from "three";
-import { vertexShader } from './Shaders/Background/vertex';
-import { fragmentShader } from './Shaders/Background/fragment';
+import { vertexShader } from "./Shaders/Background/vertex";
+import { fragmentShader } from "./Shaders/Background/fragment";

 const Fragment = () => {
  // This reference will give us direct access to the mesh
@@ -21,12 +21,13 @@ const Fragment = () => {
  );

  useFrame((state) => {
-    if(!meshRef.current){
-        return;
+    if (!meshRef.current) {
+      return;
    }
    const { clock } = state;
    //@ts-ignore
-    meshRef.current.material.uniforms.u_time.value = 0.4 * clock.getElapsedTime()/5;
+    meshRef.current.material.uniforms.u_time.value =
+      (0.4 * clock.getElapsedTime()) / 5;
    //@ts-ignore
    meshRef.current.material.uniforms.u_intensity.value = MathUtils.lerp(
      //@ts-ignore
@@ -37,8 +38,13 @@ const Fragment = () => {
  });

  return (
-    <mesh ref={meshRef} position={[0, 0, 0]} rotation={[-Math.PI/17, Math.PI/20, 0]} scale={1.5}>
-      <planeGeometry args={[20, 20, 200, 200]} />
+    <mesh
+      ref={meshRef}
+      position={[0, 0, 0]}
+      rotation={[-Math.PI / 17, Math.PI / 20, 0]}
+      scale={1.5}
+    >
+      <planeGeometry args={[30, 30, 200, 200]} />
      <shaderMaterial
        fragmentShader={fragmentShader}
        vertexShader={vertexShader}
@@ -49,13 +55,12 @@ const Fragment = () => {
  );
 };

-
 export const R3Gradient = () => {
-    return (
-    <div className='-z-40 h-screen w-screen fixed bg-black opacity-60'>
+  return (
+    <div className="-z-40 h-screen w-screen fixed bg-black opacity-60 top-0 left-0 blur">
      <Canvas camera={{ position: [0.0, 0.0, 5.0] }}>
        <Fragment />
      </Canvas>
    </div>
-    );
+  );
 };
--- a/components/Shaders/Background/fragment.tsx
+++ b/components/Shaders/Background/fragment.tsx
@@ -47,13 +47,6 @@ vec3 gradientNoise(vec2 pos, float gridSize){
    float d12 = dot(g12, f - vec2(1.0, 0.0));
    float d21 = dot(g21, f - vec2(0.0, 1.0));
    float d22 = dot(g22, f - vec2(1.0, 1.0));
-
-    /*
-    vec3 f11 = vec3(d11);
-    vec3 f12 = vec3(d12);
-    vec3 f21 = vec3(d21);
-    vec3 f22 = vec3(d22);
-    */
    
    vec3 f11 = pcg3d(uvec3(i.x,i.y,0)) * (d11 + 1.0);
    vec3 f12 = pcg3d(uvec3(i.x + 1u,i.y,0))* (d12 + 1.0);
--- a/components/StyledMarkdown.tsx
+++ b/components/StyledMarkdown.tsx
@@ -14,10 +14,14 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import remarkTypograf from "@mavrin/remark-typograf";
 import smartypants from "remark-smartypants";
-import oembed from "@agentofuser/remark-oembed";
 import rehypeRaw from "rehype-raw";
 import emoji from "remark-emoji";
-import rehypeSanitize from "rehype-sanitize";
+import oembed from "@agentofuser/remark-oembed";
+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);
 SyntaxHighlighter.registerLanguage("typescript", typescript);
@@ -105,11 +109,9 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
      );
    },
    code({ node, inline, className, ...props }: any) {
-      
      const match = /language-(\w+)/.exec(className || "");
      const hasMeta = node?.data?.meta;

-
      const applyHighlights: object = (applyHighlights: number) => {
        if (hasMeta) {
          const RE = /{([\d,-]+)}/;
@@ -149,7 +151,6 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
        return "Code";
      };

-
      return match ? (
        <div>
          <div className="w-full flex flex-row items-center gap-4">
@@ -178,16 +179,20 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
        <code className={className} {...props} />
      );
    },
+    //custom directives
+    //@ts-ignore
+    yt: YouTubeVideo,
+    "img-slide": ImageSlide,
  };

  return (
    <div
      className="
        prose
-        prose-code:font-mono prose-code:text-gray-100 prose-code:bg-gray-700 prose-code:p-1 prose-code:m-1 prose-code:rounded-md 
+        prose-code:font-mono prose-code:text-gray-100 prose-code:bg-black/20 prose-code:p-1 prose-code:m-1 prose-code:rounded-md 
        prose-headings:text-gray-800 dark:prose-headings:text-gray-100 prose-p:text-gray-600 dark:prose-p:text-gray-300 
        prose-img:w-full prose-img:h-auto prose-img:object-cover 
-        prose-li:text-gray-600 dark:prose-li:text-gray-300 prose-td:text-gray-600 dark:prose-td:text-gray-400 
+        prose-li:text-gray-600 dark:prose-li:text-gray-200 prose-td:text-gray-600 dark:prose-td:text-gray-300 
      prose-a:text-primary prose-strong:text-gray-900 dark:prose-strong:text-gray-50
        dark:prose-hr:bg-gray-200 prose-hr:bg-gray-400
      "
@@ -195,7 +200,15 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
      <ReactMarkdown
        components={MarkdownComponents}
        rehypePlugins={[rehypeRaw]}
-        remarkPlugins={[remarkGfm, remarkTypograf, smartypants, oembed, emoji]}
+        remarkPlugins={[
+          remarkDirective,
+          remarkDirectiveRehype,
+          oembed,
+          remarkGfm,
+          smartypants,
+          emoji,
+          remarkTypograf,
+        ]}
        children={html}
      />
    </div>
--- a/components/Youtube.tsx
+++ b/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>
+)
--- a/content/projects/ConceptArt
+++ b/content/projects/ConceptArt
@@ -0,0 +1,27 @@
+---
+title: "Concept Art and Game Design"
+date: 17.01.2022
+author: kookroach
+authorLink: https://git.peroxy.dev/kookroach
+description: "Creative basics for professional game development. A Workshop by Dr.-Ing. Wolfgang Höhl."
+thumbnail: https://docs.peroxy.dev/uploads/f001b7e2-4e85-4335-8302-40cbda9c3490.png
+---
+
+From concept drawing to modeling to game engine. A neo-noir Game Concept inspired from Games like Max Payne and Luke Cage Noir comics.
+
+### Sketches
+
+#### Character Concept
+::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
+::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
+::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)
+
+### Final Result in Unity Engine
+![](https://docs.peroxy.dev/uploads/851605f4-a7e7-46dd-902b-88e95d367a0c.png)
--- a/content/projects/MadTrax.md
+++ b/content/projects/MadTrax.md
@@ -0,0 +1,8 @@
+---
+title: "MadTrax"
+date: 11.12.2022
+author: kookroach
+authorLink: https://git.peroxy.dev/kookroach
+description: "A game jam game made entirely from scratch in just 42 hours using the Godot 4 game engine."
+thumbnail: https://docs.peroxy.dev/uploads/b968afc4-059c-41fd-b948-67c9b32c2cc2.png 
+---
--- a/content/projects/RE-Chess.md
+++ b/content/projects/RE-Chess.md
@@ -0,0 +1,8 @@
+---
+title: "RE:Chess"
+date: 19.06.2022
+author: kookroach
+authorLink: https://git.peroxy.dev/kookroach
+description: "A game jam game made in just 42 hours using the Unity engine. Redefine the rules of chess to solve the re:chess puzzles in this unique chess game."
+thumbnail: https://docs.peroxy.dev/uploads/4806dc24-3fe7-4349-8121-f230e7a02359.png 
+---
--- a/content/projects/SpaceMadness.md
+++ b/content/projects/SpaceMadness.md
@@ -1,9 +1,9 @@
 ---
 title: "Space Madness"
-date: 29.12.2022
+date: 06.06.2020
 author: kookroach
 authorLink: https://git.peroxy.dev/kookroach
-description: "Challenge yourself in this mobile endless space shooter game. Navigate through an endless battlefield and destroy turrets while avoiding being killed. See if you can beat the current high score of 7471."
+description: "Navigate through an endless battlefield and destroy turrets while avoiding being killed. See if you can beat the current high score of 7471."
 thumbnail: https://docs.peroxy.dev/uploads/cd22a289-ebe7-4d82-98e3-b639d1df2ea6.png
 ---

@@ -24,6 +24,8 @@ thumbnail: https://docs.peroxy.dev/uploads/cd22a289-ebe7-4d82-98e3-b639d1df2ea6.

 My introduction to game development began with the completion of my first project, "Space Madness", which I created using the Unity Engine. This experience sparked my passion for the field and led me to pursue a degree in Informatics: Games Engineering at the Technical University of Munich.

+A Challenging mobile endless space shooter game. 
+
 ### Technical Features

 - Procedual Terrain generation
@@ -31,3 +33,13 @@ My introduction to game development began with the completion of my first projec
 - Endless Level generation
 - Basic Boss Fight Logic
 - Touch input support
+
+
+### Gameplay Video
+::yt[Video of a cat in a box]{#1qquNEJrA10}
+
+## Links
+
+Repository [here](https://gitlab.com/moungoslukas/stonks)
+
+Download Windows Build [here](https://cloud.peroxy.dev/s/c5PzG37xtqyD8gZ) (playable by using the Mouse and Left Mouse Button)
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,9 +26,12 @@
        "react-icons": "^4.7.1",
        "react-markdown": "^8.0.4",
        "react-syntax-highlighter": "^15.5.0",
+        "react-youtube": "^10.1.0",
        "rehype-raw": "^6.1.1",
        "rehype-sanitize": "^5.0.1",
        "remark": "^14.0.2",
+        "remark-directive": "^2.0.1",
+        "remark-directive-rehype": "^0.4.2",
        "remark-emoji": "^3.1.0",
        "remark-gfm": "^3.0.1",
        "remark-html": "^15.0.1",
@@ -1255,6 +1258,11 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
    "node_modules/fast-glob": {
      "version": "3.2.12",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -1842,6 +1850,11 @@
        "node": ">=10"
      }
    },
+    "node_modules/load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
+    },
    "node_modules/lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -1947,6 +1960,92 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/mdast-util-directive": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/mdast-util-directive/-/mdast-util-directive-2.2.4.tgz",
+      "integrity": "sha512-sK3ojFP+jpj1n7Zo5ZKvoxP1MvLyzVG63+gm40Z/qI00avzdPCYxt7RBMgofwAva9gBjbDBWVRB/i+UD+fUCzQ==",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "@types/unist": "^2.0.0",
+        "mdast-util-from-markdown": "^1.3.0",
+        "mdast-util-to-markdown": "^1.5.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-visit-parents": "^5.1.3"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-directive/node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdast-util-directive/node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdast-util-directive/node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdast-util-directive/node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdast-util-directive/node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdast-util-directive/node_modules/parse-entities": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
+      "integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/mdast-util-find-and-replace": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-2.2.2.tgz",
@@ -1963,9 +2062,9 @@
      }
    },
    "node_modules/mdast-util-from-markdown": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.2.0.tgz",
-      "integrity": "sha512-iZJyyvKD1+K7QX1b5jXdE7Sc5dtoTry1vzV28UZZe8Z1xVnB/czKntJ7ZAkG0tANqRnBF6p3p7GpU1y19DTf2Q==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.0.tgz",
+      "integrity": "sha512-HN3W1gRIuN/ZW295c7zi7g9lVBllMgZE40RxCX37wrTPWXCWtpvOZdfnuK+1WNpvZje6XuJeI3Wnb4TJEUem+g==",
      "dependencies": {
        "@types/mdast": "^3.0.0",
        "@types/unist": "^2.0.0",
@@ -2073,6 +2172,19 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/mdast-util-phrasing": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-3.0.1.tgz",
+      "integrity": "sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg==",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "unist-util-is": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/mdast-util-to-hast": {
      "version": "12.2.4",
      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-12.2.4.tgz",
@@ -2094,13 +2206,14 @@
      }
    },
    "node_modules/mdast-util-to-markdown": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-1.4.0.tgz",
-      "integrity": "sha512-IjXARf/O8VGx/pc5SZ7syfydq1DYL9vd92orsG5U0b4GNCmAvXzu+n7sbzfIKrXwB0AVrYk3NV2kXl0AIi9LCA==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz",
+      "integrity": "sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==",
      "dependencies": {
        "@types/mdast": "^3.0.0",
        "@types/unist": "^2.0.0",
        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^3.0.0",
        "mdast-util-to-string": "^3.0.0",
        "micromark-util-decode-string": "^1.0.0",
        "unist-util-visit": "^4.0.0",
@@ -2203,6 +2316,92 @@
        "uvu": "^0.5.0"
      }
    },
+    "node_modules/micromark-extension-directive": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/micromark-extension-directive/-/micromark-extension-directive-2.1.2.tgz",
+      "integrity": "sha512-brqLEztt14/73snVXYsq9Cv6ng67O+Sy69ZuM0s8ZhN/GFI9rnyXyj0Y0DaCwi648vCImv7/U1H5TzR7wMv5jw==",
+      "dependencies": {
+        "micromark-factory-space": "^1.0.0",
+        "micromark-factory-whitespace": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "parse-entities": "^4.0.0",
+        "uvu": "^0.5.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/character-reference-invalid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+      "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/is-alphabetical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+      "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/is-alphanumerical": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+      "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+      "dependencies": {
+        "is-alphabetical": "^2.0.0",
+        "is-decimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/is-decimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+      "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/is-hexadecimal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+      "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/micromark-extension-directive/node_modules/parse-entities": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
+      "integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==",
+      "dependencies": {
+        "@types/unist": "^2.0.0",
+        "character-entities": "^2.0.0",
+        "character-entities-legacy": "^3.0.0",
+        "character-reference-invalid": "^2.0.0",
+        "decode-named-character-reference": "^1.0.0",
+        "is-alphanumerical": "^2.0.0",
+        "is-decimal": "^2.0.0",
+        "is-hexadecimal": "^2.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/micromark-extension-gfm": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-2.0.1.tgz",
@@ -3294,6 +3493,22 @@
        "react-dom": ">=16.13"
      }
    },
+    "node_modules/react-youtube": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-youtube/-/react-youtube-10.1.0.tgz",
+      "integrity": "sha512-ZfGtcVpk0SSZtWCSTYOQKhfx5/1cfyEW1JN/mugGNfAxT3rmVJeMbGpA9+e78yG21ls5nc/5uZJETE3cm3knBg==",
+      "dependencies": {
+        "fast-deep-equal": "3.1.3",
+        "prop-types": "15.8.1",
+        "youtube-player": "5.5.2"
+      },
+      "engines": {
+        "node": ">= 14.x"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.1"
+      }
+    },
    "node_modules/read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -3388,6 +3603,61 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/remark-directive": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/remark-directive/-/remark-directive-2.0.1.tgz",
+      "integrity": "sha512-oosbsUAkU/qmUE78anLaJePnPis4ihsE7Agp0T/oqTzvTea8pOiaYEtfInU/+xMOVTS9PN5AhGOiaIVe4GD8gw==",
+      "dependencies": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-directive": "^2.0.0",
+        "micromark-extension-directive": "^2.0.0",
+        "unified": "^10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-directive-rehype": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remark-directive-rehype/-/remark-directive-rehype-0.4.2.tgz",
+      "integrity": "sha512-T6e+IG+BwqU4++MK54vFb+KDFjs3a+tHeK6E0T0ctR1FSyngolfDtAEzqxHWlRzQZqGi2sB4DFXry6oqH87D/g==",
+      "dependencies": {
+        "hastscript": "^7.0.2",
+        "unist-util-map": "^3.1.2"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      }
+    },
+    "node_modules/remark-directive-rehype/node_modules/hast-util-parse-selector": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-3.1.1.tgz",
+      "integrity": "sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==",
+      "dependencies": {
+        "@types/hast": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-directive-rehype/node_modules/hastscript": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-7.2.0.tgz",
+      "integrity": "sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==",
+      "dependencies": {
+        "@types/hast": "^2.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^3.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/remark-emoji": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/remark-emoji/-/remark-emoji-3.1.0.tgz",
@@ -3633,6 +3903,11 @@
        "node": ">=4"
      }
    },
+    "node_modules/sister": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/sister/-/sister-3.0.2.tgz",
+      "integrity": "sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA=="
+    },
    "node_modules/source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -3952,6 +4227,18 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/unist-util-map": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/unist-util-map/-/unist-util-map-3.1.3.tgz",
+      "integrity": "sha512-4/mDauoxqZ6geK97lJ6n2kDk6JK88Vh+hWMSJqyaaP/7eqN1dDhjcjnNxKNm3YU6Sw7PVJtcFMUbnmHvYzb6Vg==",
+      "dependencies": {
+        "@types/unist": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
    "node_modules/unist-util-modify-children": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/unist-util-modify-children/-/unist-util-modify-children-3.1.1.tgz",
@@ -4042,9 +4329,9 @@
      }
    },
    "node_modules/unist-util-visit-parents": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.1.tgz",
-      "integrity": "sha512-gks4baapT/kNRaWxuGkl5BIhoanZo7sC/cUT/JToSRNL1dYoXRFl75d++NkjYk4TAu2uv2Px+l8guMajogeuiw==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz",
+      "integrity": "sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==",
      "dependencies": {
        "@types/unist": "^2.0.0",
        "unist-util-is": "^5.0.0"
@@ -4186,6 +4473,29 @@
        "node": ">= 6"
      }
    },
+    "node_modules/youtube-player": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/youtube-player/-/youtube-player-5.5.2.tgz",
+      "integrity": "sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==",
+      "dependencies": {
+        "debug": "^2.6.6",
+        "load-script": "^1.0.0",
+        "sister": "^3.0.0"
+      }
+    },
+    "node_modules/youtube-player/node_modules/debug": {
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+      "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+      "dependencies": {
+        "ms": "2.0.0"
+      }
+    },
+    "node_modules/youtube-player/node_modules/ms": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+    },
    "node_modules/zstddec": {
      "version": "0.0.2",
      "resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.0.2.tgz",
@@ -5063,6 +5373,11 @@
        "is-extendable": "^0.1.0"
      }
    },
+    "fast-deep-equal": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
+      "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
+    },
    "fast-glob": {
      "version": "3.2.12",
      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz",
@@ -5484,6 +5799,11 @@
      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.0.6.tgz",
      "integrity": "sha512-9JROoBW7pobfsx+Sq2JsASvCo6Pfo6WWoUW79HuB1BCoBXD4PLWJPqDF6fNj67pqBYTbAHkE57M1kS/+L1neOg=="
    },
+    "load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA=="
+    },
    "lodash": {
      "version": "4.17.21",
      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -5567,6 +5887,66 @@
        "unist-util-visit": "^4.0.0"
      }
    },
+    "mdast-util-directive": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/mdast-util-directive/-/mdast-util-directive-2.2.4.tgz",
+      "integrity": "sha512-sK3ojFP+jpj1n7Zo5ZKvoxP1MvLyzVG63+gm40Z/qI00avzdPCYxt7RBMgofwAva9gBjbDBWVRB/i+UD+fUCzQ==",
+      "requires": {
+        "@types/mdast": "^3.0.0",
+        "@types/unist": "^2.0.0",
+        "mdast-util-from-markdown": "^1.3.0",
+        "mdast-util-to-markdown": "^1.5.0",
+        "parse-entities": "^4.0.0",
+        "stringify-entities": "^4.0.0",
+        "unist-util-visit-parents": "^5.1.3"
+      },
+      "dependencies": {
+        "character-reference-invalid": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+          "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw=="
+        },
+        "is-alphabetical": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+          "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ=="
+        },
+        "is-alphanumerical": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+          "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+          "requires": {
+            "is-alphabetical": "^2.0.0",
+            "is-decimal": "^2.0.0"
+          }
+        },
+        "is-decimal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+          "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A=="
+        },
+        "is-hexadecimal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+          "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg=="
+        },
+        "parse-entities": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
+          "integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==",
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "character-entities": "^2.0.0",
+            "character-entities-legacy": "^3.0.0",
+            "character-reference-invalid": "^2.0.0",
+            "decode-named-character-reference": "^1.0.0",
+            "is-alphanumerical": "^2.0.0",
+            "is-decimal": "^2.0.0",
+            "is-hexadecimal": "^2.0.0"
+          }
+        }
+      }
+    },
    "mdast-util-find-and-replace": {
      "version": "2.2.2",
      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-2.2.2.tgz",
@@ -5579,9 +5959,9 @@
      }
    },
    "mdast-util-from-markdown": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.2.0.tgz",
-      "integrity": "sha512-iZJyyvKD1+K7QX1b5jXdE7Sc5dtoTry1vzV28UZZe8Z1xVnB/czKntJ7ZAkG0tANqRnBF6p3p7GpU1y19DTf2Q==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.0.tgz",
+      "integrity": "sha512-HN3W1gRIuN/ZW295c7zi7g9lVBllMgZE40RxCX37wrTPWXCWtpvOZdfnuK+1WNpvZje6XuJeI3Wnb4TJEUem+g==",
      "requires": {
        "@types/mdast": "^3.0.0",
        "@types/unist": "^2.0.0",
@@ -5661,6 +6041,15 @@
        "mdast-util-to-markdown": "^1.3.0"
      }
    },
+    "mdast-util-phrasing": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-3.0.1.tgz",
+      "integrity": "sha512-WmI1gTXUBJo4/ZmSk79Wcb2HcjPJBzM1nlI/OUWA8yk2X9ik3ffNbBGsU+09BFmXaL1IBb9fiuvq6/KMiNycSg==",
+      "requires": {
+        "@types/mdast": "^3.0.0",
+        "unist-util-is": "^5.0.0"
+      }
+    },
    "mdast-util-to-hast": {
      "version": "12.2.4",
      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-12.2.4.tgz",
@@ -5678,13 +6067,14 @@
      }
    },
    "mdast-util-to-markdown": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-1.4.0.tgz",
-      "integrity": "sha512-IjXARf/O8VGx/pc5SZ7syfydq1DYL9vd92orsG5U0b4GNCmAvXzu+n7sbzfIKrXwB0AVrYk3NV2kXl0AIi9LCA==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz",
+      "integrity": "sha512-bbv7TPv/WC49thZPg3jXuqzuvI45IL2EVAr/KxF0BSdHsU0ceFHOmwQn6evxAh1GaoK/6GQ1wp4R4oW2+LFL/A==",
      "requires": {
        "@types/mdast": "^3.0.0",
        "@types/unist": "^2.0.0",
        "longest-streak": "^3.0.0",
+        "mdast-util-phrasing": "^3.0.0",
        "mdast-util-to-string": "^3.0.0",
        "micromark-util-decode-string": "^1.0.0",
        "unist-util-visit": "^4.0.0",
@@ -5754,6 +6144,66 @@
        "uvu": "^0.5.0"
      }
    },
+    "micromark-extension-directive": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/micromark-extension-directive/-/micromark-extension-directive-2.1.2.tgz",
+      "integrity": "sha512-brqLEztt14/73snVXYsq9Cv6ng67O+Sy69ZuM0s8ZhN/GFI9rnyXyj0Y0DaCwi648vCImv7/U1H5TzR7wMv5jw==",
+      "requires": {
+        "micromark-factory-space": "^1.0.0",
+        "micromark-factory-whitespace": "^1.0.0",
+        "micromark-util-character": "^1.0.0",
+        "micromark-util-symbol": "^1.0.0",
+        "micromark-util-types": "^1.0.0",
+        "parse-entities": "^4.0.0",
+        "uvu": "^0.5.0"
+      },
+      "dependencies": {
+        "character-reference-invalid": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
+          "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw=="
+        },
+        "is-alphabetical": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
+          "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ=="
+        },
+        "is-alphanumerical": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
+          "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
+          "requires": {
+            "is-alphabetical": "^2.0.0",
+            "is-decimal": "^2.0.0"
+          }
+        },
+        "is-decimal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
+          "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A=="
+        },
+        "is-hexadecimal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
+          "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg=="
+        },
+        "parse-entities": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
+          "integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==",
+          "requires": {
+            "@types/unist": "^2.0.0",
+            "character-entities": "^2.0.0",
+            "character-entities-legacy": "^3.0.0",
+            "character-reference-invalid": "^2.0.0",
+            "decode-named-character-reference": "^1.0.0",
+            "is-alphanumerical": "^2.0.0",
+            "is-decimal": "^2.0.0",
+            "is-hexadecimal": "^2.0.0"
+          }
+        }
+      }
+    },
    "micromark-extension-gfm": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-2.0.1.tgz",
@@ -6410,6 +6860,16 @@
        "debounce": "^1.2.1"
      }
    },
+    "react-youtube": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/react-youtube/-/react-youtube-10.1.0.tgz",
+      "integrity": "sha512-ZfGtcVpk0SSZtWCSTYOQKhfx5/1cfyEW1JN/mugGNfAxT3rmVJeMbGpA9+e78yG21ls5nc/5uZJETE3cm3knBg==",
+      "requires": {
+        "fast-deep-equal": "3.1.3",
+        "prop-types": "15.8.1",
+        "youtube-player": "5.5.2"
+      }
+    },
    "read-cache": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -6484,6 +6944,48 @@
        "unified": "^10.0.0"
      }
    },
+    "remark-directive": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/remark-directive/-/remark-directive-2.0.1.tgz",
+      "integrity": "sha512-oosbsUAkU/qmUE78anLaJePnPis4ihsE7Agp0T/oqTzvTea8pOiaYEtfInU/+xMOVTS9PN5AhGOiaIVe4GD8gw==",
+      "requires": {
+        "@types/mdast": "^3.0.0",
+        "mdast-util-directive": "^2.0.0",
+        "micromark-extension-directive": "^2.0.0",
+        "unified": "^10.0.0"
+      }
+    },
+    "remark-directive-rehype": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remark-directive-rehype/-/remark-directive-rehype-0.4.2.tgz",
+      "integrity": "sha512-T6e+IG+BwqU4++MK54vFb+KDFjs3a+tHeK6E0T0ctR1FSyngolfDtAEzqxHWlRzQZqGi2sB4DFXry6oqH87D/g==",
+      "requires": {
+        "hastscript": "^7.0.2",
+        "unist-util-map": "^3.1.2"
+      },
+      "dependencies": {
+        "hast-util-parse-selector": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-3.1.1.tgz",
+          "integrity": "sha512-jdlwBjEexy1oGz0aJ2f4GKMaVKkA9jwjr4MjAAI22E5fM/TXVZHuS5OpONtdeIkRKqAaryQ2E9xNQxijoThSZA==",
+          "requires": {
+            "@types/hast": "^2.0.0"
+          }
+        },
+        "hastscript": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-7.2.0.tgz",
+          "integrity": "sha512-TtYPq24IldU8iKoJQqvZOuhi5CyCQRAbvDOX0x1eW6rsHSxa/1i2CCiptNTotGHJ3VoHRGmqiv6/D3q113ikkw==",
+          "requires": {
+            "@types/hast": "^2.0.0",
+            "comma-separated-tokens": "^2.0.0",
+            "hast-util-parse-selector": "^3.0.0",
+            "property-information": "^6.0.0",
+            "space-separated-tokens": "^2.0.0"
+          }
+        }
+      }
+    },
    "remark-emoji": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/remark-emoji/-/remark-emoji-3.1.0.tgz",
@@ -6654,6 +7156,11 @@
        "kind-of": "^6.0.0"
      }
    },
+    "sister": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/sister/-/sister-3.0.2.tgz",
+      "integrity": "sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA=="
+    },
    "source-map-js": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
@@ -6876,6 +7383,14 @@
      "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-5.1.1.tgz",
      "integrity": "sha512-F5CZ68eYzuSvJjGhCLPL3cYx45IxkqXSetCcRgUXtbcm50X2L9oOWQlfUfDdAf+6Pd27YDblBfdtmsThXmwpbQ=="
    },
+    "unist-util-map": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/unist-util-map/-/unist-util-map-3.1.3.tgz",
+      "integrity": "sha512-4/mDauoxqZ6geK97lJ6n2kDk6JK88Vh+hWMSJqyaaP/7eqN1dDhjcjnNxKNm3YU6Sw7PVJtcFMUbnmHvYzb6Vg==",
+      "requires": {
+        "@types/unist": "^2.0.0"
+      }
+    },
    "unist-util-modify-children": {
      "version": "3.1.1",
      "resolved": "https://registry.npmjs.org/unist-util-modify-children/-/unist-util-modify-children-3.1.1.tgz",
@@ -6944,9 +7459,9 @@
      }
    },
    "unist-util-visit-parents": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.1.tgz",
-      "integrity": "sha512-gks4baapT/kNRaWxuGkl5BIhoanZo7sC/cUT/JToSRNL1dYoXRFl75d++NkjYk4TAu2uv2Px+l8guMajogeuiw==",
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz",
+      "integrity": "sha512-x6+y8g7wWMyQhL1iZfhIPhDAs7Xwbn9nRosDXl7qoPTSCy0yNxnKc+hWokFifWQIDGi154rdUqKvbCa4+1kLhg==",
      "requires": {
        "@types/unist": "^2.0.0",
        "unist-util-is": "^5.0.0"
@@ -7037,6 +7552,31 @@
      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg=="
    },
+    "youtube-player": {
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/youtube-player/-/youtube-player-5.5.2.tgz",
+      "integrity": "sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==",
+      "requires": {
+        "debug": "^2.6.6",
+        "load-script": "^1.0.0",
+        "sister": "^3.0.0"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.9",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
+          "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
+        }
+      }
+    },
    "zstddec": {
      "version": "0.0.2",
      "resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -27,9 +27,12 @@
    "react-icons": "^4.7.1",
    "react-markdown": "^8.0.4",
    "react-syntax-highlighter": "^15.5.0",
+    "react-youtube": "^10.1.0",
    "rehype-raw": "^6.1.1",
    "rehype-sanitize": "^5.0.1",
    "remark": "^14.0.2",
+    "remark-directive": "^2.0.1",
+    "remark-directive-rehype": "^0.4.2",
    "remark-emoji": "^3.1.0",
    "remark-gfm": "^3.0.1",
    "remark-html": "^15.0.1",
--- a/pages/blog/index.tsx
+++ b/pages/blog/index.tsx
@@ -36,7 +36,7 @@ const Blog = ({ posts }: { posts: Post[] }) => {
      <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-200">
        Blog
      </h1>
-      <div className="w-full h-0.5 bg-violet-200 dark:bg-violet-700 my-4 rounded-full" />
+      <div className="w-full h-0.5 bg-violet-200 dark:bg-white/20 my-4 rounded-full" />
      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        {posts.map((post, index) => (
          <BlogCard
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -3,7 +3,7 @@ export default function Home() {
  return (
    <MainLayout>
      <div className="grid lg:grid-cols-2 grid-cols-1 xl:mt-10 gap-10 items-center">
-        <div className="bg-primary-dark p-10 rounded-lg flex flex-col gap-10 h-fit 3xl:w-2/3 w-full text-lg text-primary-text/90 shadow-lg shadow-gradient-dark/20">
+        <div className="bg-primary-dark/30 border-white/30 border p-10 rounded-lg flex flex-col gap-10 h-fit 3xl:w-2/3 w-full text-lg text-primary-text/90 shadow-lg shadow-gradient-dark/20">
          <div>
            <span className="font-bold text-xl text-primary-text">
              Lorem ipsum dolor{" "}
--- a/pages/projects/index.tsx
+++ b/pages/projects/index.tsx
@@ -45,7 +45,7 @@ const Projects = ({ posts }: { posts: Post[] }) => {
      <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100">
        Projects
      </h1>
-      <div className="w-full h-0.5 bg-violet-200 dark:bg-violet-700 my-4 rounded-full" />
+      <div className="w-full h-0.5 bg-violet-200 dark:bg-white/20 my-4 rounded-full" />
      <div className="grid grid-cols-1 gap-4">
        {posts.map((post, index) => (
          <ProjectCard
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -19,15 +19,15 @@ main {
 }

 pre {
-  @apply dark:bg-slate-800 bg-slate-200 text-slate-800 dark:text-slate-200 !important;
+  @apply dark:bg-black/30 bg-slate-200 text-slate-800 dark:text-slate-200 !important;
 }

 pre > code {
  @apply bg-transparent text-gray-700 dark:text-slate-300 !important;
 }

-.codeStyle > code {
-  background: transparent;
+.codeStyle {
+  @apply bg-transparent !important
 }

 pre > div > div > button > svg:hover {
@@ -42,9 +42,69 @@ h1 > a:hover::before,
 h2 > a:hover::before,
 h3 > a:hover::before,
 h4 > a:hover::before {
-  @apply content-['#'] absolute -left-8 text-gray-300 dark:text-gray-600;
+  @apply content-['#'] absolute -left-8 text-gray-300 dark:text-gray-400;
 }

+h2 > a:hover::before {
+  @apply -left-6;
+}
+
+h3 > a:hover::before {
+  @apply -left-5;
+}
+
+h4 > a:hover::before {
+  @apply -left-4;
+}
+
+
 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);
 }
--- a/utils/markdown.ts
+++ b/utils/markdown.ts
@@ -4,7 +4,6 @@ import fs from "fs";
 import { FrontMatter, MarkdownDocument } from "../types/types";
 import { remark } from "remark";
 import html from "remark-html";
-import remarkGfm from "remark-gfm";

 export const BLOGS_PATH = join(process.cwd(), "content/blogs");
 export const PROJECTS_PATH = join(process.cwd(), "content/projects");
@@ -13,6 +12,14 @@ export interface Post {
  slug: string;
 }

+const getDate = (date: string) => {
+  if (typeof date === "string") {
+    const d = date.split(".").map((v) => +v);
+    return new Date(d[2], d[1] - 1, d[0]);
+  }
+  return new Date();
+};
+
 export const getBlogContentBySlug = (slug: string): MarkdownDocument => {
  const filepath = join(BLOGS_PATH, `${slug}.md` || `${slug}.mdx`);
  const filecontents = fs.readFileSync(filepath);
@@ -39,26 +46,36 @@ export const getProjectContentBySlug = (slug: string): MarkdownDocument => {
 export const getAllBlogsFrontMatter = (): Post[] => {
  const files = fs.readdirSync(BLOGS_PATH);

-  return files.reduce((allPosts: Post[], postSlug: string) => {
+  const blogs = files.reduce((allPosts: Post[], postSlug: string) => {
    const slug = postSlug.replace(".md", "");
    const post = getBlogContentBySlug(slug);

    return [{ frontMatter: post.frontMatter, slug }, ...allPosts];
  }, []);
+
+  return blogs.sort(
+    //@ts-ignore
+    (a, b) => getDate(b.frontMatter.date) - getDate(a.frontMatter.date)
+  );
 };
 export const getAllProjectsFrontMatter = (): Post[] => {
  const files = fs.readdirSync(PROJECTS_PATH);

-  return files.reduce((allPosts: Post[], postSlug: string) => {
+  const projects = files.reduce((allPosts: Post[], postSlug: string) => {
    const slug = postSlug.replace(".md", "");
    const post = getProjectContentBySlug(slug);

    return [{ frontMatter: post.frontMatter, slug }, ...allPosts];
  }, []);
+
+  return projects.sort(
+    //@ts-ignore
+    (a, b) => getDate(b.frontMatter.date) - getDate(a.frontMatter.date)
+  );
 };

 export async function markdownToHtml(markdown: any) {
-  const result = await remark().use(html).use(remarkGfm).process(markdown);
+  const result = await remark().use(html).process(markdown);
  return result.toString();
 }

--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Lukas Moungos	dcfad5fcd6	Merge branch 'dev' All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-24 13:17:16 +01:00
Lukas Moungos	9b8b59d4e6	add Blur All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-24 13:16:50 +01:00
Rei	dc7e82b143	kollors All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-15 18:46:29 +01:00
Rei	703b611dfd	sorted All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-15 18:29:52 +01:00
Rei	dd4f848071	divider All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-15 17:57:47 +01:00
Rei	46097b8390	style changes	2023-02-15 16:43:14 +01:00
Lukas Moungos	e78bc12c49	merge All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-11 21:03:17 +01:00
Lukas Moungos	aa3bb66d5e	add custom directives	2023-02-11 21:00:28 +01:00
renttrent	c9f5dfcba7	Update 'content/projects/RE-Chess.md' All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-11 20:10:11 +01:00
Lukas Moungos	4902006130	revert All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-10 17:50:07 +01:00
Lukas Moungos	71f679c3ca	yt vid All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-10 17:33:08 +01:00
Lukas Moungos	f7c6d3ae16	some changes All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-10 17:06:51 +01:00
Lukas Moungos	f884ac1d1d	new content All checks were successful continuous-integration/drone/push Build is passing Details	2023-02-10 17:03:55 +01:00