Guide wip

.editorconfig

@@ -0,0 +1,2 @@
+[*.md]
+ij_any_wrap_long_lines = true

.vitepress/config.mts

@@ -1,6 +1,7 @@
 import { defineConfig } from 'vitepress'
 import { flatComponents, getComponentsSidebar } from './data/components';
-import { componentRoutePrefix } from './store/routing-store';
+import { guidesSidebar } from './data/guides';
+import { componentRoutePrefix, guideRoutePrefix } from './store/routing-store';
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -34,7 +35,7 @@ export default defineConfig({
       {
         text: 'Documentations',
         items: [
-          { text: 'Guide', link: '#' },
+          { text: 'Guide', link: `/${guideRoutePrefix}/start/` },
           { text: 'Framework', link: '#' },
           { text: 'Components', link: `/${componentRoutePrefix}/` },
         ]
@@ -45,7 +46,8 @@ export default defineConfig({
     ],
 
     sidebar: {
-      [`/${componentRoutePrefix}`]: await getComponentsSidebar()
+      [`/${guideRoutePrefix}`]: guidesSidebar.value,
+      [`/${componentRoutePrefix}`]: await getComponentsSidebar(),
     },
 
     // sidebar: [

.vitepress/data/guides.ts

@@ -0,0 +1,26 @@
+import { DefaultTheme } from 'vitepress';
+import { computed } from 'vue';
+import { guideRoutePrefix } from '../store/routing-store';
+
+export const guidesSidebar = computed<DefaultTheme.Sidebar>(() => {
+  return [
+    {
+      text: 'Start',
+      items: [
+        {
+          text: 'Installation',
+          link: `/${guideRoutePrefix}/start/`
+        }
+      ]
+    },
+    {
+      text: 'MVC Basic',
+      items: [
+        {
+          text: 'Getting Started',
+          link: `/${guideRoutePrefix}/mvc/`
+        }
+      ]
+    }
+  ];
+});

.vitepress/store/routing-store.ts

@@ -1,3 +1,4 @@
 export const documentationRoutePrefix = 'documentation';
+export const guideRoutePrefix = `${documentationRoutePrefix}/guides`;
 export const componentRoutePrefix = `${documentationRoutePrefix}/components`;
 

documentation/guides/mvc/index.md

@@ -0,0 +1,159 @@
+---
+layout: doc
+---
+
+# Getting Started
+
+## Start a New MVC
+
+Run
+
+``` 
+php windwalker g view Front/Sakura
+```
+
+This will create a `src/Front/Sakura/SakuraView` file and a series of files.
+
+Let's write something into the `prepare()` function.
+
+```php 
+<?php
+// src/Front/Sakura/SakuraView.php
+
+// ...
+
+class SakuraView implements ViewModelInterface
+{
+    // ...
+
+    public function prepare(AppContext $app, View $view): array
+    {
+        // Add these lines
+        $title = 'Sakura View';
+
+        return compact('title');
+    }
+}
+
+```
+
+Then print out the variable in the template file.
+
+```blade
+<?php // src/Module/Front/Sakura/views/sakura.blade.php ?>
+
+@extends('global.body')
+
+@section('content')
+    <div class="container">
+        <h2>{{ $title }}</h2>
+    </div>
+@stop
+
+```
+
+Next, run the following command to create routing.
+
+```shell
+php windwalker g route front/sakura
+```
+
+Edit the file to add the route settings.
+
+```php 
+<?php
+// routes/front/sakura.route.php
+
+use App\Module\Front\Sakura\SakuraView;
+
+// ...
+
+$router->group('sakura')
+    ->register(function (RouteCreator $router) {
+        // Add this
+        $router->any('sakura', '/sakura')
+            ->view(SakuraView::class);
+
+    });
+```
+
+Next, open the following URL in the browser to see the view we create.
+
+``` 
+http://{site}/www/sakura
+```
+
+{image}
+
+## Modify CSS Styles
+
+Next, let's try modifying the assets/_sakura.scss in sakura. Add:
+
+```scss
+// src/Module/Front/Sakura/assets/_sakura.scss
+
+// Limit to this view only
+.view-sakura {
+  h2 {
+    color: red;
+  }
+}
+
+```
+
+Next, run
+
+``` 
+yarn build css
+```
+
+After completion, you will see the style take effect.
+
+{image}
+
+In Windwalker 4, CSS is distributed in different MVC folders and will be integrated together during fusion compile.
+
+## Modify JS
+
+Similar to CSS, JS is also distributed in the MVC folders corresponding to the view name. Let's modify `sakura.ts`.
+
+```ts
+// src/Module/Front/Sakura/assets/sakura.ts
+
+console.log('Hello Sakura');
+
+```
+
+Then compile with fusion.
+
+``` 
+yarn build js
+```
+
+Refresh the page and open the browser console to see the result.
+
+{image}
+
+## Debug Mode
+
+If you need to enter debug mode, such as viewing DB Queries, complete error messages, or want to prevent CSS/JS caching, you can enter debug mode.
+
+The simplest way is to add /dev.php at the end of the website URL.
+
+For example: 
+- The URL: http://localhost/hello/www/sakura/list 
+- Change to: http://localhost/hello/www/dev.php/sakura/list.
+
+This will enter debug mode.
+
+```adf 
+{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1497,"id":"a82763dc-4800-48b0-a3f6-0728099aff46","collection":"contentId-1455685784","type":"file","height":768}}]}
+```
+
+When an error occurs, it can also display complete error messages.
+
+```adf 
+{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1444,"id":"0195949a-bb89-464a-a05e-4335e51479cc","collection":"contentId-1455685784","type":"file","height":739}}]}
+```
+
+

documentation/guides/start/index.md

@@ -0,0 +1,144 @@
+---
+layout: doc
+---
+
+# Installation
+
+## Requirement
+
+- PHP 8.2 or above
+- Node 16up / npm or yarn
+- Composer and web server
+
+## Starter Package
+
+Go to https://github.com/ventoviro/windwalker-starter
+
+Follow the instructions (replace {folder} with your installation directory)
+
+``` 
+composer create-project windwalker/starter {folder} ^4.0 --remove-vcs
+```
+
+After installing a series of dependencies, it will ask a few questions. Enter the database
+information as instructed. Then the installer will continue to install the CSS/JS
+dependencies.
+
+This tutorial will use `pdo_mysql` as default.
+
+```shell
+> Windwalker\Core\Composer\StarterInstaller::rootInstall
+App Name: WW Tutorial
+Remove .lock files from .gitignore.
+
+Enter a custom secret [Leave empty to auto generate]:
+
+Do you want to use database? [Y/n]: y
+Please select database drivers:
+  [1] pdo_mysql
+  [2] mysqli
+  [3] pdo_pgsql
+  [4] pgsql
+  [5] pdo_sqlsrv
+  [6] sqlsrv
+  [7] pdo_sqlite
+> 1
+Selected driver: pdo_mysql
+Database host [localhost]:
+Database name [acme]: ww4tut
+Database user [root]:
+Database password:
+
+
+Database config setting complete.
+
+Install complete.
+> php windwalker run prepare
+
+Start Custom Script: prepare
+---------------------------------------
+>>> yarn install
+```
+
+After the installation is complete, open the localhost URL:
+
+```
+http://localhost/{site}/www
+```
+
+or start the php server:
+
+```shell
+php windwalker server:start
+```
+
+Then open http://localhost:8000 to see the homepage.
+
+### Install Default Database Files
+
+If you want to use database, please install `windwalker/database` and `windwalker/orm` first:
+
+```shell
+composer require windwalker/database windwalker/orm
+```
+
+Then run migration (add `-s` to run seeder)
+
+```shell
+php windwalker mig:go -s
+```
+
+It will ask if you really want to run migration/seeding.
+
+```shell
+Do you really want to run migration/seeding?: [N/y] y
+```
+
+If you don't want to be asked this question again and want to run it directly, you can add `-f` to
+future migration commands.
+
+After execution:
+
+```shell
+$ php windwalker mig:go -s
+Do you really want to run migration/seeding?: [N/y] y
+
+Backing up SQL...
+SQL backup to: ...
+
+
+Migration start...
+==================
+
+2021061915530001 AcmeInit UP... Success
+
+Completed.
+
+
+Seeding...
+==========
+
+Import seeder: Acme Seeder (/acme-seeder.php)
+  (15) \
+  Import completed...
+```
+
+Open the project URL `http://{site}/www/admin/acme`, and if you see the following list, it means
+success.
+
+{image}
+
+## Directory Structures
+
+| **Directory** | **Purpose**                                                                  |
+|---------------|------------------------------------------------------------------------------|
+| cache         | Cache directory                                                              |
+| etc           | Configuration files                                                          |
+| logs          | Log files                                                                    |
+| resources     | Various resource files- assets / languages / migrations / registry / seeders |
+| routes        | Route configuration files                                                    |
+| src           | Project code files                                                           |
+| tmp           | Temporary files                                                              |
+| vendor        | External libraries                                                           |
+| views         | Template files                                                               |
+| www           | Public directory                                                             |