diff --git a/src/docs/frontend/bareui.md b/src/docs/frontend/bareui.md index 5152d2fe..e2435ff9 100644 --- a/src/docs/frontend/bareui.md +++ b/src/docs/frontend/bareui.md @@ -39,18 +39,18 @@ composer require leafs/bareui ::: -Once installed, BareUI will be available in your Leaf app on the `bareui()` method. This makes it easy to use BareUI from anywhere in your app. +Once installed, BareUI will be available in your Leaf app on the `template()` method. This makes it easy to use BareUI from anywhere in your app. -```php -app()->bareui()->render('welcome'); +```php:no-line-numbers +app()->template()->render('welcome'); ``` ## Configuring BareUI BareUI doesn't require any real configuration to work, but you need to tell it where to look for your templates. You can do this using the `config()` method. If you are using Leaf MVC, this has already been done for you in the `config/view.php` file, so you can skip this step. -```php -app()->bareui()->config('path', './views'); +```php:no-line-numbers +app()->template()->config('path', './views'); ``` This will tell BareUI to look for templates in the `views` directory in your project. Now that BareUI knows where to look for templates, you can start writing your templates. @@ -82,8 +82,8 @@ BareUI templates are regular PHP files, so you can create your templates using P Once you have your template, you can render it using the `render` method. This method takes in the name of the template to render and an array of data to pass to the template. -```php -echo app()->bareui()->render('welcome'); +```php:no-line-numbers +echo app()->template()->render('welcome'); ``` When rendering a template, you don't need to include the `.view.php` extension in the template name. BareUI automatically adds it for you when it looks for the template file. So, you only need to pass the name of the template without the extension, and BareUI will handle the rest! @@ -118,7 +118,7 @@ This is an empty HTML page with a PHP tag that echoes a variable. On its own, th To pass data to this `$name` variable, you can pass an array of data as the second argument to the `render()` method. This array should contain the same keys as the variables you want to use in the template. ```php -echo app()->bareui()->render('welcome', [ +echo app()->template()->render('welcome', [ 'name' => 'Something', ]); ``` @@ -126,7 +126,7 @@ echo app()->bareui()->render('welcome', [ This will render the template and replace the `$name` variable with the value `'Something'`. You can pass as many variables as you want to the template, and they will all be available in the template file. These values can be anything from strings to arrays, objects, or even functions. ```php [app.php] -echo app()->template->render('products', [ +echo app()->template()->render('products', [ 'items' => [ ['name' => 'Item 1'], ['name' => 'Item 2'], @@ -197,7 +197,7 @@ BareUI supports all the control structures you'd expect in a templating engine. As you guessed, any valid PHP code can be used in BareUI templates. This means you can use any PHP function, class, or method in your templates. This makes BareUI a powerful templating engine that can handle any task you throw at it. -## Sub-templates +## Sub-templates/Partials Sub-templates are templates that are included in other templates. This allows you to break your templates into smaller, more manageable pieces that can be reused across multiple templates. This is a great way to keep your templates DRY and avoid repeating yourself. diff --git a/src/docs/frontend/blade.md b/src/docs/frontend/blade.md index 87bbb1d2..d0644260 100644 --- a/src/docs/frontend/blade.md +++ b/src/docs/frontend/blade.md @@ -25,9 +25,13 @@ This video by The Net Ninja will help you get started with blade. ## Setting Up -Blade comes with Leaf MVC out of the box, fully configured and ready to use. However, if you're using Leaf Core, you'll need to set up Blade yourself. Don't worry, it's pretty easy. All you need to do is install Blade, configure it to match your project's setup, and you're good to go. +::: info Blade + Leaf MVC -You can install Leaf Blade with the Leaf CLI: +Blade comes with Leaf MVC out of the box, fully configured and ready to use. However, if you're using Leaf Core, you'll need to set up Blade yourself. + +::: + +You can install Leaf Blade using the Leaf CLI: ::: code-group @@ -43,7 +47,7 @@ composer require leafs/blade After this, you just need to inform Leaf of Blade's existence: -```php +```php:no-line-numbers app()->attachView(Leaf\Blade::class); ``` @@ -87,7 +91,7 @@ This should look pretty familiar if you know HTML (of course you do). The only d Remember we set up Blade earlier? Now we can use it to render our Blade views. Here's how you can render the `hello.blade.php` view we created earlier: -```php +```php:no-line-numbers echo app()->blade()->render('hello', ['name' => 'Michael']); ``` @@ -105,7 +109,7 @@ app()->blade()->directive('datetime', function ($expression) { Which allows you to use the following in your blade template: -```html +```blade:no-line-numbers Current date: @datetime($date) ``` diff --git a/src/docs/frontend/tailwind.md b/src/docs/frontend/tailwind.md index 5b25a139..4d70ba56 100644 --- a/src/docs/frontend/tailwind.md +++ b/src/docs/frontend/tailwind.md @@ -103,6 +103,22 @@ That's it! You now have Tailwind CSS set up in your Leaf project. You can start Be sure to start your vite server by running: -```bash:no-line-numbers -npm run dev +::: code-group + +```bash:no-line-numbers [Leaf CLI] +leaf view:dev +``` + +```bash:no-line-numbers [npm] +npm i && npm run dev ``` + +```bash:no-line-numbers [pnpm] +pnpm i && pnpm run dev +``` + +```bash:no-line-numbers [yarn] +yarn && yarn dev +``` + +::: diff --git a/src/docs/frontend/third-party.md b/src/docs/frontend/third-party.md index ccc4411b..f6bfeb6d 100644 --- a/src/docs/frontend/third-party.md +++ b/src/docs/frontend/third-party.md @@ -20,7 +20,7 @@ composer require smarty/smarty Once installed, you need to tell Leaf about your engine. Leaf will try to cache your engine for future use. You can do this using the `attachView()` method on the app instance: -```php +```php:no-line-numbers app()->attachView(Smarty::class); ``` @@ -48,7 +48,7 @@ Unlike Leaf Core, Leaf MVC comes with a view manager that makes Leaf aware of an The first step is to head over to your `public/index.php` file and attach Smarty to Leaf: -```php +```php:no-line-numbers app()->attachView(Smarty::class); ``` diff --git a/src/docs/frontend/vite.md b/src/docs/frontend/vite.md index 7b7ac8a0..09fc8b50 100644 --- a/src/docs/frontend/vite.md +++ b/src/docs/frontend/vite.md @@ -73,16 +73,32 @@ Once you've installed Vite, you can start loading your assets using the the `vit Here's an example of how you can load a CSS file: -```php +::: code-group + +```blade:no-line-numbers [Blade] +{{ vite('css/app.css') }} +``` + +```php:no-line-numbers [BareUI] ``` +::: + You can also load multiple assets at once by passing in an array of assets: -```php +::: code-group + +```blade:no-line-numbers [Blade] +{{ vite(['app.css', 'app.js']) }} +``` + +```php:no-line-numbers [BareUI] ``` +::: + The `vite()` helper function will automatically load the correct assets depending on the environment. In development, it will load the assets from the vite server with Hot Module Replacement, while in production, it will load the assets from the build folder. ## Vite Config @@ -108,7 +124,7 @@ export default defineConfig({ The Leaf Vite plugin requires an array of entry points for your application. These may be JavaScript or CSS files, and include preprocessed languages such as TypeScript, JSX, and Sass. You don't need to pass all your assets here, just the entry points. -Besides the Vite config file, you can also configure the server component for Vite. With this, you can set a couple of defaults for your assets. +Besides the Vite config file, you can also configure the server component to set a few defaults for Vite. This is is only necessary if you are NOT using Leaf MVC. You can configure the server component by calling the `config` method on the `Vite` class: ```php \Leaf\Vite::config([ @@ -119,11 +135,9 @@ Besides the Vite config file, you can also configure the server component for Vi Unlike the `vite.config.js` file, this configuration is done in PHP and is completely optional. -Once again if you're using Leaf MVC or if you installed Vite using the `view:install` command, this is done for you automatically. - ## Running Vite -Vite comes with a development server that you can use to serve your assets. This is true for the Leaf Vite integration as well. This is a bit different from the traditional way of serving assets with PHP because you need to run a separate server for your assets. You can start your Vite server by running: +Vite comes with a development server that you can use to serve your frontend assets. This is a bit different from the traditional way of serving assets with PHP because you need to run a separate server for your assets. You can start your Vite server by running: ::: code-group @@ -147,6 +161,8 @@ yarn && yarn dev This will install the necessary dependencies and start your Vite server. You don't need to do anything with the Vite server, just keep it running in the background and Leaf will take care of the rest. +**You need to keep the Vite server running in a separate terminal window while you work on your project.** + ## Adding Aliases Vite allows you to set up aliases for your assets. This can be done by adding an `alias` key to your vite config. For example, to set up an alias for the `@` symbol, you can do: diff --git a/src/docs/mvc/controllers.md b/src/docs/mvc/controllers.md index 33e7d54e..8ff2da7c 100644 --- a/src/docs/mvc/controllers.md +++ b/src/docs/mvc/controllers.md @@ -54,7 +54,7 @@ You can have as many methods as you want in your controller. Each method should After defining a controller with the methods that you will use to handle your routes, you need to tell Leaf when to load a controller and which method to call. You can do this by defining a route in your `app/routes/` directory, and then calling the method in the controller that should handle the route. Here's an example: -```php +```php:no-line-numbers app()->get('/users', 'UsersController@index'); ``` @@ -83,7 +83,7 @@ You can find the views documentation [here](/docs/frontend/) When you're building web apps, sometimes you need extra functionality when someone visits a route. For example, maybe only logged-in users should be able to see certain pages. To manage this, Leaf lets you add route parameters like middleware to your routes. This feature also works for controllers and uses the same syntax as function route handlers. Here's an example: -```php +```php:no-line-numbers app()->get('/users', ['middleware' => 'auth', 'UsersController@index']); ``` @@ -95,7 +95,7 @@ Leaf makes it super easy to set up routes for common actions like creating, read To get started, you can generate a resource controller using the Aloe CLI: -```bash +```bash:no-line-numbers php leaf g:controller photos --resource ``` @@ -146,7 +146,7 @@ class PhotosController extends Controller { You can then define your routes like this: -```php +```php:no-line-numbers app()->resource('/photos', 'PhotosController'); ``` @@ -164,13 +164,13 @@ This will automatically set up all the routes you need for CRUD operations on th API resource controllers are similar to resource controllers, but they return JSON responses instead of HTML which means that the `create` and `edit` methods are not included. You can generate an API resource controller using the Aloe CLI: -```bash +```bash:no-line-numbers php leaf g:controller photos --api ``` You can load the controller in your routes like this: -```php +```php:no-line-numbers app()->apiResource('/photos', 'PhotosController'); ``` @@ -178,19 +178,19 @@ app()->apiResource('/photos', 'PhotosController'); Allow has a few more shortcuts you can incorporate into your controller generation: -```bash +```bash:no-line-numbers php leaf g:controller -m ``` This command will generate your controller together with a model that corresponds to the controller name. The model will be generated in the `app/models` directory. -```bash +```bash:no-line-numbers php leaf g:controller -t ``` The `-t` flag will generate a controller with a frontend template that corresponds to the controller name. The template will be generated in the `app/views` directory. -```bash +```bash:no-line-numbers php leaf g:controller -a ```