create base manual content

doc/config/_default/menus.en.toml

@@ -4,37 +4,37 @@
 
 [[main]]
 name = "Docs"
-url = "getting-started/requirments/"
+url = "user-manual/create-your-project/"
 weight = 1
 
-[[main]]
-name = "Faq"
-url = "faq/"
-weight = 2
+#[[main]]
+#name = "Faq"
+#url = "faq/"
+#weight = 2
 
-[[main]]
-name = "Elements"
-url = "getting-started/elements/"
-weight = 3
+#[[main]]
+#name = "Elements"
+#url = "getting-started/elements/"
+#weight = 3
 
 # footer menu
 [[footer_primary]]
-name = "Changelog"
-url = "changelog/"
+name = "GitHub repo"
+url = "https://github.com/miguelperezcolom/mateu"
 weight = 1
 
-[[footer_primary]]
-name = "Contact us"
-url = "contact/"
-weight = 2
+#[[footer_primary]]
+#name = "Contact us"
+#url = "contact/"
+#weight = 2
 
 # footer menu
-[[footer_secondary]]
-name = "Privacy Policy"
-url = "privacy-policy/"
-weight = 1
-
-[[footer_secondary]]
-name = "Terms And Conditions"
-url = "terms-conditions/"
-weight = 2
+#[[footer_secondary]]
+#name = "Privacy Policy"
+#url = "privacy-policy/"
+#weight = 1
+
+#[[footer_secondary]]
+#name = "Terms And Conditions"
+#url = "terms-conditions/"
+#weight = 2

doc/config/_default/params.toml

@@ -20,10 +20,10 @@ google_adsense = ""     # example: ca-pub-xxxxxxxxxxxxxxxx
 # custom script on header, example: custom_script= "<script>console.log(\"Hello World\")</script>"
 custom_script = ""
 # copyright
-theme_copyright = true
-copyright = "© Copyright 2023 COMPANY"
+theme_copyright = false
+copyright = "© Copyright 2025 Mateu"
 
-# Table of Contents 
+# Table of Contents
 tableofcontents = true
 
 # Preloader
@@ -32,15 +32,15 @@ enable = true
 preloader = "" # use jpg, png, svg or gif format.
 
 # Navigation button
-[[navigation_button]]
-enable = true
-label = "Changelog"
-link = "changelog/"
+#[[navigation_button]]
+#enable = true
+#label = "Changelog"
+#link = "changelog/"
 
 [[navigation_button]]
 enable = true
-label = "Contact Us"
-link = "contact/"
+label = "GitHub repo"
+link = "https://github.com/miguelperezcolom/mateu"
 
 # search - https://github.com/gethugothemes/hugo-modules/tree/master/search
 [search]
@@ -51,15 +51,15 @@ show_image = false
 
 # contact info
 [contact_info]
-mobile = "415 509 6995"
-email = "hello@docbox.com"
-address = "2118 Thornridge Cir. Syracuse, Connecticut 35624"
+#mobile = "415 509 6995"
+email = "miguelperezcolom@gmail.com"
+#address = "2118 Thornridge Cir. Syracuse, Connecticut 35624"
 
 # seo meta data for OpenGraph / Twitter Card
 [metadata]
-keywords = ["Boilerplate", "Hugo"]
-description = "Hugo & Tailwindcss Starter"
-author = "gethugothemes"
+keywords = ["Java", "UI"]
+description = "library for building backend driven UIs"
+author = "mateu"
 image = ""
 
 
@@ -82,4 +82,4 @@ button = "I Accept"
 [subscription]
 # mailchimp subsciption
 mailchimp_form_action = "https://gmail.us4.list-manage.com/subscribe/post?u=463ee871f45d2d93748e77cad&amp;id=a0a2c6d074" # replace this url with yours
-mailchimp_form_name = "b_463ee871f45d2d93748e77cad_a0a2c6d074"
+mailchimp_form_name = "b_463ee871f45d2d93748e77cad_a0a2c6d074"

doc/content/_index.en.md

@@ -1,31 +1,47 @@
 ---
 header_alt: true
-
-# Banner
-banner:
-  title: "Lets Get Startsssed With Docbox"
-  subtitle: "Interactive Tutorial 🔥"
-  content: "Pellen tesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Vivamus accumsan tincidunt. Vestibulum ac diam sit amet quam vehicula elementum sed suscipit tortor eget"
-  enable_bg_pattern: true
-  image: "/images/banner-image.png"
-  search:
-    enable: true
-    input_placeholder: "Search the documentation"
-    button_text: "Search"
-
-# Features
-topics:
-  title: "All Topics"
-  subtitle: "Topic together 🎁"
-
-# Faq
-faq:
-  enable: true
-  title: "Frequently asked questions"
-  subtitle: "Regular Questions 📣"
-  content: "Pellen tesque in ipsum id orci porta dapibus. Sed porttitor lectus nibh. Vivamus accumsan tincidunt. Vestibulum ac diam sit amet quam vehicula elementum sed suscipit tortor eget"
-  button:
-    enable: true
-    label: "View All FAQ"
-    link: "faq/"
+Title: Welcome to Mateu
 ---
+
+Long story short, **Mateu** allows you to create distributed backend driven user interfaces (UIs).
+
+Mateu is a **java** (also c# and go in the future) library for creating awesome and reliable **responsive web applications** from our java classes at speed of light.
+
+The main idea is to achieve it with **the fewest lines of code**. In Mateu you **only** need to know java (also c# and go in the future), so you do not need to know about html, javascript, or css to build your apps.
+
+Mateu's UI definition domain specific language (DSL) is built by adding some interfaces, classes and annotations to the good old java language.
+
+### Some advantages
+
+Here are some of the advantages of using Mateu for building your UI:
+
+- Fast
+- Frontend agnostic
+- Allows you to truly focus on your business logic
+- Highly reusable high level components
+- All of the advantages of using java (statically typed language, tooling, ...) when developing your UI
+- Distributed nature (micro frontend and micro service friendly)
+- Embeddable everywhere (it's just web components)
+
+### Goal
+
+Mateu is just another way of building UIs, mainly targeted to backend teams. It's specially well suited for building huge enterprise applications where the UI is distributed among several teams.
+
+The truth is that with Mateu building a cool UI is a no-brainer for any java (c# and go in future) developer.
+
+### Why not just use Vaadin
+
+While Vaadin is an excellent tool that I truly enjoy using (in fact, I'm currently leveraging Vaadin's design system for Mateu's frontend), I believe there are certain aspects that make Mateu stand out. From my perspective::
+
+- Mateu is a higher level approach. With Vaadin you build UIs, while Mateu is focused on building apps.
+- Mateu's server side is stateless, which makes it great for microservices.
+- Microfrontends are first class citizens in Mateu, and they are really easy
+- Mateu is designed to support many languages and many frontends. Frontend and backend are clearly decoupled so we can have several frontend implementations (web, native app, desktop, web using different design systems, ...) and several backend implementations (java, c#, go, ...) at some point in future (I hope, if I have time ;)).
+
+### Actual status
+
+Mateu is currently used in production for several projects, and as time goes by it becomes more useful and proofs to be a good choice for developing enterprise applications. Even for developing all of your applications, when a UI is needed.
+
+Since May 2024 I'm working on the **version 3** which should bring many improvements (including a general clean up, more UX features and components, plenty of extension points, documentation, refactored user manual, an alternate look and feel using a different design system, ...).
+
+I hope you like it ;)

doc/content/about-mateu/_index.en.md

@@ -0,0 +1,14 @@
+---
+title: "Getting Started"
+#icon: "/images/icons/start.svg" # https://fonts.google.com/icons
+#icon_bg: ""
+description: "amet nisl tempus convlis quis ac lectus. Vivsdv amus mana justo, lacinia eget"
+weight: 1
+
+# don't create a separete page
+type: "docs"
+_build:
+  list: always
+  publishResources: true
+  render: never
+---

doc/content/about-mateu/disclaimer.en.md

@@ -0,0 +1,15 @@
+---
+title: "Disclaimer"
+weight: 2
+---
+
+Mateu is currently being refactored. Due to dedication constraints there are some restrictions for the current version 3 (alpha):
+
+- only **springboot/webflux** supported
+- the documentation is not finished
+- not fully covered by tests yet, so things can be broken at some point
+- some features from version 1 are missing
+
+I hope I will be able to bring it back to a complete production ready state by the beginning of 2025.
+
+This [video](https://youtu.be/h_MSTvnN55o) shows an app built some time ago using version 2.

doc/content/about-mateu/see-it-in-action.en.md

@@ -0,0 +1,11 @@
+---
+title: "See it in action"
+weight: 3
+---
+
+To see Mateu in action just go to:
+
+- https://demo.mateu.io for a component/feature explorer
+- https://article2.mateu.io for a micro frontends example
+
+Please notice that the demo app has been deployed to 2 pods inside a Kubernetes cluster running on infrastructure provided by Hetzner, and all that behind Cloudflare. This means that every request you do is load balanced between those 2 pods and that showcases the stateless nature of any UI built with Mateu :) 

doc/content/sections/call-to-action.en.md

@@ -1,5 +1,5 @@
 ---
-enable: true
+enable: false
 subtitle: "Call To Action 📣"
 title: "Keep Your Thirst On"
 description: "Donec rutrum congue leo eget malesuada. Sed porttitor porta. Vivamus suscit"

doc/content/user-manual/_index.en.md

@@ -0,0 +1,14 @@
+---
+title: "User manual"
+#icon: "/images/icons/start.svg" # https://fonts.google.com/icons
+#icon_bg: ""
+description: "amet nisl tempus convlis quis ac lectus. Vivsdv amus mana justo, lacinia eget"
+weight: 2
+
+# don't create a separete page
+type: "docs"
+_build:
+  list: always
+  publishResources: true
+  render: never
+---

doc/content/user-manual/create-your-project.en.md

@@ -0,0 +1,90 @@
+---
+title: "Create your project"
+weight: 2
+---
+
+## Step 1: Have an Spring Boot web project
+
+Obviously you need a valid spring boot project, with **Reactive Web** (Webflux) enabled. If you do not have it already, you should create it from IntelliJ or go to [Spring Boot Initializr](https://start.spring.io/) and create a new project with the **Reactive Web** dependency.
+
+**As per today only Spring boot 3 is supported.**
+
+## Step 2: Add Mateu dependency
+
+In case you are using maven:
+
+```xml
+<dependency>
+    <groupId>io.mateu</groupId>
+    <artifactId>embedded-front</artifactId>
+    <version>3.0-alpha.90</version>
+</dependency>
+```
+
+Or, in case you are using Gradle:
+
+```kotlin
+    implementation("io.mateu:embedded-front:3.0-alpha.90")
+    annotationProcessor("io.mateu:annotation-processing:3.0-alpha.90")
+```
+
+
+
+## Step 3: Create your Mateu UI
+
+Nothing special is required. Just annotate your class with `@MateuUI`:
+
+```java
+
+package com.example.demo;
+
+import io.mateu.core.domain.uidefinition.shared.annotations.MateuUI;
+
+@MateuUI("")
+public class HelloWorld {
+
+}
+
+```
+
+When you run you spring boot application, you will find your ui at [http:localhost:8080](http:localhost:8080) (for the code above) as expected:
+
+
+<p align="center"><img src="../../images/helloworld.png?raw=true" width="600"/></p>
+
+## Troubleshooting
+
+In case you are using a maven project and you are setting custom annotation processor paths (e.g. because you are using mapstruct) you must add the annotation processor from Mateu, in your pom.xml:
+
+```xml
+    <build>
+        <plugins>
+            <plugin>
+                <groupId>org.springframework.boot</groupId>
+                <artifactId>spring-boot-maven-plugin</artifactId>
+            </plugin>
+            <plugin>
+                <groupId>org.apache.maven.plugins</groupId>
+                <artifactId>maven-compiler-plugin</artifactId>
+                <version>3.8.1</version>
+                <configuration>
+                    <source>1.8</source> <!-- depending on your project -->
+                    <target>1.8</target> <!-- depending on your project -->
+                    <annotationProcessorPaths>
+                        <path> <!-- when using mapstruct -->
+                            <groupId>org.mapstruct</groupId>
+                            <artifactId>mapstruct-processor</artifactId>
+                            <version>${org.mapstruct.version}</version>
+                        </path>
+                        <path>
+                            <groupId>io.mateu</groupId>
+                            <artifactId>annotation-processing</artifactId>
+                            <version>3.0-alpha.90</version>
+                        </path>
+                        <!-- other annotation processors -->
+                    </annotationProcessorPaths>
+                </configuration>
+            </plugin>
+        </plugins>
+    </build>
+```

doc/content/user-manual/the-basics.en.md

@@ -0,0 +1,12 @@
+---
+title: "The basics"
+weight: 1
+---
+
+We could reduce any user interface to two basic operations: showing information to the user, and allowing the user to interact with our system by providing data and triggering actions. On top of those operations there is a flow which happens, as the user interface changes according to the previous user actions and the context. With Mateu we can describe those operations and the flow using plain java.
+
+So, we start by linking a url to a java class. That enables the first interaction, which is the user entering that url in the browser and, as the consequence, some information and elements are displayed to the user. The information and elements which are displayed to the user are inferred from the java class.
+
+From that point, what happens is up to us. If we place in that class a java method and annotate it with `@MainAction` or `@Action` (or a `Callable` field annotated with `@Button`) a button will be displayed to the user so he/she can call that method. When the user clicks that button the java method will be called in the server side and the browser will be updated according to the result of that method call. If we want to collect some data from the user we just need to add fields to our java class, so the appropriate fields are displayed to the user and the information entered by him/her will be used to hydrate the java object in the server side, before calling any method. We can even just declare some parameters to our java method to collect data from the user, so a form would be displayed to the user for gathering that data before actually calling the java method on the server side.
+
+We can adjust what is displayed to the user by using annotations and implementing java interfaces, in our classes, but that's essentially it.

doc/data/social.json

@@ -1,24 +1,14 @@
 {
   "main": [
-    {
-      "name": "facebook",
-      "icon": "fab fa-facebook",
-      "link": "https://www.facebook.com/"
-    },
-    {
-      "name": "twitter",
-      "icon": "fab fa-twitter",
-      "link": "https://twitter.com/"
-    },
     {
       "name": "github",
       "icon": "fab fa-github",
-      "link": "https://www.github.com/"
+      "link": "https://www.github.com/miguelperezcolom/mateu"
     },
     {
       "name": "linkedin",
       "icon": "fab fa-linkedin",
-      "link": "https://www.linkedin.com/"
+      "link": "https://www.linkedin.com/in/miguelperezcolom/"
     }
   ]
 }