Add playground blog post

components/markdown.tsx

@@ -1,7 +1,6 @@
 import { slug } from 'github-slugger';
 import { Children, FunctionComponent } from 'react';
 import ReactMarkdown from 'react-markdown';
-import rehypeExternalLinks from 'rehype-external-links';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import { urlTransform } from '../utils/url';
@@ -85,10 +84,7 @@ const Markdown: FunctionComponent<{
   return (
     <ReactMarkdown
       children={props.body}
-      rehypePlugins={[
-        rehypeRaw,
-        [rehypeExternalLinks, { rel: 'noopener', target: '_blank' }]
-      ]}
+      rehypePlugins={[rehypeRaw]}
       remarkPlugins={[remarkGfm]}
       components={{
         code: ({ node, className, children, ...props }) => {

content/blog/mockoon-new-api-playground.md

@@ -0,0 +1,50 @@
+---
+title: Mockoon new API playground
+excerpt: 'Discover Mockoon new API playground, a ready-to-use mock API for all your prototyping needs.'
+date: '2023-12-20'
+image: mockoon-api-playground.png
+imageAlt: mockoon logo with application screenshot
+imageWidth: 1200
+imageHeight: 400
+meta:
+  title: Mockoon new API playground
+  description: 'Discover Mockoon new API playground, a ready-to-use mock API for all your prototyping needs: fake JSON data, JSON placeholders, realistic CRUD API mock, etc.'
+---
+
+🥳 We are happy to announce the release of a new tool: the [API playground](/playground/).
+
+It is a **free and ready-to-use mock API** offering multiple CRUD endpoints with fake data. The perfect tool to quickly prototype your frontend applications, test your API calls, or learn about APIs.
+
+## 🔎 How to use the API playground?
+
+The API playground is available at [`https://playground.mockoon.com`](https://playground.mockoon.com) and offers different resources containing fake data: [`/contacts`](https://playground.mockoon.com/contacts), [`/movies`](https://playground.mockoon.com/movies), [`/photos`](https://playground.mockoon.com/photos), [`/posts`](https://playground.mockoon.com/posts), [`/todos`](https://playground.mockoon.com/todos), [`/users`](https://playground.mockoon.com/users). They work like any other API with various endpoints and CRUD operations, like GET, POST, PUT, PATCH and DELETE.
+
+Even better, all actions like updates or deletes are **persisted** (until the next reset 😉)! Making it a great tool to test your frontend applications in a more realistic environment.
+
+> ➡️ Head over to the [API playground documentation](https://mockoon.com/playground/) to learn more!
+
+## ⚙️ How we built the API playground
+
+All the fake data were generated using Faker.js and our [templating system](/docs/latest/templating/overview/). We picked some from our list of [templates 📃](/templates/) and created some new ones using our [AI assistant 🤖](/ai-powered-api-mocking/).
+
+We then created a Mockoon project with all the [CRUD endpoints](/docs/latest/api-endpoints/crud-routes/). CRUD endpoints are fully automated and create multiple routes at runtime to let you manipulate a [data bucket](/docs/latest/data-buckets/overview/), a sort of basic JSON database.
+
+![Mockoon CRUD endpoints](/images/blog/mockoon-new-api-playground/creating-crud-endpoints-mockoon-desktop.png)
+
+We saved the project data file in a [new repository](https://github.com/mockoon/playground) and created a **Dockerfile** using Mockoon CLI.
+
+Here is the command we used: `mockoon-cli dockerize -d ./dist/playground-mock.json -o ./dist/Dockerfile -p 8080`.
+The CLI `dockerize` command will generate a Dockerfile with all the necessary instructions to run your mock (`COPY`, `EXPOSE`, etc.).
+
+Finally, we **deployed** the mock API on Google Cloud Run, using Cloud Build. Setting up Cloud Build was a breeze, and we were able to deploy the API playground in a few minutes.
+After authenticating Cloud Build with GitHub, it will listen for pushes on a specific branch of the repository (here `main`) and then build and deploy the Docker image to Cloud Run based on the provided Dockerfile.
+
+This way, we can easily update the playground API by simply pushing a new version of the repository.
+
+We also use Cloudflare rate limiting to prevent abuse and ensure the API playground is always available.
+
+## 🤝 Contribute to the API playground
+
+The API playground is open-source and available on [GitHub](https://github.com/mockoon/playground). Feel free to contribute by adding new resource endpoints or reporting any issues you may encounter.
+
+Happy mocking! 🚀

content/blog/september-2023-news.md

@@ -19,19 +19,19 @@ In this update, we have a lot to share since June, including exciting new featur
 
 ## 📦 New releases
 
-We have released three new versions since the last June newsletter, as we have moved to a monthly release schedule. [4.0.0](https://mockoon.com/releases/4.0.0/) (July), [4.1.0](https://mockoon.com/releases/4.1.0/) (August) and [5.0.0](https://mockoon.com/releases/5.0.0/) (September). Among the new features and changes:
+We have released three new versions since the last June newsletter, as we have moved to a monthly release schedule. [4.0.0](/releases/4.0.0/) (July), [4.1.0](/releases/4.1.0/) (August) and [5.0.0](/releases/5.0.0/) (September). Among the new features and changes:
 
-- **JSONPath support**: Mockoon now supports JSONPath alongside object-path everywhere a path to an object property can be provided: in templating helpers like data, body and queryParam, in the response rules path, etc. 📘 [Read more](https://mockoon.com/releases/5.0.0/#jsonpath-support)
-- **Logging**: Logging has been standardized across all Mockoon applications and packages. The logs will now be formatted the same way in the desktop application log file, the CLI's console and log file, and the serverless package's console logging. 📘 [Read more](https://mockoon.com/releases/4.0.0/#logs-standardization-and-credentials-filtering)
-- **CLI changes**: We refactored the CLI to remove the dependency to PM2, which was subject to some security vulnerabilities. Another reason for this refactoring, was that, having multiple other ways to manage running CLI instances (i.e. containers), embedding a process manager felt a bit outdated and overkill. The CLI is now easier to maintain and more lightweight. As a consequence multiple flags and options disappeared, and running the CLI as a foreground process is now the default. 📘 [Read more](https://mockoon.com/releases/4.0.0/#cli)
-- **Response fallback mode**: A new response mode has been added. It allows you to fallback to the next route and ultimately the proxied server when no response rules match instead of serving the default response. 📘 [Read the documentation](https://mockoon.com/docs/latest/route-responses/multiple-responses/#fallback-mode)
-- **HTTP methods**: It is now possible to create routes that will match any HTTP method by selecting "All methods" in the routes method dropdown. 📘 [Read more](https://mockoon.com/releases/5.0.0/#routes-targeting-all-http-methods)
-- **OpenAPI support improvements**: When exporting to OpenAPI format, inline bodies are now used to populate the example property. 📘 [Read more](https://mockoon.com/releases/4.0.0/#openapi)
-- **And more**: [templating support in rules](https://mockoon.com/releases/4.1.0/#dynamic-rules-with-templating), [new array filtering templating helper](https://mockoon.com/releases/4.1.0/#changes-to-templating-helpers).
+- **JSONPath support**: Mockoon now supports JSONPath alongside object-path everywhere a path to an object property can be provided: in templating helpers like data, body and queryParam, in the response rules path, etc. 📘 [Read more](/releases/5.0.0/#jsonpath-support)
+- **Logging**: Logging has been standardized across all Mockoon applications and packages. The logs will now be formatted the same way in the desktop application log file, the CLI's console and log file, and the serverless package's console logging. 📘 [Read more](/releases/4.0.0/#logs-standardization-and-credentials-filtering)
+- **CLI changes**: We refactored the CLI to remove the dependency to PM2, which was subject to some security vulnerabilities. Another reason for this refactoring, was that, having multiple other ways to manage running CLI instances (i.e. containers), embedding a process manager felt a bit outdated and overkill. The CLI is now easier to maintain and more lightweight. As a consequence multiple flags and options disappeared, and running the CLI as a foreground process is now the default. 📘 [Read more](/releases/4.0.0/#cli)
+- **Response fallback mode**: A new response mode has been added. It allows you to fallback to the next route and ultimately the proxied server when no response rules match instead of serving the default response. 📘 [Read the documentation](/docs/latest/route-responses/multiple-responses/#fallback-mode)
+- **HTTP methods**: It is now possible to create routes that will match any HTTP method by selecting "All methods" in the routes method dropdown. 📘 [Read more](/releases/5.0.0/#routes-targeting-all-http-methods)
+- **OpenAPI support improvements**: When exporting to OpenAPI format, inline bodies are now used to populate the example property. 📘 [Read more](/releases/4.0.0/#openapi)
+- **And more**: [templating support in rules](/releases/4.1.0/#dynamic-rules-with-templating), [new array filtering templating helper](/releases/4.1.0/#changes-to-templating-helpers).
 
 ## 📏 Global rules
 
-Thanks to the [response fallback mode](https://mockoon.com/docs/latest/route-responses/multiple-responses/#fallback-mode) introduced in [v4.1.0](https://mockoon.com/releases/4.1.0/), it is now possible to create wildcard routes containing global rules, such as validating the presence of an Authorization header or verifying that the request body contains a specific property. Head over to our new [Global routes with rules](https://mockoon.com/docs/latest/route-responses/global-routes-with-rules/) documentation section to learn how to create reusable responses and rules and apply them to all your routes.
+Thanks to the [response fallback mode](/docs/latest/route-responses/multiple-responses/#fallback-mode) introduced in [v4.1.0](/releases/4.1.0/), it is now possible to create wildcard routes containing global rules, such as validating the presence of an Authorization header or verifying that the request body contains a specific property. Head over to our new [Global routes with rules](/docs/latest/route-responses/global-routes-with-rules/) documentation section to learn how to create reusable responses and rules and apply them to all your routes.
 
 ![application screenshot with a wildcard route{599x329}](/images/blog/september-2023-news/create-wildcard-route.png)
 
@@ -53,10 +53,10 @@ We have recently removed Google Analytics from our website as part of our commit
 
 ## 🤝 OSS friends
 
-We have partnered with several other open-source projects that we admire and wish to support. Feel free to [explore them!](https://mockoon.com/oss-friends/)
+We have partnered with several other open-source projects that we admire and wish to support. Feel free to [explore them!](/oss-friends/)
 
 ![screenshot of the OSS friends page showing a grid of project names and descriptions{1150x735}](/images/blog/september-2023-news/oss-friends.png)
 
 ## 🛠️ Custom services
 
-We now offer [custom services](https://mockoon.com/custom-services/) to help you get started with Mockoon through training, support, and custom development. [Contact us](https://mockoon.com/contact-form/) for more information.
+We now offer [custom services](/custom-services/) to help you get started with Mockoon through training, support, and custom development. [Contact us](/contact-form/) for more information.

package.json

@@ -52,7 +52,6 @@
     "react-hook-form": "^7.48.2",
     "react-markdown": "^9.0.0",
     "react-syntax-highlighter": "^15.5.0",
-    "rehype-external-links": "^3.0.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "sass": "^1.69.5",

pages/playground.tsx

@@ -115,7 +115,7 @@ const resources: AccordionData = [
             <CodeBlock
               code={`{
   "id": "f50bf6e1-fbb2-4096-aff1-dad2a3dda30f",
-  "url": "https://loremflickr.com/640/480",
+  "url": "https://loremflickr.com/1024/768",
   "caption": "Adsidue amplexus quam pecco armarium [...]",
   "likes": 12,
   "isFeatured": true
@@ -134,7 +134,7 @@ const resources: AccordionData = [
           <div className='px-4'>
             <CodeBlock
               code={`{
-  "uuid": "0fd57703-4755-40a1-bbf7-2bee858c3a67",
+  "id": "0fd57703-4755-40a1-bbf7-2bee858c3a67",
   "title": "Sumptus appono tametsi [...]",
   "author": "Jermaine Daniel",
   "date": "2023-04-30T10:10:02.970Z",

utils/url.ts

@@ -24,14 +24,3 @@ export const urlTransform = (docsVersion?: string) => (uri: string) => {
 
   return uri;
 };
-
-/**
- * Set target for outgoing links
- *
- * @param uri
- */
-export const linkTarget = (uri: string) => {
-  if (uri.startsWith('http')) {
-    return '_blank';
-  }
-};