Merge branch 'develop'

.github/workflows/documentation.yml

@@ -0,0 +1,23 @@
+name: Update MkDocs documentation
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    name: Deploy docs
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout main
+        uses: actions/checkout@v2
+
+      - name: Deploy docs
+        uses: mhausenblas/mkdocs-deploy-gh-pages@master
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          CUSTOM_DOMAIN: Obsidian-ZettelFlow.com
+          CONFIG_FILE: mkdocs.yml
+          EXTRA_PACKAGES: build-base
+          # GITHUB_DOMAIN: github.myenterprise.com
+          REQUIREMENTS: docs/requirements.txt

README.md

@@ -3,6 +3,7 @@
 [![GitHub release (latest SemVer)](https://img.shields.io/github/v/release/RafaelGB/Obsidian-ZettelFlow?style=for-the-badge&sort=semver)](https://github.com/RafaelGB/Obsidian-ZettelFlow/releases/latest)
 [![Github All Releases](https://img.shields.io/github/downloads/RafaelGB/Obsidian-ZettelFlow/total?style=for-the-badge)]()
 
+- [Documentation](https://rafaelgb.github.io/Obsidian-ZettelFlow/)
 - [Roadmap](https://github.com/users/RafaelGB/projects/9/views/1)
 - [Examples](https://github.com/RafaelGB/Obsidian-ZettelFlow/tree/main/WorkFlow%20Test)
 

docs/contributing/Documentation.md

@@ -0,0 +1,13 @@
+# Documentation
+We use [MkDocs](https://www.mkdocs.org/) to generate our documentation. MkDocs is a fast, simple and downright gorgeous static site generator that's geared towards building project documentation. Documentation source files are written in Markdown, and configured with a single YAML configuration file.
+
+## Installation
+* Install [Python](https://www.python.org/downloads/) and [pip](https://pip.pypa.io/en/stable/installing/).
+* Install the [MkDocs](https://www.mkdocs.org/#installation) package using pip: `pip install mkdocs`
+* Install the [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/getting-started/) theme using pip: `pip install mkdocs-material`
+
+## Commands
+* `mkdocs new [dir-name]` - Create a new project.
+* `mkdocs serve` - Start the live-reloading docs server.
+* `mkdocs build` - Build the documentation site.
+* `mkdocs -h` - Print help message and exit.

docs/index.md

@@ -1,9 +1,32 @@
 # Welcome to ZettelFlow
+> **Note:** This Documentation is still a work in progress. If you have any questions, please feel free to open a issue or disccusion.
 
-## Commands
+ZettelFlow is a dynamic template engine based on Zettelkasten method. It is designed to minimize the friction between your thoughts and the final output. It is a tool that helps you to write and organize your thoughts.
 
-* `mkdocs new [dir-name]` - Create a new project.
-* `mkdocs serve` - Start the live-reloading docs server.
-* `mkdocs build` - Build the documentation site.
-* `mkdocs -h` - Print help message and exit.
+## How to start
+1. Create a `.canvas` file where you want (A new folder for the next steps is recommended).
+2. Go to plugin configuration page and set the `.canvas` file path.
+3. Starts to create template files and add them to the `.canvas` file 
+4. Convert your template files into `steps` (See [examples here](https://github.com/RafaelGB/Obsidian-ZettelFlow/tree/main/WorkFlow%20Test)) by right-clicking on the file and selecting `ZettelFlow: Convert to step` (*On mobile, long press on the file and select the option*).
+
+## How to use
+The plugin offers a ribon Icon to open the note builder UI. (*You can also configure a hotkey to open it.*)
+
+The UI will show you the steps you can select to generate a new note.
+
+When you complete all the steps, the plugin will generate a new note with the content of the template files.
+
+## How it works
+With your `.canvas` file, the plugin creates a workflow that will be used to generate new notes. The workflow is a directed graph where the nodes are the template files and the edges are the steps. The plugin will use the workflow to generate the UI.
+
+## Step configuration
+The initial step will be a selection of all the nodes marked as `root`.
+
+### Step types
+They will be shown as a list of options to select from. The options are:
+
+- **Bridge**: By default, all new steps are `Bridge`. No action is triggered, just read the content and the properties of the file to build the final note.
+- **[Prompt](./steps/PromptStep.md)**
+- **[Selector](./steps/SelectorStep.md)**
+- **[Calendar](./steps/CalendarStep.md)**
 

docs/steps/CalendarStep.md

@@ -0,0 +1 @@
+# Calendar Action

docs/steps/PromptStep.md

@@ -0,0 +1 @@
+# Prompt Action

docs/steps/SelectorStep.md

@@ -0,0 +1 @@
+# Selector Action

manifest.json

@@ -1,7 +1,7 @@
 {
 	"id": "zettelflow",
 	"name": "ZettelFlow",
-	"version": "0.3.0",
+	"version": "0.4.0",
 	"minAppVersion": "1.3.5",
 	"description": "Helps you to create and manage your notes in a Zettelkasten way via Canvas.",
 	"author": "RafaelGB",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zettelflow",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A plugin for Obsidian that allows you to create and manage notes in a ZettelFlow-like way.",
   "main": "main.js",
   "scripts": {
@@ -17,7 +17,7 @@
   "devDependencies": {
     "@types/node": "20.8.2",
     "@types/react": "18.2.24",
-    "@types/react-dom": "18.2.8",
+    "@types/react-dom": "18.2.9",
     "@typescript-eslint/eslint-plugin": "6.7.4",
     "@typescript-eslint/parser": "6.7.4",
     "builtin-modules": "3.3.0",

src/components/SelectorDnD/SelectorDnD.tsx

@@ -59,9 +59,9 @@ export function SelectorDnD(props: SelectorDnDProps) {
     frontmatter: string,
     label: string
   ) => {
-    const newOptionsState = [...optionsState];
-    newOptionsState[index] = [frontmatter, label];
-    info.element.options = Object.fromEntries(newOptionsState);
+    optionsState[index] = [frontmatter, label];
+    setOptionsState(optionsState);
+    info.element.options = Object.fromEntries(optionsState);
   };
 
   const managerMemo = useMemo(() => {