yt fix

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

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

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>

components/R3Background.tsx

@@ -1,8 +1,8 @@
-import { useRef, useMemo } from 'react'
+import { useRef, useMemo } from "react";
-import { Canvas, useFrame } from '@react-three/fiber'
+import { Canvas, useFrame } from "@react-three/fiber";
 import { BufferGeometry, Material, MathUtils, Mesh } from "three";
-import { vertexShader } from './Shaders/Background/vertex';
+import { vertexShader } from "./Shaders/Background/vertex";
-import { fragmentShader } from './Shaders/Background/fragment';
+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){
+    if (!meshRef.current) {
-        return;
+      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}>
+    <mesh
-      <planeGeometry args={[20, 20, 200, 200]} />
+      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 (
+  return (
-    <div className='-z-40 h-screen w-screen fixed bg-black opacity-60'>
+    <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>
-    );
+  );
 };

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

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>

components/Youtube.tsx

@@ -0,0 +1,5 @@
+export const YouTubeVideo = ({ id, children }: any) => (
+    <iframe src={'https://www.youtube.com/embed/' + id} className="w-full xl:h-96 md:h-80 h-64">
+        {children}
+    </iframe>
+)

content/projects/ConceptArt and Game Design.md

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

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

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

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)

layouts/MainLayout.tsx

@@ -1,13 +1,12 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react'
-import { R3Gradient } from '../components/R3Background';
+import { R3Gradient } from '../components/R3Background'
-import { Navbar } from "../components/Navbar";
+import { Navbar } from '../components/Navbar'
 
 export const MainLayout = ({ children }: PropsWithChildren) => {
-  return (
+    return (
-    <div className="w-full">
+        <div className="w-full">
-      <Navbar />
+            <Navbar />
-      <R3Gradient />
+            <main className="xl:p-5 p-4 px-5 xl:mx-0">{children}</main>
-      <main className="xl:p-5 p-4 px-5 xl:mx-0">{children}</main>
+        </div>
-    </div>
+    )
-  );
+}
-};

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",
+      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.0.tgz",
-      "integrity": "sha512-iZJyyvKD1+K7QX1b5jXdE7Sc5dtoTry1vzV28UZZe8Z1xVnB/czKntJ7ZAkG0tANqRnBF6p3p7GpU1y19DTf2Q==",
+      "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",
+      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz",
-      "integrity": "sha512-IjXARf/O8VGx/pc5SZ7syfydq1DYL9vd92orsG5U0b4GNCmAvXzu+n7sbzfIKrXwB0AVrYk3NV2kXl0AIi9LCA==",
+      "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",
+      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz",
-      "integrity": "sha512-gks4baapT/kNRaWxuGkl5BIhoanZo7sC/cUT/JToSRNL1dYoXRFl75d++NkjYk4TAu2uv2Px+l8guMajogeuiw==",
+      "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",
+      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.0.tgz",
-      "integrity": "sha512-iZJyyvKD1+K7QX1b5jXdE7Sc5dtoTry1vzV28UZZe8Z1xVnB/czKntJ7ZAkG0tANqRnBF6p3p7GpU1y19DTf2Q==",
+      "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",
+      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-1.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-1.5.0.tgz",
-      "integrity": "sha512-IjXARf/O8VGx/pc5SZ7syfydq1DYL9vd92orsG5U0b4GNCmAvXzu+n7sbzfIKrXwB0AVrYk3NV2kXl0AIi9LCA==",
+      "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",
+      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.1.tgz",
+      "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-5.1.3.tgz",
-      "integrity": "sha512-gks4baapT/kNRaWxuGkl5BIhoanZo7sC/cUT/JToSRNL1dYoXRFl75d++NkjYk4TAu2uv2Px+l8guMajogeuiw==",
+      "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",

package.json

@@ -20,16 +20,19 @@
     "@types/three": "^0.149.0",
     "framer-motion": "^8.0.2",
     "gray-matter": "^4.0.3",
-    "next": "13.0.6",
+    "next": "^13.3.1",
     "parse-numeric-range": "^1.3.0",
-    "react": "18.2.0",
+    "react": "^18.2.0",
-    "react-dom": "18.2.0",
+    "react-dom": "^18.2.0",
     "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",

pages/_app.tsx

@@ -1,6 +1,12 @@
+import { R3Gradient } from '../components/R3Background'
 import '../styles/globals.css'
 import type { AppProps } from 'next/app'
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />
+    return (
+        <>
+            <R3Gradient />
+            <Component {...pageProps} />
+        </>
+    )
 }

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

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{" "}

pages/project/[slug].tsx

@@ -1,7 +1,11 @@
 import { GetStaticPaths, GetStaticProps } from "next";
 import fs from "fs";
 import { ParsedUrlQuery } from "querystring";
-import { getProjectContentBySlug, PROJECTS_PATH } from "../../utils/markdown";
+import {
+  getHeadings,
+  getProjectContentBySlug,
+  PROJECTS_PATH,
+} from "../../utils/markdown";
 import { MarkdownRenderingResult } from "../../types/types";
 import { MainLayout } from "../../layouts/MainLayout";
 import Link from "next/link";
@@ -52,6 +56,9 @@ export const getStaticProps: GetStaticProps<MarkdownRenderingResult> = async ({
   params,
 }) => {
   const markdownContent = getProjectContentBySlug(params?.slug as string);
+
+  console.log(getHeadings(markdownContent.content));
+
   return {
     props: {
       frontMatter: markdownContent.frontMatter,

pages/projects/index.tsx

@@ -1,71 +1,55 @@
-import { GetServerSideProps } from "next";
+import { GetServerSideProps } from 'next'
-import { MainLayout } from "../../layouts/MainLayout";
+import { MainLayout } from '../../layouts/MainLayout'
-import { Post, getAllProjectsFrontMatter } from "../../utils/markdown";
+import { Post, getAllProjectsFrontMatter } from '../../utils/markdown'
-import Link from "next/link";
+import Link from 'next/link'
-import { formatDate } from "../../utils/general";
+import { formatDate } from '../../utils/general'
-import { BasicArticleProps } from "../../components/PostHeader";
+import { BasicArticleProps } from '../../components/PostHeader'
 
-const ProjectCard = ({
+const ProjectCard = ({ project, slug }: { project: BasicArticleProps; slug: string }) => {
-  project,
+    return (
-  slug,
+        <div className="p-4 rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:shadow-gray-900 dark:border-gray-700 grid grid-cols-1 xl:grid-cols-2 items-center gap-4 bg-black bg-opacity-60">
-}: {
+            <div className="order-last xl:order-1">
-  project: BasicArticleProps;
+                <div className="text-sm font-medium text-gray-500">{formatDate(project.date)}</div>
-  slug: string;
+                <h2 className="text-2xl font-bold">{project.title}</h2>
-}) => {
+                <p className="text-gray-600 dark:text-gray-400 text-sm">{project.description}</p>
-  return (
+                <Link href={`project/${slug}`}>
-    <div className="p-4 rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:shadow-gray-900 dark:border-gray-700 grid grid-cols-1 xl:grid-cols-2 items-center gap-4 bg-black bg-opacity-60">
+                    <button className="bg-action px-2 py-1 rounded-md mt-4 hover:bg-action/60 transition-all ease-in duration-100 font-bold text-white">
-      <div className="order-last xl:order-1">
+                        Read more
-        <div className="text-sm font-medium text-gray-500">
+                    </button>
-          {formatDate(project.date)}
+                </Link>
+            </div>
+            {project.thumbnail && (
+                <img
+                    src={project.thumbnail}
+                    alt={`${slug}-thumbnail`}
+                    className="w-full xl:h-40 h-auto object-cover rounded-md order-1 xl:order-last"
+                />
+            )}
         </div>
-        <h2 className="text-2xl font-bold">{project.title}</h2>
+    )
-        <p className="text-gray-600 dark:text-gray-400 text-sm">
+}
-          {project.description}
-        </p>
-        <Link href={`project/${slug}`}>
-          <button className="bg-action px-2 py-1 rounded-md mt-4 hover:bg-action/60 transition-all ease-in duration-100 font-bold text-white">
-            Read more
-          </button>
-        </Link>
-      </div>
-      {project.thumbnail && (
-        <img
-          src={project.thumbnail}
-          alt={`${slug}-thumbnail`}
-          className="w-full xl:h-40 h-auto object-cover rounded-md order-1 xl:order-last"
-        />
-      )}
-    </div>
-  );
-};
 
 const Projects = ({ posts }: { posts: Post[] }) => {
-  return (
+    return (
-    <MainLayout>
+        <MainLayout>
-      <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100">
+            <h1 className="text-3xl font-bold text-gray-800 dark:text-gray-100">Projects</h1>
-        Projects
+            <div className="w-full h-0.5 bg-violet-200 dark:bg-white/20 my-4 rounded-full" />
-      </h1>
+            <div className="grid grid-cols-1 gap-4">
-      <div className="w-full h-0.5 bg-violet-200 dark:bg-violet-700 my-4 rounded-full" />
+                {posts.map((post, index) => (
-      <div className="grid grid-cols-1 gap-4">
+                    <ProjectCard key={index} project={post.frontMatter as BasicArticleProps} slug={post.slug} />
-        {posts.map((post, index) => (
+                ))}
-          <ProjectCard
+            </div>
-            key={index}
+        </MainLayout>
-            project={post.frontMatter as BasicArticleProps}
+    )
-            slug={post.slug}
+}
-          />
-        ))}
-      </div>
-    </MainLayout>
-  );
-};
 
 export const getServerSideProps: GetServerSideProps = async () => {
-  const posts = getAllProjectsFrontMatter();
+    const posts = getAllProjectsFrontMatter()
-  return {
+    return {
-    props: {
+        props: {
-      posts,
+            posts,
-    },
+        },
-  };
+    }
-};
+}
 
-export default Projects;
+export default Projects

styles/globals.css

@@ -19,22 +19,25 @@ 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 {
+.codeStyle {
-  background: transparent;
+  @apply bg-transparent !important;
 }
 
 pre > div > div > button > svg:hover {
   @apply hover:text-action transition-all ease-in-out duration-100 !important;
 }
 
-h1 > a, h2 > a, h3 > a, h4 > a {
+h1 > a,
+h2 > a,
+h3 > a,
+h4 > a {
   @apply cursor-pointer relative text-gray-800 dark:text-gray-100 decoration-transparent font-bold !important;
 }
 
@@ -42,9 +45,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;
 }
 
-div > code, pre > code {
+h2 > a:hover::before {
-  @apply p-0 m-0 !important
+  @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);
+}

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,54 @@ 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 const getHeadings = (markdown: string): any => {
+  const headingOne = markdown.match(/^(#{1})\s(.*)/gm);
+  const headingTwo = markdown.match(/^(#{2})\s(.*)/gm);
+  const headingThree = markdown.match(/^(#{3})\s(.*)/gm);
+  const headingFour = markdown.match(/^(#{4})\s(.*)/gm);
+
+  const headings = markdown.match(/^(#{1,4})\s(.*)/gm);
+  var tree: any[] = [];
+  var prev = "";
+  headings?.forEach((heading) => {
+    if (headingOne?.includes(heading)) {
+      tree.push(heading);
+    }
+  });
+
+  return tree;
 };
 
 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();
 }