Merge branch 'use-vite-instead-of-mix' into new-asset-system

Author: emmadesilva

.github/workflows/continuous-integration.yml

@@ -128,7 +128,7 @@ jobs:
 
       - name: Build assets for production
         working-directory: 'packages/hydefront'
-        run: npm run prod
+        run: npm run build
 
       - name: Upload artifacts
         uses: actions/upload-artifact@v4
@@ -164,7 +164,7 @@ jobs:
         run: sed -i 's/\.\/vendor\/hyde\/framework\/resources\/views\/\*\*\/\*\.blade\.php/\.\/packages\/framework\/resources\/views\/\*\*\/\*\.blade\.php/' tailwind.config.js
 
       - name: Build assets for production
-        run: npm run prod
+        run: npm run build
 
       - name: Copy compiled app.css file to HydeFront dist folder
         run: cp _media/app.css packages/hydefront/dist/app.css

_media/app.css

@@ -13,7 +13,7 @@ With Hyde, **you don't have to do it**, in fact, you can skip this entire page i
 But as always with Hyde, you can customize everything if you want to.
 
 Hyde ships with a complete frontend using Blade views, TailwindCSS styles, and Alpine.js interactions.
-Some extra custom styles are made in the HydeFront package, which is pre-installed and bundled in the pre-configured Laravel Mix.
+Some extra custom styles are made in the HydeFront package, which is pre-installed and bundled in the pre-configured Tailwind and Vite setup.
 
 To get you started quickly, all the styles are already compiled and minified into `_media/app.css`,
 which will be copied to the `_site/media/app.css` directory when you run `php hyde build`.
@@ -51,22 +51,21 @@ all asset files here will get copied as they are into the `_site/media` folder.
 It may seem weird to have two folders for storing the compiled assets, but it is quite useful.
 
 The `_site` directory is intended to be excluded from version control, while the `_media` folder is included in the
-version control. You are of course free to modify this behaviour by editing the `webpack.mix.js` file to change the output directory.
+version control. You are of course free to modify this behaviour by editing the `vite.config.js` file to change the output directory.
 
 ## How Do I Compile Assets?
 
 First, make sure that you have installed all the NodeJS dependencies using `npm install`.
-Then run `npm run dev` to compile the assets. If you want to compile the assets for production, run `npm run prod`.
-You can also run `npm run watch` to watch for changes in the source files and recompile the assets automatically.
+Then run `npm run dev` to compile the assets in development mode. For production builds, run `npm run build`.
 
 ### How does it work?
 
-Hyde uses [Laravel Mix](https://laravel-mix.com/) (which is a wrapper for [Webpack](https://webpack.js.org/)) to compile the assets.
+Hyde uses [Vite](https://vite.dev/) to compile assets.
 
 When running the `npm run dev/prod` command, the following happens:
 
-1. Laravel Mix will compile the `resources/assets/app.css` file into `_media/app.css` using PostCSS with TailwindCSS and AutoPrefixer.
-2. Mix then copies the `_media` folder into `_site/media`, this is so that they are automatically accessible to your site without having to rerun `php hyde build`.
+1. Vite will compile the `resources/assets/app.css` file into `_media/app.css` using PostCSS with TailwindCSS and AutoPrefixer.
+2. Vite then copies the `_media` folder into `_site/media`, this is so that they are automatically accessible to your site without having to rerun `php hyde build`.
 
 ## Telling Hyde where to find assets
 
@@ -102,7 +101,7 @@ set `use_play_cdn` to `true` in the `config/hyde.php` file. This will in additio
 also add a script tag which loads the TailwindCSS Play CDN.
 
 What's even better is that Hyde will also inject the contents of the included `tailwind.config.js` file into the script tag,
-so the Play CDN styles match the ones created by Laravel Mix.
+so the Play CDN styles match the ones created by Vite.
 
 All in all, this allows you to tinker around with Tailwind without having to compile anything.
 

docs/creating-content/managing-assets.md

@@ -152,7 +152,7 @@ You can change the path to this directory by setting the `media_directory` optio
 
 #### Next steps
 
-1. Note that you will likely need to manually update `webpack.mix.js` so Laravel Mix can compile the assets correctly.
+1. Note that you will likely need to manually update `vite.config.js` so Vite can compile the assets correctly.
 2. You will of course also need to copy over any existing files from the old directory to the new one.
 
 #### Note that this setting affects both source and output directories

docs/digging-deeper/advanced-customization.md

@@ -73,7 +73,7 @@ You can read more about some of these in the [Core Concepts](core-concepts#paths
 | Page not discovered when compiling                 | The file name may be invalid                                                                                                                              | Ensure you follow the correct file naming convention.                                                                                                                                             |
 | Page compiles slowly                               | The Torchlight extension may cause the compile times to increase as API calls need to be made.                                                            | Try disabling Torchlight                                                                                                                                                                          |
 | Torchlight not working                             | Missing Composer package, missing API token, extension disabled in the config.                                                                            | Reinstall Torchlight, add your token in the `.env` file, check config                                                                                                                             |
-| Missing styles and/or assets                       | You may have accidentally deleted the files, or you have added new Tailwind classes.                                                                      | Run `npm run dev`                                                                                                                                                                                 |
+| Missing styles and/or assets                       | You may have accidentally deleted the files, or you have added new Tailwind classes.                                                                      | Run `npm run build`                                                                                                                                                                               |
 | Image not found                                    | You may be using a bad relative path.                                                                                                                     | Ensure your relative paths are correct.  See [managing-assets](managing-assets#referencing-images).                                                                                               |
 | Wrong layout used                                  | Hyde determines the layout template to use depending on the directory of the source file                                                                  | Ensure your source file is in the right directory.                                                                                                                                                |
 | Invalid/no permalinks or post URIs                 | You may be missing or have an invalid site URL                                                                                                            | Set the site URL in the `.env` file                                                                                                                                                               |

docs/digging-deeper/troubleshooting.md

@@ -116,7 +116,7 @@ Here are the paths you may be interested in copying over: (Using Git will help a
 ├── package.json
 ├── resources/
 ├── tailwind.config.js
-└── webpack.mix.js
+└── vite.config.js
 ```
 
 Next, recompile your assets, if you are not using the built-in assets.

docs/digging-deeper/updating-hyde.md

@@ -2,7 +2,7 @@
 
 The HydePHP UI Kit is a collection of minimalistic and un-opinionated TailwindCSS components for Laravel Blade,
 indented to be used with HydePHP. Note that these components may require CSS classes not present in the bundled app.css
-file and that you may need to recompile the CSS file using the included Laravel Mix configuration.
+file and that you may need to recompile the CSS file using the included Tailwind and Vite configuration.
 
 ## Screenshot
 

docs/extensions/ui-kit.md

@@ -40,7 +40,7 @@ To take full advantage of the framework, it may first be good to familiarize our
 | `_media`           | Store static assets to be copied to the build directory     |
 | `_site`            | The build directory where your compiled site will be stored |
 | `config`           | Configuration files for Hyde and integrations               |
-| `resources/assets` | Location for Laravel Mix source files (optional)            |
+| `resources/assets` | Location for CSS/JS Vite source files (optional)            |
 | `resources/views`  | Location for Blade components (optional)                    |
 | `app`              | Location for custom PHP classes (optional)                  |
 

docs/getting-started/core-concepts.md

@@ -68,7 +68,7 @@ on what kind of page it is. You don't have to worry about routing as Hyde takes
 
 ### Managing assets
 
-Hyde comes bundled with a precompiled and minified `app.css` file, containing all the Tailwind you need for the default views meaning that you don't even need to use NPM. However, Hyde is already configured to use Laravel Mix to compile your assets if you feel like there's a need to build the assets yourself. See more on the [Managing Assets](managing-assets) page.
+Hyde comes bundled with a precompiled and minified `app.css` file, containing all the Tailwind you need for the default views meaning that you don't even need to use NPM. However, Hyde is already configured to use Vite to compile your assets if you feel like there's a need to build the assets yourself. See more on the [Managing Assets](managing-assets) page.
 
 ### Deploying your site
 

docs/getting-started/quickstart.md

@@ -48,7 +48,7 @@ This will create commits in both the monorepo and submodule. Now follow the foll
 
 1. Verify that both commits are correct.
 2. Build the new `app.css` through the monorepo
-    - [ ] `npm run prod`
+    - [ ] `npm run build`
 3. Copy the compiled file to the HydeFront repository so it can be served from the CDN.
     - [ ] `cp _media/app.css packages/hydefront/dist/app.css`
 4. Amend the HydeFront commit with the new `app.css` file.