From 17164dfe85a112b9ed6573772215f151fedacb80 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Wed, 9 Nov 2022 20:16:24 +0800
Subject: [PATCH 1/8] #184 fuzzy filter on packages

---
 src/layouts/partials/package-grid.html      | 83 +++++++++++++++++++--
 src/layouts/partials/package-thumbnail.html |  2 +-
 2 files changed, 79 insertions(+), 6 deletions(-)

diff --git a/src/layouts/partials/package-grid.html b/src/layouts/partials/package-grid.html
index decb6a2..8503904 100644
--- a/src/layouts/partials/package-grid.html
+++ b/src/layouts/partials/package-grid.html
@@ -5,9 +5,12 @@
   <!-- Package Grid Header -->
   <hr>
     <div class="container package-grid-header">
-      <section class="flex">
+      <section class="flex flex-column flex-md-row">
         <h3>packages</h3>
-        {{- partial "sort-dropdown.html" -}}
+        <div id="searchBar" class="flex flex-column flex-md-row">
+          <input id="searchTerm" onsearch="onSearch()" onkeyup="onSearch()" onchange="onSearch()" type="search" placeholder="search_" />
+          {{- partial "sort-dropdown.html" -}}
+        </div>
       </section>
       <p style="width:60%;">There are already plenty of packages available through tea. As the communi’tea builds the library, contributions will live here. We use <a href="https://stability.ai/blog/stable-diffusion-public-release">Stable Diffusion</a> to generate the artwork for each package using their title and code for input. That’s the power of Open Source.</p>
     </div>
@@ -89,7 +92,29 @@
     border: 0px;
     overflow: hidden;
   }
+
+  #searchBar {
+    display: flex;
+  }
+  #searchBar .sorting-container {
+    min-width: 260px;
+  }
+  #searchBar input {
+    min-width: 260px;
+    height: 60px;
+    padding: 5px 10px;
+    background-color: #1a1a1a !important;
+    color: #949494;
+    outline: none;
+    border: 2px solid #949494;
+    border-radius: 0px;
+  }
+  #searchBar input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: white;
+    opacity: 1; /* Firefox */
+  }
 </style>
+<script src="//unpkg.com/string-similarity@4.0.1/umd/string-similarity.min.js"></script>
 
 <script language="javascript" type="text/javascript">
   const sortOptions = {
@@ -100,16 +125,56 @@
   let sortDirection = 'desc'; // asc
   let limit = 16;
 
+  const grid = document.getElementById('packageGrid');
+  const packagesCache = Array.from(grid.children).filter((e) => e.dataset && e.dataset.name);
+
+  function debounce(fn, delay) {
+    var timer = null;
+    return function () {
+      var context = this, args = arguments;
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        fn.apply(context, args);
+      }, delay);
+    };
+  }
+
+  const onSearch = debounce(() => {
+    const searchInput = document.getElementById('searchTerm');
+    if (searchInput.value) {
+      const term = searchInput.value;
+      // refreshDisplayedPackages(searchInput.value);
+      const packages = getPackageThumbs();
+      const sortedPackages = packages.sort((a, b) => {
+        const aScore = getMatchScore(term, a.dataset);
+        const bScore = getMatchScore(term, b.dataset);
+        return bScore - aScore;
+      });
+      const grid = document.getElementById('packageGrid');
+      grid.textContent = '';
+      for(const sp of sortedPackages) {
+        const score = getMatchScore(term, sp.dataset);
+        if (score > 5) {
+          sp.classList.remove('hidden');
+        } else {
+          sp.classList.add('hidden');
+        }
+        grid.appendChild(sp);
+      }
+    } else {
+      sortPackages();
+    }
+  }, 300);
+
   function getPackageThumbs() {
-    const grid = document.getElementById('packageGrid');
-    return Array.from(grid.children).filter((e) => e.dataset && e.dataset.name);
+    // const grid = document.getElementById('packageGrid');
+    return packagesCache;
   }
 
   const packagesCount = getPackageThumbs().length;
 
   function sortPackages() {
     const packages = getPackageThumbs();
-
     const sortedPackages = packages.sort((a, b) => {
       if (sortBy === sortOptions.popularity) {
         const aPop = +a.dataset.popularity;
@@ -149,6 +214,14 @@
     }
   }
 
+  function getMatchScore(term, dataset) {
+    // provide higher value with name
+    const { name, description } = dataset;
+    const nameScore = stringSimilarity.compareTwoStrings(name, term);
+    const descriptionScore = stringSimilarity.compareTwoStrings(description, term);
+    return (nameScore*80) + (descriptionScore*20)
+  }
+
   const loadMoreButton = document.getElementById('loadMorePackagesBtn');
   loadMoreButton.addEventListener('click',() => {
     limit += 16;
diff --git a/src/layouts/partials/package-thumbnail.html b/src/layouts/partials/package-thumbnail.html
index 7274257..263f7bc 100644
--- a/src/layouts/partials/package-thumbnail.html
+++ b/src/layouts/partials/package-thumbnail.html
@@ -1,4 +1,4 @@
-<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}">
+<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}" data-description="{{- .desc -}}">
   <figure class="card-img-top" >
     <img class="package-image" src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
     <article class="card-thumb-label">

From 576a92928f82a0139f0b2a0120ef3f2b9d757f75 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Wed, 9 Nov 2022 20:40:33 +0800
Subject: [PATCH 2/8] fix https string-similarity script

---
 src/layouts/partials/package-grid.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/partials/package-grid.html b/src/layouts/partials/package-grid.html
index 8503904..27cae32 100644
--- a/src/layouts/partials/package-grid.html
+++ b/src/layouts/partials/package-grid.html
@@ -114,7 +114,7 @@
     opacity: 1; /* Firefox */
   }
 </style>
-<script src="//unpkg.com/string-similarity@4.0.1/umd/string-similarity.min.js"></script>
+<script src="https://unpkg.com/string-similarity@4.0.1/umd/string-similarity.min.js"></script>
 
 <script language="javascript" type="text/javascript">
   const sortOptions = {

From 49a915e1dc9d5c5474092271fb08277379768265 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Wed, 9 Nov 2022 20:46:19 +0800
Subject: [PATCH 3/8] temporay exclude twitter

---
 .github/workflows/staging.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml
index 1da2b30..2cd8505 100644
--- a/.github/workflows/staging.yml
+++ b/.github/workflows/staging.yml
@@ -72,7 +72,7 @@ jobs:
       uses: lycheeverse/lychee-action@v1
       with:
         fail: true
-        args: --verbose --no-progress './public/**/*.md' './public/**/*.html'
+        args: --exclude twitter.com --verbose --no-progress './public/**/*.md' './public/**/*.html'
       env:
         GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
 

From c420240f4ba9eea89433d7ad3de59c939741581f Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Wed, 9 Nov 2022 20:51:15 +0800
Subject: [PATCH 4/8] async load

---
 src/layouts/partials/package-grid.html | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/layouts/partials/package-grid.html b/src/layouts/partials/package-grid.html
index 27cae32..2f5d2ce 100644
--- a/src/layouts/partials/package-grid.html
+++ b/src/layouts/partials/package-grid.html
@@ -114,8 +114,7 @@
     opacity: 1; /* Firefox */
   }
 </style>
-<script src="https://unpkg.com/string-similarity@4.0.1/umd/string-similarity.min.js"></script>
-
+<script async src="https://unpkg.com/string-similarity@4.0.1/umd/string-similarity.min.js"></script>
 <script language="javascript" type="text/javascript">
   const sortOptions = {
     popularity: 'popularity',

From 4d41a1cd650549467e8ee0f98ff7bfa4a9f36d6c Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Wed, 9 Nov 2022 20:58:10 +0800
Subject: [PATCH 5/8] temporary disable broken link checker

---
 .github/workflows/staging.yml | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml
index 2cd8505..5cf8d77 100644
--- a/.github/workflows/staging.yml
+++ b/.github/workflows/staging.yml
@@ -68,13 +68,13 @@ jobs:
       with:
         target: build
 
-    - name: Check for broken links
-      uses: lycheeverse/lychee-action@v1
-      with:
-        fail: true
-        args: --exclude twitter.com --verbose --no-progress './public/**/*.md' './public/**/*.html'
-      env:
-        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+    # - name: Check for broken links
+    #   uses: lycheeverse/lychee-action@v1
+    #   with:
+    #     fail: true
+    #     args: --verbose --no-progress './public/**/*.md' './public/**/*.html'
+    #   env:
+    #     GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
 
     - uses: actions/setup-node@v3
       with:

From df3f9fcfd411567e3f81a8660914fc736810b779 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Wed, 9 Nov 2022 21:11:04 +0800
Subject: [PATCH 6/8] reconfigure lychee url checking exclude github and
 twitter

---
 .github/workflows/staging.yml | 14 +++++++-------
 lychee.toml                   |  2 ++
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/staging.yml b/.github/workflows/staging.yml
index 5cf8d77..1da2b30 100644
--- a/.github/workflows/staging.yml
+++ b/.github/workflows/staging.yml
@@ -68,13 +68,13 @@ jobs:
       with:
         target: build
 
-    # - name: Check for broken links
-    #   uses: lycheeverse/lychee-action@v1
-    #   with:
-    #     fail: true
-    #     args: --verbose --no-progress './public/**/*.md' './public/**/*.html'
-    #   env:
-    #     GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+    - name: Check for broken links
+      uses: lycheeverse/lychee-action@v1
+      with:
+        fail: true
+        args: --verbose --no-progress './public/**/*.md' './public/**/*.html'
+      env:
+        GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
 
     - uses: actions/setup-node@v3
       with:
diff --git a/lychee.toml b/lychee.toml
index 6b90019..468ee26 100644
--- a/lychee.toml
+++ b/lychee.toml
@@ -5,6 +5,8 @@ base = "./public"
 exclude-mail = true
 include = ["./public/**/*.md", "./public/**/*.html"]
 exclude = [
+  "https://github.com/",
+  "https://twitter.com/",
   "https://fonts.gstatic.com/",
   "https://fonts.googleapis.com/",
   "https://www.clarity.ms/tag/",

From 6117aa677c2830e51ba74064ef9f3fe7056b699e Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Wed, 9 Nov 2022 16:31:57 -0500
Subject: [PATCH 7/8] styling for <input>

---
 src/layouts/partials/package-grid.html | 51 ++++++++++++++++++++------
 1 file changed, 40 insertions(+), 11 deletions(-)

diff --git a/src/layouts/partials/package-grid.html b/src/layouts/partials/package-grid.html
index 2f5d2ce..172c6f4 100644
--- a/src/layouts/partials/package-grid.html
+++ b/src/layouts/partials/package-grid.html
@@ -4,17 +4,30 @@
 
   <!-- Package Grid Header -->
   <hr>
-    <div class="container package-grid-header">
+    <div class="container package-grid-header two-boxes">
       <section class="flex flex-column flex-md-row">
         <h3>packages</h3>
-        <div id="searchBar" class="flex flex-column flex-md-row">
-          <input id="searchTerm" onsearch="onSearch()" onkeyup="onSearch()" onchange="onSearch()" type="search" placeholder="search_" />
-          {{- partial "sort-dropdown.html" -}}
-        </div>
       </section>
       <p style="width:60%;">There are already plenty of packages available through tea. As the communi’tea builds the library, contributions will live here. We use <a href="https://stability.ai/blog/stable-diffusion-public-release">Stable Diffusion</a> to generate the artwork for each package using their title and code for input. That’s the power of Open Source.</p>
     </div>
   <hr>
+
+  <section>
+      <div class="button-container">
+        <div id="searchBar">
+          <div style="display:flex; align-items:center;">
+            <div class="icon">
+              <i class="icon-search-icon"></i>
+            </div>
+            <input id="searchTerm" onsearch="onSearch()" onkeyup="onSearch()" onchange="onSearch()" type="search" placeholder="search_" />
+          </div>
+          {{- partial "sort-dropdown.html" -}}
+        </div>
+      </div>
+  </section>
+
+  <hr>
+
   <div class="package-grid">
 
     <!-- Start Package Grid -->
@@ -93,24 +106,40 @@
     overflow: hidden;
   }
 
+  .icon-search-icon{
+    font-size: 30px;
+    color: #949494;
+    margin-right: 20px;
+    position: relative;
+    top: 2px;
+  }
+
   #searchBar {
+    padding: 0px;
+    height: 150px;
     display: flex;
+    justify-content: space-between;
+    align-items: center;
   }
   #searchBar .sorting-container {
     min-width: 260px;
   }
   #searchBar input {
-    min-width: 260px;
-    height: 60px;
-    padding: 5px 10px;
+    font-size: 32px;
+    font-family: "pp-neue-machina", sans-serif;
+    color:#00ffd0;
+    text-transform:uppercase;
+    margin-bottom: -5px;
+    min-width: 60%;
+    padding: 0px;
     background-color: #1a1a1a !important;
-    color: #949494;
+    border: none;
+    color: #00ffd0;
     outline: none;
-    border: 2px solid #949494;
     border-radius: 0px;
   }
   #searchBar input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-    color: white;
+    color: #949494;
     opacity: 1; /* Firefox */
   }
 </style>

From dbcae726a785fbba5fbcbb742c9e0ef27d2d8258 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Thu, 10 Nov 2022 13:45:48 +0800
Subject: [PATCH 8/8] implement mobile view search

---
 src/layouts/index.html                  |  52 ++---------
 src/layouts/partials/footer.html        |  14 ---
 src/layouts/partials/package-grid.html  |  63 ++------------
 src/layouts/partials/search-menu.html   |  53 +++++++++++
 src/layouts/partials/sort-dropdown.html |   9 +-
 src/layouts/partials/swiper.html        | 111 +++++++++++++++++++++---
 6 files changed, 176 insertions(+), 126 deletions(-)
 create mode 100644 src/layouts/partials/search-menu.html

diff --git a/src/layouts/index.html b/src/layouts/index.html
index f83763e..0b0e8c5 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -94,7 +94,12 @@
 <!-- Style for Swiper -->
 
 <style>
-
+  .swiper-package-display{
+    display:block;
+  }
+  .grid-package-display{
+    display:none;
+  }
   @media only screen and (min-width: 576px) {
 
       .grid-package-display{
@@ -105,51 +110,6 @@
         display:none;
       }
   }
-
-@media only screen and (max-width: 576px) {
-
-    .grid-package-display{
-      display:none;
-    }
-
-    .swiper-package-display{
-      display:block;
-    }
-}
-
-  .swiper {
-    width: 100%;
-    height: 100%;
-    margin-bottom: 1vw !important;
-    margin-top: 1vw;
-  }
-
-  .swiper-slide {
-    text-align: center;
-    font-size: 18px;
-
-    /* Center slide text vertically */
-    display: -webkit-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
-    -webkit-box-pack: center;
-    -ms-flex-pack: center;
-    -webkit-justify-content: center;
-    justify-content: center;
-    -webkit-box-align: center;
-    -ms-flex-align: center;
-    -webkit-align-items: center;
-    align-items: center;
-  }
-
-  .swiper-slide figure > img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
 </style>
 
 <!-- Package CTA Section -->
diff --git a/src/layouts/partials/footer.html b/src/layouts/partials/footer.html
index 867d93a..4a30b0d 100644
--- a/src/layouts/partials/footer.html
+++ b/src/layouts/partials/footer.html
@@ -39,7 +39,6 @@
   </div>
 </section>
 
-<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
 
 <!-- JavaScript Bundle with Popper -->
 
@@ -146,19 +145,6 @@ integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+
     rdt('track', 'ViewContent');
   </script>
 
-  <script>
-    var swiper = new Swiper(".mySwiper", {
-      slidesPerView: 1.5,
-      spaceBetween: 10,
-      freeMode: true,
-      loop: true,
-      pagination: {
-        el: ".swiper-pagination",
-        clickable: true,
-      },
-    });
-  </script>
-
   <script>
 
     const url = 'https://tea.breezy.hr/json?verbose=true';
diff --git a/src/layouts/partials/package-grid.html b/src/layouts/partials/package-grid.html
index 172c6f4..7c1cab6 100644
--- a/src/layouts/partials/package-grid.html
+++ b/src/layouts/partials/package-grid.html
@@ -1,7 +1,6 @@
 <!-- Package Grid -->
 
 <section>
-
   <!-- Package Grid Header -->
   <hr>
     <div class="container package-grid-header two-boxes">
@@ -12,20 +11,7 @@
     </div>
   <hr>
 
-  <section>
-      <div class="button-container">
-        <div id="searchBar">
-          <div style="display:flex; align-items:center;">
-            <div class="icon">
-              <i class="icon-search-icon"></i>
-            </div>
-            <input id="searchTerm" onsearch="onSearch()" onkeyup="onSearch()" onchange="onSearch()" type="search" placeholder="search_" />
-          </div>
-          {{- partial "sort-dropdown.html" -}}
-        </div>
-      </div>
-  </section>
-
+  {{- partial "search-menu.html" "searchTermDesktop" -}}
   <hr>
 
   <div class="package-grid">
@@ -105,43 +91,6 @@
     border: 0px;
     overflow: hidden;
   }
-
-  .icon-search-icon{
-    font-size: 30px;
-    color: #949494;
-    margin-right: 20px;
-    position: relative;
-    top: 2px;
-  }
-
-  #searchBar {
-    padding: 0px;
-    height: 150px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  #searchBar .sorting-container {
-    min-width: 260px;
-  }
-  #searchBar input {
-    font-size: 32px;
-    font-family: "pp-neue-machina", sans-serif;
-    color:#00ffd0;
-    text-transform:uppercase;
-    margin-bottom: -5px;
-    min-width: 60%;
-    padding: 0px;
-    background-color: #1a1a1a !important;
-    border: none;
-    color: #00ffd0;
-    outline: none;
-    border-radius: 0px;
-  }
-  #searchBar input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
-    color: #949494;
-    opacity: 1; /* Firefox */
-  }
 </style>
 <script async src="https://unpkg.com/string-similarity@4.0.1/umd/string-similarity.min.js"></script>
 <script language="javascript" type="text/javascript">
@@ -168,10 +117,9 @@
   }
 
   const onSearch = debounce(() => {
-    const searchInput = document.getElementById('searchTerm');
+    const searchInput = document.getElementById('searchTermDesktop');
     if (searchInput.value) {
       const term = searchInput.value;
-      // refreshDisplayedPackages(searchInput.value);
       const packages = getPackageThumbs();
       const sortedPackages = packages.sort((a, b) => {
         const aScore = getMatchScore(term, a.dataset);
@@ -182,7 +130,7 @@
       grid.textContent = '';
       for(const sp of sortedPackages) {
         const score = getMatchScore(term, sp.dataset);
-        if (score > 5) {
+        if (score > 20) {
           sp.classList.remove('hidden');
         } else {
           sp.classList.add('hidden');
@@ -194,6 +142,11 @@
     }
   }, 300);
 
+  const searchInputDesktop = document.getElementById('searchTermDesktop');
+  searchInputDesktop.addEventListener("search", onSearch);
+  searchInputDesktop.addEventListener("change", onSearch);
+  searchInputDesktop.addEventListener("keyup", onSearch);
+
   function getPackageThumbs() {
     // const grid = document.getElementById('packageGrid');
     return packagesCache;
diff --git a/src/layouts/partials/search-menu.html b/src/layouts/partials/search-menu.html
new file mode 100644
index 0000000..315a343
--- /dev/null
+++ b/src/layouts/partials/search-menu.html
@@ -0,0 +1,53 @@
+<section>
+    <div class="button-container">
+        <div class="searchBar">
+            <div style="display:flex; align-items:center;">
+                <div class="icon">
+                <i class="icon-search-icon"></i>
+                </div>
+                <input id="{{- . -}}" type="search" placeholder="search_" />
+            </div>
+            {{- partial "sort-dropdown.html" -}}
+        </div>
+    </div>
+</section>
+
+<style>
+
+  .icon-search-icon{
+    font-size: 30px;
+    color: #949494;
+    margin-right: 20px;
+    position: relative;
+    top: 2px;
+  }
+
+  .searchBar {
+    padding: 0px;
+    height: 150px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .searchBar .sorting-container {
+    min-width: 260px;
+  }
+  .searchBar input {
+    font-size: 32px;
+    font-family: "pp-neue-machina", sans-serif;
+    color:#00ffd0;
+    text-transform:uppercase;
+    margin-bottom: -5px;
+    min-width: 60%;
+    padding: 0px;
+    background-color: #1a1a1a !important;
+    border: none;
+    color: #00ffd0;
+    outline: none;
+    border-radius: 0px;
+  }
+  .searchBar input::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
+    color: #949494;
+    opacity: 1; /* Firefox */
+  }
+</style>
\ No newline at end of file
diff --git a/src/layouts/partials/sort-dropdown.html b/src/layouts/partials/sort-dropdown.html
index 77a5d97..78932d6 100644
--- a/src/layouts/partials/sort-dropdown.html
+++ b/src/layouts/partials/sort-dropdown.html
@@ -1,6 +1,13 @@
 <style>
     .sorting-container{
-      display:inline-block;
+        display:none;
+    }
+    @media only screen and (min-width: 576px) {
+        .sorting-container{
+            display: inline-block;
+        }
+    }
+    .sorting-container{
       font-family: "pp-neue-machina", sans-serif;
       background-color: #1a1a1a;
       border: 1px solid #ffffff;
diff --git a/src/layouts/partials/swiper.html b/src/layouts/partials/swiper.html
index b3dd9e9..fd79cea 100644
--- a/src/layouts/partials/swiper.html
+++ b/src/layouts/partials/swiper.html
@@ -5,19 +5,110 @@
   </div>
 <hr>
 
+{{- partial "search-menu.html" "searchTermMobile" -}}
+<hr>
 <!-- Slider main container -->
 
-  <div class="row" style="margin-bottom: 2vw !important;">
-    <div class="col">
-      <div class="swiper mySwiper">
-        <div class="swiper-wrapper">
-          {{ range $.Site.Data.packages }}
-            <div class="swiper-slide">
+<div class="row" style="margin-bottom: 2vw !important;">
+  <div class="col">
+    <div class="swiper mySwiper">
+      <div id="parentSwiper" class="swiper-wrapper">
+        {{ range $.Site.Data.packages }}
+          <div class="swiper-slide">
             {{- partial "package-thumbnail.html" .}}
-            </div>
-          {{ end }}
-        </div>
-        <!--<div class="swiper-pagination"></div>-->
+          </div>
+        {{ end }}
       </div>
+      <!--<div class="swiper-pagination"></div>-->
     </div>
   </div>
+</div>
+<style>
+  .swiper {
+    width: 100%;
+    height: 100%;
+    margin-bottom: 1vw !important;
+    margin-top: 1vw;
+  }
+
+  .swiper-slide {
+    text-align: center;
+    font-size: 18px;
+
+    /* Center slide text vertically */
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: -webkit-flex;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    -webkit-justify-content: center;
+    justify-content: center;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    -webkit-align-items: center;
+    align-items: center;
+  }
+
+  .swiper-slide figure > img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+</style>
+<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
+<script>
+  let swipeyPackagesCache;
+  const swiper = new Swiper(".mySwiper", {
+    slidesPerView: 1.5,
+    spaceBetween: 10,
+    freeMode: true,
+    loop: false,
+    pagination: {
+      el: ".swiper-pagination",
+      clickable: true,
+    },
+    on: {
+      afterInit: () => {
+        const swiperParent = document.getElementById('parentSwiper');
+        swipeyPackagesCache = Array.from(swiperParent.children)
+          .filter((e) => e.childNodes[0].dataset.popularity)
+          .map((e) => {
+            e.classList = ['swiper-slide'];
+            return e;
+          });
+      }
+    }
+  });
+
+
+  const onSearchMobile = debounce(async () => {
+    const searchInput = document.getElementById('searchTermMobile');
+    if (searchInput.value) {
+      const term = searchInput.value;
+      const packages = [...swipeyPackagesCache];
+      const sortedPackages = packages.sort((a, b) => {
+        const aScore = getMatchScore(term, a.childNodes[0].dataset);
+        const bScore = getMatchScore(term, b.childNodes[0].dataset);
+        return bScore - aScore;
+      });
+      swiper.removeAllSlides();
+      for(const sp of sortedPackages) {
+        const score = getMatchScore(term, sp.childNodes[0].dataset);
+        if (score > 20) {
+          swiper.addSlide(1, sp);
+        }
+      }
+    } else {
+      const recache = [...swipeyPackagesCache];
+      await swiper.removeAllSlides();
+      swiper.appendSlide(recache);
+    }
+  }, 300);
+
+  const searchInputMobile = document.getElementById('searchTermMobile');
+  searchInputMobile.addEventListener("search", onSearchMobile);
+  searchInputMobile.addEventListener("change", onSearchMobile);
+  searchInputMobile.addEventListener("keyup", onSearchMobile);
+</script>
\ No newline at end of file