update docs 📚

Author: Freymaurer

README.md

@@ -1,10 +1,10 @@
-# Feliz [![Nuget](https://img.shields.io/nuget/v/Feliz.svg?maxAge=0&colorB=brightgreen)](https://www.nuget.org/packages/Feliz) [![Build status](https://ci.appveyor.com/api/projects/status/yqinhayy1pgfcubp/branch/master?svg=true)](https://ci.appveyor.com/project/Zaid-Ajaj/feliz/branch/master)
+# Feliz [![Nuget](https://img.shields.io/nuget/v/Feliz.svg?maxAge=0&colorB=brightgreen)](https://www.nuget.org/packages/Feliz)
 
 A fresh retake of the React API in Fable, optimized for happiness.
 
 Here is how it looks like:
 
-```fs
+```fsharp
 module App
 
 open Feliz
@@ -30,32 +30,37 @@ let Counter() =
 
 open Browser.Dom
 
-let root = ReactDOM.createRoot(document.getElementById "root")
-root.render(Counter())
+let root = ReactDOM.createRoot (document.getElementById "root")
+root.render (Counter())
 ```
 
-### Features
+### ✨ Features
 
- - Consistent, lightweight **formatting**: no more awkward indentation using two lists for every element.
+ - Flexible **API design**: Combine the reliability of F# type safety with the flexibility to interop easily with native JavaScript.
  - Discoverable **attributes** with no more functions, `Html` attributes or css properties globally available so they are easy to find.
  - Proper **documentation**: each attribute and CSS property
  - Full **React API** support: Feliz aims to support the React API for building components using hooks, context and more.
  - Fully **Type-safe**: no more `Margin of obj` but instead utilizing a plethora of overloaded functions to account for the overloaded nature of `CSS` attributes, covering 90%+ of the CSS styles, values and properties.
- - Included **color list** of most commonly used `Html` colors in the `colors` module.
- - **Compatible** with the current React DSL used in applications.
  - **Compatible** with [Femto](https://github.com/Zaid-Ajaj/Femto).
  - Approximately **Zero** bundle size increase where everything function body is erased from the generated javascript unless you actually use said function.
 
-### Quick Start
+### 🚀 Quick Start
 
-```
+```bash
+# install the template (if you haven't already)
 dotnet new -i Feliz.Template
+# create a new Feliz project from the installed template
 dotnet new feliz -n MyProject
+# navigate to the created project folder
 cd MyProject
+# install the npm dependencies
 npm install
+# install .NET tools
+dotnet tool restore
+# start the development server
 npm start
 ```
 
-### Documentation
+### 📚 Documentation
 
-Feliz has extensive documentation at [https://zaid-ajaj.github.io/Feliz](https://zaid-ajaj.github.io/Feliz) with live examples along side code samples, check them out and if you have any question, let us know!
+Feliz has extensive documentation at [https://zaid-ajaj.github.io/Feliz](https://zaid-ajaj.github.io/Feliz) with live examples along side code samples, check them out and if you have any question, let us know!

docs/docs/README.md

@@ -4,10 +4,6 @@ displayed_sidebar: docsSidebar
 sidebar_position: 0
 ---
 
-:::info
-This site is still WIP for this release!
-:::
-
 # Feliz [![Nuget](https://img.shields.io/nuget/v/Feliz.svg?maxAge=0&colorB=brightgreen)](https://www.nuget.org/packages/Feliz)
 
 A fresh retake of the base React DSL to build React applications, optimized for happiness.
@@ -46,12 +42,10 @@ root.render (Counter())
 
 ### Features
 
- - Consistent, lightweight **formatting**: no more awkward indentation using two lists for every element.
+ - Flexible **API design**: Combine the reliability of F# type safety with the flexibility to interop easily with native JavaScript.
  - Discoverable **attributes** with no more functions, `Html` attributes or css properties globally available so they are easy to find.
  - Proper **documentation**: each attribute and CSS property
  - Full **React API** support: Feliz aims to support the React API for building components using hooks, context and more.
  - Fully **Type-safe**: no more `Margin of obj` but instead utilizing a plethora of overloaded functions to account for the overloaded nature of `CSS` attributes, covering 90%+ of the CSS styles, values and properties.
- - Included **color list** of most commonly used `Html` colors in the `colors` module.
- - **Compatible** with the current DSL used in applications.
  - **Compatible** with [Femto](https://github.com/Zaid-Ajaj/Femto).
  - Approximately **Zero** bundle size increase where everything function body is erased from the generated javascript unless you actually use said function.

docs/docs/api-docs/Contributing.md

@@ -3,13 +3,91 @@ title: Contributing
 sidebar_position: 10
 ---
 
+# Contributing
+
+If you are enjoying the Feliz project, consider contributing back and helping out with the community. There are many ways you can contribute, the first of which is to simply use Feliz in your project and report issues you come across whether there are missing style properties or properties that were incorrectly implemeneted.
+
+# I want to contribute! What should i do?
+
+Thats awesome! There are many ways you can contribute to the Feliz project:
+
+1. 🏷️ Start by creating an issue of your planned changes. This allows us to discuss the changes before you start working on them and ensure that they are aligned with the project goals.
+2. 🛠️ Fork the repository and create a new branch for your changes.
+    - Check out the section below to find the most important instructions for setting up your development environment.
+3. ✨ Make your changes and ensure that you follow the coding style and conventions used in the project. (Styling should be automatically applied by Fantomas if you use VS Code with Ionide)
+4. ✅ Write tests for your changes to ensure that they work as expected and do not introduce any regressions.
+5. 📚 Document your changes! 
+    - Every Feliz-.fsproj has a related "CHANGELOG" file. Add your changes following the instructions inside the file!
+    - Write/Update documentation under `./docs`!
+6. 📄 Create a pull request with a clear description of your changes and the issue it addresses.
+
+---
+
+# Setting up your development environment
+
+## Requirements
+
+1. [.NET SDK 8.0 or later](https://dotnet.microsoft.com/en-us/download)
+2. [Node.js 20 or later](https://nodejs.org/)
+
+## Setup
+
+1. Clone the repository
+2. Install dependencies: `dotnet run --project ./build/Build.fsproj setup`.
+
+    <details>
+
+    <summary>Alternatively, you can manually install the dependencies:</summary>
+
+      - NPM dependencies:
+
+        ```bash
+        npm install
+        ```
+
+      - .NET dependencies:
+
+        ```bash
+        dotnet restore
+        ```
+
+      - .NET tools:
+
+        ```bash
+        dotnet tool restore
+        ``` 
+
+    </details>
+
+3. Verify correct setup by running the tests `dotnet run --project ./build/Build.fsproj test`
+4. Ready! 🎉 
+
+
+# Workflows
+
+Feliz uses a f# build project to run common tasks such as testing. You can find the entrypoint for the build project under `./build/Build.fsproj`.
+
 :::info
-This site is still WIP for this release!
+- **On Windows** you can also use `.\build.cmd` to run the build tasks instead of `dotnet run --project ./build/Build.fsproj`.
+- **On MacOS/Linux** you can also use `./build.sh` to run the build tasks instead of `dotnet run --project ./build/Build.fsproj`.
 :::
 
-# Contributing
+## Testing
 
-If you are enjoying the Feliz project, consider contributing back and helping out with the community. There are many ways you can contribute, the first of which is to simply use Feliz in your project and report issues you come across whether there are missing style properties or properties that were incorrectly implemeneted.
+```bash
+dotnet run --project ./build/Build.fsproj test
+```
+
+## Run docs
+
+1. Go into docs folder:
+
+    ```bash
+    cd docs
+    ```
+
+2. Start docs server:
 
-### More documentation and samples
-You can also contribute to the documentation of the Feliz and it's ecosystem: creating sample code with live examples is really appreciated as it helps test out the library and creates a greate reference for using it.
+    ```bash
+    npm run start
+    ```

docs/docs/ecosystem/01_Tools/Fable.mdx

@@ -0,0 +1,16 @@
+---
+hide_title: true
+---
+
+import MarkdownFetcher from '@site/src/components/MarkdownFetcher';
+
+<MarkdownFetcher 
+  mdSource='https://raw.githubusercontent.com/fable-compiler/Fable/refs/heads/main/README.md'
+  name='Fable'
+  github='https://github.com/fable-compiler/Fable'
+  docs='https://fable.io/'
+  nuget='https://www.nuget.org/packages/Fable/'
+  children={<>
+  The driving force behind F# web development. Fable is an F# to JavaScript/TypeScript compiler that allows you to write client-side code in F#. While beeing able to interoperate with the vast JavaScript ecosystem, you also get to leverage F#'s powerful type system and functional programming features to build robust and maintainable web applications.
+  </>}
+/>

docs/docs/ecosystem/01_Tools/Fantomas.mdx

@@ -0,0 +1,16 @@
+---
+hide_title: true
+---
+
+import MarkdownFetcher from '@site/src/components/MarkdownFetcher';
+
+<MarkdownFetcher 
+  mdSource='https://raw.githubusercontent.com/fsprojects/fantomas/refs/heads/main/README.md'
+  name='Fantomas'
+  github='https://github.com/fsprojects/fantomas'
+  docs='https://fsprojects.github.io/fantomas/'
+  nuget='https://www.nuget.org/packages/fantomas/'
+  children={<>
+  Fantomas is a popular and customizable code formatter for F#. If you use VS Code, you can make it format your file on save with the Ionide extension. Make sure all files automatically conform to a consistent style.
+  </>}
+/>

docs/docs/ecosystem/Tools/Femto.mdx docs/docs/ecosystem/01_Tools/Femto.mdxdocs/docs/ecosystem/Tools/Femto.mdx renamed to docs/docs/ecosystem/01_Tools/Femto.mdx

@@ -10,4 +10,9 @@ import MarkdownFetcher from '@site/src/components/MarkdownFetcher';
   github='https://github.com/Zaid-Ajaj/Femto'
   docs='https://github.com/Zaid-Ajaj/Femto?tab=readme-ov-file#femto--'
   nuget='https://www.nuget.org/packages/Femto'
+  children={<>
+  Femto is a command-line tool for synchronizing F# and JavaScript dependencies.
+It scans a Fable project, detects which npm packages are required, and installs or updates them automatically.
+It supports multiple package managers, including npm, yarn, pnpm, and poetry, and helps keep F#/.NET and JavaScript dependencies consistent.
+  </>}
 />