From a89e36aa655c48ce3346228c865e7dc3edb7c3d1 Mon Sep 17 00:00:00 2001
From: Daniel Kluge <daniel-git@c0ntroller.de>
Date: Tue, 18 Oct 2022 17:38:11 +0200
Subject: [PATCH] Fixes for the front page

---
 pages/index.tsx              | 25 +++++++++++++++++++++++--
 styles/Blog/Blog.module.scss |  7 +++++++
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index b6d5414..06f54ff 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,14 +1,35 @@
 import type { NextPage } from "next";
 import Layout from "../components/Blog/Layout";
-import type { ContentList } from "../lib/content/types";
+import type { ContentList, Project, Diary } from "../lib/content/types";
 import ProjectCard from "../components/Blog/Card";
 import { getContentList } from "../lib/content/generateBackend";
 
 import styles from "../styles/Blog/Front.module.scss";
 
+// https://stackoverflow.com/a/6274381
+function shuffle(a: any[]) {
+    for (let i = a.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [a[i], a[j]] = [a[j], a[i]];
+    }
+    return a;
+}
+
 const Blog: NextPage<{ content: ContentList }> = ({content}) => {
+    const clearDescription = (description: string) => {
+        const linkRegex = /#%\{([a-z0-9 \.-\/:]*)\|([a-z0-9 \/:\.-]*)\}/ig;
+        const cmdRegex = /%\{([a-z0-9 \.-\/:]*)}/ig;
+
+        return description.replace(linkRegex, "$1").replace(cmdRegex, "\"$1\"");
+    };
+
     const generateCards = (type: string) => {
-        return <div className={styles.contentList}>{content.filter(p => p.type === type).map(p => <ProjectCard key={p.name} title={p.title} description={p.desc.join(" ")} type={p.type} name={p.name} />)}</div>;
+        return <div className={styles.contentList}>{
+            (shuffle(content.filter(p => p.type === type)) as (Project|Diary)[])
+            .map(p => 
+            <ProjectCard key={p.name} title={p.title} description={clearDescription(p.desc.join(" "))} type={p.type} name={p.name} />
+            )}
+        </div>;
     };
 
     return <>
diff --git a/styles/Blog/Blog.module.scss b/styles/Blog/Blog.module.scss
index a6e5911..b1294db 100644
--- a/styles/Blog/Blog.module.scss
+++ b/styles/Blog/Blog.module.scss
@@ -36,4 +36,11 @@
         border-bottom-left-radius: 1em;
         border-bottom-right-radius: 1em;
     }
+
+    h1 {
+        color: var(--blog_color-accent);
+    }
+    h2, h3, h4, h5, h6 {
+        color: var(--blog_color-accent-dark);
+    }
 }