Merge pull request #117 from teaxyz/feature/dynamic-package-list

dynamic package list and details pages

.github/build-package-pages.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+# cmd: $ ./build-package-pages.sh srcJson targetPath
+# sample:  $ .github/build-package-pages.sh src/data/packages.json src/content/packages'
+
+for row in $(cat $1 | jq -r '.[] | @base64'); do
+    _jq() {
+     echo ${row} | base64 --decode | jq -r ${1}
+    }
+   touch $2/$(_jq '.name').md
+   content="---
+type: page
+title: \"$(_jq '.name')\"
+Description: \"$(_jq '.desc')\"
+layout: \"package-detail\"
+---"
+   echo "$content" > $2/$(_jq '.name').md
+done

.github/workflows/cd.yml

@@ -25,6 +25,15 @@ jobs:
 
     - uses: actions/checkout@v3
 
+    # TODO:
+    # add action here to download updates packages.json into src/data/packages.json
+
+    - name: Create Package Detail Pages from packages.json
+      uses: getneil/jq-action@v1
+      id: version
+      with:
+        cmd: '.github/build-package-pages.sh src/data/packages.json src/content/packages'
+
     - run: .github/mk-pantry-accessible.sh ${{ secrets.TEMP_JACOBS_GITHUB_PAT }}
     - uses: teaxyz/setup@v0
       with:

.github/workflows/staging.yml

@@ -33,7 +33,17 @@ jobs:
         echo "relativeurls = true" >>config.toml
       working-directory: src
 
+    # TODO:
+    # add action here to download updates packages.json into src/data/packages.json
+
+    - name: Create Package Detail Pages from packages.json
+      uses: getneil/jq-action@v1
+      id: version
+      with:
+        cmd: '.github/build-package-pages.sh src/data/packages.json src/content/packages'
+
     - run: .github/mk-pantry-accessible.sh ${{ secrets.TEMP_JACOBS_GITHUB_PAT }}
+
     - uses: teaxyz/setup@v0
       with:
         target: build

.gitignore

@@ -22,3 +22,8 @@ hugo.linux
 node_modules
 .envrc
 cdk.out
+
+.ideas
+
+# initially committed _sample.md only the rest will be ignored
+src/content/packages/*

README.md

@@ -16,6 +16,11 @@ The tea logo and wordmark are registered trademarks of tea.inc.
 * Repeated components are in [`./src/layouts/partials/`].
 
 ## Getting Started
+Just once assuming there are no updates in `/src/data/packages.json`. This will create the package detail pages.
+```sh
+.github/build-package-pages.sh src/data/packages.json src/content/packages
+```
+
 
 hugo can render your edits while you work:
 
@@ -31,7 +36,6 @@ Install hugo yourself or use tea: `sh <(curl tea.xyz) hugo`.
 |------------|---------|
 | gohugo.io  |  >=0.99 |
 
-
 # Build
 
 Builds a static, deployable version of the website.

src/content/package-detail.md

@@ -1,5 +0,0 @@
----
-title: "Package Details"
-Description: "package.details"
-layout: "package-detail"
----

src/content/packages/_sample.md

@@ -0,0 +1,15 @@
+<!--
+this page will be automatically duplicated/populated
+    by .github/build-package-pages.sh
+    before build & deploy probably in Github Actions
+    values to be replaced are title and Description
+
+WARN: anything else added to this folder will be git ignored
+ -->
+---
+type: page
+title: "mpdecimal"
+Description: "mpdecimal"
+layout: "package-detail"
+---
+

src/data/packages.json

@@ -0,0 +1,122 @@
+[
+    {
+        "name": "mpdecimal",
+        "full_name": "mpdecimal",
+        "desc": "Library for decimal floating point arithmetic",
+        "homepage": "https://www.bytereef.org/mpdecimal/",
+        "version": "2.5.1",
+        "installs": 3986221,
+        "maintainer": "",
+        "thumb_image_url": "/Images/package-thumb-nolabel.jpg"
+    },
+    {
+        "name": "svg2png",
+        "full_name": "svg2png",
+        "desc": "SVG to PNG converter",
+        "homepage": "https://cairographics.org/",
+        "version": "0.1.3",
+        "installs": 1233,
+        "maintainer": "pascal",
+        "thumb_image_url": "/Images/package-thumb-nolabel4.jpg"
+    },
+    {
+        "name": "cmake",
+        "full_name": "cmake",
+        "desc": "Cross-platform make",
+        "homepage": "https://www.cmake.org/",
+        "version": "3.24.2",
+        "installs": 1729267,
+        "maintainer": "pascal",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg"
+    },
+    {
+        "name": "h2c",
+        "full_name": "h2c",
+        "desc": "Headers 2 curl",
+        "homepage": "https://curl.se/h2c/",
+        "version": "1.0",
+        "installs": 96,
+        "maintainer": "h2o",
+        "thumb_image_url": "/Images/package-thumb-nolabel.jpg"
+    },
+    {
+        "name": "libmagic",
+        "full_name": "libmagic",
+        "desc": "Implementation of the file(1) command",
+        "homepage": "https://www.darwinsys.com/file/",
+        "version": "5.43",
+        "installs": 162436,
+        "maintainer": "",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg"
+    },
+    {
+        "name": "deno",
+        "full_name": "deno",
+        "desc": "Secure runtime for JavaScript and TypeScript",
+        "homepage": "https://deno.land/",
+        "version": "1.26.1",
+        "installs": 204033,
+        "maintainer": "Ryan Dahl",
+        "thumb_image_url": "/Images/package-thumb-nolabel2.jpg"
+    },
+    {
+        "name": "fontconfig",
+        "full_name": "fontconfig",
+        "desc": "XML-based font configuration API for X Windows",
+        "homepage": "https://wiki.freedesktop.org/www/Software/fontconfig/",
+        "version": "2.14.0",
+        "installs": 2485083,
+        "maintainer": "Max Miedinger",
+        "thumb_image_url": "/Images/package-thumb-nolabel.jpg"
+    },
+    {
+        "name": "pkg-config",
+        "full_name": "pkg-config",
+        "desc": "Manage compile and link flags for libraries",
+        "homepage": "https://freedesktop.org/wiki/Software/pkg-config/",
+        "version": "0.29.2",
+        "installs": 2634164,
+        "maintainer": "pascal",
+        "thumb_image_url": "/Images/package-thumb-nolabel4.jpg"
+    },
+    {
+        "name": "shared-mime-info",
+        "full_name": "shared-mime-info",
+        "desc": "Database of common MIME types",
+        "homepage": "https://wiki.freedesktop.org/www/Software/shared-mime-info",
+        "version": "2.2",
+        "installs": 642619,
+        "maintainer": "Mr.Mime",
+        "thumb_image_url": "/Images/package-thumb-nolabel3.jpg"
+    },
+    {
+        "name": "ttfautohint",
+        "full_name": "ttfautohint",
+        "desc": "Auto-hinter for TrueType fonts",
+        "homepage": "https://www.freetype.org/ttfautohint/",
+        "version": "1.8.4",
+        "installs": 4696,
+        "maintainer": "pascal",
+        "thumb_image_url": "/Images/package-thumb-nolabel.jpg"
+    },
+    {
+        "name": "numactl",
+        "full_name": "numactl",
+        "desc": "NUMA support for Linux",
+        "homepage": "https://github.com/numactl/numactl",
+        "version": "2.0.16",
+        "installs": 1120,
+        "maintainer": "FSS",
+        "thumb_image_url": "/Images/package-thumb-nolabel2.jpg"
+    },
+    {
+        "name": "flex",
+        "full_name": "flex",
+        "desc": "Fast Lexical Analyzer, generates Scanners (tokenizers)",
+        "homepage": "https://github.com/westes/flex",
+        "version": "2.6.4",
+        "installs": 35001,
+        "maintainer": "",
+        "thumb_image_url": "/Images/package-thumb-nolabel4.jpg"
+    }
+]

src/layouts/index.html

@@ -164,7 +164,7 @@
     align-items: center;
   }
 
-  .swiper-slide img {
+  .swiper-slide figure > img {
     display: block;
     width: 100%;
     height: 100%;
@@ -208,7 +208,7 @@
         <h2>sta'tea'stics</h2>
         <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
-        {{- partial "detail-btn-large.html" . -}}
+        {{- partial "detail-btn-large.html" "#" -}}
       </div>
     </div>
     <div class="row">

src/layouts/page/package-detail.html

@@ -9,10 +9,13 @@
         </div>
       </div>
       <div class="col">
-        <h3>Package Title</h3>
+        <h3>{{- .Title -}}</h3>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+        {{ range where $.Site.Data.packages "name" .Title }}
-        {{- partial "detail-btn-large.html" -}}
+          <p>{{- .desc -}}</p>
-
+          {{ if not (eq .homepage "") }}
+            {{- partial "detail-btn-large.html" .homepage -}}
+          {{end}}
+        {{ end }}
       </div>
     </div>
   </div>

src/layouts/partials/detail-btn-large.html

@@ -1 +1,3 @@
-<button href="#" class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
+<a target="_blank" href="{{- . -}}">
+    <button class="detail-btn-large"><i class="icon-enter-arrow"></i>VIEW ALL DETAILS</button>
+</a>

src/layouts/partials/detail-btn.html

@@ -8,8 +8,9 @@
   padding-top: 0.279vw;
   text-decoration: none;
   text-transform: uppercase;
-  width: 48%;
+  width: 134px;
   height: 2.232vw;
+  min-height: 34px;
   transition: 0.1s linear;
 }
 
@@ -34,4 +35,7 @@
 
 </style>
 
-<button href="#" class="detail-btn"><i class="icon-enter-arrow"></i>details</button>
+
+<a href="/packages/{{- .name -}}/">
+  <button class="detail-btn"><i class="icon-enter-arrow"></i>details</button>
+</a>

src/layouts/partials/navbar.html

@@ -1,6 +1,6 @@
 <nav class="navbar bg-dark navbar-expand-lg navbar-dark sticky-top my-auto main-nav">
     <div class="container-fluid top-nav">
-      <a class="navbar-brand" href="#"><img class="nav-logo" src="/Images/tea-logo-2.svg"></a>
+      <a class="navbar-brand" href="/"><img class="nav-logo" src="/Images/tea-logo-2.svg"></a>
       <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight"
         aria-controls="offcanvasRight" aria-expanded="false" aria-label="Toggle navigation">
         MENU

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">
+      <div class="package-grid">
-        {{- partial "package-thumbnail.html" . -}}
+        {{ range $.Site.Data.packages }}
-        {{- partial "package-thumbnail.html" . -}}
+          {{- partial "package-thumbnail.html" .}}
-        {{- partial "package-thumbnail.html" . -}}
+        {{ end }}
-        {{- 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>
     </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,62 @@
 <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>
+      {{ if not (eq .maintainer "") }}
+        <h4>&#x2022;&nbsp;{{- .maintainer -}}</h4>
+      {{end}}
+    </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">V&NonBreakingSpace;{{- .version -}}</span>
+        <!-- 
+        TODO: uncomment once install counts are not disappointing anymore  
+        <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/{{- .name -}}/">
+      <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) {
 
@@ -23,6 +68,7 @@
   }
 
   .thumbnail-body{
+    display: flex;
     border-radius: 0px !important;
     padding: 0vw;
   }

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>
+          {{ range $.Site.Data.packages }}
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
+            <div class="swiper-slide">
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
+            {{- partial "package-thumbnail.html" .}}
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
+            </div>
-          <div class="swiper-slide">{{- partial "package-thumbnail.html" . -}}</div>
+          {{ end }}
-          <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>
         <!--<div class="swiper-pagination"></div>-->
       </div>