feat Site: add theme support and improve ui

.gitignore

@@ -1,4 +1,6 @@
 configuration/Configuration.yml
 configuration/Posts.yml
 posts/*
-!posts/meet-writea.md
+!posts/meet-writea.md
+thumbnails/*
+!thumbnails/meet-writea.jpg

configuration/Configuration.example.yml

@@ -2,6 +2,7 @@ Information:
   Title: writea
   Description: Writea is an open-source alternative for blogs, allowing for easy page configuration and ultimate flexibility.
   Link: github.com/prplwtf/writea
+  Theme: Default
 
 Connections:
   GitHub: prplwtf

configuration/Posts.example.yml

@@ -1,6 +1,13 @@
 - Title: test
   Description: Lorem ipsum or whatever
   Topic: product release
-  Thumbnail: writea.jpg
+  Thumbnail: meet-writea.jpg
+  Content: meet-writea.md
+  Discoverable: true
+
+- Title: test
+  Description: Lorem ipsum or whatever
+  Topic: product release
+  Thumbnail:
   Content: meet-writea.md
   Discoverable: true

index.html

@@ -9,11 +9,12 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
     <!-- Scripts and stylesheets -->
-    <link href="./src/assets/style.css" rel="stylesheet">
     <link href="./src/vendor/css/materialstyle.min.css" rel="stylesheet">
     <link href="./src/vendor/css/bootstrap-icons.min.css" rel="stylesheet">
     <link href="./src/vendor/css/emoji.css" rel="stylesheet">
     <link href="./src/vendor/hljs/styles/github-dark-dimmed.min.css" rel="stylesheet">
+    <link href="./src/assets/style.css" rel="stylesheet">
+    <link href="./themes/Default.css" rel="stylesheet">
     <script src="./src/vendor/js/materialstyle.min.js"></script>
     <script src="./src/vendor/js/js-yaml.min.js"></script>
     <script src="./src/vendor/js/marked.min.js"></script>
@@ -43,4 +44,5 @@
     </div>
 
   </body>
+  <style id="AppTheme"></style>
 </html>

src/App.js

@@ -3,6 +3,7 @@ document.addEventListener("DOMContentLoaded", (async () => {
   // Register global variables
   var App = document.getElementById("App")
   var AppTitle = document.getElementById("AppTitle")
+  var AppTheme = document.getElementById("AppTheme")
   var ProgressBarElement = document.getElementById("ProgressBarElement")
 
   // Import components

src/assets/style.css

@@ -1,5 +1,5 @@
 #ProgressBarElement {
-  border-top: 4px var(--bs-danger) solid;
+  border-top: 4px var(--bs-primary) solid;
   position: fixed;
   left: 0;
   top: 0;
@@ -13,8 +13,9 @@
   max-width: 650px;
 }
 
-code.hljs {
-  background-color: #0d0f10 !important;
-  border: 1px solid #ffffff20;
-  border-radius: 8px;
+/* markdown styling */
+#MarkdownContainer code.hljs {
+  background-color: var(--bs-body-bg) !important;
+  border: 1px solid var(--bs-border-color);
+  border-radius: 12px;
 }

src/components/elements/FooterElement.js

@@ -2,7 +2,7 @@ function FooterElement() {
   return `
     <p class="mt-4 text-secondary opacity-75 text-center">
       written with
-      <span onclick='Route("#about")' class='text-danger-emphasis' style='cursor: pointer'>
+      <span onclick='Route("#about")' class='text-primary-emphasis' style='cursor: pointer'>
         <i class="bi bi-cup-hot-fill"></i> writea
       </span>
     </p>

src/components/elements/LinkElement.js

@@ -37,7 +37,7 @@ function LinkElement() {
   return `
     <button class="btn shadow-none px-0 rounded-0 me-3">
       <i
-        class="bi bi-${LinkIcon} text-danger-emphasis" style="font-size:${LinkIconSize}px; cursor:pointer;"
+        class="bi bi-${LinkIcon} text-primary-emphasis" style="font-size:${LinkIconSize}px; cursor:pointer;"
         onclick="window.location = 'http://${Link}'"
       ></i>
     </button>

src/components/elements/MissingConfigurationElement.js

@@ -11,12 +11,12 @@ function MissingConfigurationElement(OldConfiguration, NewConfiguration) {
         </div>
       </div>
       <div class="col-1" style="margin-top: 5px;">
-        <i class="bi bi-arrow-right h4 text-danger-emphasis"></i>
+        <i class="bi bi-arrow-right h4 text-primary-emphasis"></i>
       </div>
       <div class="col-5">
         <div class="bg-dark-subtle rounded-4 py-2 px-3">
           <p class="m-0 text-center">
-            <code class="text-danger-emphasis">
+            <code class="text-primary-emphasis">
               ${NewConfiguration}
             </code>
           </p>

src/components/elements/NavigationBarElement.js

@@ -1,7 +1,7 @@
 function NavigationBarElement() {
   let ButtonClass = "btn-dark"
   if(window.location.hash != "#blog") {
-    ButtonClass = "btn-danger"
+    ButtonClass = "btn-primary"
   }
 
   let ConfigurationReminder = ""
@@ -20,7 +20,7 @@ function NavigationBarElement() {
     ${ConfigurationReminder}
     <div class="row mb-3">
       <div class="col me-auto">
-        <h3 class="fw-bolder text-danger-emphasis text-truncate mb-0 mt-2" onclick="Route('#')" style='cursor: pointer;'>
+        <h3 class="fw-bolder text-primary-emphasis text-truncate mb-0 mt-2" onclick="Route('#')" style='cursor: pointer;'>
           ${window.Configuration.Information.Title || "writea"}
         </h3>
       </div>

src/components/sections/AboutSection.js

@@ -2,14 +2,14 @@ function AboutSection() {
   return `
     ${NavigationBarElement()}
     <p>
-      <span class="text-danger-emphasis">
+      <span class="text-primary-emphasis">
         <i class="bi bi-cup-hot-fill"></i>
         writea
       </span>
       is a free, open-source and simplistic alternative for blogs
       - made with pure HTML and JavaScript.
     </p>
-    <a href="https://github.com/prplwtf/writea" target="_blank" class="text-danger">
+    <a href="https://github.com/prplwtf/writea" target="_blank" class="text-primary">
       GitHub repository
     </a>
     ${FooterElement()}

src/components/sections/BlogSection.js

@@ -18,21 +18,19 @@ function BlogSection() {
     let PostThumbnail = ""
     if (Post.Thumbnail) {
       PostThumbnail = `
-        <div class="col-12">
-          <img src="${Post.Thumbnail}" class="col-12 rounded-2 mb-3 object-fit-cover" height="90px" width="100%"/>
-        </div>
+        <img src="./thumbnails/${Post.Thumbnail}" class="rounded-top-4 object-fit-cover" height="110px" width="100%"/>
       `
     }
 
     Posts = `
       ${Posts}
       
-      <div class="col-12 mb-3" onclick="Route('#read/${Post.Content.replace('.md', '')}')">
-        <div class="border border-dark border-opacity-25 p-4 rounded-4" style="cursor:pointer;">
-          <div class="row d-flex">
-            ${PostThumbnail}
+      <div class="col-12 mb-4" onclick="Route('#read/${Post.Content.replace('.md', '')}')">
+        <div class="rounded-4 bg-dark-subtle" style="cursor:pointer;">
+          ${PostThumbnail}
+          <div class="row d-flex p-4">
             <div class="col-10 me-auto">
-              <span class="d-block text-danger-emphasis mb-1">
+              <span class="d-block text-primary-emphasis mb-1">
                 ${Post.Topic || "post"}
                 <span class="text-dark"><i class="bi bi-dot"></i> ${Post.Content}</span>
               </span>
@@ -44,7 +42,7 @@ function BlogSection() {
               </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>
+              <button type="button" class="btn shadow-none text-primary-emphasis"><i class="bi bi-chevron-right"></i></button>
             </div>
           </div>
         </div>
@@ -53,7 +51,7 @@ function BlogSection() {
   });
   return `
     ${NavigationBarElement()}
-    <div class="row">
+    <div class="row pt-2">
       ${Posts || `
         <p>
           There haven't been any posts yet, check back later!

src/components/sections/ReadSection.js

@@ -10,7 +10,7 @@ async function ReadSection() {
   let PostThumbnail = ""
   if(Post.Thumbnail) {
     PostThumbnail = `
-      <img src="${Post.Thumbnail}" class="col-12 rounded-2 mb-5 object-fit-cover" height="170px" width="100%"/>
+      <img src="./thumbnails/${Post.Thumbnail}" class="rounded-top-4 mb-5 object-fit-cover" height="170px" width="100%"/>
     `
   }
 
@@ -32,30 +32,34 @@ async function ReadSection() {
       content = RenderBlogFeatures(content)
       document.querySelector('#MarkdownContainer').innerHTML = marked.parse(content)
       hljs.highlightAll(document.getElementById('MarkdownContainer'))
+      ProgressBar(100)
     })
     .catch(error => {
       console.error('Error fetching the Markdown content:', error)
     })
 
   return `
     ${NavigationBarElement()}
-    <div class="py-4 text-center">
+    <div class="pt-2"></div>
+    <div class="pb-4 bg-dark-subtle rounded-4">
       ${PostThumbnail}
-      <p class="mb-3 text-danger-emphasis">
-        ${Post.Topic || "post"}
-        <span class="text-dark">
-          <i class="bi bi-slash"></i>
-          ${Visibility}
-        </span>
-      </p>
-      <p class="h2 fw-bolder mb-3">
-        ${Post.Title || "No title available"}
-      </p>
-      <p class="opacity-75">
-        ${Post.Description || "No description available"}
+      <div class="px-5 mb-4">
+        <p class="mb-1 text-primary-emphasis">
+          ${Post.Topic || "post"}
+          <span class="text-dark">
+            <i class="bi bi-slash"></i>
+            ${Visibility}
+          </span>
+        </p>
+        <p class="h2 fw-bolder mb-1">
+          ${Post.Title || "No title available"}
+        </p>
+        <p class="opacity-75">
+          ${Post.Description || "No description available"}
+        </div>
       </div>
     </div>
-    <div class="bg-dark-subtle rounded-4 p-5 mt-3">
+    <div class="p-xs-0 p-sm-5 py-5">
       <div id="MarkdownContainer"></div>
     </div>
     ${FooterElement()}

src/configuration/RenderConfiguration.js

@@ -1,5 +1,13 @@
 async function RenderConfiguration() {
   // Render values
   AppTitle.innerHTML = window.Configuration.Information.Title || "writea"
+
+  // Apply active theme
+  let ActiveTheme = './themes/'+(window.Configuration.Information.Theme || "Default")+'.css'
+  fetch(ActiveTheme)
+    .then(response => {
+      if (!response.ok) {throw new Error(`Network response was not ok: ${response.status}`)}
+      return AppTheme.innerHTML = `${response}`
+    })
   return;
 }

src/router/Route.js

@@ -27,9 +27,9 @@ async function Route(view) {
   // #read
   if(view == "#read" || view.startsWith("#read/")) {
     return Import("./src/components/sections/ReadSection.js", "Section", async function() {
+      ProgressBar(65)
       App.innerHTML = `${await ReadSection()}`
       Effects()
-      ProgressBar(100)
     })
   }