beggenings of the blog and dynamic description based on route

pages/blog/articles/Welcome.md

@@ -0,0 +1,9 @@
+# Hey! Welcome to my site!
+```
+this is a code block
+```
+
+this is just text
+
+
+#### This is smaller heading

pages/blog/blog.html

@@ -0,0 +1,8 @@
+<h2>this is my blog</h2>
+<p><i>a good excuse to incoherently talk to myself</i></p>
+<p>i think</p>
+<br>
+
+<br>
+<p>articles:</p>
+<a href="#" onclick="blogVisitArticle('Welcome', 'a welcome article for my website')">welcome</a>

res/blog.js

@@ -0,0 +1,19 @@
+const blogVisitArticle = async (name, desc) => {
+    if (/[^a-zA-Z0-9\.]/.test(name)) {
+        alert('Tried to access and invalid article (invalid name)');
+        console.error('Tried to access and invalid article (invalid name)');
+        return;
+    }
+
+    const res = await fetch(`/pages/blog/articles/${name}.md`);
+    if (!res.ok) {
+        console.error('Article not found');
+        peformRouteAction('/');
+        return;
+    }
+
+    const articleMarkdown = await res.text();
+    // TODO: The output markdown is not sanitized. This is not really 100000% urgent, since I am the one that is uploading the aricles, but this still may pose a threat.
+    A('#content-container').html(marked(articleMarkdown));
+    A('meta[name="description"]').attr('content', desc);
+}

res/index.js

@@ -1,4 +1,5 @@
 let selectedButtonId = 'button-home';
+const loadedScripts = [];
 
 const changeSelected = (buttonId) => {
     A(`#${selectedButtonId}`).removeClass('button-selected');
@@ -10,7 +11,7 @@ const stripTrailingSlash = (str) => {
     return str.endsWith('/') ? str.slice(0, -1) : str;
 };
 
-const peformRouteAction = (pathname) => {
+const peformRouteAction = async (pathname) => {
     const route = stripTrailingSlash(pathname);
 
     switch (route) {
@@ -18,7 +19,15 @@ const peformRouteAction = (pathname) => {
             A('#content-container').load('/pages/home.html');
             break;
         }
+        case '/blog': {
+            A('meta[name="description"]').attr('content', "hippoz's blog");
+            await loadScript('https://cdn.jsdelivr.net/npm/marked/marked.min.js');
+            await loadScript('/res/blog.js');
+            A('#content-container').load('/pages/blog/blog.html');
+            break;
+        }
         case '/upload': {
+            A('meta[name="description"]').attr('content', "hippoz's upload server");
             A('#content-container').load('/pages/upload.html');
             break;
         }
@@ -27,10 +36,12 @@ const peformRouteAction = (pathname) => {
             break;
         }
         case '/about': {
+            A('meta[name="description"]').attr('content', "hippoz's about page. i'm hippoz");
             A('#content-container').load('/pages/about.html');
             break;
         }
         case '/contact': {
+            A('meta[name="description"]').attr('content', "you can contact hippoz");
             A('#content-container').load('/pages/contact.html');
             break;
         }
@@ -44,6 +55,7 @@ const peformRouteAction = (pathname) => {
 
 const buttonMap = {
     'button-home': '/',
+    'button-blog': '/blog',
     'button-file-server': '/upload',
     'button-git-server': '/git',
     'button-about-me': '/about',
@@ -89,6 +101,22 @@ const updateFromCurrentPathname = () => {
     peformRouteAction(pathname);
 }
 
+const loadScript = (src) => {
+    if (loadedScripts.includes(src)) {
+        return;
+    }
+    return new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.onload = () => {
+            loadedScripts.push(src);
+            resolve();
+        };
+        script.onerror = reject;
+        script.src = src;
+        document.head.appendChild(script);
+    });
+}
+
 A(() => {
     A('.navigation-buttons .button-default').each((el) => {
         A(el).on('click', () => {