feat Posts: Add posts section rendered from a yaml file

.gitignore

@@ -1 +1,2 @@
-configuration/Configuration.yml
+configuration/Configuration.yml
+configuration/Posts.yml

configuration/Posts.example.yml

@@ -0,0 +1,5 @@
+- Title: Introducing Gravity, a new way to write blogs.
+  Description: Lorem ipsum or whatever
+
+- Title: Meet Nebula - Pterodactyl takes flight!
+  Description: I create stuff!

src/components/elements/MissingConfigurationElement.js

@@ -1,11 +1,11 @@
-function MissingConfigurationElement() {
+function MissingConfigurationElement(OldConfiguration, NewConfiguration) {
   return `
-    <div class="row mb-4 pb-3">
+    <div class="row pb-4">
       <div class="col-6">
         <div class="bg-dark-subtle rounded-4 py-2 px-3">
           <p class="m-0 text-center">
             <code class="text-dark">
-              Configuration.example.yml
+              ${OldConfiguration}
             </code>
           </p>
         </div>
@@ -17,7 +17,7 @@ function MissingConfigurationElement() {
         <div class="bg-dark-subtle rounded-4 py-2 px-3">
           <p class="m-0 text-center">
             <code class="text-danger-emphasis">
-              Configuration.yml
+              ${NewConfiguration}
             </code>
           </p>
         </div>

src/components/elements/NavigationBarElement.js

@@ -3,8 +3,17 @@ function NavigationBarElement() {
   if(window.location.hash != "#blog") {
     ButtonClass = "btn-danger"
   }
+
+  let ConfigurationReminder = ""
+  if(ExampleConfiguration) {
+    ConfigurationReminder = MissingConfigurationElement("Configuration.example.yml", "Configuration.yml")
+  }
+  if(ExampleBlogs && window.location.hash == "#blog") {
+    ConfigurationReminder = MissingConfigurationElement("Posts.example.yml", "Posts.yml")
+  }
 
   return `
+    ${ConfigurationReminder}
     <div class="row mb-3">
       <div class="col me-auto">
         <h3 class="fw-bolder text-danger-emphasis text-truncate" onclick="Route('#')" style='cursor: pointer;'>

src/components/elements/posts/BlogListElement.js

@@ -0,0 +1,31 @@
+function BlogListSection() {
+  let Posts = ""
+  window.Blogs.forEach(Post => {
+    Posts = `
+      ${Posts}
+      
+      <div class="col-12 mb-3">
+        <div class="border border-dark border-opacity-25 p-4 rounded-4">
+          <div class="row d-flex">
+            <div class="col-10 me-auto">
+              <span class="h5 fw-bold">
+                ${Post.Title}
+              </span>
+              <span class="d-block">
+                ${Post.Description}
+              </span>
+            </div>
+            <div class="col-auto my-auto">
+              <button type="button" class="btn shadow-none text-danger-emphasis"><i class="bi bi-chevron-right"></i></button>
+            </div>
+          </div>
+        </div>
+      </div>
+    `
+  });
+  return `
+    <div class="row">
+      ${Posts}
+    </div>
+  `
+}

src/components/sections/BlogSection.js

@@ -3,6 +3,7 @@ function BlogSection() {
     ${NavigationBarElement()}
     <p>
       blog section
+      ${BlogListSection()}
     </p>
     ${FooterElement()}
   `

src/configuration/FetchBlogs.js

@@ -0,0 +1,24 @@
+let BlogsURL = "./configuration/Posts.yml"
+let ExampleBlogs = false
+
+async function FetchBlogs() {
+  var xhr = new XMLHttpRequest()
+  xhr.open("GET", BlogsURL, true)
+  xhr.onreadystatechange = async function () {
+    if (xhr.readyState == 4 && xhr.status == 200) {
+      var res = jsyaml.load(xhr.responseText)
+      window.Blogs = res
+      return;
+    }
+    if (xhr.readyState == 4 && xhr.status == 404) {
+      if(BlogsURL != "./configuration/Posts.example.yml") {
+        ExampleBlogs = true
+        BlogsURL = "./configuration/Posts.example.yml"
+        FetchBlogs()
+      } else {
+        return console.error("Posts.yml could not be found!")
+      }
+    }
+  }
+  xhr.send()
+}

src/configuration/FetchConfiguration.js

@@ -1,4 +1,5 @@
 let ConfigurationURL = "./configuration/Configuration.yml"
+let ExampleConfiguration = false
 
 async function FetchConfiguration() {
   var xhr = new XMLHttpRequest()
@@ -12,13 +13,9 @@ async function FetchConfiguration() {
     }
     if (xhr.readyState == 4 && xhr.status == 404) {
       if(ConfigurationURL != "./configuration/Configuration.example.yml") {
-        ProgressBar(99.99, 5)
-        App.innerHTML = `${MissingConfigurationElement()}`
-        setTimeout(() => {
-          ProgressBar(100)
-          ConfigurationURL = "./configuration/Configuration.example.yml"
-          FetchConfiguration()
-        }, 5000);
+        ExampleConfiguration = true
+        ConfigurationURL = "./configuration/Configuration.example.yml"
+        FetchConfiguration()
       } else {
         await RenderConfiguration()
         return console.error("Configuration.yml could not be found!")

src/configuration/RenderConfiguration.js

@@ -1,9 +1,5 @@
 async function RenderConfiguration() {
   // Render values
-  if(!window.Configuration) {
-    AppTitle.innerHTML = "welcome to gravity"
-    return;
-  }
   AppTitle.innerHTML = window.Configuration.Application.Title || "gravity"
   return;
 }

src/imports/ImportConfigurations.js

@@ -1,4 +1,5 @@
 async function ImportConfigurations() {
   Import("./src/configuration/RenderConfiguration.js", "RenderConfiguration")
   Import("./src/configuration/FetchConfiguration.js", "FetchConfiguration", function() { FetchConfiguration() })
+  Import("./src/configuration/FetchBlogs.js", "FetchBlogs", function() { FetchBlogs() })
 }

src/imports/ImportElements.js

@@ -5,6 +5,7 @@ async function ImportElements() {
 		{ Identifier: "LinkElement", Path: "LinkElement.js" },
 		{ Identifier: "ConnectionElement", Path: "ConnectionElement.js" },
 		{ Identifier: "MissingConfigurationElement", Path: "MissingConfigurationElement.js" },
+		{ Identifier: "BlogListElement", Path: "posts/BlogListElement.js" },
 	]
 
   for (let i = Elements.length - 1; i >= 0; i--) {