Fix faq dropdown

apps/docs/content/bun/how-to/build-pipeline.mdx

@@ -3,6 +3,7 @@ title: Configure Your Bun build & deploy pipeline
 description: Learn more about how you can configure your node.js service for build & deploy pipeline.
 ---
 
+import Badge from 'docs/src/components/Badge';
 import data from '@site/static/data.json';
 import UnorderedCodeList from 'docs/src/components/UnorderedCodeList';
 
@@ -97,9 +98,9 @@ Each service configuration contains at least two sections: **build** and **run**
 
 ## Build pipeline configuration
 
-### base
+### base <Badge type="required" />
 
-_REQUIRED._ Sets the base technology for the build environment.
+Sets the base technology for the build environment.
 
 Following options are available for Bun builds:
 
@@ -151,9 +152,9 @@ To customise your build environment use the [prepareCommands](bun/how-to/build-p
 Modifying the base technology will invalidate your build cache. See our [Build Cache Documentation](/features/build-cache) for more details about cache invalidation.
 :::
 
-### os
+### os <Badge type="optional" />
 
-_OPTIONAL._ Sets the operating system for the build environment.
+Sets the operating system for the build environment.
 
 Following options are available:
 
@@ -175,9 +176,9 @@ The os version is fixed and cannot be customised.
 Changing the OS setting will invalidate your build cache. See our [Build Cache Documentation](/features/build-cache) for details about cache behavior.
 :::
 
-### prepareCommands
+### prepareCommands <Badge type="optional" />
 
-_OPTIONAL._ Customises the build environment by installing additional dependencies or tools to the base build environment.
+Customises the build environment by installing additional dependencies or tools to the base build environment.
 
 The base build environment contains:
 
@@ -225,9 +226,9 @@ If any command fails, it returns an exit code other than 0 and the build is canc
 
 You can configure your prepare commands to be run in a single shell instance or multiple shell instances. The format is identical to [build commands](#buildcommands).
 
-### buildCommands
+### buildCommands <Badge type="required" />
 
-_REQUIRED._ Defines build commands.
+Defines build commands.
 
 ```yml
 zerops:
@@ -286,9 +287,9 @@ buildCommands:
 
 If the command ends successfully, it returns the exit code 0 and Zerops triggers the following command. When all `buildCommands` are finished, the application build is completed and ready for the deploy phase.
 
-### deployFiles
+### deployFiles <Badge type="required" />
 
-_REQUIRED._ Selects which files or folders will be deployed after the build has successfully finished. To filter out specific files or folders, use <a href="#deployignore">`.deployignore`</a> file.
+Selects which files or folders will be deployed after the build has successfully finished. To filter out specific files or folders, use <a href="#deployignore">`.deployignore`</a> file.
 
 ```yml
 # REQUIRED. Select which files / folders to deploy after
@@ -389,9 +390,9 @@ This example above ignores `file.txt` in ANY directory named `src`, such as:
 `.deployignore` file also works with <a href="/references/cli/commands#deploy">`zcli service deploy`</a> command.
 :::
 
-### cache
+### cache <Badge type="optional" />
 
-_OPTIONAL._ Defines which files or folders will be cached for the next build.
+Defines which files or folders will be cached for the next build.
 
 ```yml
 # OPTIONAL. Which files / folders you want to cache for the next build.
@@ -405,9 +406,9 @@ The cache attribute supports the [~ wildcard character](#how-to-use-a-wildcard-i
 
 Learn more about the [build cache system](/features/build-cache) in Zerops.
 
-### envVariables
+### envVariables <Badge type="optional" />
 
-_OPTIONAL._ Defines the environment variables for the build environment.
+Defines the environment variables for the build environment.
 
 Enter one or more env variables in following format:
 
@@ -433,9 +434,9 @@ Read more about [environment variables](bun/how-to/env-variables) in Zerops.
 
 ## Runtime configuration
 
-### base
+### base <Badge type="optional" />
 
-_OPTIONAL._ Sets the base technology for the runtime environment.
+Sets the base technology for the runtime environment.
 If you don't specify the `run.base` attribute, Zerops keeps the current Bun version for your runtime.
 
 Following options are available for Bun runtimes:
@@ -494,9 +495,9 @@ See the full list of supported [run base environments](/zerops-yml/base-list).
 
 To customise your build environment use the `prepareCommands` attribute.
 
-### os
+### os <Badge type="optional" />
 
-_OPTIONAL._ Sets the operating system for the runtime environment.
+Sets the operating system for the runtime environment.
 
 Following options are available:
 
@@ -514,9 +515,9 @@ We are currently using following os version:
 The os version is fixed and cannot be customised.
 :::
 
-### ports
+### ports <Badge type="optional" />
 
-_OPTIONAL._ Specifies one or more internal ports on which your application will listen.
+Specifies one or more internal ports on which your application will listen.
 
 Projects in Zerops represent a group of one or more services. Services can be of different types (runtime services, databases, message brokers, object storage, etc.). All services of the same project share a **dedicated private network**. To connect to a service within the same project, just use the service hostname and its internal port.
 
@@ -530,9 +531,9 @@ Each port has following attributes:
 | protocol    | **Optional.** Defines the protocol. Allowed values are `TCP` or `UDP`. Default value is `TCP`.                                                                                                                                                                                                                         |
 | httpSupport | **Optional.** `httpSupport = true` is the default setting for TCP protocol. Set `httpSupport = false` if a web server isn't running on the port. Zerops uses this information for the configuration of [public access](/features/access). `httpSupport = true` is available only in combination with the TCP protocol. |
 
-### prepareCommands
+### prepareCommands <Badge type="optional" />
 
-_OPTIONAL._ Customises the Bun runtime environment by installing additional dependencies or tools to the runtime base environment.
+Customises the Bun runtime environment by installing additional dependencies or tools to the runtime base environment.
 
 <p>
   The base Bun environment contains {data.alpine.default} the selected
@@ -615,9 +616,9 @@ zerops:
 
 In the example above Zerops will copy the `runtime-config.yml` file from your build container **after the build has finished** into the new **prepare runtime** container. The copied files and folders will be available in the `xxx` folder in the new prepare runtime container before the prepare commands are triggered.
 
-### initCommands
+### initCommands <Badge type="optional" />
 
-_OPTIONAL._ Defines one or more commands to be run each time a new runtime container is started or a container is restarted.
+Defines one or more commands to be run each time a new runtime container is started or a container is restarted.
 
 ```yml
 zerops:
@@ -653,9 +654,9 @@ If any of the `initCommands` fails, it returns an exit code other than 0, but de
 
 You can configure your `initCommands` to be run in a single shell instance or multiple shell instances. The format is identical to [build commands](#buildcommands).
 
-### envVariables
+### envVariables <Badge type="optional" />
 
-_OPTIONAL._ Defines the environment variables for the runtime environment.
+Defines the environment variables for the runtime environment.
 
 Enter one or more env variables in following format:
 
@@ -676,9 +677,9 @@ zerops:
 
 Read more about [environment variables](bun/how-to/env-variables) in Zerops.
 
-### start
+### start <Badge type="required" />
 
-_REQUIRED._ Defines the start command for your Bun application.
+Defines the start command for your Bun application.
 
 ```yml
 zerops:
@@ -695,9 +696,9 @@ zerops:
 
 We recommend starting your Bun application using `bun start`.
 
-### health check
+### healthCheck <Badge type="optional" />
 
-_OPTIONAL._ Defines a health check.
+Defines a health check.
 
 `healthCheck` requires either one `httpGet` object or one `exec` object.
 
@@ -772,9 +773,9 @@ zerops:
 
 Read more about how the [health check works] in Zerops.
 
-### crontab
+### crontab <Badge type="optional" />
 
-_OPTIONAL._ Defines cron jobs.
+Defines cron jobs.
 
 Setup cron jobs in the following format:
 
@@ -796,9 +797,9 @@ Read more about setting up [cron](/references/cron) in Zerops.
 
 ## Deploy configuration
 
-### readiness check
+### readinessCheck <Badge type="optional" />
 
-_OPTIONAL._ Defines a readiness check. Read more about how the [readiness check works](bun/how-to/deploy-process#readiness-checks) in Zerops.
+Defines a readiness check. Read more about how the [readiness check works](bun/how-to/deploy-process#readiness-checks) in Zerops.
 
 `readinessCheck` requires either one `httpGet` object or one `exec` object.
 

apps/docs/content/bun/how-to/build-process.mdx

@@ -4,13 +4,14 @@ description: Learn more about node.js' build process.
 ---
 
 import data from '@site/static/data.json';
+import Image from '/src/components/Image';
 
 <p align="center">
-  <img
-    src="/img/screenshots/build_deploy_pipeline-step2.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/mind-maps/build-deploy/step-2.webp"
+    invertColors={true}
+    alt="build deploy pipeline step 2"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -37,11 +38,11 @@ The build container is automatically deleted after the build has finished or fai
 When you know that the running build is not correct and you want to cancel it, you can do it in Zerops GUI. Go to the service detail, open the list of running processes and click on the **Open pipeline detail** button. Then click on the **Cancel build** button.
 
 <p align="center">
-  <img
-    src="/img/screenshots/cancel_running_build.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/gui/running-build.webp"
+    darkImage="/img/gui/running-build.webp"
+    alt="Running build"
+    style={{ width: '100%', height: 'auto' }}
   />
 </p>
 

apps/docs/content/bun/how-to/customize-runtime.mdx

@@ -3,12 +3,14 @@ title: Customise Bun runtime environment
 description: Learn how you can customise your node.js runtime environment on Zerops.
 ---
 
+import Image from '/src/components/Image';
+
 <p align="center">
-  <img
-    src="/img/screenshots/build_deploy_pipeline_custom_runtime.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/mind-maps/build-deploy/custom-runtime.webp"
+    invertColors={true}
+    alt="Build Deploy Pipeline"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 

apps/docs/content/bun/how-to/deploy-process.mdx

@@ -3,12 +3,14 @@ title: Bun Deploy process
 description: More about how node.js deploy process works on Zerops.
 ---
 
+import Image from '/src/components/Image';
+
 <p align="center">
-  <img
-    src="/img/screenshots/build_deploy_pipeline-step3.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/mind-maps/build-deploy/step-3.webp"
+    invertColors={true}
+    alt="Build Deploy Pipeline"
+    style={{ width: '95%', height: 'auto' }}
   />
 </p>
 
@@ -84,11 +86,11 @@ Zerops keeps 10 last versions of your application in the internal storage.
 The list of application versions is available in Zerops GUI. Go to the service detail and choose **Service dashboard & runtime containers** from the left menu. The active version is highlighted, show all archived version by clicking on the button below.
 
 <p align="center">
-  <img
-    src="/img/screenshots/pipeline_history.png"
-    alt="image"
-    width="100%"
-    height="auto"
+  <Image
+    lightImage="/img/gui/pipeline-history.webp"
+    invertColors={true}
+    alt="Pipeline history"
+    style={{ width: '100%', height: 'auto' }}
   />
 </p>
 

apps/docs/content/bun/how-to/env-variables.mdx

@@ -115,11 +115,32 @@ You can reference another variable of the same service using `${key}` in your va
 
 ### Reference a local variable in another variable value
 
-| Variable key | Variable value      | Computed variable value |
-| ------------ | ------------------- | ----------------------- |
-| id           | 12345               | 12345                   |
-| hostname     | app                 | app                     |
-| name         | `${id}-${hostname}` | 12345-app               |
+<table className="w-full my-1.5">
+  <thead>
+    <tr>
+      <th className="w-fit">Variable key</th>
+      <th className="w-fit">Variable value</th>
+      <th className="w-fit">Computed variable value</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td className="w-fit">id</td>
+      <td className="w-fit">12345</td>
+      <td className="w-fit">12345</td>
+    </tr>
+    <tr>
+      <td className="w-fit">hostname</td>
+      <td className="w-fit">app</td>
+      <td className="w-fit">app</td>
+    </tr>
+    <tr>
+      <td className="w-fit">name</td>
+      <td className="w-fit"><code>${'{id}'}-${'{hostname}'}</code></td>
+      <td className="w-fit">12345-app</td>
+    </tr>
+  </tbody>
+</table>
 
 ### Reference a variable of another project service