docs simplifications

Author: ivictbor

adminforth/documentation/docs/tutorial/001-gettingStarted.md

@@ -45,15 +45,16 @@ npx adminforth create-app
 CLI options:
 
 * **`--app-name`** - name for your project. Used in `package.json`, `index.ts` branding, etc. Default value: **`adminforth-app`**.
-* **`--db`** - database connection string. Currently PostgreSQL, MongoDB and SQLite are supported. Default value: **`sqlite://.db.sqlite`**
+* **`--db`** - database connection string. Currently PostgreSQL, MongoDB, SQLite, Clickhouse are supported. Default value: **`sqlite://.db.sqlite`**
 
 > ☝️ Database Connection String format:
 >
-> Format is `<scheme>://<username>:<password>@<host>:<port>/<database>`
+> Format is `<scheme>://<username>:<password>@<host>:<port>/<database>`. Examples:
 >
-> For SQLite, you can use `sqlite://.db.sqlite`. If database not yet exists it will be created.
-> For PostgreSQL — `postgres://user:password@localhost:5432/dbname`.
-> For MongoDB — `mongodb://localhost:27017/dbname`.
+> - SQLite — `sqlite://.db.sqlite`. If database not yet exists it will be created
+> - PostgreSQL — `postgres://user:password@localhost:5432/dbname`
+> - MongoDB — `mongodb://localhost:27017/dbname`
+> - Clickhouse — `clickhouse://localhost:8123/dbname`
 
 ### Understand the generated Project Structure
 
@@ -97,6 +98,19 @@ npm run makemigration -- --name <name_of_changes>
 
 Other developers need to pull migration and run `npm run migrate` to apply any unapplied migrations.
 
+## Run the Server
+
+Now you can run your app:
+
+```bash
+npm start
+```
+
+Open http://localhost:3500 in your browser and (default credentials are `adminforth`/`adminforth` if you haven’t changed them).
+
+![alt text](localhost_3500_login.png)
+
+
 ## AdminForth Basic Philosophy
 
 AdminForth connects to existing databases and provides a back-office for managing data including CRUD operations, filtering, sorting, and more.
@@ -113,6 +127,8 @@ Also in AdminForth you can define in "Vue" way:
 * create own pages e.g. Dashboard using AdminForth Components Library (AFCL) or any other Vue componetns.
 * insert injections into standard pages (e.g. add diagram to list view)
 
+
+
 ## Adding an `apartments` Model
 
 So far, our freshly generated AdminForth project includes a default `adminuser` model and a corresponding `users` resource. 
@@ -355,19 +371,7 @@ export const admin = new AdminForth({
 
 ```
 
-## Run the Server
-
-Now you can run your app:
-
-```bash
-npm start
-```
-
-Open http://localhost:3500 in your browser and (default credentials are `adminforth`/`adminforth` if you haven’t changed them).
-
-![alt text](localhost_3500_login.png)
-
-## Generating fake records
+## Generating fake appartments 
 
 ```ts title="./index.ts"
 //diff-add
@@ -430,6 +434,3 @@ This will create records during first launch. Now you should see:
 
 Feel free to play with the data, add more fields, and customize the UI to your liking.
 
-## Possible configuration options
-
-Check [AdminForthConfig](/docs/api/types/Back/interfaces/AdminForthConfig.md) for all possible options.

adminforth/documentation/docs/tutorial/01-helloWorld.md

@@ -6,7 +6,9 @@ sidebar_class_name: hidden-sidebar
 
 # Hello world app without CLI
 
-No water. Pure code to get started ASAP.
+While AdminForth CLI is the fastest way to create a new project, you can also create a new project manually. 
+
+This might help you better understand how AdminForth project is structured and how to customize it.
 
 Here we create database with users and posts tables and admin panel for it. 
 
@@ -305,6 +307,36 @@ Open http://localhost:3500 in your browser and login with credentials `adminfort
 ![alt text](localhost_3500_login.png)
 
 
+## Initializing custom directory
+
+If you are not using CLI, you can create `custom` directory and initialize it with `npm`:
+
+```bash
+cd ./custom
+npm init -y
+```
+
+Also, for better development experience we recommend to create file `custom/tsconfig.json` with the following content:
+ 
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "../node_modules/adminforth/dist/spa/src/*"
+      ],
+      "*": [
+        "../node_modules/adminforth/dist/spa/node_modules/*"
+      ],
+      "@@/*": [
+        "."
+      ]
+    }
+  }
+}
+```
+
 
 ## Possible configuration options
 

adminforth/documentation/docs/tutorial/03-Customization/02-customFieldRendering.md

@@ -143,33 +143,12 @@ const props = defineProps<{
 </script>
 ```
 
-## Using 3rd-party npm packages in the components
+## Using 3rd-party npm packages in the Vue components
 
 To install 3rd-party npm packages you should create npm package in the `custom` directory:
 
 ```bash
 cd custom
-npm init -y
-```
-
-> 👆 Note: for better development experience we recommend to create file `custom/tsconfig.json` with the following content:
-> ```json
-> {
->   "compilerOptions": {
->     "baseUrl": ".",
->     "paths": {
->       "@/*": [
->         "../node_modules/adminforth/dist/spa/src/*"
->       ],
->       "*": [
->         "../node_modules/adminforth/dist/spa/node_modules/*"
->       ],
->       "@@/*": [
->         "."
->       ]
->     }
->   }
-> }
 ```
 
 And simply do `npm install` for the package you need:

adminforth/documentation/docs/tutorial/03-Customization/06-customPages.md

@@ -4,33 +4,6 @@ Most Admin Panels should have some Dashboards or custom pages.
 
 In AdminForth creation of custom page is very simple.
 
-To add custom package to SPA bundle you have to initialize npm in `custom` directory and install required packages:
-
-```bash
-cd ./custom
-npm init -y
-npm i apexcharts -D
-```
-
-> 👆 Note: for better development experience we recommend to create file `custom/tsconfig.json` with the following content:
-> ```json
-> {
->   "compilerOptions": {
->     "baseUrl": ".",
->     "paths": {
->       "@/*": [
->         "../node_modules/adminforth/dist/spa/src/*"
->       ],
->       "*": [
->         "../node_modules/adminforth/dist/spa/node_modules/*"
->       ],
->       "@@/*": [
->         "."
->       ]
->     }
->   }
-> }
-> ```
 
 Create a Vue component in the `custom` directory of your project, e.g. `Dashboard.vue`:
 

adminforth/documentation/docs/tutorial/03-Customization/08-pageInjections.md

@@ -136,11 +136,6 @@ onMounted(async () => {
 </script>
 ```
 
-Then initialize npm in `custom` directory if you didn't do this and install required packages:
-```bash
-npm init -y
-npm i apexcharts -D
-```
 
 Also we have to add an Api to get percentages:
 
@@ -316,8 +311,7 @@ For this demo we will use text-analyzer package:
 
 ```bash 
 cd custom
-npm init -y
-npm install text-analyzer --save
+npm i text-analyzer
 ```
 
 

adminforth/documentation/docusaurus.config.ts

@@ -2,8 +2,6 @@ import {themes as prismThemes} from 'prism-react-renderer';
 import type {Config} from '@docusaurus/types';
 import type * as Preset from '@docusaurus/preset-classic';
 
-console.log('⭐⭐⭐⭐⭐⭐⭐⭐', process.env.NODE_ENV)
-
 
 const config: Config = {
   title: 'Vue & Node admin panel framework',