remove markdown test from main

.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+/content/projects/markdown-test.md
 
 # next.js
 /.next/

components/Navbar.tsx

@@ -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">
+            <button className="px-10 py-1 rounded-sm bg-primary hover:bg-primary/50 transition-all duration-150 ease-out text-white">
               {name}
             </button>
           </Link>

components/PostHeader.tsx

@@ -21,8 +21,10 @@ export const PostHeader = ({
 
   return (
     <div className="flex items-start gap-2 flex-col">
-      <div className="lg:text-5xl text-3xl font-bold mt-2">{title}</div>
+      <div className="lg:text-5xl text-3xl font-bold mt-2 text-gray-50">
-      <div className="mt-2 text-gray-600dark:text-gray-400">{description}</div>
+        {title}
+      </div>
+      <div className="mt-2 text-gray-600dark:text-gray-400 text-sm">{description}</div>
       <div className="mt-2 mb-10 flex lg:flex-row flex-col gap-2 items-start">
         {author && (
           <div className="font-medium ">

components/R3Background.tsx

@@ -0,0 +1,61 @@
+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';
+
+const Fragment = () => {
+  // This reference will give us direct access to the mesh
+  const meshRef = useRef<Mesh<BufferGeometry, Material | Material[]>>(null);
+
+  const uniforms = useMemo(
+    () => ({
+      u_intensity: {
+        value: 1.0,
+      },
+      u_time: {
+        value: 0.0,
+      },
+    }),
+    []
+  );
+
+  useFrame((state) => {
+    if(!meshRef.current){
+        return;
+    }
+    const { clock } = state;
+    //@ts-ignore
+    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
+      meshRef.current.material.uniforms.u_intensity.value,
+      1.0,
+      0.02
+    );
+  });
+
+  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]} />
+      <shaderMaterial
+        fragmentShader={fragmentShader}
+        vertexShader={vertexShader}
+        uniforms={uniforms}
+        wireframe={false}
+      />
+    </mesh>
+  );
+};
+
+
+export const R3Gradient = () => {
+    return (
+    <div className='-z-40 h-screen w-screen fixed bg-black opacity-60'>
+      <Canvas camera={{ position: [0.0, 0.0, 5.0] }}>
+        <Fragment />
+      </Canvas>
+    </div>
+    );
+};

components/Shaders/Background/fragment.tsx

@@ -0,0 +1,82 @@
+
+export const fragmentShader = `
+uniform float u_intensity;
+uniform float u_time;
+uniform int width;
+uniform int height;
+
+varying vec2 vUv;
+varying float vDisplacement;
+
+//from Hash Functions for GPU Rendering (Jarzynski et al.)
+//http://www.jcgt.org/published/0009/03/02/
+vec3 pcg3d(uvec3 v)
+{
+    v = v * 1664525u + 1013904223u;
+    v.x += v.y*v.z; v.y += v.z*v.x; v.z += v.x*v.y;
+    v ^= v >> 16u;
+    v.x += v.y*v.z; v.y += v.z*v.x; v.z += v.x*v.y;
+    return vec3(v) * (1.0/float(0xffffffffu));
+}
+
+// convert texture coordinates to pixel
+float t2p(float t, int noOfPixels){
+    return t * float(noOfPixels) - 0.5;
+}
+
+#define M_PI 3.1415926535897932384626433832795
+vec2 randomGradient(uvec3 p){
+    vec3 _uv = pcg3d(p);
+    float r = sqrt(_uv[0]);
+    float phi = 2.0 * M_PI * _uv[1];
+    return vec2(r* cos(phi), r * sin(phi));
+}
+
+
+vec3 gradientNoise(vec2 pos, float gridSize){
+    vec2 gridPos = pos * gridSize;
+    uvec2 i = uvec2(gridPos);
+    vec2 f = fract(gridPos);
+
+    vec2 g11 = randomGradient(uvec3(i.x,i.y,1));
+    vec2 g12 = randomGradient(uvec3(i.x + 1u,i.y,1));
+    vec2 g21 = randomGradient(uvec3(i.x,i.y + 1u,1));
+    vec2 g22 = randomGradient(uvec3(i.x + 1u,i.y +1u,1));
+
+    float d11 = dot(g11, f);
+    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);
+    vec3 f21 = pcg3d(uvec3(i.x,i.y + 1u,0))* (d21 + 1.0);
+    vec3 f22 = pcg3d(uvec3(i.x + 1u,i.y +1u,0))* (d22 + 1.0);
+    
+    f = smoothstep(0.0, 1.0, f);
+
+    vec3 q1 = mix(f11, f12, vec3(f.x));
+    vec3 q2 = mix(f21, f22, vec3(f.x));
+    vec3 p = mix(q1, q2, vec3(f.y));    
+    
+    return p;
+}
+
+
+void main() {
+    float distort = 2.0 * vDisplacement + u_intensity;
+    vec2 pos = vec2(u_time) /5.0 + vUv;
+    vec3 texColor = gradientNoise(pos, 4.0);
+    texColor.y = 0.0;
+    gl_FragColor = vec4(texColor, 1.0);
+}
+
+`
+

components/Shaders/Background/vertex.tsx

@@ -0,0 +1,108 @@
+export const vertexShader = `
+uniform float u_intensity;
+uniform float u_time;
+
+varying vec2 vUv;
+varying float vDisplacement;
+
+
+// Classic Perlin 3D Noise 
+// by Stefan Gustavson
+//
+vec4 permute(vec4 x) {
+    return mod(((x*34.0)+1.0)*x, 289.0);
+}
+
+vec4 taylorInvSqrt(vec4 r) {
+    return 1.79284291400159 - 0.85373472095314 * r;
+}
+
+vec3 fade(vec3 t) {
+    return t*t*t*(t*(t*6.0-15.0)+10.0);
+}
+
+float cnoise(vec3 P) {
+    vec3 Pi0 = floor(P); // Integer part for indexing
+    vec3 Pi1 = Pi0 + vec3(1.0); // Integer part + 1
+    Pi0 = mod(Pi0, 289.0);
+    Pi1 = mod(Pi1, 289.0);
+    vec3 Pf0 = fract(P); // Fractional part for interpolation
+    vec3 Pf1 = Pf0 - vec3(1.0); // Fractional part - 1.0
+    vec4 ix = vec4(Pi0.x, Pi1.x, Pi0.x, Pi1.x);
+    vec4 iy = vec4(Pi0.yy, Pi1.yy);
+    vec4 iz0 = Pi0.zzzz;
+    vec4 iz1 = Pi1.zzzz;
+
+    vec4 ixy = permute(permute(ix) + iy);
+    vec4 ixy0 = permute(ixy + iz0);
+    vec4 ixy1 = permute(ixy + iz1);
+
+    vec4 gx0 = ixy0 / 7.0;
+    vec4 gy0 = fract(floor(gx0) / 7.0) - 0.5;
+    gx0 = fract(gx0);
+    vec4 gz0 = vec4(0.5) - abs(gx0) - abs(gy0);
+    vec4 sz0 = step(gz0, vec4(0.0));
+    gx0 -= sz0 * (step(0.0, gx0) - 0.5);
+    gy0 -= sz0 * (step(0.0, gy0) - 0.5);
+
+    vec4 gx1 = ixy1 / 7.0;
+    vec4 gy1 = fract(floor(gx1) / 7.0) - 0.5;
+    gx1 = fract(gx1);
+    vec4 gz1 = vec4(0.5) - abs(gx1) - abs(gy1);
+    vec4 sz1 = step(gz1, vec4(0.0));
+    gx1 -= sz1 * (step(0.0, gx1) - 0.5);
+    gy1 -= sz1 * (step(0.0, gy1) - 0.5);
+
+    vec3 g000 = vec3(gx0.x,gy0.x,gz0.x);
+    vec3 g100 = vec3(gx0.y,gy0.y,gz0.y);
+    vec3 g010 = vec3(gx0.z,gy0.z,gz0.z);
+    vec3 g110 = vec3(gx0.w,gy0.w,gz0.w);
+    vec3 g001 = vec3(gx1.x,gy1.x,gz1.x);
+    vec3 g101 = vec3(gx1.y,gy1.y,gz1.y);
+    vec3 g011 = vec3(gx1.z,gy1.z,gz1.z);
+    vec3 g111 = vec3(gx1.w,gy1.w,gz1.w);
+
+    vec4 norm0 = taylorInvSqrt(vec4(dot(g000, g000), dot(g010, g010), dot(g100, g100), dot(g110, g110)));
+    g000 *= norm0.x;
+    g010 *= norm0.y;
+    g100 *= norm0.z;
+    g110 *= norm0.w;
+    vec4 norm1 = taylorInvSqrt(vec4(dot(g001, g001), dot(g011, g011), dot(g101, g101), dot(g111, g111)));
+    g001 *= norm1.x;
+    g011 *= norm1.y;
+    g101 *= norm1.z;
+    g111 *= norm1.w;
+
+    float n000 = dot(g000, Pf0);
+    float n100 = dot(g100, vec3(Pf1.x, Pf0.yz));
+    float n010 = dot(g010, vec3(Pf0.x, Pf1.y, Pf0.z));
+    float n110 = dot(g110, vec3(Pf1.xy, Pf0.z));
+    float n001 = dot(g001, vec3(Pf0.xy, Pf1.z));
+    float n101 = dot(g101, vec3(Pf1.x, Pf0.y, Pf1.z));
+    float n011 = dot(g011, vec3(Pf0.x, Pf1.yz));
+    float n111 = dot(g111, Pf1);
+
+    vec3 fade_xyz = fade(Pf0);
+    vec4 n_z = mix(vec4(n000, n100, n010, n110), vec4(n001, n101, n011, n111), fade_xyz.z);
+    vec2 n_yz = mix(n_z.xy, n_z.zw, fade_xyz.y);
+    float n_xyz = mix(n_yz.x, n_yz.y, fade_xyz.x); 
+    return 2.2 * n_xyz;
+}
+
+// End of Perlin Noise Code
+
+void main() {
+  vUv = uv;
+
+  vDisplacement = cnoise(position + vec3(2.0 * u_time));
+
+  vec3 newPosition = position + normal * (u_intensity * vDisplacement);
+
+  vec4 modelPosition = modelMatrix * vec4(newPosition, 1.0);
+  vec4 viewPosition = viewMatrix * modelPosition;
+  vec4 projectedPosition = projectionMatrix * viewPosition;
+
+  gl_Position = projectedPosition;
+}
+
+`

components/StyledMarkdown.tsx

@@ -12,6 +12,12 @@ import { Components } from "react-markdown";
 import { generateSlug } from "../utils/general";
 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";
 
 SyntaxHighlighter.registerLanguage("tsx", tsx);
 SyntaxHighlighter.registerLanguage("typescript", typescript);
@@ -74,7 +80,7 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
 
       const slug = generateSlug(heading);
       return (
-        <h3 id={slug}>
+        <h3 id={slug} className="text-red-500">
           <a href={`#${slug}`} {...props}></a>
         </h3>
       );
@@ -99,9 +105,11 @@ 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,-]+)}/;
@@ -110,6 +118,7 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
             ? // @ts-ignore
               RE?.exec(metadata)[1]
             : "0";
+
           const highlightLines = rangeParser(strlineNumbers);
           const highlight = highlightLines;
           const data = highlight.includes(applyHighlights) ? "highlight" : null;
@@ -119,15 +128,38 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
         }
       };
 
+      const applyStartingNumber = () => {
+        if (hasMeta) {
+          const metadata = node.data.meta?.replace(/\s/g, "");
+          const RE = /line=(\d+)/;
+          const start = RE?.test(metadata) && RE.exec(metadata);
+          return start ? +start[1] : 1;
+        } else {
+          return 1;
+        }
+      };
+
+      const getTitle = () => {
+        if (hasMeta) {
+          const metadata = node.data.meta;
+          const RE = /title=\"(.*)\"/;
+          const title = RE?.test(metadata) && RE.exec(metadata);
+          return title ? title[1] : "Code";
+        }
+        return "Code";
+      };
+
+
       return match ? (
         <div>
-          <div className="w-full">
+          <div className="w-full flex flex-row items-center gap-4">
             <button
               className="w-fit ml-2 important"
               onClick={() => navigator.clipboard.writeText(props.children)}
             >
               <BiCopy />
             </button>
+            {<div>{getTitle()}</div>}
           </div>
           <SyntaxHighlighter
             style={defaulttheme}
@@ -138,6 +170,7 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
             wrapLines={hasMeta ? true : false}
             useInlineStyles={true}
             lineProps={applyHighlights}
+            startingLineNumber={applyStartingNumber()}
             {...props}
           />
         </div>
@@ -146,21 +179,23 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
       );
     },
   };
+
   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-headings:text-gray-800 dark:prose-headings:text-primary-text prose-p:text-gray-600 dark:prose-p:text-gray-100 
+        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 xl:prose-img:max-h-96 prose-img:object-cover 
+        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-300 prose-td:text-gray-600 dark:prose-td:text-gray-400 
-      prose-a:text-primary dark:prose-a:text-action prose-strong:text-gray-900 dark:prose-strong:text-gray-50
+      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
       "
     >
       <ReactMarkdown
         components={MarkdownComponents}
-        remarkPlugins={[remarkGfm]}
+        rehypePlugins={[rehypeRaw]}
+        remarkPlugins={[remarkGfm, remarkTypograf, smartypants, oembed, emoji]}
         children={html}
       />
     </div>

content/projects/SpaceMadness.md

@@ -0,0 +1,33 @@
+---
+title: "Space Madness"
+date: 29.12.2022
+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."
+thumbnail: https://docs.peroxy.dev/uploads/cd22a289-ebe7-4d82-98e3-b639d1df2ea6.png
+---
+
+```
+ _____                            ___  ___            _                        
+/  ___|                           |  \/  |           | |                       
+\ `--.  _ __    __ _   ___   ___  | .  . |  __ _   __| | _ __    ___  ___  ___ 
+ `--. \| '_ \  / _` | / __| / _ \ | |\/| | / _` | / _` || '_ \  / _ \/ __|/ __|
+/\__/ /| |_) || (_| || (__ |  __/ | |  | || (_| || (_| || | | ||  __/\__ \\__ \
+\____/ | .__/  \__,_| \___| \___| \_|  |_/ \__,_| \__,_||_| |_| \___||___/|___/
+       | |                                                                     
+       |_|                                                                     
+```
+
+> :warning: **Assets and Sounds of this game are not self made**
+
+### About this Project
+
+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.
+
+### Technical Features
+
+- Procedual Terrain generation
+- Chunk rendering with LOD
+- Endless Level generation
+- Basic Boss Fight Logic
+- Touch input support

content/projects/first-project.md

@@ -1,16 +0,0 @@
----
-title: "My First Project"
-date: 29.12.2022
-author: kookroach
-authorLink: https://git.peroxy.dev/kookroach
-description: Short description
-thumbnail: https://images.unsplash.com/photo-1640539984026-c1b0d7c5d4b5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1332&q=80
----
-
-# First project
-
-This is a project
-
-You can add pics
-
-![Foo](https://images.unsplash.com/photo-1593508512255-86ab42a8e620?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=578&q=80)

content/projects/markdown-test.md

@@ -1,240 +0,0 @@
----
-title: "Markdown test"
-date: 29.12.2022
-author: kookroach
-authorLink: https://git.peroxy.dev/kookroach
-description: Short description
----
-
-# USE ONLY H3 TAGS FOR HEADER HYPERLINKS 
-### Test heading
-
-
-
-## Horizontal Rules
-
-___
-
----
-
-***
-
-
-## Typographic replacements
-
-Enable typographer option to see result.
-
-(c) (C) (r) (R) (tm) (TM) (p) (P) +-
-
-test.. test... test..... test?..... test!....
-
-!!!!!! ???? ,,  -- ---
-
-"Smartypants, double quotes" and 'single quotes'
-
-
-## Emphasis
-
-**This is bold text**
-
-__This is bold text__
-
-*This is italic text*
-
-_This is italic text_
-
-~~Strikethrough~~
-
-
-## Blockquotes
-
-
-> Blockquotes can also be nested...
->> ...by using additional greater-than signs right next to each other...
-> > > ...or with spaces between arrows.
-
-
-## Lists
-
-Unordered
-
-+ Create a list by starting a line with `+`, `-`, or `*`
-+ Sub-lists are made by indenting 2 spaces:
-  - Marker character change forces new list start:
-    * Ac tristique libero volutpat at
-    + Facilisis in pretium nisl aliquet
-    - Nulla volutpat aliquam velit
-+ Very easy!
-
-Ordered
-
-1. Lorem ipsum dolor sit amet
-2. Consectetur adipiscing elit
-3. Integer molestie lorem at massa
-
-
-1. You can use sequential numbers...
-1. ...or keep all the numbers as `1.`
-
-Start numbering with offset:
-
-57. foo
-1. bar
-
-
-## Code
-
-Inline `code`
-
-Indented code
-
-    // Some comments
-    line 1 of code
-    line 2 of code
-    line 3 of code
-
-
-Block code "fences"
-
-```
-Sample text here...
-```
-
-Syntax highlighting
-
-``` js
-var foo = function (bar) {
-  return bar++;
-};
-
-console.log(foo(5));
-```
-
-## Tables
-
-| Option | Description |
-| ------ | ----------- |
-| data   | path to data files to supply the data that will be passed into templates. |
-| engine | engine to be used for processing templates. Handlebars is the default. |
-| ext    | extension to be used for dest files. |
-
-Right aligned columns
-
-| Option | Description |
-| ------:| -----------:|
-| data   | path to data files to supply the data that will be passed into templates. |
-| engine | engine to be used for processing templates. Handlebars is the default. |
-| ext    | extension to be used for dest files. |
-
-
-## Links
-
-[link text](http://dev.nodeca.com)
-
-[link with title](http://nodeca.github.io/pica/demo/ "title text!")
-
-Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
-
-
-## Images
-
-![Minion](https://octodex.github.com/images/minion.png)
-![Stormtroopocat](https://octodex.github.com/images/stormtroopocat.jpg "The Stormtroopocat")
-
-Like links, Images also have a footnote style syntax
-
-![Alt text][id]
-
-With a reference later in the document defining the URL location:
-
-[id]: https://octodex.github.com/images/dojocat.jpg  "The Dojocat"
-
-
-## Plugins
-
-The killer feature of `markdown-it` is very effective support of
-[syntax plugins](https://www.npmjs.org/browse/keyword/markdown-it-plugin).
-
-
-### [Emojies](https://github.com/markdown-it/markdown-it-emoji)
-
-> Classic markup: :wink: :crush: :cry: :tear: :laughing: :yum:
->
-> Shortcuts (emoticons): :-) :-( 8-) ;)
-
-see [how to change output](https://github.com/markdown-it/markdown-it-emoji#change-output) with twemoji.
-
-
-### [Subscript](https://github.com/markdown-it/markdown-it-sub) / [Superscript](https://github.com/markdown-it/markdown-it-sup)
-
-- 19^th^
-- H~2~O
-
-
-### [\<ins>](https://github.com/markdown-it/markdown-it-ins)
-
-++Inserted text++
-
-
-### [\<mark>](https://github.com/markdown-it/markdown-it-mark)
-
-==Marked text==
-
-
-### [Footnotes](https://github.com/markdown-it/markdown-it-footnote)
-
-Footnote 1 link[^first].
-
-Footnote 2 link[^second].
-
-Inline footnote^[Text of inline footnote] definition.
-
-Duplicated footnote reference[^second].
-
-[^first]: Footnote **can have markup**
-
-    and multiple paragraphs.
-
-[^second]: Footnote text.
-
-
-### [Definition lists](https://github.com/markdown-it/markdown-it-deflist)
-
-Term 1
-
-:   Definition 1
-with lazy continuation.
-
-Term 2 with *inline markup*
-
-:   Definition 2
-
-        { some code, part of Definition 2 }
-
-    Third paragraph of definition 2.
-
-_Compact style:_
-
-Term 1
-  ~ Definition 1
-
-Term 2
-  ~ Definition 2a
-  ~ Definition 2b
-
-
-### [Abbreviations](https://github.com/markdown-it/markdown-it-abbr)
-
-This is HTML abbreviation example.
-
-It converts "HTML", but keep intact partial entries like "xxxHTMLyyy" and so on.
-
-*[HTML]: Hyper Text Markup Language
-
-### [Custom containers](https://github.com/markdown-it/markdown-it-container)
-
-::: warning
-*here be dragons*
-:::
-
-[go to 3rd heading](#test-heading)

desc.d.ts

@@ -0,0 +1 @@
+declare module "@mavrin/remark-typograf";

docker-compose.dev.yml

@@ -17,6 +17,8 @@ services:
       - "traefik.http.services.peroxy_site_dev-service.loadbalancer.server.port=3000"
     networks:
       - proxy
+    volumes:
+     - ./dev_site:/var/lib/website/dev
 
 networks:
   proxy:

docker-compose.yml

@@ -17,6 +17,8 @@ services:
       - "traefik.http.services.peroxy_site-service.loadbalancer.server.port=3000"
     networks:
       - proxy
+    volumes:
+     - ./dev_site:/var/lib/website/prod
 
 networks:
   proxy:

layouts/MainLayout.tsx

@@ -1,14 +1,13 @@
 import { PropsWithChildren } from "react";
+import { R3Gradient } from '../components/R3Background';
 import { Navbar } from "../components/Navbar";
 
 export const MainLayout = ({ children }: PropsWithChildren) => {
   return (
     <div className="w-full">
       <Navbar />
-      <div className="mt-4 w-fit mx-auto bg-amber-800/20 text-amber-600 px-4 py-2 rounded-md font-bold">
+      <R3Gradient />
-        Under construction 👷‍♂️
+      <main className="xl:p-5 p-4 px-5 xl:mx-0">{children}</main>
-      </div>
-      <main className="xl:p-10 p-4 px-10 xl:mx-0">{children}</main>
     </div>
   );
 };

package.json

@@ -9,10 +9,15 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@agentofuser/remark-oembed": "^1.0.4",
+    "@mavrin/remark-typograf": "^2.2.0",
+    "@react-three/drei": "^9.56.19",
+    "@react-three/fiber": "^8.11.0",
     "@tailwindcss/typography": "^0.5.8",
     "@types/node": "18.11.11",
     "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
+    "@types/three": "^0.149.0",
     "framer-motion": "^8.0.2",
     "gray-matter": "^4.0.3",
     "next": "13.0.6",
@@ -22,9 +27,14 @@
     "react-icons": "^4.7.1",
     "react-markdown": "^8.0.4",
     "react-syntax-highlighter": "^15.5.0",
+    "rehype-raw": "^6.1.1",
+    "rehype-sanitize": "^5.0.1",
     "remark": "^14.0.2",
+    "remark-emoji": "^3.1.0",
     "remark-gfm": "^3.0.1",
     "remark-html": "^15.0.1",
+    "remark-smartypants": "^2.0.0",
+    "three": "^0.149.0",
     "typescript": "4.9.3"
   },
   "devDependencies": {

pages/blog/[slug].tsx

@@ -13,6 +13,8 @@ import { StyledMarkdown } from "../../components/StyledMarkdown";
 export const BlogArticle = ({ frontMatter, html }: MarkdownRenderingResult) => {
   return (
     <MainLayout>
+      <div className="rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:shadow-gray-900 dark:border-gray-700 gap-4 bg-black bg-opacity-30 round">
+        <div className="mx-10 mt-5 mb-10">
           <Link href="/blog">
             <button className="flex flex-row items-center gap-2 text-primary hover:text-primary-dark dark:text-secondary dark:hover:text-secondary/50 transition-all ease-in duration-75">
               <BackIcon />
@@ -21,6 +23,8 @@ export const BlogArticle = ({ frontMatter, html }: MarkdownRenderingResult) => {
           </Link>
           <PostHeader frontMatter={frontMatter} estTime={readingTime(html)} />
           <StyledMarkdown html={html} />
+        </div>
+      </div>
     </MainLayout>
   );
 };

pages/blog/index.tsx

@@ -13,12 +13,12 @@ const BlogCard = ({
   slug: string;
 }) => {
   return (
-    <div className="p-4 rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:shadow-gray-900 dark:border-gray-700">
+    <div className="p-4 rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:shadow-gray-900 dark:border-gray-700 bg-black bg-opacity-60">
       <div className="text-sm font-medium text-gray-500">
         {formatDate(blog.date)}
       </div>
       <h2 className="text-2xl font-bold">{blog.title}</h2>
-      <p className="text-gray-600 dark:text-gray-400 text-lg">
+      <p className="text-gray-600 dark:text-gray-400 text-sm">
         {blog.description}
       </p>
       <Link href={`blog/${slug}`}>
@@ -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-gray-200 dark:bg-gray-700 my-4 rounded-full" />
+      <div className="w-full h-0.5 bg-violet-200 dark:bg-violet-700 my-4 rounded-full" />
       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
         {posts.map((post, index) => (
           <BlogCard

pages/project/[slug].tsx

@@ -16,6 +16,8 @@ export const ProjectArticle = ({
 }: MarkdownRenderingResult) => {
   return (
     <MainLayout>
+      <div className="rounded-md border border-gray-200 shadow-md shadow-gray-200 dark:shadow-gray-900 dark:border-gray-700 gap-4 bg-black bg-opacity-30 round">
+        <div className="mx-10 my-10">
           <Link href="/projects">
             <button className="flex flex-row items-center gap-2 text-primary hover:text-primary-dark dark:text-secondary dark:hover:text-secondary/50 transition-all ease-in duration-75">
               <BackIcon />
@@ -26,6 +28,8 @@ export const ProjectArticle = ({
           <PostHeader frontMatter={frontMatter} estTime={readingTime(html)} />
 
           <StyledMarkdown html={html} />
+        </div>
+      </div>
     </MainLayout>
   );
 };

pages/projects/index.tsx

@@ -13,13 +13,13 @@ const ProjectCard = ({
   slug: string;
 }) => {
   return (
-    <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">
+    <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">
         <div className="text-sm font-medium text-gray-500">
           {formatDate(project.date)}
         </div>
         <h2 className="text-2xl font-bold">{project.title}</h2>
-        <p className="text-gray-600 dark:text-gray-400 text-lg">
+        <p className="text-gray-600 dark:text-gray-400 text-sm">
           {project.description}
         </p>
         <Link href={`project/${slug}`}>
@@ -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-gray-200 dark:bg-gray-700 my-4 rounded-full" />
+      <div className="w-full h-0.5 bg-violet-200 dark:bg-violet-700 my-4 rounded-full" />
       <div className="grid grid-cols-1 gap-4">
         {posts.map((post, index) => (
           <ProjectCard

styles/globals.css

@@ -7,9 +7,12 @@ html {
   scroll-behavior: smooth;
 }
 body {
-  @apply dark:bg-gradient-dark dark:text-primary-text bg-slate-100 text-gradient-dark xl:w-2/3 w-full mx-auto;
+  @apply dark:bg-gradient-dark dark:text-primary-text bg-slate-100 text-gradient-dark w-full mx-auto;
+}
+main {
+  max-width: 800px !important;
+  margin: auto !important;
 }
-
 .prose {
   margin: 0;
   min-width: 100%;
@@ -32,7 +35,7 @@ pre > div > div > button > svg:hover {
 }
 
 h1 > a, h2 > a, h3 > a, h4 > a {
-  @apply cursor-pointer relative text-gray-800 dark:text-primary-text decoration-transparent font-bold !important;
+  @apply cursor-pointer relative text-gray-800 dark:text-gray-100 decoration-transparent font-bold !important;
 }
 
 h1 > a:hover::before,

tsconfig.json

@@ -15,6 +15,11 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": [
+    "next-env.d.ts", 
+    "**/*.ts", 
+    "**/*.tsx",
+    "desc.d.ts"
+  ],
   "exclude": ["node_modules"]
 }