use webp images that are auto-generated

.github/get-packages-data.js

@@ -0,0 +1,24 @@
+const fs = require("fs");
+const packagesURL = "https://app.tea.xyz/v1/packages";
+
+async function main() {
+  const response = await fetch(packagesURL);
+  const packagesRaw = await response.json();
+  const packages = packagesRaw.map((pkg) => ({
+    slug: pkg.slug,
+    homepage: pkg.homepage || pkg.github_url,
+    name: pkg.name,
+    full_name: pkg.full_name,
+    maintainer: pkg.maintainer,
+    created: pkg.created_at,
+    desc: pkg.description.replace(/\\/g, "\\\\"),
+    short_description: (pkg.short_description || pkg.description).replace(/\\/g, "\\\\"),
+    thumb_image_url: pkg.image_added_at ? `https://gui.tea.xyz/prod/${pkg.full_name}/512x512.webp` : "",
+    keywords: pkg.keywords,
+    dl_count: pkg.installs || 0,
+    installs: pkg.installs ||  0,
+  }));
+  await fs.writeFileSync("./src/data/packages.json", JSON.stringify(packages, null, 2));
+}
+
+main();

.github/workflows/cd.yml

@@ -27,7 +27,7 @@ jobs:
     - name: add packages data
       run: |
         rm ./src/data/packages.json
-        curl https://gui.tea.xyz/packages.json -H "Accept: application/json" >> ./src/data/packages.json
+        node .github/get-packages-data.js
 
     - name: Create Package Detail Pages from packages.json
       uses: getneil/jq-action@v1

.github/workflows/staging.yml

@@ -38,7 +38,7 @@ jobs:
     - name: add packages data
       run: |
         rm ./src/data/packages.json
-        curl https://gui.tea.xyz/packages.json -H "Accept: application/json" >> ./src/data/packages.json
+        node .github/get-packages-data.js
 
     - name: Create Package Detail Pages from packages.json
       uses: getneil/jq-action@v1

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 -}}" data-description="{{- .desc -}}" data-maintainer="{{- .maintainer -}}">
+<div class="card card-thumbnail" style="width: 100%" data-name="{{- .name -}}" data-popularity="{{- .dl_count -}}" data-last_modified="{{- .last_modified -}}" data-description="{{- .short_description -}}" data-maintainer="{{- .maintainer -}}">
   <a href="/+{{- lower .full_name -}}/">
     <div class="p-3">
     <figure class="card-img-top" >