added post backend

package-lock.json

@@ -8,6 +8,7 @@
       "name": "blog.jonasjones.dev",
       "version": "0.1.0",
       "dependencies": {
+        "marked": "^12.0.2",
         "svelte-kit": "^1.2.0",
         "svelte-spa-router": "^4.0.0"
       },
@@ -1775,6 +1776,18 @@
         "@jridgewell/sourcemap-codec": "^1.4.15"
       }
     },
+    "node_modules/marked": {
+      "version": "12.0.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz",
+      "integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",

package.json

@@ -21,6 +21,7 @@
     "vite": "^5.2.12"
   },
   "dependencies": {
+    "marked": "^12.0.2",
     "svelte-kit": "^1.2.0",
     "svelte-spa-router": "^4.0.0"
   }

src/routes.ts

@@ -1,9 +1,19 @@
 import Home from './routes/Home.svelte';
-import Post from './routes/Post.svelte';
+import Loading from './routes/Loading.svelte';
 import NotFound from './routes/NotFound.svelte';
+import wrap from 'svelte-spa-router/wrap'
 
 export default {
     '/': Home,
-    '/post/:year/:month/:day/:title': Post,
+    '/post/:year/:month/:day/:title': wrap({
+        // Note that this is a function that returns the import
+        asyncComponent: () => import('./routes/Post.svelte'),
+        // Show the loading component while the component is being downloaded
+        loadingComponent: Loading,
+        // Pass values for the `params` prop of the loading component
+        loadingParams: {
+            message: 'Loading the Name route…'
+        }
+    }),
     '*': NotFound
 };

src/routes/Loading.svelte

@@ -0,0 +1,9 @@
+<h2>Loading…</h2>
+
+<p>We're loading the route!</p>
+<p>Here's your message: {params && params.message}</p>
+
+<script>
+// Prop exported that will be filled by the router
+export let params
+</script>

src/routes/Post.svelte

@@ -1,28 +1,75 @@
 <script lang="ts">
+    import { onMount } from "svelte";
+    import { marked } from 'marked';
+
     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} = {};
+
     if (params.year && params.month && params.day && params.title) {
-        const date = new Date(`${params.year}-${params.month}-${params.day}`);
+        const searchdate = new Date(`${params.year}-${params.month}-${params.day}`);
-        if (isNaN(date.getTime())) {
-            // the date is invalid
-            // navigate to the 404 page
-            // this is the same as returning { status: 404 } from load()
-            location.href = '/404';
-        }
     } else {
         // the URL is missing some parameters
         // navigate to the 404 page
         location.href = '/#/404';
     }
+
+    onMount(async () => {
+    try {
+      const response = await fetch('https://cdn.jonasjones.dev/blog/index.json');
+
+      posts = await response.json();
+
+      post = await findPostByDate(posts, params);
+
+      if (await post === undefined) {
+        location.href = '/#/404'
+      }
+
+      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);
+        document.getElementById('markdowncontent').innerHTML = await markdowncontent;
+      }
+
+    } catch (error) {
+      console.error('Error fetching posts:', error);
+    }
+  });
+
+  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
+        const postDate = new Date(post.date);
+
+        // Extract the year, month, and day from the Date object
+        const postYear = postDate.getFullYear();
+        const postMonth = postDate.getMonth() + 1; // Months are zero-based
+        const postDay = postDate.getDate();
+
+        // Compare the extracted year, month, and day with params, and the title
+        return (
+            postYear === parseInt(params.year) &&
+            postMonth === parseInt(params.month) &&
+            postDay === parseInt(params.day) &&
+            post.id === params.title
+        );
+    });
+}
+
 </script>
 
-<h1>Lorem ipsum</h1>
+<p>{params.year}, {params.month}, {params.day}, {params.title}</p>
-<p>Tip: try changing the number in the URL's fragment, e.g. <code>#/lorem/4</code></p>
+
-{#each Array(repeat) as _}
+<div class="post">
-    <p>
+    <h1>{post.title}</h1>
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed consequatur dicta, explicabo delectus, cupiditate, rem illo repellat aperiam saepe id minus ipsa. Illum libero consectetur fuga neque officia, adipisci commodi.Porro eius harum sed architecto maxime, molestiae cum ad dignissimos eum, nihil eligendi? Non quo, modi officia doloribus distinctio pariatur sed? Veniam facere beatae ipsam reprehenderit suscipit! Sequi, distinctio debitis.
+    <h3>{post.description}</h3>
-    </p>
+    <div id="markdowncontent"></div>
-{/each}
+</div>
+
 
 <style>
 	h1 {