Release 6.2.0

Add documentation for mockoon/mockoon#1261
Add data bucket list drag and drop info
Update docs screenshots and add new server config section
Add new linux download archs
Update sponsors
Update someof docs
Add global var rules doc
Add jsonParse helper
Add new changelog

components/download-section.tsx

@@ -137,10 +137,13 @@ const DownloadSection: FunctionComponent<{ version: string }> = function ({
           </div>
 
           <div className='text-gray-700 mb-6 mb-lg-0'>
-            <div className='btn-group'>
+            <div className='btn-group mb-2'>
+              <button className='btn btn-primary-subtle btn-sm' disabled>
+                <span>x86_64:</span>
+              </button>
               <a
                 className='btn btn-primary-subtle btn-sm d-flex align-items-center'
-                href={`https://github.com/mockoon/mockoon/releases/download/v${version}/mockoon-${version}.deb`}
+                href={`https://github.com/mockoon/mockoon/releases/download/v${version}/mockoon-${version}.amd64.deb`}
                 rel='noopener'
                 onClick={() => postDownload('linux')}
               >
@@ -152,7 +155,7 @@ const DownloadSection: FunctionComponent<{ version: string }> = function ({
 
               <a
                 className='btn btn-primary-subtle btn-sm d-flex align-items-center'
-                href={`https://github.com/mockoon/mockoon/releases/download/v${version}/mockoon-${version}.rpm`}
+                href={`https://github.com/mockoon/mockoon/releases/download/v${version}/mockoon-${version}.x86_64.rpm`}
                 rel='noopener'
                 onClick={() => postDownload('linux')}
               >
@@ -164,7 +167,7 @@ const DownloadSection: FunctionComponent<{ version: string }> = function ({
 
               <a
                 className='btn btn-primary-subtle btn-sm d-flex align-items-center'
-                href={`https://github.com/mockoon/mockoon/releases/download/v${version}/mockoon-${version}.AppImage`}
+                href={`https://github.com/mockoon/mockoon/releases/download/v${version}/mockoon-${version}.x86_64.AppImage`}
                 rel='noopener'
                 onClick={() => postDownload('linux')}
               >
@@ -174,7 +177,35 @@ const DownloadSection: FunctionComponent<{ version: string }> = function ({
                 <span>AppImage</span>
               </a>
             </div>
-            <div className='content'>(x86 only)</div>
+            <div className='btn-group'>
+              <button className='btn btn-primary-subtle btn-sm' disabled>
+                <span>arm64:</span>
+              </button>
+              <a
+                className='btn btn-primary-subtle btn-sm d-flex align-items-center'
+                href={`https://github.com/mockoon/mockoon/releases/download/v${version}/mockoon-${version}.arm64.deb`}
+                rel='noopener'
+                onClick={() => postDownload('linux')}
+              >
+                <span className='icon me-2'>
+                  <i className='icon-download'></i>
+                </span>
+                <span>deb</span>
+              </a>
+
+              <a
+                className='btn btn-primary-subtle btn-sm d-flex align-items-center'
+                href={`https://github.com/mockoon/mockoon/releases/download/v${version}/mockoon-${version}.arm64.AppImage`}
+                rel='noopener'
+                onClick={() => postDownload('linux')}
+              >
+                <span className='icon me-2'>
+                  <i className='icon-download'></i>
+                </span>
+                <span>AppImage</span>
+              </a>
+            </div>
+
             <div className='content p-3'>
               <span className='user-select-none'>or </span>
               <br />

components/footer.tsx

@@ -136,7 +136,7 @@ const Footer: FunctionComponent<{
               </li>
               <li className='mb-2'>
                 {/* Do not use <Link>, as routes with a dot inside get rewritten without trailing slash */}
-                <a href='/releases/6.1.0/' className='text-reset'>
+                <a href='/releases/6.2.0/' className='text-reset'>
                   Releases
                 </a>
               </li>

components/nav.tsx

@@ -261,7 +261,7 @@ const Nav: FunctionComponent = function () {
                           Blog
                         </Link>
                         <a
-                          href='/releases/6.1.0/'
+                          href='/releases/6.2.0/'
                           className={`dropdown-item ${
                             router.pathname === '/releases' ||
                             router.pathname === '/releases/[version]'

content/blog/building-own-analytics-fun-and-profit.md

@@ -30,7 +30,7 @@ So, when building a product, we usually need to know two things: are people usin
 At the beginning of the project, we were using Google Analytics for both the website and the app. It's the most popular analytics tool, and it's free.
 Despite having decent knowledge of marketing and analytics, we quickly realized we weren't interested in 90% of the information it provided.
 
-![#sub#The sometimes overwhelming Google Analytics dashboard!](/images/blog/building-own-analytics-fun-and-profit/google-analytics-dashboard.png)
+![#sub#The sometimes overwhelming Google Analytics dashboard!{1024x727}](/images/blog/building-own-analytics-fun-and-profit/google-analytics-dashboard.png)
 
 We were looking at the following metrics:
 
@@ -59,7 +59,7 @@ This means that we can have wildly different paths for a new feature. Sometimes,
 
 We can also measure the success of some features by analyzing the server logs. It is the case for the recent [API playground](/playground/) we launched. We can see the number of requests in Cloud Run's logs. And it's probably enough.
 
-![#sub#The API playground is a success!](/images/blog/building-own-analytics-fun-and-profit/cloud-run-api-playground-logs.png)
+![#sub#The API playground is a success!{1050x861}](/images/blog/building-own-analytics-fun-and-profit/cloud-run-api-playground-logs.png)
 
 ## Building our own analytics
 
@@ -230,7 +230,7 @@ We choose BigQuery to store the data for its **low cost** at our volumes (see be
 
 We created two tables, one for the telemetry and one for the website events. The schema of the tables is the same as the event objects.
 
-![BigQuery schema](/images/blog/building-own-analytics-fun-and-profit/bigquery-analytics-tables.png)
+![BigQuery schema{1326x633}](/images/blog/building-own-analytics-fun-and-profit/bigquery-analytics-tables.png)
 
 ### Infrastructure and costs
 
@@ -248,7 +248,7 @@ We still managed to build a dashboard that shows us the data we need, and we are
 
 You can see a preview of the dashboard below, showing the number of page views and downloads per day, the version distribution, the OS distribution, and the users' countries:
 
-![#sub#Second half of December is always a bit depressing! 😀](/images/blog/building-own-analytics-fun-and-profit/looker-studio-dashboard-preview.png)
+![#sub#Second half of December is always a bit depressing! 😀{2244x1085}](/images/blog/building-own-analytics-fun-and-profit/looker-studio-dashboard-preview.png)
 
 ---
 

content/docs/latest/api-endpoints/crud-routes.md

@@ -22,15 +22,15 @@ To create a CRUD route, click on the "CRUD route" entry in the add route menu:
 
 Then, set its path, usually a [resource name](/articles/api-guide-rest-api-components/#resource-url-request):
 
-![Set the CRUD route path{1495x176}](docs-img:set-crud-route-path.png)
+![Set the CRUD route path{1264x176}](docs-img:set-crud-route-path.png)
 
 > Your path can be more complex, and contains parameters or multiple sections. Remember that this will be the "prefix" of the different endpoints (see below).
 
 ## Data bucket link
 
 After creating a CRUD endpoint, you need to link it to a data bucket:
 
-![Link a data bucket to a CRUD route{1495x334}](docs-img:link-data-bucket-crud-route.png)
+![Link a data bucket to a CRUD route{1264x334}](docs-img:link-data-bucket-crud-route.png)
 
 > Head over to our [data buckets](docs:data-buckets/overview) documentation to learn how to create a new data bucket.
 
@@ -80,7 +80,7 @@ Mockoon will automatically translate a CRUD endpoint to multiple routes allowing
 
 By default, CRUD endpoints will use the `id` property to identify objects in an array in all the routes manipulating a single resource (e.g. GET `/resource/:id`). However, you can change this property to anything you want, like `uuid`, `custom_id`, etc:
 
-![Customize the CRUD id property{1495x334}](docs-img:customize-crud-id-property-key.png)
+![Customize the CRUD id property{1264x334}](docs-img:customize-crud-id-property-key.png)
 
 ## Overriding a route
 

content/docs/latest/api-endpoints/routing.md

@@ -20,7 +20,7 @@ Open the **Environment Settings** by clicking on the tab at the top of the windo
 
 Then, fill the **API prefix** input at the top of the **environment Settings**:
 
-![fill the prefix input{1108x298}](docs-img:environment-prefix.png)
+![fill the prefix input{993x298}](docs-img:environment-prefix.png)
 
 The prefix will appear under your environment name in the environments list. All your environment's routes will now be prefixed and available at the following address `http://localhost:port/myprefix/myroute` instead of `http://localhost:port/myroute`.
 
@@ -45,7 +45,7 @@ Routes support certain patterns and a subset of regular expressions. Here are so
 - `/ab+cd` will match `abcd`, `abbcd`, `abbbcd`, and so on.
 - `/ab(cd)?e` will match `/abe` and `/abcde`.
 
-![route pattern{1168x74}](docs-img:route-patterns.png)
+![route pattern{995x74}](docs-img:route-patterns.png)
 
 For a complete overview of the patterns available, please refer to Express' [route paths documentation](https://expressjs.com/en/guide/routing.html#route-paths).
 
@@ -56,7 +56,7 @@ For a complete overview of the patterns available, please refer to Express' [rou
 
 Route parameters can be defined in routes by using a colon `:`. The name of a parameter can only contains the following characters `A-Za-z0-9_`.
 
-![route parameter{1168x74}](docs-img:route-params.png)
+![route parameter{995x74}](docs-img:route-params.png)
 
 For a complete overview on how to use and declare route parameters, please refer to Express' [route parameters documentation](https://expressjs.com/en/guide/routing.html#route-parameters).
 

content/docs/latest/api-endpoints/templates-and-ai-assistant.md

@@ -27,7 +27,7 @@ To use a template in your routes, click on the "From template" entry in the rout
 
 Then, select the template you want to use and either copy-paste its content manually or click on one of the two buttons to create a new **GET endpoint** or a **CRUD endpoint with a data bucket**.
 
-![create get route from template{860x759}](docs-img:templates-create-get-route.png)
+![create get route from template{860x801}](docs-img:templates-create-get-route.png)
 
 The "GET route" button will create a new HTTP GET route and copy the template content as the body. The "CRUD + data" button will create a new CRUD endpoint with a linked data bucket and copy the template content as the data bucket content.
 
@@ -39,15 +39,15 @@ You can also use our AI assistant to generate realistic mock data for your vario
 
 To generate a new template, click the "From template" button in the route creation menu (see above), and select the "Generate" tab:
 
-![AI assistant generate tab{860x759}](docs-img:ai-assistant-generate-template-tab.png)
+![AI assistant generate tab{860x801}](docs-img:ai-assistant-generate-template-tab.png)
 
 Then, write a prompt (e.g. "list of users") and click the "Generate" button.
 
-![AI assistant generate button click{860x759}](docs-img:ai-assistant-generate-button.png)
+![AI assistant generate button click{860x801}](docs-img:ai-assistant-generate-button.png)
 
 Finally, you can copy-paste the generated template manually or click on one of the two buttons to create a new **GET endpoint** or a **CRUD endpoint with a data bucket**.
 
-![create get route from template{860x759}](docs-img:templates-generate-get-route.png)
+![create get route from template{860x801}](docs-img:templates-generate-get-route.png)
 
 ### Writing prompts
 
@@ -58,7 +58,7 @@ Several options are available to fine-tune the generated templates:
 - **array**: the generated template root level will be a JSON array (usually used with the **JSON** option).
 - **templating**: the generated template will contain Handlebars [templating helpers](docs:templating/overview) (e.g. `{{faker 'person.firstName'}}`). Please note that disabling this option usually results in longer templates.
 
-![prompt options buttons{860x759}](docs-img:ai-assistant-template-generate-options.png)
+![prompt options buttons{860x801}](docs-img:ai-assistant-template-generate-options.png)
 
 You will obtain best results with shorter prompts: "list of users", "JSON configuration for library X", etc.
 

content/docs/latest/callbacks/overview.md

@@ -24,7 +24,7 @@ To create a new callback, open the **Callbacks** options by clicking on the tab
 
 Add a new callback by clicking on the "plus" button:
 
-![Add a new callback by clicking on the plus button{1495x578}](docs-img:add-callback.png)
+![Add a new callback by clicking on the plus button{1264x578}](docs-img:add-callback.png)
 
 ## Configure a callback
 

content/docs/latest/callbacks/using-callbacks.md

@@ -16,10 +16,10 @@ After [creating callbacks](docs:callbacks/overview), you can link them in your r
 
 To link a callback to a route response, choose "Callbacks" in the route response menu:
 
-![click on the callbacks tab in the route response menu{1228x153}](docs-img:open-route-response-callbacks.png)
+![click on the callbacks tab in the route response menu{997x153}](docs-img:open-route-response-callbacks.png)
 
 Then, click on the "plus" button to add a new callback, and select the callback you want to link:
 
-![click on the plus button to add a new callback{1208x234}](docs-img:link-callback-response.png)
+![click on the plus button to add a new callback{977x234}](docs-img:link-callback-response.png)
 
 > 💡 You can **delay a callback execution** by adding a delay in milliseconds in the "Callback latency" field.

content/docs/latest/data-buckets/overview.md

@@ -24,7 +24,7 @@ To create a new data bucket, open the **Data** options by clicking on the tab at
 
 Add a new data bucket by clicking on the "plus" button:
 
-![Add a data bucket{1495x578}](docs-img:add-data-bucket.png)
+![Add a data bucket{1264x578}](docs-img:add-data-bucket.png)
 
 You can change the data bucket title and content on the right part of the screen.
 Mockoon will automatically attribute a new **unique ID** to your data bucket. You can use this ID to reference the data using the [`data` helpers](docs:data-buckets/using-data-buckets#using-data-helpers). To retrieve a bucket's unique ID, look in the footer under the data bucket content or right-click on a bucket name in the list and click on "Copy ID to clipboard".
@@ -48,7 +48,7 @@ You can easily combine your data bucket contents by referencing other data bucke
 }
 ```
 
-> ⚠️ However, data buckets are generated in the order they are defined in the environment. As a consequence, you cannot reference a data bucket that is defined **after** the current one.
+> ⚠️ Data buckets are generated in the order they are defined in the environment. As a consequence, you cannot reference a data bucket that is defined **after** the current one. You can easily reorder your data buckets by dragging and dropping them in the list.
 
 ## Data buckets generation
 

content/docs/latest/data-buckets/using-data-buckets.md

@@ -34,4 +34,4 @@ A data bucket can also be directly linked to a route response. Linking a data bu
 
 To link a data bucket to a route response, choose "Data" in the body selector and select your data bucket.
 
-![Using data bucket in a route response{1233x464}](docs-img:link-data-bucket-response.png)
+![Using data bucket in a route response{1002x464}](docs-img:link-data-bucket-response.png)

content/docs/latest/logging-and-recording/auto-mocking-and-recording.md

@@ -16,17 +16,17 @@ You can automatically create mock routes from HTTP transactions (request/respons
 
 Mockoon offers the possibility to automatically create mocks for entering requests. Click on the "plus" icon on a record to create a route containing the same information (headers, body, etc.):
 
-![create a route from a log{1445x568}](docs-img:logs-auto-mocking.png)
+![create a route from a log{1214x633}](docs-img:logs-auto-mocking.png)
 
 ## Record your API calls
 
 Mockoon can also automatically create mock API endpoints every time a request is logged. To activate this feature, click on the "Record" button at the top of the logs view:
 
-![click on the record button{1445x568}](docs-img:logs-start-recording.png)
+![click on the record button{1214x633}](docs-img:logs-start-recording.png)
 
 You can record in multiple environments at the same time. A red blinking recording icon will appear next to the environment name to indicate that the recording is active:
 
-![recording icon{1195x368}](docs-img:logs-recording-in-progress.png)
+![recording icon{964x433}](docs-img:logs-recording-in-progress.png)
 
 The recording will only create a route once, based on the path and HTTP method.
 

content/docs/latest/logging-and-recording/requests-logging.md

@@ -22,21 +22,21 @@ The list shows all intercepted requests and how Mockoon answered to them.
 Please note that all requests are intercepted, even the `/favicon` request made by the browser.
 Each record contains the entering request and the outgoing response information. This includes the complete list of headers, route params, query params, and body in raw format.
 
-![view the request{1445x568}](docs-img:logs-request.png)
+![view the request{1214x633}](docs-img:logs-request.png)
 
-![view the response{1445x568}](docs-img:logs-response.png)
+![view the response{1214x633}](docs-img:logs-response.png)
 
 The interface is showing truncated bodies for both the request and the response (the truncation length can be adjusted in the settings). You can still view them in full in a separated editor by clicking on **View full body in editor**:
 
-![click on view full body in editor link{1445x568}](docs-img:logs-view-body.png)
+![click on view full body in editor link{1214x633}](docs-img:logs-view-body.png)
 
-![body content is showed in a modal{860x663}](docs-img:logs-view-body-modal.png)
+![body content is showed in a modal{860x696}](docs-img:logs-view-body-modal.png)
 
 ## Logs metadata
 
 You can also easily see if a request has been caught by Mockoon (record shows a green tick) or has been passed to another URL if the [proxy mode](docs:server-configuration/proxy-mode) is activated (record shows a shield icon):
 
-![view logs metadata{1445x568}](docs-img:logs-metadata.png)
+![view logs metadata{1214x633}](docs-img:logs-metadata.png)
 
 ## File logging
 

content/docs/latest/mockoon-data-files/data-storage-location.md

@@ -30,7 +30,7 @@ You can move the data files to another folder by right-clicking on an environmen
 
 Mockoon can monitor data files' external changes and automatically reload the interface with the new information. This is particularly useful when you are editing the data files with an external editor or pulling changes from a git repository. You can activate this option in the settings:
 
-![enable file monitoring in the settings{860x770}](docs-img:enable-file-watching.png)
+![enable file monitoring in the settings{860x812}](docs-img:enable-file-watching.png)
 
 ## Old system (pre v1.16.0)
 

content/docs/latest/mockoon-data-files/sharing-mock-api-files.md

@@ -23,7 +23,7 @@ Each file can be easily shared with other Mockoon's users, "as-is". After [locat
 You can save your environment data files in a Git-tracked folder to make sharing easier. By default, an environment file JSON content is saved pretty-printed to allow comparing changes between two commits.
 You can disable pretty printing in the settings:
 
-![disable pretty printing{860x770}](docs-img:storage-pretty-printing.png)
+![disable pretty printing{860x812}](docs-img:storage-pretty-printing.png)
 
 ### Use a mock API with the CLI