Add tools

components/footer.tsx

@@ -245,8 +245,8 @@ const Footer: FunctionComponent<{
                 </Link>
               </li>
               <li className='mb-2'>
-                <Link href='/tools/json-validator/' className='text-reset'>
-                  JSON validator
+                <Link href='/tools/' className='text-reset'>
+                  Useful tools
                 </Link>
               </li>
             </ul>

components/nav.tsx

@@ -233,6 +233,14 @@ const Nav: FunctionComponent = function () {
                         >
                           Templates
                         </Link>
+                        <Link
+                          href='/tools/'
+                          className={`dropdown-item ${
+                            router.pathname.includes('/tools') ? 'active' : ''
+                          }`}
+                        >
+                          Useful tools
+                        </Link>
                       </div>
                     </div>
                   </div>

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

@@ -38,6 +38,8 @@ After creating a CRUD endpoint, you need to link it to a data bucket:
 
 The CRUD route will work with any content stored in your data bucket: valid JSON in the form of an array of objects, an object, a primitive, etc., or any non-valid JSON. The route behaviors will vary depending on the content stored in the bucket (see table below).
 
+> 🛠️ Use our [JSON validator](/tools/json-validator/) to check if your content is valid JSON.
+
 ### Resetting the data bucket content
 
 The data bucket content is generated when the server starts, and its state persists between calls. However, its state will not be saved in the [data file](docs:mockoon-data-files/data-storage-location), and you can reset it to its initial state by restarting the mock API.

content/docs/latest/response-configuration/xml-support.md

@@ -46,4 +46,6 @@ JSON equivalent (compacted):
 }
 ```
 
-> Please refer to [xml-js documentation](https://www.npmjs.com/package/xml-js) for more detail on how the XML is parsed.
+> 📘 Please refer to [xml-js documentation](https://www.npmjs.com/package/xml-js) for more detail on how the XML is parsed.
+
+> 🛠️ Use our [XML to JSON converter](/tools/xml-to-json/) to get a preview of how Mockoon will convert your XML to JSON.

content/tutorials/use-persisting-data-buckets.md

@@ -40,6 +40,8 @@ Mockoon will automatically attribute a new **unique ID** to your data bucket. Yo
 Data buckets can contain any type of text content. They also support all of Mockoon's [templating helpers](docs:templating/overview).
 If your data bucket contains valid JSON, Mockoon will parse it to let you access the JS object, array, primitives, etc., using the templating helpers like (`data`, `each`, `if`, etc.).
 
+> 🛠️ Use our [JSON validator](/tools/json-validator/) to check if your content is valid JSON.
+
 ## Data bucket generation time
 
 Mockoon usually generates data buckets when the server starts. Their state will persist until the next restart, so you can always expect the same content to be returned.

package.json

@@ -36,12 +36,14 @@
   },
   "dependencies": {
     "@codemirror/lang-json": "^6.0.1",
+    "@codemirror/lang-xml": "^6.0.2",
     "@docsearch/react": "^3.5.2",
     "@tanstack/react-query": "^5.8.3",
     "@uiw/codemirror-theme-nord": "^4.21.21",
     "@uiw/react-codemirror": "^4.21.21",
     "bootstrap": "^5.3.2",
     "eslint-config-next": "^14.0.2",
+    "fast-xml-parser": "^4.3.3",
     "firebase": "^10.6.0",
     "github-slugger": "^2.0.0",
     "glob": "^10.3.10",
@@ -59,7 +61,8 @@
     "remark-gfm": "^4.0.0",
     "sass": "^1.69.5",
     "semver": "^7.5.4",
-    "typed.js": "^2.1.0"
+    "typed.js": "^2.1.0",
+    "xml-js": "^1.6.11"
   },
   "devDependencies": {
     "@mockoon/cli": "^5.1.0",

pages/tools/index.tsx

@@ -0,0 +1,64 @@
+import { FunctionComponent } from 'react';
+import Card from '../../components/card';
+import Hero from '../../components/hero';
+import Meta from '../../components/meta';
+import Layout from '../../layout/layout';
+
+const tools = [
+  {
+    title: 'JSON validator',
+    description: 'Validate your JSON online and get detailed error messages',
+    links: [{ src: '/tools/json-validator/', text: 'Validate' }],
+    imageSrc: '/images/illustrations/json-valid.svg'
+  },
+  {
+    title: 'XML validator',
+    description: 'Validate your XML online and get detailed error messages',
+    links: [{ src: '/tools/xml-validator/', text: 'Validate' }],
+    imageSrc: '/images/illustrations/xml-valid.svg'
+  },
+  {
+    title: 'XML to JSON converter',
+    description:
+      'Convert your XML data to a JSON object and verify its validity',
+    links: [{ src: '/tools/xml-to-json', text: 'Convert' }],
+    imageSrc: '/images/illustrations/xml-to-json.svg'
+  }
+];
+
+const Tools: FunctionComponent = function () {
+  return (
+    <Layout footerBanner='download'>
+      <Meta
+        title={'Mockoon useful tools'}
+        description='Discover our set of useful tools to help you with your API development and testing: XML to JSON converter, JSON validator, XML validator'
+      />
+
+      <Hero
+        title='🛠️ Mockoon <span class="text-primary">useful tools</span>'
+        subtitle='Discover our set of useful tools to help you with your API development and testing'
+      />
+
+      <section className='py-6 py-md-8'>
+        <div className='container'>
+          <div className='row justify-content-center'>
+            {tools.map((tool, toolIndex) => (
+              <div key={`tool${toolIndex}`} className='col-12 col-lg-4 d-flex'>
+                <Card
+                  data={{
+                    ...tool
+                  }}
+                  vertical
+                  cover={false}
+                  border
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+      </section>
+    </Layout>
+  );
+};
+
+export default Tools;