feat: make smooth :3

prplwtf · Oct 15, 2024 · 15526a0 · 15526a0
1 parent e2e9775
commit 15526a0
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 54 deletions.
diff --git a/configuration/Configuration.example.yml b/configuration/Configuration.example.yml
@@ -1,5 +1,6 @@
 Information:
   Title: writea
+  Icon: icon.png
   Description: Writea is an open-source alternative for blogs, allowing for easy page configuration and ultimate flexibility.
   Link: github.com/prplwtf/writea
   Theme: Default

diff --git a/images/icon.png b/images/icon.png
diff --git a/src/assets/style.css b/src/assets/style.css
@@ -27,4 +27,9 @@
 }
 [writea='read.header']:hover > [writea='read.header.thumbnail'] {
   height: 250px;
+}
+
+[writea='read.content'] {
+  transition: opacity .2s;
+  opacity: 1;
 }
diff --git a/src/components/elements/NavigationBarElement.js b/src/components/elements/NavigationBarElement.js
@@ -22,6 +22,7 @@ function NavigationBarElement() {
       <div class="col me-auto">
         <a href="#" class="text-decoration-none">
           <h3 class="fw-bolder text-primary-emphasis text-truncate mb-0 mt-2">
+            ${window.Configuration.Information.Icon ? '<img src="./images/'+window.Configuration.Information.Icon+'" height="24px" class="mb-1 me-1" style="min-width: 24px"/>' : ''}
             ${window.Configuration.Information.Title || "writea"}
           </h3>
         </a>

diff --git a/src/components/sections/BlogSection.js b/src/components/sections/BlogSection.js
@@ -1,57 +1,59 @@
 function BlogSection() {
   let Posts = ""
-  window.Blogs.forEach(Post => {
-    if(!Post.Discoverable) return
+  try {
+    window.Blogs.forEach(Post => {
+      if(!Post.Discoverable) return
 
-    if (Post.Topic.length > 20) {
-      Post.Topic = Post.Topic.substring(0,20)+".."
-    }
+      if (Post.Topic.length > 20) {
+        Post.Topic = Post.Topic.substring(0,20)+".."
+      }
 
-    if (Post.Title.length > 65) {
-      Post.Title = Post.Title.substring(0,65)+".."
-    }
+      if (Post.Title.length > 65) {
+        Post.Title = Post.Title.substring(0,65)+".."
+      }
 
-    if (Post.Description.length > 100) {
-      Post.Description = Post.Description.substring(0,100)+".."
-    }
+      if (Post.Description.length > 100) {
+        Post.Description = Post.Description.substring(0,100)+".."
+      }
 
-    let PostThumbnail = ""
-    if (Post.Thumbnail) {
-      PostThumbnail = `
-        <img src="./images/${Post.Thumbnail}" writea="post.entry.thumbnail" class="rounded-top-4 object-fit-cover" height="110px" width="100%"/>
-      `
-    }
+      let PostThumbnail = ""
+      if (Post.Thumbnail) {
+        PostThumbnail = `
+          <img src="./images/${Post.Thumbnail}" writea="post.entry.thumbnail" class="rounded-top-4 object-fit-cover" height="110px" width="100%"/>
+        `
+      }
 
-    Posts = `
-      ${Posts}
-      
-      <div writea="post.entry" 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 writea="post.entry.info" 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 writea="post.entry.title" class="h5 fw-bold">
-                  ${Post.Title || "No title available"}
-                </span>
-                <span writea="post.entry.description" 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>
-        </a>
-      </div>
-    `
-  });
+      Posts = `
+        ${Posts}
+        
+        <div writea="post.entry" 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 writea="post.entry.info" 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 writea="post.entry.title" class="h5 fw-bold">
+                    ${Post.Title || "No title available"}
+                  </span>
+                  <span writea="post.entry.description" 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>
+          </a>
+        </div>
+      `
+    });
+  } catch {}
   return `
     ${NavigationBarElement()}
     <div class="row pt-2">

diff --git a/src/components/sections/ReadSection.js b/src/components/sections/ReadSection.js
@@ -27,12 +27,18 @@ async function ReadSection() {
       return response.text()
     })
     .then(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)
+      setTimeout(() => {
+        document.querySelector('[writea="read.content"]').style.opacity = 0
+        setTimeout(() => {
+          content = PreRenderBlogFeatures(content)
+          let MarkdownContainer = document.getElementById('MarkdownContainer')
+          MarkdownContainer.innerHTML = marked.parse(content)
+          hljs.highlightAll(document.getElementById('MarkdownContainer'))
+          MarkdownContainer.innerHTML = PostRenderBlogFeatures(MarkdownContainer.innerHTML)
+          document.querySelector('[writea="read.content"]').style.opacity = 1
+          ProgressBar(100)
+        }, 225)
+      }, 200)
     })
     .catch(error => {
       console.error('Error fetching the Markdown content:', error)
@@ -59,7 +65,18 @@ async function ReadSection() {
       </div>
     </div>
     <div writea="read.content" class="p-xs-0 p-sm-5 py-5">
-      <div id="MarkdownContainer"></div>
+      <div id="MarkdownContainer">
+        <p class="placeholder-wave">
+          <span class="opacity-25 placeholder col-12 rounded-pill"></span>
+          <span class="opacity-25 placeholder col-11 rounded-pill"></span>
+          <span class="opacity-25 placeholder col-11 rounded-pill"></span>
+          <span class="opacity-25 placeholder col-10 rounded-pill"></span>
+          <span class="opacity-25 placeholder col-10 rounded-pill"></span>
+          <span class="opacity-25 placeholder col-9 rounded-pill"></span>
+          <span class="opacity-25 placeholder col-9 rounded-pill"></span>
+          <span class="opacity-25 placeholder col-8 rounded-pill"></span>
+        </p>
+      </div>
     </div>
     ${FooterElement()}
   `