Merge branch 'dev'

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
@@ -26,7 +26,8 @@ const Fragment = () => {
     }
     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,7 +38,12 @@ const Fragment = () => {
   });
 
   return (
-    <mesh ref={meshRef} position={[0, 0, 0]} rotation={[-Math.PI/17, Math.PI/20, 0]} scale={1.5}>
+    <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}
@@ -49,10 +55,9 @@ const Fragment = () => {
   );
 };
 
-
 export const R3Gradient = () => {
   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>

components/StyledMarkdown.tsx

@@ -17,7 +17,10 @@ import smartypants from "remark-smartypants";
 import rehypeRaw from "rehype-raw";
 import emoji from "remark-emoji";
 import oembed from "@agentofuser/remark-oembed";
-import YouTube from "react-youtube";
+import remarkDirective from "remark-directive";
+import remarkDirectiveRehype from "remark-directive-rehype";
+import { YouTubeVideo } from "./Youtube";
+import { ImageSlide } from "./ImageSlide";
 //import rehypeSanitize from "rehype-sanitize";
 
 SyntaxHighlighter.registerLanguage("tsx", tsx);
@@ -27,28 +30,8 @@ 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 = "";
@@ -126,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,-]+)}/;
@@ -170,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">
@@ -199,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
       "
@@ -216,7 +200,15 @@ export const StyledMarkdown = ({ html }: { html: string }) => {
       <ReactMarkdown
         components={MarkdownComponents}
         rehypePlugins={[rehypeRaw]}
-        remarkPlugins={[oembed, remarkGfm, remarkTypograf, smartypants, emoji]}
+        remarkPlugins={[
+          remarkDirective,
+          remarkDirectiveRehype,
+          oembed,
+          remarkGfm,
+          smartypants,
+          emoji,
+          remarkTypograf,
+        ]}
         children={html}
       />
     </div>

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

content/projects/ConceptArt and Game Design.md

@@ -12,20 +12,13 @@ From concept drawing to modeling to game engine. A neo-noir Game Concept inspire
 ### Sketches
 
 #### Character Concept
-![](https://wiki.tum.de/download/attachments/1030785260/Character%20Design%201%20rework.png?version=1&modificationDate=1642430318357&api=v2)
+::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]{}
-![](https://wiki.tum.de/download/attachments/1030785260/Character%20Design%202.png?version=1&modificationDate=1642430320190&api=v2)
 
 #### Environment Concept
-![](https://wiki.tum.de/download/attachments/1030785260/Env-Design%20Skizze.png?version=1&modificationDate=1642430334223&api=v2)
+::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]{}
-![](https://wiki.tum.de/download/attachments/1030785260/Env-Design%20Final.png?version=1&modificationDate=1642430333137&api=v2)
 
 ### Models
-![](https://docs.peroxy.dev/uploads/251bda2e-05e2-4fe4-828c-e3a747e5c9e8.png)
+::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]{}
-![](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)

content/projects/SpaceMadness.md

@@ -36,8 +36,7 @@ A Challenging mobile endless space shooter game.
 
 
 ### Gameplay Video
-
+::yt[Video of a cat in a box]{#1qquNEJrA10}
-https://www.youtube.com/watch?v=1qquNEJrA10
 
 ## Links
 

content/projects/markdown-test.md

@@ -1,253 +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?..... 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
-
-
-https://www.youtube.com/watch?v=lrBRV3WK2x4
-
-
-## 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
-
-```tsx
-var foo = function (bar) {
-  return bar++;
-};
-
-console.log(foo(5));
-```
-
-```tsx line=200, title="pidhsome je"
-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)

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

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 {
+.codeStyle {
-  background: transparent;
+  @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);
+}

utils/markdown.ts

@@ -4,8 +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");
@@ -14,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);
@@ -40,22 +46,32 @@ 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) {