From 498feb9a35a5236baf8b048033162c3be9e5224c Mon Sep 17 00:00:00 2001
From: rizkikadafi <rizkikadafi11@gmail.com>
Date: Mon, 8 Apr 2024 15:24:47 +0700
Subject: [PATCH] update category and global permalink for posts

---
 _config.yml                                   |  7 +++
 _includes/blog-post-card.html                 |  8 +--
 _layouts/blog.html                            |  5 ++
 _layouts/category.html                        |  8 ++-
 _layouts/default.html                         |  4 ++
 _layouts/post.html                            | 10 +++-
 assets/js/blog-navbar.js                      |  8 +++
 assets/js/category.js                         | 28 ++++++++++
 assets/js/navbar.js                           |  8 +++
 blog/category.html                            | 56 +++++++++++++------
 ...Bersama Codepolitan dan Alibaba Cloud.html |  1 +
 blog/general/{general.html => index.html}     |  0
 blog/{blog.html => index.html}                |  7 ++-
 blog/math/{math.html => index.html}           |  0
 .../{programming.html => index.html}          |  0
 blog/web/{web.html => index.html}             |  0
 16 files changed, 122 insertions(+), 28 deletions(-)
 create mode 100644 assets/js/category.js
 rename blog/general/{general.html => index.html} (100%)
 rename blog/{blog.html => index.html} (93%)
 rename blog/math/{math.html => index.html} (100%)
 rename blog/programming/{programming.html => index.html} (100%)
 rename blog/web/{web.html => index.html} (100%)

diff --git a/_config.yml b/_config.yml
index 0ed3376..30e50ce 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,5 +1,12 @@
 baseurl: ""
 url: ""
+defaults:
+  - scope:
+      path: ''
+      type: posts
+    values:
+      permalink: blog/:title
+
 postcss:
   cache: false
 
diff --git a/_includes/blog-post-card.html b/_includes/blog-post-card.html
index 94edb15..ae984e8 100644
--- a/_includes/blog-post-card.html
+++ b/_includes/blog-post-card.html
@@ -5,10 +5,8 @@
   <img src="{{ include.post.thumbnail }}" alt="" class="w-full rounded-md">
   {% endif %}
 
-
-
   <div class="mt-3">
-    <a href="{{ include.post.url }}">
+    <a href="{{ include.post.url | relative_url }}">
       <h2 class="text-xl font-bold hover:text-sky-200">{{ include.post.title }}</h2>
     </a>
 
@@ -25,8 +23,8 @@ <h2 class="text-xl font-bold hover:text-sky-200">{{ include.post.title }}</h2>
       {{ include.post.excerpt }}
     </p>
 
-    <a href="{{ include.post.url }}"
-      class="group w-fit mt-3 flex justify-start items-center text-sm hover:underline  hover:text-sky-200">
+    <a href="{{ include.post.url | relative_url }}"
+      class="group w-fit mt-3 flex justify-start items-center text-sm hover:underline hover:text-sky-200">
       <span class="block mr-2">Read more</span>
       <i class="bi bi-arrow-right block mt-[4px] group-hover:translate-x-2 transition-transform"></i>
     </a>
diff --git a/_layouts/blog.html b/_layouts/blog.html
index ac738ba..0f47065 100644
--- a/_layouts/blog.html
+++ b/_layouts/blog.html
@@ -44,10 +44,15 @@
     {{ content }}
   </div>
 
+  <div id="top-btn" class="fixed right-5 bottom-5 hidden cursor-pointer z-50">
+    <i class="bi bi-arrow-up-circle dark:text-white text-4xl"></i>
+  </div>
+
   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
   <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/blog-category-swiper.js"></script>
 </body>
 
diff --git a/_layouts/category.html b/_layouts/category.html
index f8625e3..0db7a7a 100644
--- a/_layouts/category.html
+++ b/_layouts/category.html
@@ -3,12 +3,14 @@
 ---
 
 <div class="w-full dark:text-white">
-  <section id="hero"
-    class="h-60 sm:h-72 p-5 sm:p-3 dark:bg-radial-gradient-top-left flex flex-col justify-center items-center pt-14">
+  <section id="hero" class="h-60 sm:h-72 p-5 sm:p-3 flex flex-col justify-center items-center pt-14">
 
     {% include blog-modal-navigation.html %}
     <div class="text-center">
-      <h1 class="font-bold text-xl sm:text-2xl lg:text-3xl">{{page.category | capitalize }} Category</h1>
+      <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">
+        {{page.category | capitalize}} Category
+      </h1>
       <p class="w-3/5">{{page.desc}}</p>
     </div>
   </section>
diff --git a/_layouts/default.html b/_layouts/default.html
index 5d8bf7e..b14f17b 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -19,6 +19,10 @@
 <body class="overflow-x-hidden bg-slate-200 dark:bg-slate-800 transition duration-300">
   {{ content }}
 
+  <div id="top-btn" class="fixed right-5 bottom-5 hidden cursor-pointer z-50">
+    <i class="bi bi-arrow-up-circle dark:text-white text-4xl"></i>
+  </div>
+
   <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
 
diff --git a/_layouts/post.html b/_layouts/post.html
index 8a90049..c80c87c 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -2,7 +2,7 @@
 layout: blog
 ---
 
-<div class="p-4 sm:px-10 lg:px-48 lg:mt-20 mt-12 text-white">
+<div class="p-4 sm:px-10 lg:px-20 lg:mt-20 mt-12 text-white">
   {% if page.thumbnail %}
   <div class="w-full mb-5 h-60 sm:h-72 md:h-80 lg:h-96 bg-cover bg-center rounded-md shadow-custom relative"
     style="background-image: url('{{ page.thumbnail }}')">
@@ -15,7 +15,7 @@ <h2 class="lg:w-4/5 lg:text-2xl font-bold">{{ page.title }}</h2>
         </div>
       </div>
 
-      <div class="lg:block hidden">
+      <div class="sm:block hidden">
         {% for tag in page.tags %}
         <a href=""
           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>
@@ -39,6 +39,12 @@ <h2 class="lg:w-4/5 text-2xl lg:text-4xl font-bold text-center m-auto">{{ page.t
   </div>
   {% endif %}
 
+  <div class="sm:hidden px-2">
+    {% for tag in page.tags %}
+    <a href=""
+      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 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
index ffca7e7..280fbbf 100644
--- a/assets/js/blog-navbar.js
+++ b/assets/js/blog-navbar.js
@@ -1,4 +1,5 @@
 const blogNav = document.getElementById('blog-nav');
+const toTopBtn = document.getElementById('top-btn');
 let lastKnownScrollPosition = 0;
 let ticking = false;
 
@@ -10,8 +11,10 @@ function handleScroll() {
     window.requestAnimationFrame(function() {
       if (lastKnownScrollPosition !== 0) {
         blogNav.classList.add(...stickyStyle)
+        toTopBtn.classList.remove('hidden')
       } else {
         blogNav.classList.remove(...stickyStyle)
+        toTopBtn.classList.add('hidden')
       }
       ticking = false;
     });
@@ -21,3 +24,8 @@ function handleScroll() {
 }
 
 document.addEventListener('scroll', handleScroll);
+
+toTopBtn.addEventListener("click", () => {
+  document.body.scrollTop = 0
+  document.documentElement.scrollTop = 0
+})
diff --git a/assets/js/category.js b/assets/js/category.js
new file mode 100644
index 0000000..a9c7506
--- /dev/null
+++ b/assets/js/category.js
@@ -0,0 +1,28 @@
+const categories = document.getElementById('categories')
+const categoriesBtn = document.getElementById('categories-btn')
+const arrayCategories = Array.from(categories.children)
+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]
+
+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")
+
+    prevActiveElement = targetElement
+    prevActiveBtnElement = btn
+
+    btn.classList.add("border-[1px]", "border-slate-300")
+    targetElement.classList.add("flex")
+    targetElement.classList.remove("hidden")
+  })
+})
diff --git a/assets/js/navbar.js b/assets/js/navbar.js
index d09f99b..97117e9 100644
--- a/assets/js/navbar.js
+++ b/assets/js/navbar.js
@@ -1,4 +1,5 @@
 const nav = document.getElementById('nav');
+const toTopBtn = document.getElementById('top-btn');
 let lastKnownScrollPosition = 0;
 let ticking = false;
 
@@ -12,11 +13,13 @@ function handleScroll() {
           'shadow-custom-xl', 'bg-slate-700/70', 'dark:bg-slate-800/70', 'backdrop-blur-md',
           'dark:shadow-custom-xl', 'duration-500'
         )
+        toTopBtn.classList.remove('hidden')
       } else {
         nav.classList.remove(
           'shadow-custom-xl', 'bg-slate-700/70', 'dark:bg-slate-800/70', 'backdrop-blur-md',
           'dark:shadow-custom-xl', 'duration-500'
         )
+        toTopBtn.classList.add('hidden')
       }
       ticking = false;
     });
@@ -26,3 +29,8 @@ function handleScroll() {
 }
 
 document.addEventListener('scroll', handleScroll);
+
+toTopBtn.addEventListener("click", () => {
+  document.body.scrollTop = 0
+  document.documentElement.scrollTop = 0
+})
diff --git a/blog/category.html b/blog/category.html
index a190e97..f976ce6 100644
--- a/blog/category.html
+++ b/blog/category.html
@@ -3,21 +3,43 @@
 permalink: /blog/category
 ---
 
-<div class="w-full dark:text-white">
-  {% for category in site.categories %}
-  {% if category[0] == 'blog' %}
-  {%continue%}
-  {% endif %}
-  <section id="{{category[0]}}" class="lg:px-5 flex flex-col justify-center items-center pt-14">
-    <div class="text-center mb-5">
-      <h1 class="font-bold text-xl sm:text-2xl lg:text-3xl">{{category[0] | capitalize}}</h1>
-      <p class="w-3/5">{{page.desc}}</p>
-    </div>
-    <div class="w-full px-8 mb-10 grid sm:grid-cols-3 justify-center gap-5">
-      {% for post in category[1] %}
-      {% include blog-post-card.html post=post %}
-      {% endfor %}
-    </div>
-  </section>
-  {% endfor %}
+<div class="px-8">
+  <div id="categories-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 category in site.categories %}
+    {% if category[0] == 'blog' %}
+    {%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] }}">
+    {{ category[0] | capitalize }}
+    </span>
+
+    {% endfor %}
+
+  </div>
+
+  <div id="categories" class="w-full dark:text-white">
+    {% for category in site.categories %}
+    {% if category[0] == 'blog' %}
+    {%continue%}
+    {% endif %}
+    <section id="{{category[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">
+          {{category[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 category[1] %}
+        {% include blog-post-card.html post=post %}
+        {% endfor %}
+      </div>
+    </section>
+    {% endfor %}
+  </div>
 </div>
diff --git a/blog/general/_posts/2024-02-29-Panduan Maskimal Menjadi Developer Handal Bersama Codepolitan dan Alibaba Cloud.html b/blog/general/_posts/2024-02-29-Panduan Maskimal Menjadi Developer Handal Bersama Codepolitan dan Alibaba Cloud.html
index de2450b..59522a2 100644
--- a/blog/general/_posts/2024-02-29-Panduan Maskimal Menjadi Developer Handal Bersama Codepolitan dan Alibaba Cloud.html	
+++ b/blog/general/_posts/2024-02-29-Panduan Maskimal Menjadi Developer Handal Bersama Codepolitan dan Alibaba Cloud.html	
@@ -3,6 +3,7 @@
 author: Kadafi
 thumbnail: /assets/image/blog-assets/general/kode-bisat.png
 tags: beasiswa codepolitan alibaba kodebisat
+permalink: /blog/kodebisat-codepolitan
 excerpt_separator: <!--more-->
 ---
 
diff --git a/blog/general/general.html b/blog/general/index.html
similarity index 100%
rename from blog/general/general.html
rename to blog/general/index.html
diff --git a/blog/blog.html b/blog/index.html
similarity index 93%
rename from blog/blog.html
rename to blog/index.html
index 3adc2f9..daa37a5 100644
--- a/blog/blog.html
+++ b/blog/index.html
@@ -24,7 +24,12 @@ <h1 class="font-bold text-xl sm:text-2xl lg:text-3xl">Welcome to Kadafi's Blog</
     <div
       class="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">
 
-      {% include header-title.html title='Category' %}
+      <div class="mb-5 text-center text-gray-800 dark:text-gray-200">
+        <h2
+          class="text-2xl lg:text-3xl font-bold my-5 sm:my-8 after:content-[''] after:h-[2px] after:w-10 after:block after:mx-auto after:bg-black after:dark:bg-white">
+          Category
+        </h2>
+      </div>
 
       <div class="swiper category-swiper mx-auto sm:w-[95%]">
         <div class="swiper-wrapper">
diff --git a/blog/math/math.html b/blog/math/index.html
similarity index 100%
rename from blog/math/math.html
rename to blog/math/index.html
diff --git a/blog/programming/programming.html b/blog/programming/index.html
similarity index 100%
rename from blog/programming/programming.html
rename to blog/programming/index.html
diff --git a/blog/web/web.html b/blog/web/index.html
similarity index 100%
rename from blog/web/web.html
rename to blog/web/index.html