From 9da3e3420b4d542066182781cae41b30bcbfb79d Mon Sep 17 00:00:00 2001
From: JY Hsu <hsujoyao@gmail.com>
Date: Fri, 20 Sep 2024 08:57:14 +0800
Subject: [PATCH] Add category filter for skills (#979)

Co-authored-by: Emruz Hossain <hossainemruz@gmail.com>
---
 assets/scripts/sections/index.js      |  1 +
 assets/scripts/sections/skills.js     | 15 +++++++++++++++
 layouts/partials/cards/skill.html     |  6 ++++--
 layouts/partials/sections/skills.html | 24 +++++++++++++++++++-----
 4 files changed, 39 insertions(+), 7 deletions(-)
 create mode 100644 assets/scripts/sections/skills.js

diff --git a/assets/scripts/sections/index.js b/assets/scripts/sections/index.js
index 57dc9fe..f453163 100644
--- a/assets/scripts/sections/index.js
+++ b/assets/scripts/sections/index.js
@@ -4,4 +4,5 @@ import './sidebar'
 import './education'
 import './achievements'
 import './projects'
+import './skills'
 import './publications'
diff --git a/assets/scripts/sections/skills.js b/assets/scripts/sections/skills.js
new file mode 100644
index 0000000..4696e09
--- /dev/null
+++ b/assets/scripts/sections/skills.js
@@ -0,0 +1,15 @@
+import Filterizr from 'filterizr'
+
+document.addEventListener('DOMContentLoaded', () => {
+  // ================== Skill cards =====================
+
+  // setup skill filter buttons
+  const skillCardHolder = document.getElementById('skill-card-holder')
+  if (skillCardHolder != null && skillCardHolder.children.length !== 0) {
+    // eslint-disable-next-line no-new
+    new Filterizr('.filtr-skills', {
+      layout: 'sameWidth',
+      controlsSelector: '.skill-filtr-control'
+    })
+  }
+})
diff --git a/layouts/partials/cards/skill.html b/layouts/partials/cards/skill.html
index 86f47c9..e76493e 100644
--- a/layouts/partials/cards/skill.html
+++ b/layouts/partials/cards/skill.html
@@ -1,4 +1,6 @@
-<div class="col-xs-12 col-sm-6 col-lg-4 pt-2">
+<div class="col-xs-12 col-sm-6 col-lg-4 pt-2 filtr-item"
+  data-category='all, {{ with .categories }}{{ delimit . ","}}{{ end }}'
+>
   <a class="text-decoration-none" {{ if .url }}href="{{ .url }}" title="{{ .name }}" target="_blank" rel="noopener"{{ end }}>
     <div class="card">
       <div class="card-head d-flex">
@@ -18,7 +20,7 @@
           <h5 class="card-title">{{ .name }}</h5>
         {{ end }}
       </div>
-      <div class="card-body">
+      <div class="card-body text-justify pt-1 pb-1">
         <p class="card-text">{{ .summary | markdownify }}</p>
       </div>
     </div>
diff --git a/layouts/partials/sections/skills.html b/layouts/partials/sections/skills.html
index ab837dc..2a2d5e4 100644
--- a/layouts/partials/sections/skills.html
+++ b/layouts/partials/sections/skills.html
@@ -3,7 +3,7 @@
   {{ $sectionID = .section.id }}
 {{ end }}
 
-<div class="container-fluid anchor pb-5 skills-section">
+<div class="container-fluid anchor pb-5 skills-section" id="{{ $sectionID }}">
   {{ if not (.section.hideTitle) }}
     <h1 class="text-center">
         <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
@@ -11,11 +11,25 @@
     <h1 class="text-center" style="display: none">
         <span id="{{ $sectionID }}"></span>{{ .section.name }}</h1>
   {{ end }}
-  <div class="container d-flex-block">
-    <div class="row" id="primary-skills">
-      {{ range .skills }}
-        {{ partial "cards/skill.html" . }}
+  {{ if .section.filter }}
+  <div class="container ms-auto text-center">
+    <div class="btn-group flex-wrap" role="group" id="skill-filter-buttons">
+      {{ range .buttons }}
+      <button type="button" class="btn btn-dark skill-filtr-control" data-filter="{{ .filter }}">
+        {{ .name }}
+      </button>
       {{ end }}
     </div>
   </div>
+  <div class="container d-flex-block filtr-skills">
+    <div class="row" id="skill-card-holder" style="margin-left:unset">
+  {{ else }}
+  <div class="container d-flex-block">
+    <div class="row" id="primary-skills">
+  {{ end }}
+      {{ range .skills }}
+      {{ partial "cards/skill.html" . }}
+    {{ end }}
+    </div>
+  </div>
 </div>