feat Site: this is so cool

prplwtf · May 30, 2024 · d9ac6b1 · d9ac6b1
1 parent f320ef0
commit d9ac6b1
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 81 deletions.
diff --git a/configuration/Posts.example.yml b/configuration/Posts.example.yml
@@ -3,11 +3,4 @@
   Topic: product release
   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
diff --git a/src/assets/style.css b/src/assets/style.css
@@ -13,6 +13,8 @@
   max-width: 650px;
 }
 
+.ripple-surface::before { transition: opacity 150ms ease-in,background-color 150ms ease-in; }
+
 /* markdown styling */
 #MarkdownContainer code.hljs {
   background-color: var(--bs-body-bg) !important;

diff --git a/src/components/elements/ConnectionElement.js b/src/components/elements/ConnectionElement.js
@@ -2,24 +2,25 @@ function ConnectionElement(Icon, Link, Username, Defined) {
   if(!Defined) return ""
 
   return `
-    <div class="col py-2" onclick="window.location='https://${Link}'">
-      <div
-        class="border border-dark border-opacity-25 py-2 px-3 rounded-4 position-relative" 
-        style="
-          cursor: pointer;
-          --mdc-ripple-hover-opacity: .02;
-          --mdc-ripple-focus-opacity: .02;
-          --mdc-ripple-press-opacity: .05;
-        "
-      >
-        <p class="text-truncate my-1">
-          <i class="bi bi-${Icon} pe-1"></i>
-          <span class="opacity-50">
-            ${Username}
-          </span>
-        </p>
-        <span class="ripple-surface"></span>
-      </div>
+  <div class="col py-2">
+    <a href="https://${Link}" class="text-decoration-none">
+        <div
+          class="border border-dark border-opacity-25 py-2 px-3 rounded-4 position-relative" 
+          style="
+            --mdc-ripple-hover-opacity: .02;
+            --mdc-ripple-focus-opacity: .02;
+            --mdc-ripple-press-opacity: .05;
+          "
+        >
+          <p class="text-truncate my-1 text-body">
+            <i class="bi bi-${Icon} pe-1"></i>
+            <span class="opacity-50">
+              ${Username}
+            </span>
+          </p>
+          <span class="ripple-surface"></span>
+        </div>
+      </a>
     </div>
   `
 }
diff --git a/src/components/elements/FooterElement.js b/src/components/elements/FooterElement.js
@@ -1,10 +1,12 @@
 function FooterElement() {
   return `
-    <p class="mt-4 text-secondary opacity-75 text-center">
-      written with
-      <span onclick='Route("#about")' class='text-primary-emphasis' style='cursor: pointer'>
-        <i class="bi bi-cup-hot-fill"></i> writea
-      </span>
-    </p>
+    <a href="#about" class="text-decoration-none">
+      <p class="mt-4 text-secondary opacity-75 text-center">
+        written with
+        <span class='text-primary-emphasis'>
+          <i class="bi bi-cup-hot-fill"></i> writea
+        </span>
+      </p>
+    </a>
   `
 }
diff --git a/src/components/elements/LinkElement.js b/src/components/elements/LinkElement.js
@@ -35,11 +35,10 @@ function LinkElement() {
   }
 
   return `
-    <button class="btn shadow-none px-0 rounded-0 me-3">
-      <i
-        class="bi bi-${LinkIcon} text-primary-emphasis" style="font-size:${LinkIconSize}px; cursor:pointer;"
-        onclick="window.location = 'http://${Link}'"
-      ></i>
-    </button>
+    <a href="http://${Link}" class="text-decoration-none">
+      <button class="btn shadow-none px-0 rounded-0 me-3">
+        <i class="bi bi-${LinkIcon} text-primary-emphasis" style="font-size:${LinkIconSize}px;"></i>
+      </button>
+    </a>
   `
 }
diff --git a/src/components/elements/NavigationBarElement.js b/src/components/elements/NavigationBarElement.js
@@ -20,16 +20,20 @@ function NavigationBarElement() {
     ${ConfigurationReminder}
     <div class="row mb-3">
       <div class="col me-auto">
-        <h3 class="fw-bolder text-primary-emphasis text-truncate mb-0 mt-2" onclick="Route('#')" style='cursor: pointer;'>
-          ${window.Configuration.Information.Title || "writea"}
-        </h3>
+        <a href="#" class="text-decoration-none">
+          <h3 class="fw-bolder text-primary-emphasis text-truncate mb-0 mt-2">
+            ${window.Configuration.Information.Title || "writea"}
+          </h3>
+        </a>
       </div>
       <div class="col-auto">
         ${LinkElement()}
-        <button type="button" class="btn ${ButtonClass} rounded-5" onclick="Route('#blog')">
-          posts
-          <span class="ripple-surface"></span>
-        </button>
+        <a href="#blog">
+          <button type="button" class="btn ${ButtonClass} rounded-5">
+            posts
+            <span class="ripple-surface"></span>
+          </button>
+        </a>
       </div>
     </div>
   `

diff --git a/src/components/sections/BlogSection.js b/src/components/sections/BlogSection.js
@@ -25,27 +25,30 @@ function BlogSection() {
     Posts = `
       ${Posts}
       
-      <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-primary-emphasis mb-1">
-                ${Post.Topic || "post"}
-                <span class="text-dark"><i class="bi bi-dot"></i> ${Post.Content}</span>
-              </span>
-              <span class="h5 fw-bold">
-                ${Post.Title || "No title available"}
-              </span>
-              <span class="d-block">
-                ${Post.Description || "No description available"}
-              </span>
-            </div>
-            <div class="col-auto my-auto">
-              <button type="button" class="btn shadow-none text-primary-emphasis"><i class="bi bi-chevron-right"></i></button>
-            </div>
+      <div class="col-12 mb-4">
+        <a href="#read/${Post.Content.replace('.md', '')}" class="text-decoration-none text-body">
+          <div class="rounded-4 bg-dark-subtle position-relative" style="--mdc-ripple-hover-opacity: .02; --mdc-ripple-focus-opacity: .02; --mdc-ripple-press-opacity: .05;">
+            ${PostThumbnail}
+            <div class="row d-flex p-4">
+              <div class="col-10 me-auto">
+                <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>
+                <span class="h5 fw-bold">
+                  ${Post.Title || "No title available"}
+                </span>
+                <span class="d-block">
+                  ${Post.Description || "No description available"}
+                </span>
+              </div>
+              <div class="col-auto my-auto">
+                <button type="button" class="btn shadow-none text-primary-emphasis"><i class="bi bi-chevron-right"></i></button>
+              </div>
+              </div>
+            <span class="ripple-surface"></span>
           </div>
-        </div>
+        </a>
       </div>
     `
   });

diff --git a/src/components/sections/ReadSection.js b/src/components/sections/ReadSection.js
@@ -10,15 +10,13 @@ async function ReadSection() {
   let PostThumbnail = ""
   if(Post.Thumbnail) {
     PostThumbnail = `
-      <img src="./thumbnails/${Post.Thumbnail}" class="rounded-top-4 mb-5 object-fit-cover" height="170px" width="100%"/>
+      <img src="./thumbnails/${Post.Thumbnail}" class="rounded-top-4 object-fit-cover" height="170px" width="100%"/>
     `
   }
 
   let Visibility = ""
   if(!Post.Discoverable) {
-    Visibility = `private`
-  } else {
-    Visibility = `public`
+    Visibility = `<i class="bi bi-link"></i> unlisted`
   }
 
   fetch(PostContentPath)
@@ -29,9 +27,11 @@ async function ReadSection() {
       return response.text()
     })
     .then(content => {
-      content = RenderBlogFeatures(content)
-      document.querySelector('#MarkdownContainer').innerHTML = marked.parse(content)
+      content = PreRenderBlogFeatures(content)
+      let MarkdownContainer = document.getElementById('MarkdownContainer')
+      MarkdownContainer.innerHTML = marked.parse(content)
       hljs.highlightAll(document.getElementById('MarkdownContainer'))
+      MarkdownContainer.innerHTML = PostRenderBlogFeatures(MarkdownContainer.innerHTML)
       ProgressBar(100)
     })
     .catch(error => {
@@ -43,11 +43,10 @@ async function ReadSection() {
     <div class="pt-2"></div>
     <div class="pb-4 bg-dark-subtle rounded-4">
       ${PostThumbnail}
-      <div class="px-5 mb-4">
+      <div class="px-5 mb-4 pt-5">
         <p class="mb-1 text-primary-emphasis">
           ${Post.Topic || "post"}
-          <span class="text-dark">
-            <i class="bi bi-slash"></i>
+          <span class="d-none d-sm-block text-dark float-end">
             ${Visibility}
           </span>
         </p>

diff --git a/src/helpers/RenderBlogFeatures.js b/src/helpers/RenderBlogFeatures.js
@@ -1,15 +1,21 @@
-function RenderBlogFeatures(content) {
-  let output = content
-
-  // render emojis
+// This renders blog features before everything else is rendered.
+function PreRenderBlogFeatures(content) {
+  // Render emoji
   let emoji = new EmojiConvertor();
   emoji.img_set = "twitter"
   emoji.img_sets.twitter.path = "./src/vendor/img/twemoji-64/"
   emoji.img_sets.twitter.sheet = "./src/vendor/img/twemoji-64.png"
 
-  output = emoji.replace_unified(content);
-  output = emoji.replace_colons(content);
+  content = emoji.replace_unified(content);
+  content = emoji.replace_colons(content);
+
+  // Return final output
+  return content
+}
+
 
-  // return output
-  return output
+// This renders blog features after everything else has been rendered.
+function PostRenderBlogFeatures(content) {
+  // Return final output
+  return content
 }