More progress

public/blog/blog-posts.json

@@ -1,14 +1,9 @@
 [
     {
-      "userId": 1,
-      "id": 1,
+      "userId": "Martin Prokoph",
+      "date": "08.02.2024",
       "title": "So... I have a new website now!",
-      "body": "After years of just having a lame and half broken, useless site, I proudly present my new website.\nIt is built using Astro to achieve blazing fast performance, eye candy and usefulness at the same time."
-    },
-    {
-      "userId": 1,
-      "id": 2,
-      "title": "qui est esse",
-      "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
+      "body": "After years of just having a lame and half broken, useless site, I proudly present my new website.\nIt is built using Astro to achieve blazing fast performance, eye candy and usefulness at the same time.",
+      "img": "/social-preview-image.png"
     }
 ]

src/components/Header.astro

@@ -16,9 +16,6 @@ import { Icon } from 'astro-icon/components'
     <li class="menu-item has-dropdown">
       <button aria-haspopup="true" aria-expanded="false">Mods</button>
       <ul class="dropdown-menu">
-        <li class="submenu-item">
-          <a href="/mdx-page/">MDX Page</a>
-        </li>
         <li class="submenu-item">
           <a href="/midnightlib/">MidnightLib</a>
         </li>

src/components/VersionDropdown.astro

@@ -1,5 +1,5 @@
 ---
-import { loaderList, selectedLoader, selectedVersion } from '../js/modversion.js'
+import { loaderList, versionList, selectedLoader, selectedVersion } from '../js/modversion.js'
 ---
 
 <div id="version-dropdown">
@@ -9,25 +9,21 @@ import { loaderList, selectedLoader, selectedVersion } from '../js/modversion.js
           <li class="menu-item has-version-dropdown">
             <button aria-haspopup="true" aria-expanded="false">{selectedLoader.charAt(0).toUpperCase() + selectedLoader.slice(1)}</button>
             <ul class="dropdown-menu"> 
-              { loaderList.forEach((loader) =>
+              { loaderList.map((loader) =>
                 <li class="submenu-item">
-                  <a href="">{loader.charAt(0).toUpperCase() + loader.slice(1)}</a>
+                  <a href="javascript:;">{loader.charAt(0).toUpperCase() + loader.slice(1)}</a>
                 </li>
               )}
-              <li class="submenu-item">
-                <a href="javascript:;">Quilt</a>
-              </li>
-              <li class="submenu-item">
-                <a href="javascript:;">Forge</a>
-              </li>
             </ul>
           </li>
           <li class="menu-item has-version-dropdown">
             <button aria-haspopup="true" aria-expanded="false">{selectedVersion}</button>
             <ul class="dropdown-menu">
+              { versionList.map((version) =>
                 <li class="submenu-item">
-                <a href="">MidnightLib</a>
+                  <a href="javascript:;">{version}</a>
                 </li>
+              )}
             </ul>
           </li>
         </ul>

src/js/modversion.js

@@ -4,18 +4,29 @@ var finishedArray = modInfo.reduce(function(map, value) {
   value.game_versions.forEach(version => {
     value.loaders.forEach(loader => {
       const loaderAndVersion = loader + "+" +version;
-      if (Object.values(map).includes(loaderAndVersion)) {
-        console.log("return")
-        return;
-      }
+      if (!Object.values(map).includes(loaderAndVersion)) {
         if (value.featured) map[loaderAndVersion] = value.id;
+      }
     });
   });
   return map;
 }, {});
-console.log(finishedArray);
 export var selectedLoader = "fabric";
+
+export var versionList = [];
+var versionMap = await Object.keys(finishedArray).reduce(function(map, value) { 
+    if (value.startsWith(selectedLoader)) {
+        const version = value.split("+")[1];
+        if (!Object.values(map).includes(version)) {
+            map[version] = "";
+        }
+    }
+    return map;
+}, {});
+versionList = await Object.keys(versionMap).sort().reverse();
+
 export var selectedVersion = "1.20.4";
+
 var resultingVersionID = await finishedArray[selectedLoader + "+" + selectedVersion];
 export var resultingVersion = "Could not find the latest version!";
 resultingVersion = modInfo.find((info) => info.id == resultingVersionID).version_number;

src/pages/blog/[...page].astro

@@ -1,10 +1,12 @@
 ---
 import DefaultLayout from '../../layouts/DefaultLayout.astro'
 import { Card, Pagination } from 'accessible-astro-components'
+import blogPosts from '../../../public/blog/blog-posts.json'
 
 export async function getStaticPaths({ paginate }) {
-  const response = await fetch('https://jsonplaceholder.typicode.com/posts')
-  const data = await response.json()
+  //const response = await fetch('https://jsonplaceholder.typicode.com/posts')
+  //const data = await response.json()
+  const data = blogPosts;
 
   return paginate(data, { pageSize: 6 })
 }
@@ -36,7 +38,8 @@ const { page } = Astro.props
               <Card
                 url={'/blog/' + post.title.replaceAll(' ', '-').toLowerCase()}
                 title={post.title}
-                footer={'userId:' + post.userId}
+                footer={'Written by: ' + post.userId}
+                img={post.img}
               >
                 {post.body}
               </Card>

src/pages/blog/[post].astro

@@ -1,9 +1,11 @@
 ---
 import DefaultLayout from '../../layouts/DefaultLayout.astro'
 import { Breadcrumbs, BreadcrumbsItem } from 'accessible-astro-components'
+import blogPosts from '../../../public/blog/blog-posts.json'
 
 export async function getStaticPaths() {
-  const data = await fetch('https://jsonplaceholder.typicode.com/posts').then((response) => response.json())
+  const data = blogPosts;
+  //const data = await fetch('https://jsonplaceholder.typicode.com/posts').then((response) => response.json())
 
   return data.map((post) => {
     return {
@@ -29,7 +31,7 @@ const { post } = Astro.props
   <section class="my-12">
     <div class="container">
       <h1>{post.title}</h1><br />
-      <p>By userId: {post.userId}</p>
+      <p>By user: {post.userId}</p>
     </div>
   </section>
   <section class="my-12">