Skip to content

Commit 7ff8b86

Browse files
asika32764asika32764
committed
Guide wip
1 parent 0fea95a commit 7ff8b86

File tree

6 files changed

+337
-3
lines changed

6 files changed

+337
-3
lines changed

‎.editorconfig

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
[*.md]
2+
ij_any_wrap_long_lines = true

‎.vitepress/config.mts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { defineConfig } from 'vitepress'
22
import { flatComponents, getComponentsSidebar } from './data/components';
3-
import { componentRoutePrefix } from './store/routing-store';
3+
import { guidesSidebar } from './data/guides';
4+
import { componentRoutePrefix, guideRoutePrefix } from './store/routing-store';
45

56
// https://vitepress.dev/reference/site-config
67
export default defineConfig({
@@ -34,7 +35,7 @@ export default defineConfig({
3435
{
3536
text: 'Documentations',
3637
items: [
37-
{ text: 'Guide', link: '#' },
38+
{ text: 'Guide', link: `/${guideRoutePrefix}/start/` },
3839
{ text: 'Framework', link: '#' },
3940
{ text: 'Components', link: `/${componentRoutePrefix}/` },
4041
]
@@ -45,7 +46,8 @@ export default defineConfig({
4546
],
4647

4748
sidebar: {
48-
[`/${componentRoutePrefix}`]: await getComponentsSidebar()
49+
[`/${guideRoutePrefix}`]: guidesSidebar.value,
50+
[`/${componentRoutePrefix}`]: await getComponentsSidebar(),
4951
},
5052

5153
// sidebar: [

‎.vitepress/data/guides.ts

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { DefaultTheme } from 'vitepress';
2+
import { computed } from 'vue';
3+
import { guideRoutePrefix } from '../store/routing-store';
4+
5+
export const guidesSidebar = computed<DefaultTheme.Sidebar>(() => {
6+
return [
7+
{
8+
text: 'Start',
9+
items: [
10+
{
11+
text: 'Installation',
12+
link: `/${guideRoutePrefix}/start/`
13+
}
14+
]
15+
},
16+
{
17+
text: 'MVC Basic',
18+
items: [
19+
{
20+
text: 'Getting Started',
21+
link: `/${guideRoutePrefix}/mvc/`
22+
}
23+
]
24+
}
25+
];
26+
});

‎.vitepress/store/routing-store.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export const documentationRoutePrefix = 'documentation';
2+
export const guideRoutePrefix = `${documentationRoutePrefix}/guides`;
23
export const componentRoutePrefix = `${documentationRoutePrefix}/components`;
34

‎documentation/guides/mvc/index.md

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
---
2+
layout: doc
3+
---
4+
5+
# Getting Started
6+
7+
## Start a New MVC
8+
9+
Run
10+
11+
```
12+
php windwalker g view Front/Sakura
13+
```
14+
15+
This will create a `src/Front/Sakura/SakuraView` file and a series of files.
16+
17+
Let's write something into the `prepare()` function.
18+
19+
```php
20+
<?php
21+
// src/Front/Sakura/SakuraView.php
22+
23+
// ...
24+
25+
class SakuraView implements ViewModelInterface
26+
{
27+
// ...
28+
29+
public function prepare(AppContext $app, View $view): array
30+
{
31+
// Add these lines
32+
$title = 'Sakura View';
33+
34+
return compact('title');
35+
}
36+
}
37+
38+
```
39+
40+
Then print out the variable in the template file.
41+
42+
```blade
43+
<?php // src/Module/Front/Sakura/views/sakura.blade.php ?>
44+
45+
@extends('global.body')
46+
47+
@section('content')
48+
<div class="container">
49+
<h2>{{ $title }}</h2>
50+
</div>
51+
@stop
52+
53+
```
54+
55+
Next, run the following command to create routing.
56+
57+
```shell
58+
php windwalker g route front/sakura
59+
```
60+
61+
Edit the file to add the route settings.
62+
63+
```php
64+
<?php
65+
// routes/front/sakura.route.php
66+
67+
use App\Module\Front\Sakura\SakuraView;
68+
69+
// ...
70+
71+
$router->group('sakura')
72+
->register(function (RouteCreator $router) {
73+
// Add this
74+
$router->any('sakura', '/sakura')
75+
->view(SakuraView::class);
76+
77+
});
78+
```
79+
80+
Next, open the following URL in the browser to see the view we create.
81+
82+
```
83+
http://{site}/www/sakura
84+
```
85+
86+
{image}
87+
88+
## Modify CSS Styles
89+
90+
Next, let's try modifying the assets/_sakura.scss in sakura. Add:
91+
92+
```scss
93+
// src/Module/Front/Sakura/assets/_sakura.scss
94+
95+
// Limit to this view only
96+
.view-sakura {
97+
h2 {
98+
color: red;
99+
}
100+
}
101+
102+
```
103+
104+
Next, run
105+
106+
```
107+
yarn build css
108+
```
109+
110+
After completion, you will see the style take effect.
111+
112+
{image}
113+
114+
In Windwalker 4, CSS is distributed in different MVC folders and will be integrated together during fusion compile.
115+
116+
## Modify JS
117+
118+
Similar to CSS, JS is also distributed in the MVC folders corresponding to the view name. Let's modify `sakura.ts`.
119+
120+
```ts
121+
// src/Module/Front/Sakura/assets/sakura.ts
122+
123+
console.log('Hello Sakura');
124+
125+
```
126+
127+
Then compile with fusion.
128+
129+
```
130+
yarn build js
131+
```
132+
133+
Refresh the page and open the browser console to see the result.
134+
135+
{image}
136+
137+
## Debug Mode
138+
139+
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.
140+
141+
The simplest way is to add /dev.php at the end of the website URL.
142+
143+
For example:
144+
- The URL: http://localhost/hello/www/sakura/list
145+
- Change to: http://localhost/hello/www/dev.php/sakura/list.
146+
147+
This will enter debug mode.
148+
149+
```adf
150+
{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1497,"id":"a82763dc-4800-48b0-a3f6-0728099aff46","collection":"contentId-1455685784","type":"file","height":768}}]}
151+
```
152+
153+
When an error occurs, it can also display complete error messages.
154+
155+
```adf
156+
{"type":"mediaSingle","attrs":{"layout":"center"},"content":[{"type":"media","attrs":{"width":1444,"id":"0195949a-bb89-464a-a05e-4335e51479cc","collection":"contentId-1455685784","type":"file","height":739}}]}
157+
```
158+
159+

‎documentation/guides/start/index.md

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
---
2+
layout: doc
3+
---
4+
5+
# Installation
6+
7+
## Requirement
8+
9+
- PHP 8.2 or above
10+
- Node 16up / npm or yarn
11+
- Composer and web server
12+
13+
## Starter Package
14+
15+
Go to https://github.com/ventoviro/windwalker-starter
16+
17+
Follow the instructions (replace {folder} with your installation directory)
18+
19+
```
20+
composer create-project windwalker/starter {folder} ^4.0 --remove-vcs
21+
```
22+
23+
After installing a series of dependencies, it will ask a few questions. Enter the database
24+
information as instructed. Then the installer will continue to install the CSS/JS
25+
dependencies.
26+
27+
This tutorial will use `pdo_mysql` as default.
28+
29+
```shell
30+
> Windwalker\Core\Composer\StarterInstaller::rootInstall
31+
App Name: WW Tutorial
32+
Remove .lock files from .gitignore.
33+
34+
Enter a custom secret [Leave empty to auto generate]:
35+
36+
Do you want to use database? [Y/n]: y
37+
Please select database drivers:
38+
[1] pdo_mysql
39+
[2] mysqli
40+
[3] pdo_pgsql
41+
[4] pgsql
42+
[5] pdo_sqlsrv
43+
[6] sqlsrv
44+
[7] pdo_sqlite
45+
> 1
46+
Selected driver: pdo_mysql
47+
Database host [localhost]:
48+
Database name [acme]: ww4tut
49+
Database user [root]:
50+
Database password:
51+
52+
53+
Database config setting complete.
54+
55+
Install complete.
56+
> php windwalker run prepare
57+
58+
Start Custom Script: prepare
59+
---------------------------------------
60+
>>> yarn install
61+
```
62+
63+
After the installation is complete, open the localhost URL:
64+
65+
```
66+
http://localhost/{site}/www
67+
```
68+
69+
or start the php server:
70+
71+
```shell
72+
php windwalker server:start
73+
```
74+
75+
Then open http://localhost:8000 to see the homepage.
76+
77+
### Install Default Database Files
78+
79+
If you want to use database, please install `windwalker/database` and `windwalker/orm` first:
80+
81+
```shell
82+
composer require windwalker/database windwalker/orm
83+
```
84+
85+
Then run migration (add `-s` to run seeder)
86+
87+
```shell
88+
php windwalker mig:go -s
89+
```
90+
91+
It will ask if you really want to run migration/seeding.
92+
93+
```shell
94+
Do you really want to run migration/seeding?: [N/y] y
95+
```
96+
97+
If you don't want to be asked this question again and want to run it directly, you can add `-f` to
98+
future migration commands.
99+
100+
After execution:
101+
102+
```shell
103+
$ php windwalker mig:go -s
104+
Do you really want to run migration/seeding?: [N/y] y
105+
106+
Backing up SQL...
107+
SQL backup to: ...
108+
109+
110+
Migration start...
111+
==================
112+
113+
2021061915530001 AcmeInit UP... Success
114+
115+
Completed.
116+
117+
118+
Seeding...
119+
==========
120+
121+
Import seeder: Acme Seeder (/acme-seeder.php)
122+
(15) \
123+
Import completed...
124+
```
125+
126+
Open the project URL `http://{site}/www/admin/acme`, and if you see the following list, it means
127+
success.
128+
129+
{image}
130+
131+
## Directory Structures
132+
133+
| **Directory** | **Purpose** |
134+
|---------------|------------------------------------------------------------------------------|
135+
| cache | Cache directory |
136+
| etc | Configuration files |
137+
| logs | Log files |
138+
| resources | Various resource files- assets / languages / migrations / registry / seeders |
139+
| routes | Route configuration files |
140+
| src | Project code files |
141+
| tmp | Temporary files |
142+
| vendor | External libraries |
143+
| views | Template files |
144+
| www | Public directory |

0 commit comments

Comments
 (0)