[DNM] Use image processor

.github/workflows/image-processing.yml

@@ -0,0 +1,31 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Image processing
+
+on: push
+
+jobs:
+  process:
+    runs-on: ubuntu-latest
+    steps:
+    # Checkout repo
+    - name: Checkout data
+      uses: actions/checkout@v2
+    # Setup node (including yarn)
+    - name: Use Node.js 14
+      uses: actions/setup-node@v1
+      with:
+        node-version: 14
+    - run: yarn
+      env:
+        GITHUB_REGISTRY_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    - run: yarn run process-images
+      env:
+        GITHUB_REGISTRY_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        S3_ENDPOINT: ${{ secrets.IMAGE_STORE_S3_ENDPOINT }}
+        S3_REGION: ${{ secrets.IMAGE_STORE_S3_REGION }}
+        S3_ACCESS_KEY: ${{ secrets.IMAGE_STORE_S3_ACCESS_KEY }}
+        S3_SECRET_KEY: ${{ secrets.IMAGE_STORE_S3_SECRET_KEY }}
+        ORIGINALS_BUCKET: ${{ secrets.IMAGE_STORE_ORIGINALS_BUCKET }}
+        PROCESSED_BUCKET: ${{ secrets.IMAGE_STORE_PROCESSED_BUCKET }}

.github/workflows/image-uploading.yml

@@ -0,0 +1,34 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Upload images to ImageKit
+
+on: push
+
+jobs:
+  process:
+    runs-on: ubuntu-latest
+    steps:
+    # Checkout repo
+    - name: Checkout data
+      uses: actions/checkout@v2
+    # Setup node (including yarn)
+    - name: Use Node.js 14
+      uses: actions/setup-node@v1
+      with:
+        node-version: 14
+    - run: yarn
+      env:
+        GITHUB_REGISTRY_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+    - run: yarn run upload-images
+      env:
+        IMAGEKIT_PUBKEY: ${{ secrets.IMAGEKIT_PUBKEY }},
+        IMAGEKIT_PRIVKEY: ${{ secrets.IMAGEKIT_PRIVKEY }},
+        IMAGEKIT_URL: ${{ secrets.IMAGEKIT_URL }},
+        GITHUB_REGISTRY_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        S3_ENDPOINT: ${{ secrets.IMAGE_STORE_S3_ENDPOINT }}
+        S3_REGION: ${{ secrets.IMAGE_STORE_S3_REGION }}
+        S3_ACCESS_KEY: ${{ secrets.IMAGE_STORE_S3_ACCESS_KEY }}
+        S3_SECRET_KEY: ${{ secrets.IMAGE_STORE_S3_SECRET_KEY }}
+        ORIGINALS_BUCKET: ${{ secrets.IMAGE_STORE_ORIGINALS_BUCKET }}
+        PROCESSED_BUCKET: ${{ secrets.IMAGE_STORE_PROCESSED_BUCKET }}

.github/workflows/site-preview.yml

@@ -61,6 +61,8 @@ jobs:
         # Concatenate branch specific URLs
         SITE_URL: https://data-preview-${{ env.CI_REF_NAME_SLUG }}--clever-murdock-f2e04c.netlify.app
         API_URL: https://data-preview-${{ env.CI_REF_NAME_SLUG }}--clever-murdock-f2e04c.netlify.app/api
+        IMAGES_URL: ${{ secrets.IMAGES_URL }}
+        NO_IMAGES: true
         NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
         NETLIFY_SITE_ID: ${{ secrets.API_NETLIFY_SITE_ID }}
     - run: yarn

data/images/sizes.json

@@ -10,5 +10,6 @@
         "medium": 768,
         "large": 1026,
         "xlarge": 1500
-    }
+    },
+    "formats": ["[original]", "webp", "avif"]
 }

package.json

@@ -12,10 +12,12 @@
   "private": false,
   "scripts": {
     "build": "processAudioxideData",
-    "dev": "yarn && processAudioxideData && npx http-server dist -p 8888 --cors -c-1"
+    "dev": "yarn && processAudioxideData && npx http-server dist -p 8888 --cors -c-1",
+    "process-images": "processAudioxideImages",
+    "upload-images": "processAudioxideUploadImages"
   },
   "dependencies": {
-    "@audioxide/data-processor": "^0.14.1",
+    "@audioxide/data-processor": "^0.15.17",
     "@babel/core": "^7.12.10",
     "flexsearch": "^0.6.32",
     "node-fetch": "^2.6.1"