diff --git a/config/_default/menus.yaml b/config/_default/menus.yaml
index 78aac2f0..e9a7f86d 100644
--- a/config/_default/menus.yaml
+++ b/config/_default/menus.yaml
@@ -22,6 +22,9 @@ main:
- parent: Documentation
name: "Quickstart Guide"
url: "docs/quickstart/"
+ - parent: Documentation
+ name: "User Manual"
+ url: "docs/manual/"
- name: Community
weight: 50
hasChildren: true
@@ -38,7 +41,7 @@ main:
name: "Planning Board"
url: "https://github.com/orgs/KaotoIO/projects/14/views/1"
- parent: Community
- name: "Apache Camel Site"
+ name: "Apache Camel"
url: "https://camel.apache.org"
- parent: Community
name: "Youtube Channel"
diff --git a/content/blog/kaoto-2.0-release/index.md b/content/blog/kaoto-2.0-release/index.md
index e6e251ef..7ad3db0a 100644
--- a/content/blog/kaoto-2.0-release/index.md
+++ b/content/blog/kaoto-2.0-release/index.md
@@ -1,7 +1,7 @@
---
title: Kaoto 2.0 released
date: 2024-05-16T10:00:00+06:00
-summary: We are thrilled to announce the 2.0 release of Kaoto, the visual editor for Apache Camel! Enjoy a fully reworked editing experience with a focus usability.
+summary: We are thrilled to announce the 2.0 release of Kaoto, the visual editor for Apache Camel! Enjoy a fully reworked editing experience with a focus on usability.
authors:
- admin
tags:
diff --git a/content/docs/manual/_index.md b/content/docs/manual/_index.md
new file mode 100644
index 00000000..86bd4524
--- /dev/null
+++ b/content/docs/manual/_index.md
@@ -0,0 +1,244 @@
+---
+title: User Manual
+description: "This document describes how to install and use Kaoto."
+---
+## Overview
+Kaoto stands out as an intuitive visual platform for Apache Camel integrations, specifically designed to streamline the development process. It offers an accessible entry point for junior integration engineers through its low-code/no-code capabilities, making the initial steps of integration development straightforward. Moreover, Kaoto supports a seamless transition to more sophisticated features, allowing expert Camel developers to develop and fine-tune complex integration routes effectively.
+
+The audience for this guide is Apache Camel developers. This guide assumes familiarity with Apache Camel and the processing requirements for your organization.
+
+Kaoto is an acronym for Kamel Orchestration Tool. It is a low code and no code integration designer to create and edit integrations based on Apache Camel. Kaoto is extendable, flexible, and adaptable to different use cases. For more information about the history of Kaoto, see Statistics and History of Kaoto.
+
+Kaoto offers a rich catalog of building blocks for use in graphical design. By default, Kaoto loads the official upstream Camel Catalog and Kamelet Catalog.
+
+Benefits of using Kaoto can be listed as follows:
+
+- **Enhanced Visual Development Experience**
+
+ By leveraging Kaoto’s visual designing capabilities, users can intuitively create, view, and edit Camel integrations through the user interface. This low-code/no-code approach significantly reduces the learning curve for new users and accelerates the development process for seasoned developers.
+
+- **Comprehensive Component Catalog Accessibility**
+
+ Kaoto provides immediate access to a rich catalog of Camel components, enterprise integration patterns (EIPs), and Kamelets. This extensive Catalog enables developers to easily find and implement the necessary components for their integration solutions. By having these resources readily available, developers can focus more on solving business problems rather than spending time searching for and learning about different components.
+
+- **Streamlined Integration Development Process**
+
+ The platform is designed with an efficient user experience in mind, optimizing the steps required to create comprehensive integrations. This efficiency is achieved through features like auto-completion, configuration forms, and interactive feedback mechanisms. As a result, developers can quickly assemble and configure integrations, reducing the overall development time. This streamlined process encourages experimentation and innovation by making it easier to prototype and test different approaches.
+
+## Installation
+
+### Requirements
+
+#### Microsoft Visual Studio Code
+Kaoto ships as a Microsoft Visual Studio Code extension. If you haven't installed VS Code on your manchine yet, please do that now.
+
+Visit [the download page](https://code.visualstudio.com/docs/setup/setup-overview) and follow the installation instructions that apply best for you.
+
+#### Camel CLI
+To give you the best user experience we recommend to install the Camel CLI, which offers various functionalities for Camel developers.
+
+Please follow the below steps to install it.
+
+- Install [JBang](https://www.jbang.dev) following these [instructions](https://www.jbang.dev/download/)
+- Verify that [JBang](https://www.jbang.dev) is working by executing the following from a command shell. This should output the version of installed [JBang](https://www.jbang.dev).
+
+```bash
+jbang version
+```
+- Run the following command from a command shell to install the [Camel CLI](https://camel.apache.org/manual/camel-jbang.html):
+
+```bash
+jbang app install camel@apache/camel
+```
+- Check if the [Camel CLI](https://camel.apache.org/manual/camel-jbang.html) is working by executing the following from a command shell. This should output the version of the installed [Camel CLI](https://camel.apache.org/manual/camel-jbang.html).
+
+```bash
+camel version
+```
+
+### Install Kaoto
+{{% callout note %}}
+For the best user experience and for additional supportive features, we suggest installing the [Extension Pack for Apache Camel](https://marketplace.visualstudio.com/items?itemName=redhat.apache-camel-extension-pack), which also includes the Kaoto VS Code extension.
+{{% /callout %}}
+
+- Open VS Code
+- Open the Extensions view on the left side panel (or press CTRL+SHIFT+X)
+- Type Extension Pack for Apache Camel in the search field
+- Click the Install button
+
+
+
+## Getting Started
+This section describes how to
+- setup a workspace in VS Code
+- access the important commands to create your integration
+- create your first Camel Route
+- run your Camel Route locally
+- get access to the source code of the Camel Route
+
+### Preparing the Workspace
+Visual Studio Code requires you to create a workspace for your project to access the full functionality of the environment. If you haven't done so yet, please open your Visual Studio Code instance. You can do that by finding the right launcher on your computer or by opening a command shell and executing code. This should leave you with a window like the one below.
+
+
+
+Next we need to select our workspace folder which will store our project files. Go to the File menu and select the entry Open Folder. In the following screen browse to the folder you would like to use and select it.
+
+
+
+### VS Code Commands
+{{% callout note %}}
+Some VS Code commands require a workspace to show up and function correctly. If you haven't set one up and opened it you should check the [Preparing the Workspace](#preparing-the-workspace) section.
+{{% /callout %}}
+
+To access the VS Code command palette you have to press either F1 or CTRL+SHIFT+P. This will open up an entry field which you can use to filter for the commands you are interested in.
+
+In our case we are interested in the Camel related commands, so lets type Camel into the field and check the filtered results.
+
+
+
+### Create your first Camel Route
+If you followed the steps from the [](#vs-code-commands) section you should still see the filtered Camel commands. Please select now the command called Camel: Create a Camel Route using YAML DSL and hit Enter. Next you are asked to provide a name for the file to be created. Feel free to pick a name without stating a file extension (example: simpleTest) and hit Enter again.
+
+{{% callout note %}}
+If the execution fails you should double check if you have installed the [Camel CLI](https://camel.apache.org/manual/camel-jbang.html) correctly. Follow the instructions outline in the section [Camel CLI](#camel-cli) section.
+{{% /callout %}}
+
+If all worked correctly you should now see your new file with the extension .camel.yaml and the Kaoto Visual Designer should open up.
+{{% callout note %}}
+If the Kaoto editor doesn't open check you followed the [Install Kaoto](#install-kaoto) section and your file is named like _filename.camel.yaml_. If you named the file differently then rename it to match this naming rule.
+{{% /callout %}}
+
+You should now see a similar screen like the one below.
+
+
+
+### Launch your Camel Route
+The Camel Route we created in the [previous chapter](#create-your-first-camel-route) can already be launched. Let's try to start the Route by clicking the Run Camel Application with JBang button in the top right of the Kaoto Visual Editor.
+
+
+
+A terminal should open up and it will show you the output of your launched Camel Route.
+
+
+
+You can terminate the execution of your Camel Route at any time by selecting the terminal window and pressing CTRL+C.
+
+### Accessing the Source Code
+You might wonder how the source of your new Camel Route looks like. While Kaoto tries relief users from the burden of working with the source code, we still allow access to it via the default Visual Studio Code Text Editor.
+
+To access your source code you can either right click the tab labeled with the filename and then select Reopen Editor with and then choosing Text Editor.
+
+Another way of doing that is to right-click the file in the Explorer view on the left side of the window and then similarly selecting the menu item Open With and then choosing Text Editor.
+
+If you want to revert back to the Kaoto Editor you can follow the same steps as above but instead of Text Editor you should then select Kaoto Editor.
+
+## The Visual Designer
+
+### Overview
+The following picture shows the different parts of the Kaoto Visual Editor.
+
+
+
+1. The Explorer View with the opened file selected
+2. The currently displayed Integration
+3. The configuration panel where you can adjust and customize settings for the selected step
+4. Drop down showing the currently selected integration type, here **Camel Route**
+5. Drop down showing the currently selected Camel Route. This is handy if you have more than one Camel Route defined in your file. You can rename, delete, select and switch the visibility for each Camel Route here
+6. Drop down enabling you to add more Routes or other global elements to your integration. **Only visible for Camel Routes!**
+7. Copies the full source code of your integration to the Clipboard
+8. Exports the currently visible Integration as a PNG image
+9. This button bar provides you with functionalities like Zoom In / Out, Reset the View, Switching the layout direction between horizontal and vertical and grants you access to the comprehensive Camel Catalog, containing all the available Components/Connectors, Enterprise Integration Patterns and Kamelets
+10. A step in your Integration with a **Warning**-Marker to indicate a problem with the configuration of the step.
+
+### Working with Camel Routes
+In [Apache Camel](https://camel.apache.org), a route is a set of processing steps that are applied to a message as it travels from a source to a destination. A route typically consists of a series of processing steps that are connected in a linear sequence.
+
+A Camel Route is where the integration flow is defined. For example, you can write a Camel Route to specify how two systems can be integrated. You can also specify how the data can be manipulated, routed, or mediated between the systems.
+
+#### Creating a new Camel Route
+We already covered how to create a new Camel Route YAML file in the chapter [Create your first Camel Route](#create-your-first-camel-route).
+
+Let's use another way of creating a new Camel Route. If you have your route from the other chapter still open, click on the Route selection drop down and then delete all the routes usinng the trashbin icon.
+
+
+
+Once you confirmed the deletion of all your routes you should see a blank screen like below.
+
+
+
+You can now create a new Camel Route by clicking the + New button, which will put a template route in place which uses a **Timer** component to send every second a message to the **Log** component.
+
+#### Adding a step
+Now lets add a new step between the **Timer** and the **Log** component to modify the message body. There are two ways of adding a step to the route. You can either Right-Click on the step you want to insert or click the 3 dots on the right side of the steps label. This will bring up a context menu with the available actions to choose from.
+
+Right-Click the **Timer** step now.
+
+
+
+{{% callout note %}}
+The set of available actions depend on the selected step and can vary. There are actions for appending, prepending, replacing and deleting steps as well as some more specialized actions.
+{{% /callout %}}
+
+Lets now select the **+ Add step** action. This will open up the Camel Catalog where you can search the step you want to add.
+
+
+
+As already mentioned we would like to modify the message body before sending it along to the **Log** component. To achieve that we need to add a **Processor** called **setBody**. Let's enter this name into the filter text field on top of the Catalog.
+
+
+
+You can now select the **setBody** tile to add it to your route. Select the new added step now on the canvas to open the configuration form to the right.
+
+
+
+To modify the content of the message we have to define the **Expression**. Click on the pencil icon next to the field to open up the Expression Editor.
+
+
+
+Let's change the **Expression** text field to Hello from Kaoto! and then hit **Apply**.
+Now the **Log** component will receive a Hello from Kaoto! message every second and logs it to the console.
+
+{{% callout note %}}
+Adding steps is usually done with two actions. **Prepend** can be used to add a step _before_ the selected step and **Append** will add the new step _after_ the selected step.
+
+However, on the first step of a flow and on steps that can have children, the **Add Step** action is used.
+{{% /callout %}}
+
+#### Replacing a step
+You can replace any step on the canvas by invoking the context menu on a step and selecting the item **Replace**. This will open up the Camel Catalog and you can choose the replacement from there.
+
+#### Deleting a step
+{{% callout warning %}}
+When invoking the **Delete** action on a step with children or on a container element containing children there will be a confirmation dialog because you are about to delete not just the single step or container but also all the contained children. **Be cautious**!
+{{% /callout %}}
+
+You can delete any step on the canvas by invoking the context menu on a step and selecting the item **Delete**. This will remove the step from the route.
+
+#### Enable / Disable a step
+You can enable / disable any step in your route by invoking the context menu on a step and selecting the item **Enable / Disable**. This will instruct the [Apache Camel](https://camel.apache.org) runtime to ignore the step when executing the flow. This can be convenient when prototyping a new route.
+
+
+
+In the picture above the **Log** component has been disabled. The label of the step is striked through, the icon is grayed out and there is a marker icon at the top right of the step to indicate it is disabled.
+
+
\ No newline at end of file
diff --git a/content/docs/manual/camel-commands.png b/content/docs/manual/camel-commands.png
new file mode 100644
index 00000000..505645b5
Binary files /dev/null and b/content/docs/manual/camel-commands.png differ
diff --git a/content/docs/manual/catalog-setbody.png b/content/docs/manual/catalog-setbody.png
new file mode 100644
index 00000000..7a3beb2a
Binary files /dev/null and b/content/docs/manual/catalog-setbody.png differ
diff --git a/content/docs/manual/delete-route.png b/content/docs/manual/delete-route.png
new file mode 100644
index 00000000..e75fc2ca
Binary files /dev/null and b/content/docs/manual/delete-route.png differ
diff --git a/content/docs/manual/disabled-step.png b/content/docs/manual/disabled-step.png
new file mode 100644
index 00000000..f31b5463
Binary files /dev/null and b/content/docs/manual/disabled-step.png differ
diff --git a/content/docs/manual/empty-vscode.png b/content/docs/manual/empty-vscode.png
new file mode 100644
index 00000000..fac526d0
Binary files /dev/null and b/content/docs/manual/empty-vscode.png differ
diff --git a/content/docs/manual/extpack-install.png b/content/docs/manual/extpack-install.png
new file mode 100644
index 00000000..394b8f8f
Binary files /dev/null and b/content/docs/manual/extpack-install.png differ
diff --git a/content/docs/manual/launch-button.png b/content/docs/manual/launch-button.png
new file mode 100644
index 00000000..dec2c356
Binary files /dev/null and b/content/docs/manual/launch-button.png differ
diff --git a/content/docs/manual/launch-terminal.png b/content/docs/manual/launch-terminal.png
new file mode 100644
index 00000000..1d441749
Binary files /dev/null and b/content/docs/manual/launch-terminal.png differ
diff --git a/content/docs/manual/new-route.png b/content/docs/manual/new-route.png
new file mode 100644
index 00000000..3866717a
Binary files /dev/null and b/content/docs/manual/new-route.png differ
diff --git a/content/docs/manual/no-route.png b/content/docs/manual/no-route.png
new file mode 100644
index 00000000..2f860273
Binary files /dev/null and b/content/docs/manual/no-route.png differ
diff --git a/content/docs/manual/open-folder.png b/content/docs/manual/open-folder.png
new file mode 100644
index 00000000..5308bb07
Binary files /dev/null and b/content/docs/manual/open-folder.png differ
diff --git a/content/docs/manual/setbody-expression.png b/content/docs/manual/setbody-expression.png
new file mode 100644
index 00000000..4464699c
Binary files /dev/null and b/content/docs/manual/setbody-expression.png differ
diff --git a/content/docs/manual/setbody-step.png b/content/docs/manual/setbody-step.png
new file mode 100644
index 00000000..8441c904
Binary files /dev/null and b/content/docs/manual/setbody-step.png differ
diff --git a/content/docs/manual/step-actions.png b/content/docs/manual/step-actions.png
new file mode 100644
index 00000000..a1335885
Binary files /dev/null and b/content/docs/manual/step-actions.png differ
diff --git a/content/docs/manual/ui-overview.png b/content/docs/manual/ui-overview.png
new file mode 100644
index 00000000..c0138745
Binary files /dev/null and b/content/docs/manual/ui-overview.png differ
diff --git a/hugo_stats.json b/hugo_stats.json
index 6fddf4c0..06c99c75 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -44,6 +44,7 @@
"mask",
"meta",
"nav",
+ "ol",
"p",
"path",
"polygon",
@@ -516,22 +517,31 @@
"4---testing-your-route",
"a",
"a-big-shoutout-to-our-amazing-contributors",
- "a-the-complete-tooling",
"a-using-the-extension-pack-for-apache-camel",
+ "accessing-the-source-code",
+ "adding-a-step",
+ "advanced",
"b",
- "b-only-the-kaoto-editor",
"b-using-only-the-kaoto-extension",
"bug-fixes",
"c",
"camel-44-support",
+ "camel-cli",
"camel-routes-configuration",
"catalog-filter-counts",
"configuration-form",
"consistent-field-spacing",
"context-menu-actions-on-nodes",
"create-a-new-camel-route",
+ "create-your-first-camel-route",
+ "creating-a-new-camel-route",
+ "creating-a-quarkus-application",
+ "creating-a-springboot-application",
+ "debugging",
+ "deleting-a-step",
"details",
"dropdown-placeholders",
+ "enable--disable-a-step",
"features",
"features--improvements",
"figure-launch-button",
@@ -539,20 +549,26 @@
"filter0_d",
"filter1_d",
"getting-kaoto",
+ "getting-started",
"give-it-a-try",
"hide-button",
"hints",
"hints-1",
"hints-2",
"hints-3",
+ "how-to-define-connections",
"improved-expression-configuration",
+ "install-kaoto",
"install-the-vs-code-extension",
+ "installation",
"its-time-to-celebrate-the-200-release-of-kaoto",
"kamelet-configuration",
"kamelet-properties-configuration",
"kaotos-future-outlook",
+ "launch-your-camel-route",
"lets-build-it-together",
"mask0",
+ "microsoft-visual-studio-code",
"moon",
"more-information",
"morpher",
@@ -560,8 +576,12 @@
"nav-toggle",
"new-features",
"open-source",
+ "overview",
+ "overview-1",
"page-bg",
"paint0_linear",
+ "preparing-the-workspace",
+ "replacing-a-step",
"requirements",
"running-the-camel-route",
"search",
@@ -585,11 +605,19 @@
"sun",
"support-for-error-handler-and-rest-configuration",
"support-for-kamelet-beans",
+ "the-visual-designer",
"top",
+ "transform-to-camel-yaml-dsl",
+ "using-applicationproperties",
"using-docker",
"using-our-online-testing-instance",
"using-vs-code",
"ux-improvements",
+ "vs-code-commands",
+ "working-with-camel-routes",
+ "working-with-kamelets",
+ "working-with-openapi",
+ "working-with-pipes",
"youtube"
]
}