some changes

components/R3Background.tsx

@@ -38,7 +38,7 @@ 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]} />
+      <planeGeometry args={[30, 30, 200, 200]} />
       <shaderMaterial
         fragmentShader={fragmentShader}
         vertexShader={vertexShader}

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,11 @@ 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 YouTube from "react-youtube";
+//import rehypeSanitize from "rehype-sanitize";
 
 SyntaxHighlighter.registerLanguage("tsx", tsx);
 SyntaxHighlighter.registerLanguage("typescript", typescript);
@@ -26,8 +27,26 @@ SyntaxHighlighter.registerLanguage("bash", bash);
 SyntaxHighlighter.registerLanguage("markdown", markdown);
 SyntaxHighlighter.registerLanguage("json", json);
 
+
 export const StyledMarkdown = ({ html }: { html: string }) => {
   const MarkdownComponents: Components = {
+    
+    a: (props : any) => {
+      try {
+        const url = new URL(props.href);
+        if (
+          url.origin.includes("youtube.com") &&
+          props.node.position.start.column === 1
+        ){
+          return <YouTube videoId={url.searchParams.get("v") || "dQw4w9WgXcQ"} />;
+        }
+      } catch (e) {
+        //console.log(e);
+      }
+
+      return <a {...props} />;
+    },
+
     h1: (props: any) => {
       const arr = props.children;
       let heading = "";
@@ -195,7 +214,7 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
       <ReactMarkdown
         components={MarkdownComponents}
         rehypePlugins={[rehypeRaw]}
-        remarkPlugins={[remarkGfm, remarkTypograf, smartypants, oembed, emoji]}
+        remarkPlugins={[oembed, remarkGfm, remarkTypograf, smartypants, emoji]}
         children={html}
       />
     </div>