From 33d534ca239916869936b91be31e8609b6fa04fc Mon Sep 17 00:00:00 2001
From: J-onasJones <me@jonasjones.dev>
Date: Sat, 15 Jun 2024 14:48:01 +0200
Subject: [PATCH] cleaned up post loading process

cleaned up code
made 404 and loading sequence prettier
---
 src/routes/Post.svelte | 64 ++++++++++++++++++++++++++++++++++++------
 1 file changed, 55 insertions(+), 9 deletions(-)

diff --git a/src/routes/Post.svelte b/src/routes/Post.svelte
index 4a084e9..1fdba6c 100644
--- a/src/routes/Post.svelte
+++ b/src/routes/Post.svelte
@@ -1,21 +1,31 @@
 <script lang="ts">
     import { onMount } from "svelte";
     import { marked } from 'marked';
+    import Loading from './Loading.svelte';
+    import NotFound from "./NotFound.svelte";
+    import navigate from 'svelte-spa-router';
 
     export let params: {year?: string, month?: string, day?: string, title?: string} = {};
 
     let posts: { id: any; }[] = [];
     let post: {id: String, date: String, title: String, author: String, description: String} = {};
 
+    let postTitle = "";
+    let postDescription = "";
+
+    let loading = true;
+    let error404 = false;
+    let thisHref = location.href;
+
     if (params.year && params.month && params.day && params.title) {
         const searchdate = new Date(`${params.year}-${params.month}-${params.day}`);
     } else {
-        // the URL is missing some parameters
-        // navigate to the 404 page
-        location.href = '/#/404';
+      loading = false
+      error404 = true
     }
 
     onMount(async () => {
+      redirectUrl()
     try {
       const response = await fetch('https://cdn.jonasjones.dev/blog/index.json');
 
@@ -23,23 +33,54 @@
 
       post = await findPostByDate(posts, params);
 
-      if (await post === undefined) {
-        location.href = '/#/404'
+      if (await !post) {
+        loading = false;
+        error404 = true;
+      }
+
+      if (params.month?.toString().length === 1) {
+        params.month = "0" + params.month
+      }
+      if (params.day?.toString().length === 1) {
+        params.day = "0" + params.day
       }
 
       const content = await fetch(`https://cdn.jonasjones.dev/blog/posts/${params.year}/${params.month}/${params.day}/${params.title}.md`)
 
       if (await content.ok) {
         let markdowncontent = await content.text();
-        markdowncontent = await marked.parse(markdowncontent);
+        markdowncontent = await marked.parse(removePostVars(markdowncontent));
         document.getElementById('markdowncontent').innerHTML = await markdowncontent;
+        loading = false;
+        postTitle = post.title;
+        postDescription = post.description;
+      } else {
+        loading = false
+        error404 = true
       }
 
     } catch (error) {
       console.error('Error fetching posts:', error);
+      loading = false
+      error404 = true
+
+    }
+
+    function removePostVars(content: string) {
+      // with regex if the line begins with a markdown variable declaration, remove it
+        return content.replace(/^\[.*?\]: .*$(?:\r?\n)?/gm, '');
     }
   });
 
+  async function redirectUrl() {
+    while (true) {
+        if (thisHref != location.href) {
+          location.reload()
+        }
+        await new Promise(resolve => setTimeout(resolve, 1000));
+    }
+}
+
   function findPostByDate(posts: any[], params: { year: any; month: any; day: any; title: any; }) {
     return posts.find(post => {
         // Create a Date object from the post's date string
@@ -61,12 +102,17 @@
 }
 
 </script>
+{#if loading}
+<Loading />
+{/if}
 
-<p>{params.year}, {params.month}, {params.day}, {params.title}</p>
+{#if error404}
+<NotFound />
+{/if}
 
 <div class="post">
-    <h1>{post.title}</h1>
-    <h3>{post.description}</h3>
+    <h1>{postTitle}</h1>
+    <h3>{postDescription}</h3>
     <div id="markdowncontent"></div>
 </div>