From fe0ff69fbbd76b41921e717e400bdeee4d85f6ce Mon Sep 17 00:00:00 2001
From: lorow <smykupyka@gmail.com>
Date: Thu, 28 May 2026 20:57:13 +0200
Subject: [PATCH 1/2] Fixup missed image links, fix build issues

---
 .../upload_and_update_firmware.md             |   8 +-
 .../src/pages/headset_guides/valve_index.md   |  61 +++--
 .../docs/src/pages/how_to_build/led_setup.md  |  41 ++--
 vitepress/docs/src/pages/misc/jlc3dp.md       |   9 +-
 .../docs/src/static/image_settings/index.ts   | 221 ++++++++++++++++++
 .../docs/src/vue/images/ImageComponent.vue    |   2 +-
 6 files changed, 298 insertions(+), 44 deletions(-)

diff --git a/vitepress/docs/src/pages/firmware_guide/upload_and_update_firmware.md b/vitepress/docs/src/pages/firmware_guide/upload_and_update_firmware.md
index 7dc64cfc..964e2215 100644
--- a/vitepress/docs/src/pages/firmware_guide/upload_and_update_firmware.md
+++ b/vitepress/docs/src/pages/firmware_guide/upload_and_update_firmware.md
@@ -35,7 +35,7 @@ Once completed, you should be all set to proceed.
 
 > This builds the firmware, but does not send it to the ESP yet.
 
-![img](../imgs/vsc-legacy/EmSkhFp.png)
+<ImageCard :options="image_settings.upload_and_update_firmware_img" />
 
 ## 3. Upload your firmware
 
@@ -44,7 +44,7 @@ Once completed, you should be all set to proceed.
 - Once the firmware has been built, press the upload button to upload the firmware.
 
   This sends the firmware to the ESP.
-  ![img](../imgs/vsc-legacy/lI3PFVC.png)
+  <ImageCard :options="image_settings.upload_and_update_firmware_img_1" />
 
 <Alerts :options="alerts.upload_firmware_one">
     <template v-slot:content>
@@ -56,7 +56,7 @@ Once completed, you should be all set to proceed.
 
 - If the upload is successful, you should get an output that looks like this:
 
-  ![img](../imgs/vsc-legacy/SDQcCr1.png)
+  <ImageCard :options="image_settings.upload_and_update_firmware_img_2" />
 
 Congratulations! You have now successfully uploaded the firmware to your EyeTrackVR Tracker!
 
@@ -163,7 +163,7 @@ This will open a list of all available environments, select the one that matches
 
 4. Restart the ESPs, they **_must_** be power cycled
 5. Press the upload button to upload the firmware.<br>  
-   ![img](../imgs/vsc-legacy/lI3PFVC.png)
+   <ImageCard :options="image_settings.upload_and_update_firmware_img_1" />
 6. Do not touch esps or move them during OTA upload
 7. Wait around 1 minute.
 8. Repeat for as many trackers as you need.
diff --git a/vitepress/docs/src/pages/headset_guides/valve_index.md b/vitepress/docs/src/pages/headset_guides/valve_index.md
index 7bb8c2af..5efa1fd9 100644
--- a/vitepress/docs/src/pages/headset_guides/valve_index.md
+++ b/vitepress/docs/src/pages/headset_guides/valve_index.md
@@ -1,4 +1,9 @@
 # Valve Index {.text-[var(--font-accent)]}
+<script setup>
+import ImageCard from '../../vue/images/ImageComponent.vue'
+import { image_settings } from '../../static/image_settings'
+</script>
+
 
 These are two proven/tested ways to do a clean ETVR build on the Valve Index. Don't treat this as a *must follow*, but a setup to go for if you don't have other plans.
 
@@ -17,8 +22,9 @@ Please note due to the LED positioning, these will **require you to use the incl
 [V4 LED Kit Assembly](https://docs.eyetrackvr.dev/how_to_build/led_setup)
 
 ## MUTEtheCyberwolf's DEV Frunk Mod:
-![DevFrunk1](../imgs/headset_guides/KQDFg1J.jpeg)
-![HMD](../imgs/headset_guides/4n6f4U3.png)
+<ImageCard :options="image_settings.valve_index_devfrunk1" />
+<ImageCard :options="image_settings.valve_index_hmd" />
+<br>
 
 #### Mod Details
 The DEV Frunk is a popular choice for ETVR on the Index. Replacing the original index frunk entirely, it has multiple mounting points for both the XIAO's, a Vive Facial Tracker (or [project babble!](https://babble.diy/)), and cutouts for 30x30x7mm fans.  
@@ -45,9 +51,21 @@ You will need to print:
 - 1x Eyetrack VR Prototype XIAO Mount.stl
 - 1x FacialTrackerBeerHingeVIDEVFrunk1.stl
 - 1x FacialTrackerBridgeVIDEVFrunk1.stl
-  - Alternatively, if you have the [LDLRUI USB HUB](https://www.amazon.com/LDLrui-4-Port-Splitter-Multiport-Adapter/dp/B0BLHCD7FS), [this modified version](https://github.com/Frosty704/mods-eyetrackvr/blob/main/ldlrui%20case%20and%20bridge%20merged-FacialTrackerBridgeVIDEVFrunk1.stl) of the DEV Frunk Bridge can snap fit the hub onto the bridge. [Example](../imgs/headset_guides/kRvx56r.jpeg)
+  - Alternatively, if you have the [LDLRUI USB HUB](https://www.amazon.com/LDLrui-4-Port-Splitter-Multiport-Adapter/dp/B0BLHCD7FS), [this modified version](https://github.com/Frosty704/mods-eyetrackvr/blob/main/ldlrui%20case%20and%20bridge%20merged-FacialTrackerBridgeVIDEVFrunk1.stl) of the DEV Frunk Bridge can snap fit the hub onto the bridge.
+
+  Example:
+  
+  <ImageCard :options="image_settings.valve_index_dev_frunk_bridge" />
+
 - 1x ValveIndexDEVFrunk1.stl
-  - Alternatively, if you are interested in routing the ribbon cables internally, [this modified DEV Frunk](https://github.com/Frosty704/mods-eyetrackvr/blob/main/ValveIndexDEVFrunk1_MODIFIED.stl) has holes at the top for sliding through ribbon cables and power cables. [Example](../imgs/headset_guides/RcYQ8xd.png)
+  - Alternatively, if you are interested in routing the ribbon cables internally, [this modified DEV Frunk](https://github.com/Frosty704/mods-eyetrackvr/blob/main/ValveIndexDEVFrunk1_MODIFIED.stl) has holes at the top for sliding through ribbon cables and power cables.
+  
+  Example:
+
+  <ImageCard :options="image_settings.valve_index_dev_frunk_ribbons" />
+  <br>
+
+## Parts outlined
 
 ![Drawing1](https://github.com/MUTEtheCyberwolf/VALVE-INDEX-DEV-Frunk-1.0/assets/98415183/3b2b4fc2-a0ce-4641-8d0f-8fcac9271e34)
 
@@ -57,22 +75,22 @@ You will need to print:
 - When heating up the inserts, **let the weight of the soldering iron do the work**, they make take a few seconds to start moving on their own.
    -  **Do not push down**, and remove the iron when they are level with the print. It doesn't need to be perfect, so take your time!
 
-![FRUNK](../imgs/headset_guides/5xzpTqa.png)
+<ImageCard :options="image_settings.valve_index_frunk" />
 
 Bottom picture courtesy of amoistman
 
 2. Next, place a heat insert into the bigger hole of the facial tracker bridge
 
-![BRIDGE](../imgs/headset_guides/vNPx656.png)
+<ImageCard :options="image_settings.valve_index_bridge" />
 
 3. Lastly, place another heat insert into the thick side of the beer hinge
 
 
-![HINGE](../imgs/headset_guides/R3Uwllz.png)
+<ImageCard :options="image_settings.valve_index_hinge" />
 
 4. Your finished heat inserts should look like this
 
-![INSERTSEXAMPLE](../imgs/headset_guides/2z0TD3L.jpeg)
+<ImageCard :options="image_settings.valve_index_insertsexample" />
 
 Picture courtesy of amoistman
 
@@ -84,7 +102,7 @@ We can move onto screwing in the XIAO Mount and Facial tracker bridge onto the f
   - If you have trouble screwing them in, try screwing them equally to distribute the pressure more evenly.
     - Screw one a little, screw the opposite the same amount, repeat.
 
-![M4SCREWGUIDE](../imgs/headset_guides/hCi744w.png)
+<ImageCard :options="image_settings.valve_index_m4screwguide" />
 
 Two last things to screw in will be the beer hinge and vive facial tracker or babble case if you have it
 
@@ -92,37 +110,38 @@ Two last things to screw in will be the beer hinge and vive facial tracker or ba
    - Screwing in **opposite** of where the heat insert is. You should be screwing ***into*** the heat insert
 
 
-![M4SCREWGUIDE2](../imgs/headset_guides/zJeadXI.png)
+<ImageCard :options="image_settings.valve_index_m4screwguide2" />
 
 2. For the last screw, repeat the same steps, but line up your face tracker or babble case. Screw from the same direction, into the heat insert of the beer hinge.
 Use either an M4x10 or an M4x30. I find the M4x10 sometimes loses tension, while the M4x30 doesnt. 
 
 3. Your final result should look like this
-![FINAL](../imgs/headset_guides/1h7ex2y.jpg)
-
+<ImageCard :options="image_settings.valve_index_final" />
+<br>
 
 #### 3. Mounting components
 
 1. You can now push the XIAO's into the mount, making sure they are down snug, if you haven't already.
 
-![XIAO](../imgs/headset_guides/pXb2UVZ.png)
-
+<ImageCard :options="image_settings.valve_index_xiao" />
+<br>
 
 2. Place your V4 LED kit PCB into the middle of the XIAO Retention Clip. Ensure the hole in the PCB alligns with the small bump on the retention clip.
 You will have to slide it in and push it under the overhangs until they snap over the PCB.
 
-![XIAO-V4](../imgs/headset_guides/MnaWjHw.png)
+<ImageCard :options="image_settings.valve_index_xiao_v4" />
+<br>
 
 3. Route your V4 LED connectors through the coverplate holes prior to putting it on
 
-![V4POWER](../imgs/headset_guides/rDOzTz8.png)
+<ImageCard :options="image_settings.valve_index_v4power" />
+<br>
 
 4. Place the coverplate ontop of the LED PCB until the front of it snaps down and locks it over the retention clip.
 
 5. Then you can slide the retention clip over your XIAO mount to keep them in place.
 
 
-
 #### 4. Replacing frunk 
 
 **PLEASE UNPLUG YOUR INDEX FROM POWER BEFORE CONTINUING**
@@ -131,7 +150,8 @@ You must have a T5 Torx screwdriver to remove the original index frunk screws, w
 
 Picture courtesy of iFixit
 
-![T5SCREWS](../imgs/headset_guides/AbnMtn4.jpeg)
+<ImageCard :options="image_settings.valve_index_t5screws" />
+<br>
 
 1. If you do not have fans, and are mounting a USB Hub infront, I recommend now plugging in the USB hub through the fan holes, as you won't be able to after dev frunk is screwed on.
 
@@ -139,9 +159,8 @@ Alternatively, you can use the USB C port below the middle bottom screw, and pas
 
 2. Once the frunk is removed, line up your DEV Frunk and screw it back in the same way. Support it in a way you can screw in without it falling.
 
-![T5SCREWS2](../imgs/headset_guides/LRN45aM.png)
-
-
+<ImageCard :options="image_settings.valve_index_t5screws2" />
+<br>
 
 ## Physics-Dude's Gumstick USB Hub Dongle
 
diff --git a/vitepress/docs/src/pages/how_to_build/led_setup.md b/vitepress/docs/src/pages/how_to_build/led_setup.md
index 9896f442..d83aacd3 100644
--- a/vitepress/docs/src/pages/how_to_build/led_setup.md
+++ b/vitepress/docs/src/pages/how_to_build/led_setup.md
@@ -1,4 +1,9 @@
 Pardon the mess, this page is WIP more docs for other configurations and assemblly are in the works.
+<script setup>
+import ImageCard from '../../vue/images/ImageComponent.vue'
+import { image_settings } from '../../static/image_settings'
+</script>
+
 
 # How to assemble a V4 mini LED hardware kit:
 
@@ -9,28 +14,31 @@ There are 3 main components of an IR LED kit; the mainboard, LEDs and wires.
 
 ### Mainboard
 Below is the V4 mini mainboard with major features labled.
-![V4mini](../imgs/leds/SpwYUgw.jpeg)  
-![V4mini_back](../imgs/leds/ZsTnjem.jpeg)
+<ImageCard :options="image_settings.led_setup_v4mini" />
+<br>  
+<ImageCard :options="image_settings.led_setup_v4mini_back" />
 
 
 ### LEDs
 There are 2 different types of LED boards. 
 The one you should have more of are the "N" LEDs. N stands for Normal, these make up 3 of the leds per eye.
-![nLED](../imgs/leds/f0onbjb.jpeg)  
-![NLEDback](../imgs/leds/pM31O08.jpeg)
+<ImageCard :options="image_settings.led_setup_nled" />  
+<br>
+<ImageCard :options="image_settings.led_setup_nledback" />
 
 
 The second type is the "E" LEDs. E stands for End as these are put at the end of the LED strand.
 
-![eLED](../imgs/leds/LaJmm4Z.jpeg)  
-![eLEDback](../imgs/leds/UkLVPci.jpeg)
+<ImageCard :options="image_settings.led_setup_eled" />  
+<br>
+<ImageCard :options="image_settings.led_setup_eledback" />
 
 In future orders the "E" LEDs will be purple for easier distinction.
-![eLEDpurple](../imgs/leds/a1j6zHi.jpeg)
+<ImageCard :options="image_settings.led_setup_eledpurple" />
 
 ### Wires
 The included wires are a bit special, they have 3 pins on the connectors but only 2 wires are attached.
-![v4wire](../imgs/leds/UTtd5bG.jpeg)  
+<ImageCard :options="image_settings.led_setup_v4wire" />  
 
 This distinction is crutial in assembling a kit as the wires need to go in a specific orientation outlined in the assembly picture which shows the pins without wires as dashes - - -.
 
@@ -38,8 +46,9 @@ This distinction is crutial in assembling a kit as the wires need to go in a spe
 
 Start by pluggin in the long wires to the main board like shown.
 
-![notpluggedr](../imgs/leds/DNpVzY3.jpeg)  
-![pluggedinr](../imgs/leds/4VWqUiZ.jpeg)
+<ImageCard :options="image_settings.led_setup_notpluggedr" />  
+<br>
+<ImageCard :options="image_settings.led_setup_pluggedinr" />
 
 
 Then connect the wires to leds in the sequence:
@@ -48,11 +57,11 @@ Then connect the wires to leds in the sequence:
 
 You need to **pay very close attention** to the **orientation** of the wires so that the missing wire is facing the correct way. The following image shows a kit fully assembled:
 
-![v4minifull](../imgs/leds/zdj9WUu.png)
+<ImageCard :options="image_settings.led_setup_v4minifull" />
 
 Here is an example of the right eye's LED strand.  
  
-![v4minireye](../imgs/leds/Bi6Og87.jpeg)  
+<ImageCard :options="image_settings.led_setup_v4minireye" />  
   
 # How to assemble V4 Lite LED kit:  
 
@@ -76,19 +85,19 @@ First, decide if you want dual eye or single eye operation and pick the appropia
 **__Single Eye:__**   
 Use the 130ohm resistor marked with Black, Black, and Gold middle rings:  
   
-![v4litesingleeye](../imgs/leds/dCNMQaZ.jpeg)  
+<ImageCard :options="image_settings.led_setup_v4litesingleeye" />  
 
 
 **__Dual Eye:__**  
 Use the 65ohm resistor marked with Yellow, White and Gold middle rings:  
   
-![v4litedualeye](../imgs/leds/vuhsckU.jpeg)  
+<ImageCard :options="image_settings.led_setup_v4litedualeye" />  
 
 Now, solder the resistor on the board (any orientation), and then the black 3 pin voltage regulator (orientation matters, solder on the side with the white outline and have it fit in the outline's shape)  
   
-![v4litemainboardassem](../imgs/leds/s1eqJiE.jpeg)  
+<ImageCard :options="image_settings.led_setup_v4litemainboardassem" />  
 
 
 Now, wire up the LEDs like shown.  
 
-![v4litefullassmb](../imgs/leds/l57tEmr.png)  
\ No newline at end of file
+<ImageCard :options="image_settings.led_setup_v4litefullassmb" />  
\ No newline at end of file
diff --git a/vitepress/docs/src/pages/misc/jlc3dp.md b/vitepress/docs/src/pages/misc/jlc3dp.md
index be3420ed..7cc64d0c 100644
--- a/vitepress/docs/src/pages/misc/jlc3dp.md
+++ b/vitepress/docs/src/pages/misc/jlc3dp.md
@@ -1,4 +1,9 @@
 # 3D Printing Service JLC3DP {.text-[var(--font-accent)]}
+<script setup>
+import ImageCard from '../../vue/images/ImageComponent.vue'
+import { image_settings } from '../../static/image_settings'
+</script>
+
 
 ## If you don't own a 3D Printer, you can order high quality prints by the dollar using JLC3DP
 https://jlc3dp.com/3d-printing-quote
@@ -6,10 +11,10 @@ https://jlc3dp.com/3d-printing-quote
 ### Upload your STL files with the following print settings
 Do note that if you are printing for a example, a lens mount, you may need to mirror it in blender, or any slicer, to get both a left and right STL and upload them separate. Do not upload them combined
 
-![UploadJLC](../imgs/prints/NFKoPAA.png)
+<ImageCard :options="image_settings.jlc3dp_uploadjlc" />
 
 ### Choose a cheaper shipping option, for me this is global standard direct line
 
-![Shipping](../imgs/prints/ck27eaH.png)
+<ImageCard :options="image_settings.jlc3dp_shipping" />
 
 In the likely event you get an [email or alert](../imgs/prints/t2QmpBY.png) from JLC asking for consent to print as the STL has thin walls, you can agree to the print without worry. 
\ No newline at end of file
diff --git a/vitepress/docs/src/static/image_settings/index.ts b/vitepress/docs/src/static/image_settings/index.ts
index 454354e1..fac93d88 100644
--- a/vitepress/docs/src/static/image_settings/index.ts
+++ b/vitepress/docs/src/static/image_settings/index.ts
@@ -880,6 +880,227 @@ const image_settings = {
     alt: "Screenshot showcasing the settings page of ETVR, explaining how to setup ETVR to talk to a different PC",
     max_width: "max-width: 600px;",
   },
+
+  valve_index_devfrunk1: {
+    url: "../imgs/headset_guides/KQDFg1J.jpeg",
+    alt: "Mute's dev frunt hero picture",
+    max_width: "max-width: 600px;",
+  },
+
+  valve_index_hmd: {
+    url: "../imgs/headset_guides/4n6f4U3.png",
+    alt: "build with hub mounted to the 3d print",
+    max_width: "max-width: 600px;",
+  },
+
+  valve_index_frunk: {
+    url: "../imgs/headset_guides/5xzpTqa.png",
+    alt: "heat inserts locations",
+    max_width: "max-width: 600px;",
+  },
+
+  valve_index_bridge: {
+    url: "../imgs/headset_guides/vNPx656.png",
+    alt: "heat inserts locations - hinge",
+    max_width: "max-width: 600px;",
+  },
+
+  valve_index_hinge: {
+    url: "../imgs/headset_guides/R3Uwllz.png",
+    alt: "heat inserts locations - hinge",
+    max_width: "max-width: 600px;",
+  },
+
+  valve_index_insertsexample: {
+    url: "../imgs/headset_guides/2z0TD3L.jpeg",
+    alt: "inserts mounted example",
+    max_width: "max-width: 600px;",
+  },
+
+  valve_index_m4screwguide: {
+    url: "../imgs/headset_guides/hCi744w.png",
+    alt: "M4 screws guide",
+    max_width: "max-width: 600px;",
+  },
+
+  valve_index_m4screwguide2: {
+    url: "../imgs/headset_guides/zJeadXI.png",
+    alt: "M4 screws guide",
+    max_width: "max-width: 600px;",
+  },
+
+  valve_index_final: {
+    url: "../imgs/headset_guides/1h7ex2y.jpg",
+    alt: "finalized assembly",
+    max_width: "max-width: 600px;",
+  },
+
+  valve_index_xiao: {
+    url: "../imgs/headset_guides/pXb2UVZ.png",
+    alt: "XIAO board mounted",
+    max_width: "max-width: 600px;",
+  },
+
+  valve_index_xiao_v4: {
+    url: "../imgs/headset_guides/MnaWjHw.png",
+    alt: "XIAO-V4 sandwitched",
+    max_width: "max-width: 600px;",
+  },
+
+  valve_index_v4power: {
+    url: "../imgs/headset_guides/rDOzTz8.png",
+    alt: "V4 power routing",
+    max_width: "max-width: 600px;",
+  },
+
+  valve_index_t5screws: {
+    url: "../imgs/headset_guides/AbnMtn4.jpeg",
+    alt: "T5 screws locations",
+    max_width: "max-width: 600px;",
+  },
+
+  valve_index_t5screws2: {
+    url: "../imgs/headset_guides/LRN45aM.png",
+    alt: "T5 screws locations",
+    max_width: "max-width: 600px;",
+  },
+
+  valve_index_dev_frunk_bridge: {
+    url: "../imgs/headset_guides/kRvx56r.jpeg",
+    alt: "vive face tracker mounted to the hinge",
+    max_width: "max-width: 600px;",
+  },
+
+  valve_index_dev_frunk_ribbons: {
+    url: "../imgs/headset_guides/RcYQ8xd.png",
+    alt: "ribbon routing",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_v4mini: {
+    url: "../imgs/leds/SpwYUgw.jpeg",
+    alt: "V4mini",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_v4mini_back: {
+    url: "../imgs/leds/ZsTnjem.jpeg",
+    alt: "V4mini_back",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_nled: {
+    url: "../imgs/leds/f0onbjb.jpeg",
+    alt: "nLED",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_nledback: {
+    url: "../imgs/leds/pM31O08.jpeg",
+    alt: "NLED back",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_eled: {
+    url: "../imgs/leds/LaJmm4Z.jpeg",
+    alt: "eLED",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_eledback: {
+    url: "../imgs/leds/UkLVPci.jpeg",
+    alt: "eLED back",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_eledpurple: {
+    url: "../imgs/leds/a1j6zHi.jpeg",
+    alt: "eLED purple",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_v4wire: {
+    url: "../imgs/leds/UTtd5bG.jpeg",
+    alt: "v4 wire",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_notpluggedr: {
+    url: "../imgs/leds/DNpVzY3.jpeg",
+    alt: "not plugged right ",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_pluggedinr: {
+    url: "../imgs/leds/4VWqUiZ.jpeg",
+    alt: "plugged in right",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_v4minifull: {
+    url: "../imgs/leds/zdj9WUu.png",
+    alt: "v4mini full",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_v4minireye: {
+    url: "../imgs/leds/Bi6Og87.jpeg",
+    alt: "v4mini right eye",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_v4litesingleeye: {
+    url: "../imgs/leds/dCNMQaZ.jpeg",
+    alt: "v4lite single eye",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_v4litedualeye: {
+    url: "../imgs/leds/vuhsckU.jpeg",
+    alt: "v4lite dual eye",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_v4litemainboardassem: {
+    url: "../imgs/leds/s1eqJiE.jpeg",
+    alt: "v4lit emain board assembly",
+    max_width: "max-width: 600px;",
+  },
+
+  led_setup_v4litefullassmb: {
+    url: "../imgs/leds/l57tEmr.png",
+    alt: "v4lite full assembly",
+    max_width: "max-width: 600px;",
+  },
+
+  upload_and_update_firmware_img: {
+    url: "../imgs/vsc-legacy/EmSkhFp.png",
+    alt: "build firmware shortcut",
+    max_width: "max-width: 600px;",
+  },
+  upload_and_update_firmware_img_1: {
+    url: "../imgs/vsc-legacy/lI3PFVC.png",
+    alt: "flash firmware shortcut",
+    max_width: "max-width: 600px;",
+  },
+
+  upload_and_update_firmware_img_2: {
+    url: "../imgs/vsc-legacy/SDQcCr1.png",
+    alt: "successful flash output",
+    max_width: "max-width: 600px;",
+  },
+
+  jlc3dp_uploadjlc: {
+    url: "../imgs/prints/NFKoPAA.png",
+    alt: "Upload JLC",
+    max_width: "max-width: 600px;",
+  },
+
+  jlc3dp_shipping: {
+    url: "../imgs/prints/ck27eaH.png",
+    alt: "Shipping",
+    max_width: "max-width: 600px;",
+  },
 };
 
 export { image_settings };
diff --git a/vitepress/docs/src/vue/images/ImageComponent.vue b/vitepress/docs/src/vue/images/ImageComponent.vue
index 6fecba6f..3df1d93b 100644
--- a/vitepress/docs/src/vue/images/ImageComponent.vue
+++ b/vitepress/docs/src/vue/images/ImageComponent.vue
@@ -3,7 +3,7 @@ const props = defineProps(['options']);
 </script>
 
 <template>
-    <div align="center" class="mb-4">
+    <div align="center">
         <figure>
             <a v-if="options.url_2" class="no_icon" target="_blank" rel="noopener" :href="options.url_2">
                 <img class="docimage max-w-full h-auto rounded-lg" :src="options.url" :alt="options.alt"

From 32f5b00ef4c183ee61450a680db901d374766218 Mon Sep 17 00:00:00 2001
From: lorow <smykupyka@gmail.com>
Date: Thu, 28 May 2026 21:07:25 +0200
Subject: [PATCH 2/2] Fixup spacing

---
 vitepress/docs/src/pages/how_to_build/full_build.md   |  1 +
 .../docs/src/pages/how_to_build/preparing_cameras.md  | 11 +++++++++++
 .../docs/src/pages/how_to_build/preparing_xiao.md     |  3 +++
 3 files changed, 15 insertions(+)

diff --git a/vitepress/docs/src/pages/how_to_build/full_build.md b/vitepress/docs/src/pages/how_to_build/full_build.md
index 3b09db64..cd37368c 100644
--- a/vitepress/docs/src/pages/how_to_build/full_build.md
+++ b/vitepress/docs/src/pages/how_to_build/full_build.md
@@ -63,6 +63,7 @@ This is the best solution when it comes to the final result. If you have Vive/Tu
 Below is an example of bridging the connections and attaching an antenna.
 
 <ImageCard :options="image_settings.external_antenna_resistors" />
+<br>
 
 <div align="center">
 <iframe width="500" height="300" src="https://www.youtube.com/embed/aBTZuvg5sM8" title="How to add an external antenna to an ESP32-CAM (2 methods)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
diff --git a/vitepress/docs/src/pages/how_to_build/preparing_cameras.md b/vitepress/docs/src/pages/how_to_build/preparing_cameras.md
index 88c4b76c..818e4b3f 100644
--- a/vitepress/docs/src/pages/how_to_build/preparing_cameras.md
+++ b/vitepress/docs/src/pages/how_to_build/preparing_cameras.md
@@ -52,6 +52,7 @@ Cut the tape from the roll, here I used flat cutters.
 Be careful to not cut the camera connector in the process.
 
 <ImageCard :options="image_settings.camera_protect3" />
+<br>
 <ImageCard :options="image_settings.camera_protect4" />
 
 With the tape cut from the roll, lay it down and get out a X-ACTO knife.
@@ -61,32 +62,42 @@ With the tape cut from the roll, lay it down and get out a X-ACTO knife.
 Begin to cut around the camera connector so the tape can be peeled off.
 
 <ImageCard :options="image_settings.camera_protect6" />
+<br>
 <ImageCard :options="image_settings.camera_protect7" />
 
 When each side has been cut, begin to peel off the part that covered the connections.
 <ImageCard :options="image_settings.camera_protect8" />
+<br>
 <ImageCard :options="image_settings.camera_protect9" />
+<br>
 <ImageCard :options="image_settings.camera_protect10" />
 
 
 Now, carefully cut around the camera sensor part to remove its "skirt" leaving tape on the back of it.
 <ImageCard :options="image_settings.camera_protect11" />
+<br>
 <ImageCard :options="image_settings.camera_protect13" />
+<br>
 <ImageCard :options="image_settings.camera_protect14" />
+<br>
 <ImageCard :options="image_settings.camera_protect15" />
+<br>
 <ImageCard :options="image_settings.camera_protect12" />
 
 Gently pull off this outline of tape from the camera.
 <ImageCard :options="image_settings.camera_protect16" />
+<br>
 <ImageCard :options="image_settings.camera_protect17" />
 
 
 Begin to wrap the tape along the ribbon cable by first folding in the slightly shorter side.
 <ImageCard :options="image_settings.camera_protect18" />
+<br>
 <ImageCard :options="image_settings.camera_protect19" />
 
 Fold over the other side.
 <ImageCard :options="image_settings.camera_protect20" />
+<br>
 <ImageCard :options="image_settings.camera_protect21" />
 
 And you are done!
diff --git a/vitepress/docs/src/pages/how_to_build/preparing_xiao.md b/vitepress/docs/src/pages/how_to_build/preparing_xiao.md
index a1da60b4..d1262e15 100644
--- a/vitepress/docs/src/pages/how_to_build/preparing_xiao.md
+++ b/vitepress/docs/src/pages/how_to_build/preparing_xiao.md
@@ -55,10 +55,12 @@ First we need to remove the existing camera from the XIAO and replace it with a
 
 Begin by lifting up the grey part of the camera connector gently until it raises up.
 <ImageCard :options="image_settings.xiao5" />
+<br>
 <ImageCard :options="image_settings.xiao6" />
 
 Now grab the camera and gently wiggle it out of the connector.
 <ImageCard :options="image_settings.xiao7" />
+<br>
 <ImageCard :options="image_settings.xiao8" />
 
 ## Connecting the camera
@@ -76,6 +78,7 @@ The cable should go about half way in like this image:
 
 Now, close the camera connector by flipping the grey part down.
 <ImageCard :options="image_settings.xiao12" />
+<br>
 <ImageCard :options="image_settings.xiao13" />
 
 ## Conclusion