Merge pull request #192 from teaxyz/revise-package-path

#190 package details page path should be /+full_name/

.github/build-package-pages.sh

@@ -1,12 +1,19 @@
 #!/bin/bash
 # cmd: $ ./build-package-pages.sh srcJson targetPath
-# sample:  $ .github/build-package-pages.sh src/data/packages.json src/content/packages'
+# sample:  $ .github/build-package-pages.sh src/data/packages.json src/content/'
 
 for row in $(jq -r '.[] | @base64' < "$1"); do
     _jq() {
      echo "${row}" | base64 --decode | jq -r "${1}"
     }
-   touch "$2"/"$(_jq '.slug')".md
+   full_name=$(_jq '.full_name')
+
+   if [[ "$full_name" == *\/* ]] || [[ "$full_name" == *\\* ]]
+   then
+      mkdir -p "$2/+$full_name"
+      rm -rf "$2/+$full_name"
+   fi
+   touch "$2"/"+$(_jq '.full_name')".md
    content="---
 type: page
 title: \"$(_jq '.name')\"
@@ -14,5 +21,5 @@ maintainer: \"$(_jq '.maintainer')\"
 Description: \"$(_jq '.desc' | tr '\"' "'")\"
 layout: \"package-detail\"
 ---"
-   echo "$content" > "$2"/"$(_jq '.slug')".md
+   echo "$content" > "$2"/"+$(_jq '.full_name')".md
 done

.github/workflows/cd.yml

@@ -37,7 +37,7 @@ jobs:
       uses: getneil/jq-action@v1
       id: version
       with:
-        cmd: '.github/build-package-pages.sh src/data/packages.json src/content/packages'
+        cmd: '.github/build-package-pages.sh src/data/packages.json src/content'
 
     - name: Download package thumbnails from Airtable
       uses: getneil/jq-action@v1

.github/workflows/staging.yml

@@ -45,7 +45,7 @@ jobs:
     - name: Create Package Detail Pages from packages.json
       uses: getneil/jq-action@v1
       with:
-        cmd: '.github/build-package-pages.sh src/data/packages.json src/content/packages'
+        cmd: '.github/build-package-pages.sh src/data/packages.json src/content'
 
     - name: Download package thumbnails from Airtable
       uses: getneil/jq-action@v1

.gitignore

@@ -27,4 +27,6 @@ cdk.out
 
 # initially committed _sample.md only the rest will be ignored
 src/content/packages/*
-src/static/Images/packages/*
+src/static/Images/packages/*
+
+src/content/+*

README.md

@@ -29,10 +29,11 @@ The detail pages of each package are not committed to the repository for the
 simple reason of that would be too much repeating data.
 Execute the following command just once per version of
 `/src/data/packages.json`. This will create the package detail pages in
-`/src/content/packages/[package_slug].md`.
+`/src/content/+[package.full_name].md`.
+Which resembles the installation tag in tea cli
 
 ```sh
-.github/build-package-pages.sh src/data/packages.json src/content/packages
+.github/build-package-pages.sh src/data/packages.json src/content
 ```
 
 

src/content/+.md

@@ -0,0 +1,5 @@
+---
+type: page
+title: "packages"
+layout: "packages"
+---

src/content/packages/_sample.md

@@ -1,15 +0,0 @@
-<!--
-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/layouts/page/packages.html

@@ -0,0 +1,33 @@
+{{ define "main" }}
+
+
+
+<!-- Package Grid -->
+
+<!-- Desktop/Tablet Package Display -->
+
+  <span>
+    {{- partial "package-grid.html" . -}}
+  </span>
+
+<!-- Mobile Package Display -->
+  <!-- dont remove, it is not completely useless there is a ui bug i couldnt figure out 
+    the only solution is to keep it here. sorry - neil
+    -->
+  <span class="swiper-package-display">
+    {{- partial "swiper.html" . -}}
+  </span>
+
+<!-- Style for Swiper -->
+
+<style>
+  .grid-package-display{
+    display:block;
+  }
+  .swiper-package-display {
+    /* dont remove refer to comment above */
+    display: none;
+  }
+</style>
+
+{{ end }}

src/layouts/partials/package-grid.html

@@ -39,7 +39,7 @@
   }
   .package-grid {
     display: grid;
-    grid-template-columns: auto auto;
+    grid-template-columns: auto;
   }
   #loadMorePackagesBtn {
     cursor: pointer;
@@ -98,6 +98,8 @@
     popularity: 'popularity',
     last_modified: 'last_modified',
   }
+  const showAllPackages = window.location.pathname.includes("/+/");
+
   let sortBy = sortOptions.popularity; // last_modified
   let sortDirection = 'desc'; // asc
   let limit = 16;
@@ -186,7 +188,7 @@
     const packages = getPackageThumbs();
     let i = 0;
     for(const sp of packages) {
-      if (i >= limit) {
+      if (i >= limit && !showAllPackages) {
         sp.classList.add('hidden');
       } else {
         sp.classList.remove('hidden');
@@ -204,6 +206,11 @@
   }
 
   const loadMoreButton = document.getElementById('loadMorePackagesBtn');
+  if (showAllPackages) {
+    loadMoreSection.classList.add('hidden');
+  } else {
+    loadMoreSection.classList.remove('hidden');
+  }
   loadMoreButton.addEventListener('click',() => {
     limit += 16;
     refreshDisplayedPackages();

src/layouts/partials/package-thumbnail.html

@@ -19,12 +19,12 @@
         <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
       </p>
     </div>
-    <a href="/packages/{{- .slug -}}/">
+    <a href="/+{{- .full_name -}}/">
       {{- partial "detail-btn.html" . -}}
     </a>
   </div>
   <div class="card-body thumbnail-body-mobile">
-    <a href="/packages/{{- .slug -}}/">
+    <a href="/+{{- .full_name -}}/">
       <button class="detail-btn-mobile"><i class="icon-enter-arrow"></i>details</button>
     </a>
   </div>