render packages data dynamically from data folder

.gitignore

@@ -22,3 +22,5 @@ hugo.linux
 node_modules
 .envrc
 cdk.out
+
+.ideas

src/data/mockPackages.json

@@ -0,0 +1,34 @@
+[
+    {
+        "name": "sqlite",
+        "thumb_image_url": "/Images/package-thumb-nolabel.jpg",
+        "version": "V 2.4",
+        "installs": "12",
+        "maintainer": "axoel",
+        "slug": "sqlite"
+    },
+    {
+        "name": "unicode.org",
+        "thumb_image_url": "/Images/package-thumb-nolabel.jpg",
+        "version": "V 2.4",
+        "installs": "432",
+        "maintainer": "pascal",
+        "slug": "unicode"
+    },
+    {
+        "name": "tukaani.org/xz",
+        "thumb_image_url": "/Images/package-thumb-nolabel.jpg",
+        "version": "V 2.4",
+        "installs": "23",
+        "maintainer": "pascal",
+        "slug": "xz"
+    },
+    {
+        "name": "bytereef.org/mpdecimal",
+        "thumb_image_url": "/Images/package-thumb-nolabel.jpg",
+        "version": "V 2.4",
+        "installs": "125673",
+        "maintainer": "pascal",
+        "slug": "mpdecimal"
+    }
+]

src/layouts/index.html

@@ -162,7 +162,7 @@
     align-items: center;
   }
 
-  .swiper-slide img {
+  .swiper-slide figure > img {
     display: block;
     width: 100%;
     height: 100%;

src/layouts/partials/detail-btn.html

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

src/layouts/partials/package-grid.html

@@ -13,30 +13,32 @@
     <!-- Start Package Grid -->
 
     <div class="row package-row black-bg g-0">
-      <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-      </div>
-      <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-      </div>
-      <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-      </div>
-      <div class="col-xxl-3 col-xl-4 col-lg-4 col-md-4 col-sm-12 col-12">
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
-        {{- partial "package-thumbnail.html" . -}}
+      <div class="package-grid">
+        {{ range $.Site.Data.mockPackages }}
+          {{- partial "package-thumbnail.html" .}}
+        {{ end }}
       </div>
     </div>
   </div>
 </section>
+
+<style>
+  .package-grid {
+    display: grid;
+    grid-template-columns: auto auto;
+  }
+
+  @media only screen and (min-width: 576px) {
+    .package-grid {
+      /* changes to 3 column thumbs */
+      grid-template-columns: auto auto auto;
+    }
+  }
+
+  @media only screen and (min-width: 992px) {
+    .package-grid {
+      /* changes to 4 column thumbs */
+      grid-template-columns: auto auto auto auto;
+    }
+  }
+</style>

src/layouts/partials/package-thumbnail.html

@@ -1,17 +1,58 @@
 <div class="card card-thumbnail" style="width: 100%">
-  <img src="/Images/package-thumb-1.jpg" class="card-img-top" alt="..." style="width:100%; height:100%;">
+  <figure class="card-img-top" >
+    <img src="{{- .thumb_image_url -}}" alt="{{- .name -}}" style="width:100%; height:100%;">
+    <article class="card-thumb-label">
+      <img src="/Images/tea-logo-no-bg.svg" width="26" alt="tea"/>
+      <h3>{{- .name -}}</h3>
+      <h4>&#x2022;&nbsp;{{- .maintainer -}}</h4>
+    </article>
+  </figure>
   <div class="card-body thumbnail-body">
     <div class="card-text-container">
-      <p class="card-text"><span class="package-version-no">V2.35</span><br><span class="package-install-no">>45 installs</span></p>
+      <p class="card-text">
+        <span class="package-version-no">{{- .version -}}</span>
+        <br>
+        <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span>
+      </p>
     </div>
     {{- partial "detail-btn.html" . -}}
   </div>
   <div class="card-body thumbnail-body-mobile">
-    <button href="#" class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
+    <a href="/packages/{{- .slug -}}">
+      <button class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
+    </a>
   </div>
 </div>
 
 <style>
+.card-img-top {
+  position: relative;
+}
+
+.card-thumb-label {
+  position: absolute;
+  background: rgba(255,255,255,0.9);
+  left: 0;
+  bottom: 10px;
+  padding: 10px;
+  text-align: left;
+}
+
+.card-thumb-label h3 {
+  color: black;
+  font-size: 1.1em;
+  line-height: 1.1em;
+  margin: 0px;
+  padding: 0px;
+}
+
+.card-thumb-label h4 {
+  color: black;
+  font-size: 0.9em;
+  line-height: 0.9em;
+  margin: 0px;
+  padding: 0px;
+}
 
 @media only screen and (min-width: 576px) {
 

src/layouts/partials/swiper.html

@@ -11,15 +11,11 @@
     <div class="col">
       <div class="swiper mySwiper">
         <div class="swiper-wrapper">
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
+          {{ range $.Site.Data.mockPackages }}
+            <div class="swiper-slide">
+            {{- partial "package-thumbnail.html" .}}
+            </div>
+          {{ end }}
         </div>
         <!--<div class="swiper-pagination"></div>-->
       </div>