deichrakete/kirby-moin
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: added webpack, stimulus and turbo

Browse source
This commit is contained in:
Stephan Plöhn 2025-08-26 11:59:30 +02:00
parent f3b60adb21
commit 93939ff054
8 changed files with 62 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.gitignore vendored
View file

@ -57,6 +57,7 @@ package-lock.json
/vendor /vendor
/node_modules /node_modules
/site/plugins
# Content # Content
# --------------- # ---------------
@ -67,3 +68,4 @@ package-lock.json
# --------------- # ---------------
/public/css /public/css
/public/js

7
composer.json
View file

@ -24,7 +24,12 @@
"require": { "require": {
"php": "~8.1.0 || ~8.2.0 || ~8.3.0 || ~8.4.0", "php": "~8.1.0 || ~8.2.0 || ~8.3.0 || ~8.4.0",
"getkirby/cms": "^5.0", "getkirby/cms": "^5.0",
"ext-pcntl": "*" "ext-pcntl": "*",
"deichrakete/kirby-cache": "^1.0"
}
,
"require-dev": {
"roave/security-advisories": "dev-latest"
}, },
"config": { "config": {
"allow-plugins": { "allow-plugins": {

15
package.json
View file

@ -2,9 +2,12 @@
"name": "kirby-moin", "name": "kirby-moin",
"version": "1.0.0", "version": "1.0.0",
"description": "Watch and build tailwindcss", "description": "Watch and build tailwindcss",
"private": true,
"scripts": { "scripts": {
"watch": "npx @tailwindcss/cli -i ./src/css/tailwind.css -o ./public/css/app.css --content './site/**/*.php' -w", "watch": "concurrently 'npx @tailwindcss/cli -i ./src/css/tailwind.css -o ./public/css/app.css --content \"./site/**/*.php\" -w' 'webpack --watch'",
"build": "npx @tailwindcss/cli -i ./src/css/tailwind.css -o ./public/css/app.css --content './site/**/*.php' -m" "watch:css": "npx @tailwindcss/cli -i ./src/css/tailwind.css -o ./public/css/app.css --content \"./site/**/*.php\" -w",
"watch:js": "webpack --watch",
"build": "concurrently 'npx @tailwindcss/cli -i ./src/css/tailwind.css -o ./public/css/app.css --content \"./site/**/*.php\" -m' 'webpack'"
}, },
"repository": { "repository": {
"type": "git", "type": "git",
@ -13,6 +16,14 @@
"author": "Stephan Plöhn", "author": "Stephan Plöhn",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"@hotwired/stimulus": "^3.2.2",
"@hotwired/stimulus-webpack-helpers": "^1.0.1",
"@hotwired/turbo": "^8.0.13",
"concurrently": "^9.2.1",
"tailwindcss": "^4.1.12" "tailwindcss": "^4.1.12"
},
"devDependencies": {
"webpack": "^5.101.3",
"webpack-cli": "^6.0.1"
} }
} }

19
site/commands/serve.php
View file

@ -57,7 +57,8 @@ return [
escapeshellarg($router) escapeshellarg($router)
); );
$npmCmd = 'npm run watch'; $cssCmd = 'npm run watch:css';
$jsCmd = 'npm run watch:js';
$cli->info("Starting PHP dev server on http://{$host}:{$port} (docroot: {$docroot})"); $cli->info("Starting PHP dev server on http://{$host}:{$port} (docroot: {$docroot})");
@ -95,11 +96,18 @@ return [
} }
$processes['php'] = $phpProc; $processes['php'] = $phpProc;
$npmProc = $start($npmCmd); $npmProc = $start($cssCmd);
if ($npmProc === null) { if ($npmProc === null) {
$cli->warning('Could not start npm watcher. Is Node/npm installed and in your PATH?'); $cli->warning('Could not start npm watcher. Is Node/npm installed and in your PATH?');
} else { } else {
$processes['npm'] = $npmProc; $processes['css'] = $npmProc;
}
$jsProc = $start($jsCmd);
if ($jsProc === null) {
$cli->warning('Could not start npm watcher. Is Node/npm installed and in your PATH?');
} else {
$processes['js'] = $jsProc;
} }
// Graceful termination // Graceful termination
@ -150,8 +158,9 @@ return [
// Stream outputs until all children exit // Stream outputs until all children exit
$prefixColor = [ $prefixColor = [
'php' => fn($s) => "\033[1;34m🐘 [php]\033[0m $s", 'php' => fn($s) => "\033[1;34m [php]\033[0m $s",
'npm' => fn($s) => "\033[1;32m [npm]\033[0m $s", 'css' => fn($s) => "\033[1;32m󱏿 [css]\033[0m $s",
'js' => fn($s) => "\033[1;97m [js]\033[0m $s",
]; ];
while (true) { while (true) {

3
site/snippets/layouts/main.php
View file

@ -21,6 +21,7 @@ use Kirby\Template\Slots;
<?= $page->title() ?> | <?= $site->title() ?> <?= $page->title() ?> | <?= $site->title() ?>
</title> </title>
<?= css('css/app.css') ?> <?= css('css/app.css') ?>
<?= js('js/app.js') ?>
</head> </head>
<body> <body>
@ -32,7 +33,7 @@ use Kirby\Template\Slots;
</h1> </h1>
</header> </header>
<main> <main data-controller="hello">
<?= $slot ?> <?= $slot ?>
</main> </main>

8
src/js/controllers/hello_controller.js Normal file
View file

@ -0,0 +1,8 @@
import { Controller} from "@hotwired/stimulus";
import "@hotwired/turbo"
export default class extends Controller {
connect() {
console.log("Hello World!");
}
}

6
src/js/index.js Normal file
View file

@ -0,0 +1,6 @@
import { Application } from "@hotwired/stimulus"
import { definitionsFromContext } from "@hotwired/stimulus-webpack-helpers"
window.Stimulus = Application.start()
const context = require.context("./controllers", true, /\.js$/)
Stimulus.load(definitionsFromContext(context))

10
webpack.config.js Normal file
View file

@ -0,0 +1,10 @@
const path = require('path');
module.exports = {
entry: './src/js/index.js',
mode: "production",
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'public/js'),
},
};