update tags page

rizkikadafi · Apr 8, 2024 · f19a1f2 · f19a1f2
1 parent 498feb9
commit f19a1f2
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 20 deletions.
diff --git a/_data/blog-navigation.yml b/_data/blog-navigation.yml
@@ -1,7 +1,7 @@
 - name: Dashboard
   link: "/blog"
 - name: Category
-  link: "/blog/category"
+  link: "/blog/categories"
 - name: Recent Post
   link: "/blog/#recent"
 - name: Archive

diff --git a/_includes/blog-post-card.html b/_includes/blog-post-card.html
@@ -15,7 +15,7 @@ <h2 class="text-xl font-bold hover:text-sky-200">{{ include.post.title }}</h2>
     </div>
 
     {% for tag in include.post.tags %}
-    <a href=""
+    <a href="/blog/tags?tag={{ tag }}"
       class="inline-block mr-2 mt-2 text-sm w-fit bg-slate-500/70 backdrop-blur-md rounded-xl px-3 py-[2px] text-slate-200">{{tag}}</a>
     {% endfor %}
 

diff --git a/_layouts/blog.html b/_layouts/blog.html
@@ -11,14 +11,14 @@
   <link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.css" rel="stylesheet" />
   <link rel="stylesheet" href="/assets/css/main.css" />
 
-  <title>{{page.title}}</title>
+  <title>Kadafi's Blog {% if page.title %} | {{page.title}} {% endif %}</title>
 
 </head>
 
 <body class="bg-slate-50 dark:bg-slate-800 transition duration-500 lg:px-24">
   {% include blog-modal-navigation.html %}
   <nav id="blog-nav"
-    class="px-10 lg:px-20 bg-slate-300/70 dark:bg-transparent fixed right-0 left-0 top-0 dark:text-gray-200 z-10 py-3 lg:py-5 transition duration-300 border-slate-600 text-gray-900
+    class="px-10 lg:px-20 bg-slate-300/70 dark:bg-slate-700/70 fixed right-0 left-0 top-0 dark:text-gray-200 z-10 py-3 lg:py-5 transition duration-300 border-slate-600 text-gray-900
   after:duration-1000 ease-out after:block after:h-0.5 after:w-full after:origin-bottom-right after:scale-x-0 after:bg-slate-500 after:transition-transform after:mt-3 after:absolute after:bottom-0 after:left-0 after:rounded-md after:px-3">
     <div class="hidden after:origin-bottom-left after:scale-x-100 dark:bg-slate-800/70 backdrop-blur-md">
 
@@ -53,6 +53,7 @@
   <script src="/assets/js/toggle_dark.js"></script>
   <script src="/assets/js/blog-navbar.js"></script>
   <script src="/assets/js/category.js"></script>
+  <script src="/assets/js/tag.js"></script>
   <script src="/assets/js/blog-category-swiper.js"></script>
 </body>
 

diff --git a/_layouts/post.html b/_layouts/post.html
@@ -17,14 +17,14 @@ <h2 class="lg:w-4/5 lg:text-2xl font-bold">{{ page.title }}</h2>
 
       <div class="sm:block hidden">
         {% for tag in page.tags %}
-        <a href=""
+        <a href="/blog/tags?tag={{ tag }}"
           class="inline-block mr-2 mt-2 w-fit text-sm bg-slate-500/70 backdrop-blur-md rounded-xl px-4 py-[2px] dark:text-slate-200">{{tag}}</a>
         {% endfor %}
       </div>
     </div>
   </div>
   {% else %}
-  <div>
+  <div class="text-slate-800 dark:text-white">
     <h2 class="lg:w-4/5 text-2xl lg:text-4xl font-bold text-center m-auto">{{ page.title }}</h2>
     <div class="text-center m-auto">
       <span class="text-sm">{{ page.author }} - {{ page.date | date_to_string }}</span>
@@ -33,18 +33,20 @@ <h2 class="lg:w-4/5 text-2xl lg:text-4xl font-bold text-center m-auto">{{ page.t
 
   <div class="m-auto flex justify-center">
     {% for tag in page.tags %}
-    <a href=""
+    <a href="/blog/tags?tag={{ tag }}"
       class="inline-block my-2 mx-[3px] w-fit text-sm bg-slate-500/70 backdrop-blur-md rounded-xl px-4 py-[2px] dark:text-slate-200">{{tag}}</a>
     {% endfor %}
   </div>
   {% endif %}
 
+  {% if page.thumbnail %}
   <div class="sm:hidden px-2">
     {% for tag in page.tags %}
-    <a href=""
+    <a href="/blog/tags?tag={{ tag }}"
       class="inline-block mr-2 mt-2 w-fit text-sm bg-slate-500/70 backdrop-blur-md rounded-xl px-4 py-[2px] dark:text-slate-200">{{tag}}</a>
     {% endfor %}
   </div>
+  {% endif %}
 
   <div class="px-2 md:px-0 *:py-2 *:text-justify lg:text-base text-sm text-slate-800 dark:text-white mt-5">
     {{ content }}

diff --git a/assets/js/blog-navbar.js b/assets/js/blog-navbar.js
@@ -7,7 +7,7 @@ function handleScroll() {
   lastKnownScrollPosition = window.scrollY;
 
   if (!ticking) {
-    const stickyStyle = ['after:origin-bottom-left', 'after:scale-x-100', 'dark:bg-slate-800/70', 'backdrop-blur-md']
+    const stickyStyle = ['after:origin-bottom-left', 'after:scale-x-100', 'backdrop-blur-md']
     window.requestAnimationFrame(function() {
       if (lastKnownScrollPosition !== 0) {
         blogNav.classList.add(...stickyStyle)

diff --git a/assets/js/category.js b/assets/js/category.js
@@ -6,20 +6,21 @@ const arrayCategoriesBtn = Array.from(categoriesBtn.children)
 arrayCategories[0].classList.add("flex")
 arrayCategories[0].classList.remove("hidden")
 arrayCategoriesBtn[0].classList.add("border-[1px]", "border-slate-300")
-let prevActiveElement = arrayCategories[0]
-let prevActiveBtnElement = arrayCategoriesBtn[0]
+
+let prevActiveCategory = arrayCategories[0]
+let prevActiveBtnCategory = arrayCategoriesBtn[0]
 
 arrayCategoriesBtn.forEach((btn) => {
   btn.addEventListener("click", () => {
     id = btn.getAttribute('data-category')
     const targetElement = arrayCategories.find(elm => elm.id === id);
 
-    prevActiveBtnElement.classList.remove("border-[1px]", "border-slate-300")
-    prevActiveElement.classList.remove("flex")
-    prevActiveElement.classList.add("hidden")
+    prevActiveBtnCategory.classList.remove("border-[1px]", "border-slate-300")
+    prevActiveCategory.classList.remove("flex")
+    prevActiveCategory.classList.add("hidden")
 
-    prevActiveElement = targetElement
-    prevActiveBtnElement = btn
+    prevActiveCategory = targetElement
+    prevActiveBtnCategory = btn
 
     btn.classList.add("border-[1px]", "border-slate-300")
     targetElement.classList.add("flex")

diff --git a/assets/js/tag.js b/assets/js/tag.js
@@ -0,0 +1,43 @@
+const tags = document.getElementById('tags')
+const tagsBtn = document.getElementById('tags-btn')
+const arrayTags = Array.from(tags.children)
+const arrayTagsBtn = Array.from(tagsBtn.children)
+
+const urlParams = new URLSearchParams(window.location.search);
+const tagParam = urlParams.get('tag');
+
+let prevActiveTag = arrayTags[0]
+let prevActiveBtnTag = arrayTagsBtn[0]
+
+if (tagParam !== null) {
+  const targetElement = arrayTags.find(elm => elm.id === tagParam);
+  const targetBtn = arrayTagsBtn.find(elm => elm.getAttribute('data-tag') === tagParam);
+  targetBtn.classList.add("flex")
+  targetElement.classList.remove("hidden")
+  targetBtn.classList.add("border-[1px]", "border-slate-300")
+  prevActiveTag = targetElement
+  prevActiveBtnTag = targetBtn
+} else {
+  arrayTags[0].classList.add("flex")
+  arrayTags[0].classList.remove("hidden")
+  arrayTagsBtn[0].classList.add("border-[1px]", "border-slate-300")
+}
+
+arrayTagsBtn.forEach((btn) => {
+  btn.addEventListener("click", () => {
+    id = btn.getAttribute('data-tag')
+    const targetElement = arrayTags.find(elm => elm.id === id);
+
+    prevActiveBtnTag.classList.remove("border-[1px]", "border-slate-300")
+    prevActiveTag.classList.remove("flex")
+    prevActiveTag.classList.add("hidden")
+
+    prevActiveTag = targetElement
+    prevActiveBtnTag = btn
+
+    btn.classList.add("border-[1px]", "border-slate-300")
+    targetElement.classList.add("flex")
+    targetElement.classList.remove("hidden")
+  })
+})
+
diff --git a/blog/category.html → blog/categories.html b/blog/category.html → blog/categories.html
@@ -1,6 +1,6 @@
 ---
 layout: blog
-permalink: /blog/category
+permalink: /blog/categories
 ---
 
 <div class="px-8">
@@ -12,8 +12,8 @@
     {%continue%}
     {% endif %}
 
-    <span id=" category-btn" class=" cursor-pointer  inline-block mr-2 my-2 text-sm w-fit bg-slate-500/70
-    backdrop-blur-md rounded-xl px-3 py-[2px] text-slate-200" data-category="{{ category[0] }}">
+    <span class=" cursor-pointer inline-block mr-2 my-2 text-sm w-fit bg-slate-500/70 backdrop-blur-md rounded-xl px-3
+    py-[2px] text-slate-200" data-category="{{ category[0] }}" id="category-btn">
     {{ category[0] | capitalize }}
     </span>
 

diff --git a/blog/index.html b/blog/index.html
@@ -1,6 +1,5 @@
 ---
 layout: blog
-title: Kadafi's Blog
 permalink: /blog
 ---
 

diff --git a/blog/tags.html b/blog/tags.html
@@ -0,0 +1,38 @@
+---
+layout: blog
+permalink: /blog/tags
+---
+
+<div class="px-8">
+  <div id="tags-btn"
+    class="flex flex-wrap mt-20 mx-auto bg-slate-400/70 border-slate-200 dark:bg-slate-700/70 backdrop-blur-md dark:border-slate-500 border-[1px] p-3 rounded-md shadow-custom lg:w-5/6"">
+
+    {% for tag in site.tags %}
+    <span id=" category-btn" class=" cursor-pointer  inline-block mr-2 my-2 text-sm w-fit bg-slate-500/70
+    backdrop-blur-md rounded-xl px-3 py-[2px] text-slate-200" data-tag="{{ tag[0] }}">
+    {{ tag[0] | capitalize }}
+    </span>
+
+    {% endfor %}
+
+  </div>
+
+  <div id="tags" class="w-full dark:text-white">
+    {% for tag in site.tags %}
+    <section id="{{tag[0]}}" class="lg:px-5 hidden flex-col justify-center items-center pt-20">
+      <div class="text-center mb-5">
+        <h1
+          class="text-2xl lg:text-3xl font-bold mb-3 after:content-[''] after:h-[2px] after:w-10 after:block after:mx-auto after:bg-black after:dark:bg-white">
+          {{tag[0] | capitalize}}
+        </h1>
+        <p class="w-3/5">{{page.desc}}</p>
+      </div>
+      <div class="w-full mb-10 grid md:grid-cols-2 lg:grid-cols-3 justify-center items-center gap-5">
+        {% for post in tag[1] %}
+        {% include blog-post-card.html post=post %}
+        {% endfor %}
+      </div>
+    </section>
+    {% endfor %}
+  </div>
+</div>