2025 edition

- Upgrade kirby to 5.0.0
- Upgrade composer dependencies
- Remove yarn as a package manger
- Use corepack and pnpm
- Switch from Sass to plain CSS
- Fix some inital bugs
- Add VS Code startup script

Author: macx

.release-it.json

@@ -0,0 +1,12 @@
+{
+  "git": {
+    "commitMessage": "chore: release v${version}",
+    "tagAnnotation": "Version v${version}"
+  },
+  "github": {
+    "release": true
+  },
+  "npm": {
+    "publish": false
+  }
+}

README.md

@@ -6,22 +6,39 @@ This Starterkit will open the Website and it's Panel in development mode, will l
 
 ## Prerequisites
 
-In order to work with this Repository, please [install Node](https://nodejs.org/en/download/) and [Yarn](https://yarnpkg.com/), if not happened before. Make sure, both is available.
+Kirby is a file-based CMS based on PHP. Please make sure your environment meets the [Kirby requirements](https://getkirby.com/docs/guide/quickstart#requirements).
+
+For the frontend development, this package requires [Node.js](https://nodejs.org/en/download/), [corepack](https://github.com/nodejs/corepack) and [Composer](https://getcomposer.org/download/) to be installed. Corepack is used to install the locked package manager (pnpm), where Composer is used to manage PHP dependencies.
+
+<details>
+  <summary>Install Node.js and corepack</summary>
+
+Follow the official installation guide of [Node.js](https://nodejs.org/en/download/) and be sure to choose the LTS version. If your Node.js is higher than the LTS version, you need to "downgrade" it.
+
+Corepack is shipped with Node.js until version 25 and is enabled by default.
+
+</details>
+
+<details>
+  <summary>Uninstall your global Package Managers</summary>
+
+You need to uninstall your global Yarn and pnpm binaries to avoid conflicts with corepack.
 
 ```shell
-$ npm install -g yarn
-$ npm -v && yarn -v
+npm uninstall -g yarn pnpm
 ```
 
+</details>
+
 ## Installation
 
 If your Computer is ready-to-go, clone this Repository and install it's dependencies.
 
 ```shell
-$ git clone git@github.com:macx/kirby-vite-starterkit.git my-website
-$ cd my-website
-$ composer install
-$ yarn install
+git clone git@github.com:macx/kirby-vite-starterkit.git my-new-project
+cd my-new-project
+composer install
+corepack enable
 ```
 
 To get feature updates from this starterkit, add a remote host entry and pull a new version. Be sure to commit your changes before. If you just want to update Kirby, [do it on your own](https://getkirby.com/docs/cookbook/setup/composer#updating-kirby).
@@ -33,30 +50,34 @@ $ git pull updates
 
 ## Development
 
-<!-- prettier-ignore -->
-| Folder | What's in it? |
-| :-- | :--  |
-| `/content` | The [content](https://getkirby.com/docs/guide/tour#where-the-content-lives) of  your  website. |
-| `/src` | All your assets for the Vite bundling. `app.js` and `app.scss` are your main styles and script. |
-| `/src/assets` | Folder for your global Fonts and Images. |
-| `/src/templates` | Optionally, every page can contain it's own styles `index.scss` and script `index.js`. |
-| `/site` | Project folder for Kirbys [Config](https://getkirby.com/docs/guide/configuration), [Blueprints](https://getkirby.com/docs/guide/blueprints/introduction), [Plugins](https://getkirby.com/docs/guide/plugins/plugin-basics), [Snippets](https://getkirby.com/docs/guide/templates/snippets) and [Templates](https://getkirby.com/docs/guide/templates/basics). |
-| `/public` | The [Public folder](https://getkirby.com/docs/guide/configuration#custom-folder-setup__public-folder-setup) is your document root of your website, including the bundled assets from Vite. |
-
-### Startits
+To start the development server, run:
 
 ```sh
-$ yarn dev
+pnpm run dev
 ```
 
-```sh
-$ yarn build
-```
+You can also run the following commands:
 
 ```sh
-$ yarn preview
+# Build the project
+pnpm run build
+
+# Preview the built project
+pnpm run preview
 ```
 
+#### Folder Structure
+
+<!-- prettier-ignore -->
+| Folder | What's in it? |
+| :-- | :--  |
+| `/content` | The [content](https://getkirby.com/docs/guide/tour#where-the-content-lives) of  your  website. |
+| `/src` | All your assets for the Vite bundling. `main.js` and `main.css` are your main styles and script. |
+| `/src/assets` | Folder for your global Fonts and Images. |
+| `/src/templates` | Optionally, every page can contain it's own styles `index.css` and script `index.js`. |
+| `/site` | Project folder for Kirbys [Config](https://getkirby.com/docs/guide/configuration), [Blueprints](https://getkirby.com/docs/guide/blueprints/introduction), [Plugins](https://getkirby.com/docs/guide/plugins/plugin-basics), [Snippets](https://getkirby.com/docs/guide/templates/snippets) and [Templates](https://getkirby.com/docs/guide/templates/basics). |
+| `/public` | The [Public folder](https://getkirby.com/docs/guide/configuration#custom-folder-setup__public-folder-setup) is your document root of your website, including the bundled assets from Vite. |
+
 ## Thanks to
 
 This Starterkit was heavely inspired by the [Kirby Vite Multi Page Kit](https://github.com/arnoson/kirby-vite-multi-page-kit) from @arnoson.

composer.json

@@ -4,9 +4,9 @@
   "type": "project",
   "license": "MIT",
   "require": {
-    "php": ">=7.4.0 <8.3.0",
-    "getkirby/cms": "^3.9",
-    "arnoson/kirby-vite": "^4.0"
+    "php": ">=8.3.0",
+    "getkirby/cms": "^5.0",
+    "arnoson/kirby-vite": "^5.6.1"
   },
   "config": {
     "optimize-autoloader": true,