docs: added flowchart

documentation/docs/guides/controllers.md → documentation/docs/guides/controllers.mdx

@@ -1,3 +1,7 @@
+import FlowChart from '@site/src/components/FlowChart';
+
 # Controllers
 
 Controllers are the main way to interact with the application. They are responsible for handling the requests and responses.
+
+<FlowChart selected="Controller" />

documentation/docs/guides/errors.md → documentation/docs/guides/errors.mdx

@@ -1,3 +1,8 @@
+import FlowChart from '@site/src/components/FlowChart';
+
 # Error handling
 
 Error handling is a crucial part of any application. It is important to handle errors gracefully and provide meaningful feedback to the user. In this guide, we will cover how to handle errors in a Fuego application.
+
+
+<FlowChart selected="ErrorHandler" />

documentation/docs/guides/transformation.md → documentation/docs/guides/transformation.mdx

@@ -1,3 +1,5 @@
+import FlowChart from '@site/src/components/FlowChart';
+
 # Transformation
 
 With Fuego, you can transform data coming in and out of your application. This is useful for a variety of reasons, such as:
@@ -8,6 +10,8 @@ With Fuego, you can transform data coming in and out of your application. This i
 - Masking sensitive data
 - And more...
 
+<FlowChart selected="Transformation" />
+
 ## Input Transformation
 
 Input transformation is the process of transforming the data coming **into** your application.

documentation/docs/guides/validation.md → documentation/docs/guides/validation.mdx

@@ -1,3 +1,5 @@
+import FlowChart from '@site/src/components/FlowChart';
+
 # Validation
 
 Validation is the process of ensuring that the data provided to the application is correct and meaningful. This is important because the application will use this data to make decisions and take actions. If the data is incorrect or meaningless, the application will not work as expected.
@@ -6,3 +8,6 @@ With fuego, you have several options for validating data.
 
 - struct tags with go-validator
 - custom validation functions
+
+<FlowChart selected="Validation" />
+

documentation/docusaurus.config.ts

@@ -29,6 +29,10 @@ const config: Config = {
     locales: ["en"],
   },
 
+  markdown: {
+    mermaid: true,
+  },
+
   presets: [
     [
       "classic",
@@ -53,6 +57,8 @@ const config: Config = {
     ],
   ],
 
+  themes: ["@docusaurus/theme-mermaid"],
+
   themeConfig: {
     // Replace with your project's social card
     image: "img/fuego.png",

documentation/package.json

@@ -17,6 +17,7 @@
   "dependencies": {
     "@docusaurus/core": "3.1.0",
     "@docusaurus/preset-classic": "3.1.0",
+    "@docusaurus/theme-mermaid": "3.1.0",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",

documentation/src/components/FlowChart.js

@@ -0,0 +1,65 @@
+import Mermaid from "@theme/Mermaid";
+import React from "react";
+
+const code = `flowchart TB
+
+subgraph fuego
+ direction LR
+
+ subgraph input
+	 direction TB
+	 req(Request) -- JSON {'a':'value '} --> Deserialization
+	 Deserialization -- struct{A:'value '} --> InTransformation
+	 InTransformation -- struct{A:'My Value'} --> Validation
+ end
+
+ subgraph output
+	 direction TB
+	 b(Controller) -- struct{B:'Response'} --> OutTransformation
+	 OutTransformation -- JSON {'b':'Response!'} --> Serialization
+ end
+
+ Controller{{Controller}}
+
+ 
+ 
+ input -- struct{A:'My Value'} --> Controller -- struct{B:'Response'} --> output
+ 
+ output --> ress(Response)
+ 
+ input -- error --> ErrorHandler
+ Controller -- error --> ErrorHandler
+ output -- error --> ErrorHandler
+
+ click Controller "/fuego/docs/guides/controllers" "Controllers"
+ click Validation "/fuego/docs/guides/validation" "Controllers"
+ click InTransformation "/fuego/docs/guides/transformation" "Transformation"
+ click OutTransformation "/fuego/docs/guides/transformation" "Transformation"
+ click ErrorHandler "/fuego/docs/guides/errors" "Error Handling"
+end
+
+Request -- JSON {'a':'value '} --> fuego
+fuego -- JSON {'b':'Response!'} --> Response
+
+
+fuego -- JSON {'error':'Error message', 'code': 4xx} --> Response
+
+`;
+
+export function FlowChart({ selected }) {
+  let style = "";
+  if (selected && typeof selected === "string") {
+    if (selected === "Transformation") {
+      style +=
+        `style InTransformation stroke:#f33,stroke-width:4px` +
+        "\n" +
+        `style OutTransformation stroke:#f33,stroke-width:4px`;
+    } else {
+      style += `style ${selected} stroke:#f33,stroke-width:4px`;
+    }
+  }
+
+  return <Mermaid value={code + style} />;
+}
+
+export default FlowChart;