feat: clean up v3 docs

Author: mychidarko

.vitepress/theme/components/shared/TutorialNumber.vue

@@ -4,7 +4,7 @@ const { number } = defineProps(['number'])
 
 <template>
   <span
-    class="bg-[var(--vp-c-bg-alt)] inline-flex items-center justify-center rounded-full text-gray-700 dark:text-gray-300 text-lg h-10 w-10 mr-1 flex-none font-normal">
+    class="bg-gray-900 dark:bg-[var(--vp-c-bg-alt)] outline outline-gray-100/10 inline-flex items-center justify-center rounded-full text-white dark:text-gray-300 text-lg h-10 w-10 mr-1 flex-none font-normal">
     {{ number }}
   </span>
 </template>

src/docs/auth/index.md

@@ -2,13 +2,46 @@
 
 <!-- markdownlint-disable no-inline-html -->
 
+<script setup>
+import Button from '@theme/components/shared/Button.vue';
+</script>
+
 Numerous web applications offer their users a means to authenticate and access the application by "logging in." Adding this functionality to web applications can be a challenging and potentially dangerous task.
 
 Leaf provides a lightweight but very powerful authentication system to handle all the complexities of authentication in a few lines of code. We understand that authentication is a critical part of your application, so we've made it as simple and secure as possible.
 
-::: warning Docs version
-This documentation covers Auth v3 and above. If you're using an older version, you can check the documentation [hosted here](https://v3.leafphp.dev/modules/auth/).
-:::
+<div
+    class="w-full relative text-white overflow-hidden rounded-3xl flex shadow-lg sm:max-w-[50%]"
+>
+    <div
+        class="w-full flex md:flex-col bg-gradient-to-br from-pink-500 to-rose-500"
+    >
+        <div
+            class="sm:flex-none md:w-auto md:flex-auto flex flex-col items-start relative z-10 p-6"
+        >
+            <h3 class="text-xl font-semibold mb-2 text-shadow !mt-0">
+                Using Leaf MVC?
+            </h3>
+            <p class="font-medium text-rose-100 text-shadow mb-4">
+                We've crafted a specialized guide for auth in Leaf MVC. While it's similar to the basic routing in Leaf, it's more detailed and tailored for Leaf MVC.
+            </p>
+            <Button
+                as="a"
+                href="/docs/auth/mvc"
+                class="mt-auto bg-rose-900 hover:!bg-rose-900 !text-white bg-opacity-50 hover:bg-opacity-75 transition-colors duration-200 rounded-xl font-bold py-2 px-4 inline-flex"
+                >Start building</Button
+            >
+        </div>
+        <!-- <div
+            class="relative md:pl-6 xl:pl-8 hidden sm:block"
+        >
+            Hello
+        </div> -->
+    </div>
+    <div
+        class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-rose-500 hidden sm:block"
+    ></div>
+</div>
 
 ## Setting up
 

src/docs/auth/mvc.md

@@ -1 +1 @@
-# MVC Support
+# Auth in Leaf MVC

src/docs/config/environment.md

@@ -3,11 +3,45 @@
 <!-- markdownlint-disable no-inline-html -->
 
 <script setup>
-import VideoModal from '@theme/components/shared/VideoModal.vue'
+import VideoModal from '@theme/components/shared/VideoModal.vue';
+import Button from '@theme/components/shared/Button.vue';
 </script>
 
 You can think of your application's environment as a set of configurations that define how your application behaves in different situations. For example, you may run a local database when developing your app, but will want your app to connect to a remote database when it's in production.
 
+<div
+    class="w-full relative text-white overflow-hidden rounded-3xl flex shadow-lg sm:max-w-[50%]"
+>
+    <div
+        class="w-full flex md:flex-col bg-gradient-to-br from-pink-500 to-rose-500"
+    >
+        <div
+            class="sm:flex-none md:w-auto md:flex-auto flex flex-col items-start relative z-10 p-6"
+        >
+            <h3 class="text-xl font-semibold mb-2 text-shadow !mt-0">
+                Using Leaf MVC?
+            </h3>
+            <p class="font-medium text-rose-100 text-shadow mb-4">
+                We've crafted a specialized guide for config in Leaf MVC. While it's similar to the basic config in Leaf, it's more detailed and tailored for Leaf MVC.
+            </p>
+            <Button
+                as="a"
+                href="/docs/config/mvc"
+                class="mt-auto bg-rose-900 hover:!bg-rose-900 !text-white bg-opacity-50 hover:bg-opacity-75 transition-colors duration-200 rounded-xl font-bold py-2 px-4 inline-flex"
+                >Sync your config</Button
+            >
+        </div>
+        <!-- <div
+            class="relative md:pl-6 xl:pl-8 hidden sm:block"
+        >
+            Hello
+        </div> -->
+    </div>
+    <div
+        class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-rose-500 hidden sm:block"
+    ></div>
+</div>
+
 Common environments include `development`, `testing`, and `production`. Leaf already has some pre-programmed bahaviours for these environments, but you can also create your own custom environments. One way to do this is to use environment variables.
 
 ## Environment Variables

src/docs/config/index.md

@@ -0,0 +1 @@
+# Configuring Leaf MVC

src/docs/config/mvc.md

@@ -1,5 +1,11 @@
 # Inertia + Leaf
 
+<!-- markdownlint-disable no-inline-html -->
+
+<script setup>
+import TutorialNumber from '@theme/components/shared/TutorialNumber.vue';
+</script>
+
 [Inertia](https://inertiajs.com/) is a new approach to building classic server-driven web apps. It allows you to create fully client-side rendered, single-page apps, without the complexity that comes with modern SPAs.
 
 In short, Inertia let's you use your favourite frontend framework together with Leaf, reaping the benefits of both. While it's still more popular to build completely separate frontend and backends, combining them lets you have your code in one place.
@@ -141,7 +147,7 @@ php leaf g:template pages/Home # app/views/pages/Home.view.php
 
 If you don't want to use the Leaf CLI, you can manually setup inertia. This guide will show you how to setup inertia with Vite and React. You can use this guide to setup inertia with any frontend framework.
 
-### 1. Setting up Vite
+### <TutorialNumber number="1" /> Setting up Vite
 
 To get started, you need to setup Vite. We have a Leaf plugin that takes care of a lot of the heavy lifting for you. We have a detailed guide on how to setup vite with Leaf [here](/docs/frontend/vite).
 
@@ -150,7 +156,7 @@ npm i -D vite @leafphp/vite-plugin
 leaf install vite
 ```
 
-### 2. Vite Config
+### <TutorialNumber number="2" /> Vite Config
 
 The [Leaf Vite docs](/docs/frontend/vite#vite-config) have a detailed guide on how to setup vite config files. You should however note that for the best developer experience, you should point Vite to your view directory so you can enjoy hot module reloading.
 
@@ -176,7 +182,7 @@ leaf({
 }),
 ```
 
-### 3. Setting up Inertia
+### <TutorialNumber number="3" /> Setting up Inertia
 
 To setup inertia, you need to install the inertia package for whatever frontend framework you want to use, together with the Vite plugin for that framework. For example, if you want to use React, you should install the Inertia React package, React Vite plugin as well as React itself:
 
@@ -215,7 +221,7 @@ export default defineConfig({
 });
 ```
 
-### 4. Setting up your base JavaScript file
+### <TutorialNumber number="4" /> Setting up your base JavaScript file
 
 You should create a base JavaScript file that will be used to mount your app. This file should import your CSS and other assets. For example, if you're using React, your base JavaScript file should look like this:
 
@@ -249,7 +255,7 @@ setup({ el, App, props }) {
 },
 ```
 
-### 5. Setting up your base PHP file
+### <TutorialNumber number="5" /> Setting up your base PHP file
 
 You should create a base PHP file that will be used to render your app. By default, the Leaf Inertia PHP adapter will look for a file named `_inertia.view.php` in your views directory. You can change this by passing the path to your base PHP file to the `Inertia::setRoot` method.
 
@@ -305,7 +311,7 @@ This might look pretty ugly, but you'll never have to touch this file again. You
 leaf view:install --inertia
 ```
 
-### 6. Setting up your frontend framework
+### <TutorialNumber number="6" /> Setting up your frontend framework
 
 In the setup above, we told Inertia to look for our frontend framework files in `./DIRECTORYFORCOMPONENTS/`. You should create this directory and add your frontend framework files to it. For example, if you're using React, you should create a file named `Home.jsx` in this directory:
 

src/docs/frontend/inertia.md

@@ -1,14 +1,14 @@
 # Tailwind + Leaf
 
-Tailwind is a utility-first CSS framework that provides a set of utility classes to help you build your UI. Leaf has first-class support for Tailwind CSS, and it's the recommended way to style your Inertia apps. This guide will show you how to set up Tailwind CSS in your Leaf project with minimal configuration.
-
-## Using the CLI
+<!-- markdownlint-disable no-inline-html -->
 
-::: warning CLI Installation
+<script setup>
+import TutorialNumber from '@theme/components/shared/TutorialNumber.vue';
+</script>
 
-Tailwind 4 has been released, and it unfortunately breaks the current Leaf CLI installation. Leaf MVC works fine with Tailwind 4, but we are working on a fix for the CLI. For now, you can install Tailwind manually if you are not using Leaf MVC.
+Tailwind is a utility-first CSS framework that provides a set of utility classes to help you build your UI. Leaf has first-class support for Tailwind CSS, and it's the recommended way to style your Inertia apps. This guide will show you how to set up Tailwind CSS in your Leaf project with minimal configuration.
 
-:::
+## Using the CLI
 
 You can set up Tailwind CSS in your Leaf MVC project using the php leaf console. To do this, run the following command:
 
@@ -42,13 +42,13 @@ npm install tailwindcss @tailwindcss/vite
 
 And then configure Vite to include the Tailwind plugin:
 
-```js{2,6} [vite.config.js]
+```js [vite.config.js]
 import { defineConfig } from 'vite';
-import tailwindcss from '@tailwindcss/vite';
+import tailwindcss from '@tailwindcss/vite'; // [!code ++]
 
 export default defineConfig({
   plugins: [
-    tailwindcss(),
+    tailwindcss(), // [!code ++]
     // …
   ],
 });
@@ -66,14 +66,14 @@ Finally, you need to import Tailwind in your CSS file:
 
 And then include your CSS file in your layout templates:
 
-```blade{7,12-14}
+```blade{12-14}
 <!doctype html>
 <html>
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    @vite('resources/css/app.css')
+    @vite('css/app.css')  // [!code ++]
 
     ...
   </head>
@@ -89,21 +89,21 @@ And then include your CSS file in your layout templates:
 
 If you want to migrate from Tailwind v3 to v4 in Leaf MVC, you can do so by following these steps:
 
-1. Update all your dependencies to the latest version:
+<TutorialNumber number="1" /> Update all your dependencies to the latest version:
 
 ```bash:no-line-numbers
 composer update
 ```
 
-2. Remove old tailwind config, autoprefixer, and postcss files
+<TutorialNumber number="2" /> Remove old tailwind config, autoprefixer, and postcss files. <br /><br />
 
-3. Run the `view:install` command to install Tailwind v4:
+<TutorialNumber number="3" /> Run the `view:install` command to install Tailwind v4:
 
 ```bash:no-line-numbers
 php leaf view:install --tailwind
 ```
 
-4. Update your CSS file to remove @tailwind directives:
+<TutorialNumber number="4" /> Update your CSS file to remove @tailwind directives:
 
 ```css [app/views/css/app.css]
 @import "tailwindcss";
@@ -171,14 +171,15 @@ defineConfig({
 
 The final step is to import your CSS file in your root layout file so that it gets included in your HTML.
 
-```blade{7}
+```blade
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Leaf</title>
-  {{ vite('css/app.css') }}
+
+  @vite('css/app.css') // [!code ++]
   ...
 ```
 

src/docs/frontend/tailwind.md

@@ -68,21 +68,25 @@ The `set()` method allows you to set cookies with more advanced options like exp
 
 ## Reading Cookies
 
-When you send cookies to the client, they are stored in your users' browser and automatically sent back to your app on every request. You can read these cookies using the `get()` method.
+When you send cookies to the client, they are stored in your users' browsers and automatically sent back to your app on every request. You can read these cookies using the `cookies()` method on the incoming request.
 
 ```php:no-line-numbers
-$name = cookie()->get('name');
+$name = request()->cookies('name');
+
+// You can also get multiple cookies at once
+$cookies = request()->cookies(['name', 'age']);
+// $cookies['name'] and $cookies['age']
 ```
 
-This method takes in the cookie name and returns the cookie value. If the cookie doesn't exist, it returns `null`.
+if a cookie doesn't exist, the `cookies()` method will return `null` for that cookie.
 
-You can also get all cookies at once using the `all()` method.
+You can also get all cookies at once by calling `cookies()` without any parameters.
 
 ```php:no-line-numbers
-$cookies = cookie()->all();
+$cookies = request()->cookies();
 ```
 
-This method returns an array of all cookies sent to your app. Be careful when using this method as it can return a lot of data.
+This method returns an array of all cookies sent to your app. Be careful when using this method as it can return a lot of data, including cookies that you may not need.
 
 ## Deleting Cookies
 

src/docs/http/cookies.md

@@ -3,7 +3,8 @@
 <!-- markdownlint-disable no-inline-html -->
 
 <script setup>
-import VideoModal from '@theme/components/shared/VideoModal.vue'
+import VideoModal from '@theme/components/shared/VideoModal.vue';
+import Button from '@theme/components/shared/Button.vue';
 </script>
 
 From Wikipedia, Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be accessed from another domain outside the domain from which the first resource was served.
@@ -21,6 +22,34 @@ Cross-Origin Resource Sharing or CORS is a mechanism that allows browsers to req
 
 Since CORS is a common pain point for web developers, Leaf provides a first-party integration that takes care of all the heavy lifting for you.
 
+<div
+    class="w-full relative text-white overflow-hidden rounded-3xl flex shadow-lg sm:max-w-[50%]"
+>
+    <div
+        class="w-full flex md:flex-col bg-gradient-to-br from-pink-500 to-rose-500"
+    >
+        <div
+            class="sm:flex-none md:w-auto md:flex-auto flex flex-col items-start relative z-10 p-6"
+        >
+            <h3 class="text-xl font-semibold mb-2 text-shadow !mt-0">
+                Using Leaf MVC?
+            </h3>
+            <p class="font-medium text-rose-100 text-shadow mb-4">
+                We've crafted a specialized guide for CORS in Leaf MVC. While it's similar to the base usage in Leaf, it's more detailed and tailored for Leaf MVC.
+            </p>
+            <Button
+                as="a"
+                href="/docs/http/cors/mvc"
+                class="mt-auto bg-rose-900 hover:!bg-rose-900 !text-white bg-opacity-50 hover:bg-opacity-75 transition-colors duration-200 rounded-xl font-bold py-2 px-4 inline-flex"
+                >Start building</Button
+            >
+        </div>
+    </div>
+    <div
+        class="absolute bottom-0 left-0 right-0 h-20 bg-gradient-to-t from-rose-500 hidden sm:block"
+    ></div>
+</div>
+
 ## Setting Up
 
 You can install the CORS module through the Leaf CLI or with composer.