Update index.js

Added conditional logic for woking
on both development and production
Some formatting and cleanup

javascript/index.js

@@ -5,32 +5,41 @@ document.addEventListener("DOMContentLoaded", function () {
 function loadPosts() {
   let postPairs = new Array();
   const postList = document.getElementById("postList");
-  fetch("posts/")
+  fetch("/posts/")
     .then((response) => response.text())
     .then((data) => {
       const fileNames = data
         .match(/href="([^"]+\.html)"/g)
-        .map(match => match.replace(/href="|"/g, ''));
+        .map((match) => match.replace(/href="|"/g, ""));
       return Promise.all(
         fileNames.map((fileName) => {
-          return fetch(`/posts/${fileName}`)
+          let postUrl = "";
+          if (
+            window.location.hostname === "localhost" ||
+            window.location.hostname === "127.0.0.1"
+          ) {
+            postUrl = `${fileName}`;
+          } else {
+            postUrl = `/posts/${fileName}`;
+          }
+          return fetch(postUrl)
             .then((response) => response.text())
             .then((postContent) => {
               const doc = new DOMParser().parseFromString(
                 postContent,
-                "text/html"
+                "text/html",
               );
               const title = doc.title;
               const date = doc.getElementById("date").textContent;
               const listItem = document.createElement("li");
               listItem.className = "postitem";
-              listItem.innerHTML = `<a href="/posts/${fileName}">${title}</a> - <em>${date}</em>`;
+              listItem.innerHTML = `<a href="${postUrl}">${title}</a> - <em>${date}</em>`;
               postPairs.push([new Date(date), listItem]);
             })
             .catch((error) =>
-              console.error(`Error fetching post ${fileName}: ${error}`)
+              console.error(`Error fetching post ${postUrl}: ${error}`),
             );
-        })
+        }),
       );
     })
     .then(() => {