fix: prepend all tutorial image paths with the repo's slug because nu…

…xt github-actions preset doesn't do it

.github/workflows/ci.yaml

@@ -41,8 +41,13 @@ jobs:
       - name: Build Site
         env:
           NUXT_APP_BASE_URL: ${{ vars.NUXT_APP_BASE_URL }}
+        shell: bash
         run: |
           env
+          prefix=${{ env.NUXT_APP_BASE_URL }}
+          prefix="${prefix%/}"
+          jq --arg prefix "$prefix" '. | map({image: ($prefix + .image), description: .description})' assets/tutorial.json > tmp.$$.json && mv tmp.$$.json assets/tutorial.json
+          cat assets/tutorial.json
           npx nuxt build --preset github_pages
 
       - name: Upload to Github Actions Artifacts

site/assets/tutorial.json

@@ -0,0 +1,38 @@
+[
+  {
+    "image": "/tutorial/step-1.png",
+    "description": "Click on the <b>Install</b> button"
+  },
+  {
+    "image": "/tutorial/step-2.png",
+    "description": "Select the serial port that belongs to your board"
+  },
+  {
+    "image": "/tutorial/step-3.png",
+    "description": "Select <b>Install esp32-mfa-authenticator</b>"
+  },
+  {
+    "image": "/tutorial/step-4.png",
+    "description": "Select <b>Erase device</b> and then click on the <b>Next</b> button"
+  },
+  {
+    "image": "/tutorial/step-5.png",
+    "description": "Click on the <b>Install</b> button"
+  },
+  {
+    "image": "/tutorial/step-6.png",
+    "description": "Wait for the instalation to finish"
+  },
+  {
+    "image": "/tutorial/step-7.png",
+    "description": "Click on the <b>Next</b> button when the instalation is complete"
+  },
+  {
+    "image": "/tutorial/step-8.png",
+    "description": "Select <b>Logs & Console</b>"
+  },
+  {
+    "image": "/tutorial/step-9.png",
+    "description": "Calibrate the touch sensor when prompted. If the calibration phase has already passed when you opened the logs screen, click on the Reset(RST) button on the board"
+  }
+]

site/components/tutorial.vue

@@ -16,53 +16,14 @@
 
 <script lang="ts" setup>
 import { ref } from "vue";
+import Tutorial from "~/assets/tutorial.json";
 
 interface Step {
   image: string;
   description: string;
 }
 
-const steps = ref<Step[]>([
-  {
-    image: "/tutorial/step-1.png",
-    description: "Click on the <b>Install</b> button",
-  },
-  {
-    image: "/tutorial/step-2.png",
-    description: "Select the serial port that belongs to your board",
-  },
-  {
-    image: "/tutorial/step-3.png",
-    description: "Select <b>Install esp32-mfa-authenticator</b>",
-  },
-  {
-    image: "/tutorial/step-4.png",
-    description:
-      "Select <b>Erase device</b> and then click on the <b>Next</b> button",
-  },
-  {
-    image: "/tutorial/step-5.png",
-    description: "Click on the <b>Install</b> button",
-  },
-  {
-    image: "/tutorial/step-6.png",
-    description: "Wait for the instalation to finish",
-  },
-  {
-    image: "/tutorial/step-7.png",
-    description:
-      "Click on the <b>Next</b> button when the instalation is complete",
-  },
-  {
-    image: "/tutorial/step-8.png",
-    description: "Select <b>Logs & Console</b>",
-  },
-  {
-    image: "/tutorial/step-9.png",
-    description:
-      "Calibrate the touch sensor when prompted. If the calibration phase has already passed when you opened the logs screen, click on the Reset(RST) button on the board",
-  },
-]);
+const steps = ref<Step[]>(Tutorial);
 </script>
 
 <style scoped>