feat: add 404 and stuff

Author: prplwtf

src/App.js

@@ -18,4 +18,10 @@ document.addEventListener("DOMContentLoaded", (async () => {
 
     Route(window.location.hash)
   }, 10); 
-}))
+}))
+
+function Error() {
+  ModifyAppTitle()
+  ProgressBar(100)
+  return App.innerHTML = `An unknown error occured, check your browser console for more information.`
+}

src/components/elements/NavigationBarElement.js

@@ -30,7 +30,7 @@ function NavigationBarElement() {
       <div class="col-auto">
         ${LinkElement()}
         <a href="#blog">
-          <button type="button" class="btn ${ButtonClass} rounded-5">
+          <button type="button" class="btn ${ButtonClass} rounded-pill">
             posts
             <span class="ripple-surface"></span>
           </button>

src/components/sections/NotfoundSection.js

@@ -0,0 +1,16 @@
+function NotfoundSection() {
+  return `
+    <p class="text-center">
+      <i class="bi bi-cup h1 me-2 mt-1"></i>
+      <span class="h1">404</span>
+    </p>
+    <p class="text-center">
+      <a href="#">
+        <button type="button" class="btn btn-primary rounded-pill mt-2">
+          back to safety
+          <span class="ripple-surface"></span>
+        </button>
+      </a>
+    </p>
+  `
+}

src/components/sections/ReadSection.js

@@ -3,6 +3,7 @@ async function ReadSection() {
 
   let PostContentFile = `${window.location.hash.replace("#read/", "")}.md`
   let Post = window.Blogs.find(item => item.Content === PostContentFile)
+  if(!Post) { return window.location = "#404" }
   let PostContentPath = `./posts/${Post.Content}`
 
   ModifyAppTitle(Post.Content.replace(".md", ""))

src/router/Import.js

@@ -13,6 +13,7 @@ function Import(url, id, callback) {
 
   script.onerror = function() {
     console.error(`Failed to load script with id "${id}"`);
+    return Error();
   };
 
   script.src = url;

src/router/Route.js

@@ -43,9 +43,14 @@ async function Route(view) {
     })
   }
 
-  ModifyAppTitle()
-  ProgressBar(100)
-  return App.innerHTML = `An unknown error occured, check your browser console for more information.`
+  // #404
+  console.info(`View ${view} not found, returning 404.`)
+  return Import("./src/components/sections/NotfoundSection.js", "Section", function() {
+    App.innerHTML = `${NotfoundSection()}`
+    ModifyAppTitle("404")
+    Effects()
+    ProgressBar(100)
+  })
 }
 
 window.addEventListener("hashchange", function() {

src/router/Unload.js

@@ -3,6 +3,6 @@ function Unload(id) {
   if (script) {
     script.parentNode.removeChild(script);
   } else {
-    console.warn(`No script found with id "${id}".`);
+    return console.info(`Failed to unload script with id "${id}"`);
   }
 }