docs: move content to Docusaurus and improve main README (#122)

README.md

@@ -1,6 +1,19 @@
 <div align="center">
-  <h2 align="center">TREND</h2>
-  <p align="center">Traceability Enforcement of Datatransfers</p>
+  <picture>
+    <source width="340" media="(prefers-color-scheme: dark)" srcset="docs/static/img/branding/logo-sub/white/trend_logo-sub_w.svg">
+    <source width="340" media="(prefers-color-scheme: light)" srcset="docs/static/img/branding/logo-sub/black/trend_logo-sub_b.svg">
+    <img width="340" alt="TREND (Traceability Enforcement of Datatransfers) logo" src="docs/static/img/branding/logo-sub/black/trend_logo-sub_b.svg">
+  </picture>
+  <br />
+  <br />
+  <img alt="GitHub Issues" src="https://img.shields.io/github/issues/FraunhoferISST/TREND">
+  <img alt="GitHub Pull Requests" src="https://img.shields.io/github/issues-pr/FraunhoferISST/TREND">
+  <img alt="GitHub repo size" src="https://img.shields.io/github/repo-size/FraunhoferISST/TREND">
+  <img alt="GitHub commit activity]" src="https://img.shields.io/github/commit-activity/t/FraunhoferISST/TREND">
+  <a href="https://fraunhoferisst.github.io/TREND/">
+    <img alt="Documentation" src="https://img.shields.io/badge/docs-online-green">
+  </a>
+  <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/FraunhoferISST/TREND">
 </div>
 
 ## Table of Contents
@@ -24,6 +37,12 @@ exchanged, along with dedicated protocol-level checks for validation and enforce
 system-independent sovereignty checks to secure the data assets of the data owner without privacy
 sacrifices.
 
+This repository includes a generic **steganography / watermarking** library to hide any byte 
+encoded data in a cover text including two usage examples of a webinterface and command line 
+tool. The following example shows how the webinterface includes the watermark "Fraunhofer ISST" 
+inside a Lorem ipsum dummy cover text and extracts it afterward:
+![Animated example of the webinterface](docs/static/img/webinterface-demo.gif)
+
 > [!NOTE]
 > There is a pending German patent application with the application number 10 2023 125 012.4. In
 > order to use the TREND watermarker Software in the form published here, a patent license is
@@ -46,6 +65,7 @@ information.
 **Subfolder overview:**
 
 - **cli**: A command line tool to enable watermarking directly via a shell
+- **docs**: The documentation based on Docusaurus
 - **samples**: Different examples of watermarked and non-watermarked files
 - **watermarker**: The main part of the repository, consisting of a watermarker library to be able
   to watermark (for example) text files

cli/README.md

@@ -3,59 +3,7 @@
 The command line tool (CLI) can be used to add watermarks directly via a shell. It uses the TREND
 watermarker library.
 
-## Getting Started
+## Installation
 
-### System prerequisites
-
-The following things are needed to run this application:
-
-- A Java Runtime Environment (JRE)
-- The watermarker library, published in maven local(*)
-
-(*) To publish the watermarker library to your maven local repository (if not already done), execute
-the following commands from the root directory of the project:
-
-1. `cd watermarker`
-2. `./gradlew publishToMavenLocal`
-
-### Building from source
-
-Use Gradle to build the CLI tool:
-
-*Note:* You must replace `<version>` in the following commands (e.g. `0.1.0-SNAPSHOT`)
-
-1. `cd cli` (if not already there)
-2. `./gradlew shadowJar"`
-    - This will create a standalone jar file: `./build/libs/cli-<version>-all.jar`
-3. `java -jar build/libs/cli-<version>-all.jar --help`
-    - This will print all possible commands of the CLI tool.
-4. *(Optional)* Create alias `trend` to run the CLI tool:
-    - Fish: `alias -s trend "java -jar $PWD/build/libs/cli-<version>-all.jar"`
-    - Zsh / Bash:
-        - *Note:* You must replace `<path/to/cli>` and `<version` in the following commands
-        - add the following line to your `~/.zshrc` or `~/.bashrc`:\
-          `alias trend='java -jar <path/to/cli>/build/libs/cli-<version>-all.jar'`
-
-### Usage Example
-
-- List all watermarks contained in a file:\
-  `trend list example.watermarked.txt`
-- *Create a new file from the source file:*
-    - Add a watermark to a text file:\
-      `trend add "<watermark>" example.txt example.watermarked.txt`
-    - Remove all watermarks contained in a file:\
-      `trend remove example.watermarked.txt example.txt`
-- *Modify the source file:*
-    - Add a watermark to a text file:\
-      `trend add "<watermark>" example.txt`
-    - Remove all watermarks contained in a file:\
-      `trend remove example.watermarked.txt`
-
-### Development Build
-
-Use Gradle to recompile and run the CLI tool:
-
-1. `cd cli` (if not already there)
-2. `./gradlew run --args="--help"`
-    - This will print all possible commands of the CLI tool. To use it, the `--args` parameter has
-      to be changed.
+The installation is described in our documentation:
+https://fraunhoferisst.github.io/TREND/docs/usage/cli/installation/

docs/docs/03-usage/11-cli/01-installation.md

@@ -11,8 +11,57 @@ title: Installation
 
 # Installation
 
-_Follows soon._
+### System Prerequisites
 
-## System Requirements
+The following things are needed to run this application:
+
+- A Java Runtime Environment (JRE)
+- The watermarker library, published in maven local(*)
+
+(*) To publish the watermarker library to your maven local repository (if not already done), execute
+the following commands from the root directory of the project:
+
+1. `cd watermarker`
+2. `./gradlew publishToMavenLocal`
 
 ## Building from Source
+
+Use Gradle to build the CLI tool:
+
+*Note:* You must replace `<version>` in the following commands (e.g. `0.1.0-SNAPSHOT`)
+
+1. `cd cli` (if not already there)
+2. `./gradlew shadowJar"`
+    - This will create a standalone jar file: `./build/libs/cli-<version>-all.jar`
+3. `java -jar build/libs/cli-<version>-all.jar --help`
+    - This will print all possible commands of the CLI tool.
+4. *(Optional)* Create alias `trend` to run the CLI tool:
+    - Fish: `alias -s trend "java -jar $PWD/build/libs/cli-<version>-all.jar"`
+    - Zsh / Bash:
+        - *Note:* You must replace `<path/to/cli>` and `<version` in the following commands
+        - add the following line to your `~/.zshrc` or `~/.bashrc`:\
+          `alias trend='java -jar <path/to/cli>/build/libs/cli-<version>-all.jar'`
+
+## Usage Example
+
+- List all watermarks contained in a file:\
+  `trend list example.watermarked.txt`
+- *Create a new file from the source file:*
+    - Add a watermark to a text file:\
+      `trend add "<watermark>" example.txt example.watermarked.txt`
+    - Remove all watermarks contained in a file:\
+      `trend remove example.watermarked.txt example.txt`
+- *Modify the source file:*
+    - Add a watermark to a text file:\
+      `trend add "<watermark>" example.txt`
+    - Remove all watermarks contained in a file:\
+      `trend remove example.watermarked.txt`
+
+## Development Build
+
+Use Gradle to recompile and run the CLI tool:
+
+1. `cd cli` (if not already there)
+2. `./gradlew run --args="--help"`
+    - This will print all possible commands of the CLI tool. To use it, the `--args` parameter has
+      to be changed.

docs/docs/03-usage/12-webinterface/01-installation.md

@@ -11,8 +11,37 @@ title: Installation
 
 # Installation
 
-_Follows soon._
+## System Prerequisites
 
-## System Requirements
+The following things are needed to run this application:
 
-## Building from Source
+- For manual builds:
+    - A Java Runtime Environment (JRE)
+    - The watermarker library, published in maven local(*)
+- For containerized builds:
+    - docker & docker-compose
+
+(*) To publish the watermarker library to your maven local repository (if not already done), execute
+the following commands from the root directory of the project:
+
+1. `cd watermarker`
+2. `./gradlew publishToMavenLocal`
+
+## Building from Source (Manual Build)
+
+Use Gradle to manually build and run the webinterface:
+
+1. `cd webinterface` (if not already there)
+2. `./gradlew -t run`
+    - In case of a production build, `./gradlew clean zip` should be used instead
+3. Visit http://localhost:3000
+
+## Containerized Build
+
+Run the `docker-compose.yml` file in the root directory of the project:
+
+```
+docker-compose up
+```
+
+After the startup finished, try to visit the webinterface at http://localhost:8080

docs/docs/03-usage/12-webinterface/index.md

@@ -11,4 +11,9 @@ title: Webinterface
 
 # Webinterface
 
-_Follows soon._
+The following example shows how the webinterface includes the watermark "Fraunhofer ISST"
+inside a _Lorem ipsum_ dummy cover text. Afterward, the watermarked text is copied into a public
+contact form and then copied back into the webinterface. As can be seen, the webinterface is able
+to extract the hidden watermark from the cover text:
+
+![Animated example of the webinterface](../../../static/img/webinterface-demo.gif)

watermarker/README.md

@@ -3,74 +3,15 @@
 The watermarker library is the hearth of the project because it is the foundation for different
 other components. It can be used to embed or extract a watermark directly in or from text.
 
-## Getting Started
-
 Keep in mind that the library isn't a stand-alone application. It can be used in different
 applications build with Java or Kotlin (JVM and JS) to embed and extract watermarks. When searching
 for a running application, have a look at the CLI or webinterface tool in this project repository.
 
-### System prerequisites
-
-The following things are needed to build this library:
-
-- A Java Runtime Environment (JRE)
-
-### Manual Build: Java / Kotlin for Maven
-
-Build the watermarker library and publish it to Maven local:
-
-1. Clone the TREND repository
-2. `cd TREND/watermarker` (if not already there)
-3. `./gradlew publishJvmPublicationToMavenLocal`
-
-### Manual Build: JavaScript
-
-Build the watermarker library:
-
-1. Clone the TREND repository
-2. `cd TREND/watermarker` (if not already there)
-3. `./gradlew build`
-
-#### Plain JavaScript
-
-In order to use this library in plain JavaScript, follow these steps:
-
-1. Build the library ([see above](#manual-build-javascript))
-2. Import the generated JS library:
-   ```Html
-   <script src='[relative-path-to]/TREND/watermarker/build/dist/js/productionExecutable/watermarker.js'></script>
-   ```
-3. This generates a variable watermarker that provides access to the library functionalities.
-   However, the actual watermarker object is behind the package path and you might want to reassign the
-   watermarker variable to get rid of the long path like this:
-   ```Javascript
-   watermarker = watermarker.de.fraunhofer.isst.trend.watermarker;
-   ```
-4. Now you are ready to use the watermarker in plain JS. An example HTML file can be found [here](../samples/plain_js/plain_js_minimal_example.html). You can open the file in the browser, no web server required.
-
-#### Javascript modules
-
-In order to use this library in JavaScript modules, follow these steps:
-
-1. Build the library ([see above](#manual-build-javascript))
-2. Import the generated JS library according to your module system:
-
-   ```Javascript
-   // CommonJS (CJS)
-   let watermarker = require('[relative-path-to]/TREND/watermarker/build/dist/js/productionExecutable/watermarker.js'); // built as executable
-   // or
-   let watermarker = require('[relative-path-to]/TREND/watermarker/build/js/packages/watermarker/kotlin/watermarker.js'); // built as module
-
-   // ECMAScript Modules (ESM)
-   import watermarker from '[relative-path-to]/TREND/watermarker/build/dist/js/productionExecutable/watermarker.js'; // built as executable
-   // or
-   import watermarker from '[relative-path-to]/TREND/watermarker/build/js/packages/watermarker/kotlin/watermarker.js'; // built as module
-   ```
+## Installation & Usage
 
-3. This generates a variable watermarker that provides access to the library functionalities.
-   However, the actual watermarker object is behind the package path and you might want to reassign the
-   watermarker variable to get rid of the long path like this:
-   ```Javascript
-   watermarker = watermarker.de.fraunhofer.isst.trend.watermarker; // note that imports in ESM are implicitly constant
-   ```
-4. Now you are ready to use the watermarker in your module. An example node script can be found [here](../samples/js_modules/js_modules_minimal_example.js). Run it using `node npm_minimal_example.js`
+The installation and usage for 
+[Kotlin](https://fraunhoferisst.github.io/TREND/docs/usage/watermarker/kotlin/), 
+[Java](https://fraunhoferisst.github.io/TREND/docs/usage/watermarker/java/), and 
+[JavaScript](https://fraunhoferisst.github.io/TREND/docs/usage/watermarker/javascript/) 
+are described in our documentation:
+https://fraunhoferisst.github.io/TREND/docs/usage/watermarker/installation/

webinterface/README.md

@@ -3,39 +3,7 @@
 The webinterface as a frontend can be used to add watermarks via a GUI. It uses the TREND
 watermarker library.
 
-## Getting Started
+## Installation
 
-### System prerequisites
-
-The following things are needed to run this application:
-
-- For manual builds:
-    - A Java Runtime Environment (JRE)
-    - The watermarker library, published in maven local(*)
-- For containerized builds:
-    - docker & docker-compose
-
-(*) To publish the watermarker library to your maven local repository (if not already done), execute
-the following commands from the root directory of the project:
-
-1. `cd watermarker`
-2. `./gradlew publishToMavenLocal`
-
-### Manual Build
-
-Use Gradle to manually build and run the webinterface:
-
-1. `cd webinterface` (if not already there)
-2. `./gradlew -t run`
-    - In case of a production build, `./gradlew clean zip` should be used instead
-3. Visit http://localhost:3000
-
-### Containerized Build
-
-Run the `docker-compose.yml` file in the root directory of the project:
-
-```
-docker-compose up
-```
-
-After the startup finished, try to visit the webinterface at http://localhost:8080
+The installation is described in our documentation:
+https://fraunhoferisst.github.io/TREND/docs/usage/webinterface/installation/

webinterface/src/jsMain/kotlin/WatermarkTextEmbedTab.kt

@@ -196,7 +196,7 @@ class WatermarkTextEmbedTab : SimplePanel() {
                                 Button("Copy to Clipboard") {
                                     onClick {
                                         window.navigator.clipboard.writeText(watermarkedText)
-                                        Toast.success("Successful copied to clipboard!")
+                                        Toast.success("Successfully copied to clipboard!")
                                     }
                                 },
                             )