Merge pull request #20 from Genez-io/fixed-broken-photos

Fixed broken photos

docs/advanced/aws.md

@@ -2,6 +2,8 @@
 sidebar_position: 2
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 # Self hosted
 
 For enhanced control over your cloud assets, you have the choice to deploy your project independently on your AWS account. This arrangement allows you to harness the capabilities of the genezio CLI without a genezio account. To accomplish this, specify the `cloudProvider` attribute in your `genezio.yaml` as `selfHostedAws`.
@@ -29,7 +31,7 @@ The frontend application is hosted on S3, utilizing its static website features,
 
 Both frontend and backend code deployment employs the AWS CloudFormation service, creating separate stacks for each.
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (12).png" alt="" width="372"/><figcaption><p>Each class is deployed on a separate AWS Lambda. API Gateway is forwarding the request to the function that should handle that request.</p></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (12).png")} alt="" width="372"/><figcaption><p>Each class is deployed on a separate AWS Lambda. API Gateway is forwarding the request to the function that should handle that request.</p></figcaption></figure>
 
 :::info
 If your development involves a Dart application, note that you will need a genezio account for Dart code compilation in the Genezio Cloud. We're currently working on integrating with widely used build systems.&#x20;

docs/features/check-genezio-dashboard.md

@@ -2,11 +2,13 @@
 sidebar_position: 11
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 # Genezio dashboard
 
 To check information about all of your deployed projects, you can open a browser and navigate to the [genezio dashboard](https://app.genez.io/dashboard)[.](https://app.genez.io/dashboard)
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (17).png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (17).png")} alt=""/><figcaption></figcaption></figure>
 
 On the dashboard, you can interact with your projects as follows:
 

docs/features/custom-domain-configuration.md

@@ -2,6 +2,8 @@
 sidebar_position: 9
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 # Custom domain
 
 <!-- :::info -->
@@ -34,7 +36,7 @@ After you add a custom domain, we automatically configure the certificate also o
 
 In the genezio dashboard, you can go to a project that has frontend deployed, and on the frontend tab, you can set up your custom domain.
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/Screenshot 2023-05-12 at 11.34.17 (1).png" alt=""/><figcaption><p>Project page - Frontend Tab</p></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/Screenshot 2023-05-12 at 11.34.17 (1).png")} alt=""/><figcaption><p>Project page - Frontend Tab</p></figcaption></figure>
 
 On this page, you add your custom domain and click on the "Save" button.
 

docs/features/email-service.md

@@ -2,6 +2,8 @@
 sidebar_position: 8
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 # Email Service
 
 Genezio provides a way to send emails with a managed email service.
@@ -10,7 +12,7 @@ Genezio provides a way to send emails with a managed email service.
 
 On your project page, go to the integrations tab and activate the email service.
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/Screenshot 2024-01-11 at 12.58.27.png" alt="" width="563"/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/Screenshot 2024-01-11 at 12.58.27.png")} alt="" width="563"/><figcaption></figcaption></figure>
 
 ### Use it in your project
 

docs/features/http-methods-webhooks.md

@@ -2,6 +2,8 @@
 sidebar_position: 6
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 # HTTP Calls / Webhooks
 
 Genezio provides an easy way to interact with third-party services or APIs using webhooks/HTTP methods.
@@ -52,7 +54,7 @@ There are 2 places where you can find the webhook URLs for your deployed methods
 
 1. In the [genezio dashboard](https://app.genez.io) on the corresponding class page:
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (8).png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (8).png")} alt=""/><figcaption></figcaption></figure>
 
 2. The HTTP endpoints will be shown in your terminal after executing `genezio deploy`:
 

docs/features/project-collaboration.md

@@ -2,6 +2,8 @@
 sidebar_position: 10
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 # Project Collaboration
 
 :::info
@@ -36,6 +38,6 @@ Full access to the project. The owner can't be changed to another user.
 
 To manage the collaborators, you should go to the project and then click on the **Collaboration** button.
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/Screenshot 2023-12-13 at 13.05.38.png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/Screenshot 2023-12-13 at 13.05.38.png")} alt=""/><figcaption></figcaption></figure>
 
 After you add a new collaborator/admin, they will receive an email with the invitation.

docs/features/testing.md

@@ -2,6 +2,8 @@
 sidebar_position: 3
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 # Testing
 
 Genezio provides a local testing infrastructure that mimics the production infrastructure on the cloud.
@@ -12,11 +14,11 @@ Genezio provides a postman-like testing tool to send requests to a deployed back
 
 The testing dashboard is visually divided into 3 sections as depicted in the screenshot below:
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (5).png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (5).png")} alt=""/><figcaption></figcaption></figure>
 
 ### Project Section
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (4).png" alt="alt" width="324"/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (4).png")} alt="alt" width="324"/><figcaption></figcaption></figure>
 
 The left part of the interface contains a card that will display your project in a menu-like structure. You can see your classes and their respective functions as collapsable items when you click each class. Clicking a function in the menu will open a tab for calling that specific function.
 
@@ -26,7 +28,7 @@ At the top of the section, you have a refresh button next to the `My Workspace`
 
 The upper side of the right card is dedicated to passing arguments to your functions.
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (6).png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (6).png")} alt=""/><figcaption></figcaption></figure>
 
 At the top of the section, you will see a green-bordered label, indicating that the connection was established successfully (or a red-bordered error when failing to connect to the local environment), and a `SEND` button for calling your function.
 
@@ -42,27 +44,27 @@ You can see the response in a `RAW` format or a `PRETTY` format available only f
 
 The upper-right part of the section will display the time it took for the request to be made and the status of the response.
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (7).png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (7).png")} alt=""/><figcaption></figcaption></figure>
 
 ### Remote Testing
 
 Test your backend server in a friendly and easy-to-use graphic environment before actually integrating the functions in your frontend application.
 
 To access the testing dashboard, go to the genezio platform, select a deployed backend and click on the `Test project` button.
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (2).png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (2).png")} alt=""/><figcaption></figcaption></figure>
 
 You will be redirected to the testing dashboard where you can craft and send requests to the deployed backend.&#x20;
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (1) (1).png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (1) (1).png")} alt=""/><figcaption></figcaption></figure>
 
 You can see the response received from the application in the response section:
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (2) (1).png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (2) (1).png")} alt=""/><figcaption></figcaption></figure>
 
 You can also check the logs from the backend in the logs section:
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (3).png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (3).png")} alt=""/><figcaption></figcaption></figure>
 
 <!-- :::info -->
 
@@ -102,7 +104,7 @@ npm install @genezio-sdk/{your-project-name}_{your-project-region}
 
 If you just want to test your genezio code without having to write any code in your client, head over to the output link [`https://app.genez.io/test-interface/local?port=8083`](https://app.genez.io/test-interface/local?port=8083) to test your project in the Genezio Test Interface:
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/Screenshot 2023-08-11 at 19.28.34.png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/Screenshot 2023-08-11 at 19.28.34.png")} alt=""/><figcaption></figcaption></figure>
 
 You can use the _Genezio Test Interface_ to test your projects locally, as well as remotely. Find more details about it at [testing](testing "mention").
 
@@ -155,8 +157,8 @@ You should see a green label indicating that your connection to the local server
 
 Sometimes, you may see a red error message at the top instead of the green success label. Most likely that means your local server is running on a different port.&#x20;
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (39).png" alt="Connection Failed"/><figcaption><p>Genezio Test Interface connection Failed</p></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (39).png")} alt="Connection Failed"/><figcaption><p>Genezio Test Interface connection Failed</p></figcaption></figure>
 
 To establish the connection, verify on which port your server is running and fill that port in the provided input, the click `Connect` (or press Enter).
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (19).png" alt="Different port"/><figcaption><p>Connect to a different port</p></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (19).png")} alt="Different port"/><figcaption><p>Connect to a different port</p></figcaption></figure>

docs/integrations/neon-postgres.md

@@ -2,6 +2,8 @@
 sidebar_position: 3
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 # Neon Postgres
 
 :::info
@@ -16,23 +18,23 @@ A guide to integrate Neon resources in genezio projects
 
 Navigate to the project integration page in the dashboard and select to `Install` a Neon Postgres database to your project:
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (46) (1).png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (46) (1).png")} alt=""/><figcaption></figcaption></figure>
 
 Connect with an Neon account using the preferred login method:
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (47) (1).png" alt="" width="350"/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (47) (1).png")} alt="" width="350"/><figcaption></figcaption></figure>
 
 Create a Neon project or select an already existing project:
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (48).png" alt="" width="375"/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (48).png")} alt="" width="375"/><figcaption></figcaption></figure>
 
 Select the branch, database and role for the Neon project:
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (49).png" alt="" width="375"/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (49).png")} alt="" width="375"/><figcaption></figcaption></figure>
 
 Hit `Save` to save the database credentials as backend environment variables
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (50).png" alt="" width="375"/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (50).png")} alt="" width="375"/><figcaption></figcaption></figure>
 
 Use the environment variables in your genezio project to connect to the Postgres database.
 

docs/integrations/sentry.md

@@ -2,6 +2,8 @@
 sidebar_position: 2
 ---
 
+import useBaseUrl from '@docusaurus/useBaseUrl';
+
 # Sentry
 
 :::info
@@ -28,28 +30,28 @@ In order to use this integration, you will need your own Sentry account. Go to [
 
 After you created your account, you will need also to create a project which you will later link to your genezio project. From your left-side dashboard select **Projects,** then **Create Project**. You will face a page that looks like this:
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (41).png" alt=""/><figcaption><p>Create Project Wizard</p></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (41).png")} alt=""/><figcaption><p>Create Project Wizard</p></figcaption></figure>
 
 Choose **NODE.JS**. In the next steps choose a suitable name for your project and hit **Create Project**. A pop-up will show asking if you use any frameworks. Click **Skip**. Next, you will see a page titled **Configure Node.js SDK**, providing some code samples. Those code samples allow you to manually instrument your Node.js code, in case you want to do that. The genezio integration does **NOT** require you to write any extra code, so just click **Take me to Issues**.
 
 You should now see your newly created Sentry project in your projects view. Click on it. This is where you will see errors from your genezio project.
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (43).png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (43).png")} alt=""/><figcaption></figcaption></figure>
 
 In order to link our genezio project to this Sentry project, we will need to grab the project's **DSN**. You can find this by entering the project settings (this icon in the top-right corner), in the **Client Keys (DNS)** section. Copy the value of the DSN.
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/Screenshot 2023-08-11 at 14.44.42 (1).png" alt=""/><figcaption><p>Sentry DSN</p></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/Screenshot 2023-08-11 at 14.44.42 (1).png")} alt=""/><figcaption><p>Sentry DSN</p></figcaption></figure>
 
 #### Activate the integration in the genezio dashboard
 
 Now that we have the DSN, we can switch our attention to the genezio dashboard. Go to the project for which you want to activate the integration (it must be an already deployed project), open the **Actions** dropdown, and select **Integrations**
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (45).png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (45).png")} alt=""/><figcaption></figcaption></figure>
 
 You will see the Sentry integration listed there. Click **Install** and paste the DSN that you copied earlier, then click **Connect**. After a few seconds, you will see that your integration activated successfully. From the same screen, you can also update the integration if you want to change the DSN or disable it.
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (47).png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (47).png")} alt=""/><figcaption></figcaption></figure>
 
 You should now see your crashes in your Sentry dashboard. An error should look like this:
 
-<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src="/img/image (46).png" alt=""/><figcaption></figcaption></figure>
+<figure style={{textAlign:"center", marginLeft:"0"}}><img style={{cursor:"pointer"}} src={useBaseUrl("/img/image (46).png")} alt=""/><figcaption></figcaption></figure>