limit displayed packages to 16. add Load More button to add 16 more

src/layouts/partials/detail-btn.html

@@ -35,7 +35,4 @@
 
 </style>
 
-
-<a href="/packages/{{- .slug -}}/">
 <button class="detail-btn"><i class="icon-enter-arrow"></i>details</button>
-</a>

src/layouts/partials/package-grid.html

@@ -18,15 +18,52 @@
           {{- partial "package-thumbnail.html" .}}
         {{ end }}
       </div>
+      
     </div>
   </div>
+  <hr>
+  <div id="loadMoreSection" class="container small">
+    <div id="loadMorePackagesBtn"><i class="icon-enter-arrow"></i> SHOW MORE</div>
+  </div>
 </section>
 
 <style>
+  .container.small {
+    padding-top: 1em;
+    padding-bottom: 1em;
+  }
   .package-grid {
     display: grid;
     grid-template-columns: auto auto;
   }
+  #loadMorePackagesBtn {
+    cursor: pointer;
+    font-size: 2rem;
+    font-family: "pp-neue-machina", sans-serif;
+    background-color: #1a1a1a;
+    color: #fff;
+    padding-top: 0.279vw;
+    text-decoration: none;
+    text-transform: uppercase;
+    transition: 0.1s linear;
+  }
+  #loadMorePackagesBtn .icon-enter-arrow {
+    display: inline-block;
+    position: relaitve;
+    transition: all 0.2s ease-in-out;
+  }
+  #loadMorePackagesBtn:hover .icon-enter-arrow{
+    display: inline-block;
+    transform: rotate(-45deg) !important;
+  }
+  #loadMoreSection.hidden {
+    display: none;
+  }
+  @media only screen and (max-width: 576px) {
+    #loadMoreSection {
+      display: none;
+    }
+  }
 
   @media only screen and (min-width: 576px) {
     .package-grid {
@@ -41,4 +78,40 @@
       grid-template-columns: auto auto auto auto;
     }
   }
+
+  .card-thumbnail.hidden {
+    height: 0px;
+    padding: 0px;
+    margin: 0px;
+    border: 0px;
+    overflow: hidden;
+  }
 </style>
+
+<script language="javascript" type="text/javascript">
+  let limit = 16;
+  const packages = document.querySelectorAll('.card-thumbnail');
+  const packagesCount = packages.length;
+
+  function refreshDisplayedPackages() {
+    for(let i = 0; i < packagesCount; i++) {
+      if (i >= limit) {
+        packages[i].classList.add('hidden');
+      } else {
+        packages[i].classList.remove('hidden');
+      }
+    }
+  }
+
+  const loadMoreButton = document.getElementById('loadMorePackagesBtn');
+  loadMoreButton.addEventListener('click',() => {
+    limit += 16;
+    refreshDisplayedPackages();
+    if (limit >= packagesCount) {
+      const loadMoreSection = document.getElementById('loadMoreSection');
+      loadMoreSection.classList.add('hidden');
+    }
+  },false);
+
+  refreshDisplayedPackages();
+</script>

src/layouts/partials/package-thumbnail.html

@@ -14,12 +14,14 @@
       <p class="card-text">
         <span class="package-version-no">V&NonBreakingSpace;{{- .version -}}</span>
         <!--
-        TODO: uncomment once install counts are not disappointing anymore
+        TODO: uncomment once install counts improve
         <br>
         <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
       </p>
     </div>
+    <a href="/packages/{{- .slug -}}/">
       {{- partial "detail-btn.html" . -}}
+    </a>
   </div>
   <div class="card-body thumbnail-body-mobile">
     <a href="/packages/{{- .slug -}}/">
@@ -32,6 +34,7 @@
 
 div.card.card-thumbnail{
   background-color: #1a1a1a;
+  transition: all .3s;
 }
 
 .card-img-top {