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

4
.gitignore vendored
View file

@ -57,6 +57,7 @@ package-lock.json
/vendor
/node_modules
/site/plugins
# Content
# ---------------
@ -66,4 +67,5 @@ package-lock.json
# Compiled files
# ---------------
/public/css
/public/css
/public/js

7
composer.json
View file

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

15
package.json
View file

@ -2,9 +2,12 @@
"name": "kirby-moin",
"version": "1.0.0",
"description": "Watch and build tailwindcss",
"private": true,
"scripts": {
"watch": "npx @tailwindcss/cli -i ./src/css/tailwind.css -o ./public/css/app.css --content './site/**/*.php' -w",
"build": "npx @tailwindcss/cli -i ./src/css/tailwind.css -o ./public/css/app.css --content './site/**/*.php' -m"
"watch": "concurrently 'npx @tailwindcss/cli -i ./src/css/tailwind.css -o ./public/css/app.css --content \"./site/**/*.php\" -w' 'webpack --watch'",
"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": {
"type": "git",
@ -13,6 +16,14 @@
"author": "Stephan Plöhn",
"license": "ISC",
"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"
},
"devDependencies": {
"webpack": "^5.101.3",
"webpack-cli": "^6.0.1"
}
}

19
site/commands/serve.php
View file

@ -57,7 +57,8 @@ return [
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})");
@ -95,11 +96,18 @@ return [
}
$processes['php'] = $phpProc;
$npmProc = $start($npmCmd);
$npmProc = $start($cssCmd);
if ($npmProc === null) {
$cli->warning('Could not start npm watcher. Is Node/npm installed and in your PATH?');
} 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
@ -150,8 +158,9 @@ return [
// Stream outputs until all children exit
$prefixColor = [
'php' => fn($s) => "\033[1;34m🐘 [php]\033[0m $s",
'npm' => fn($s) => "\033[1;32m [npm]\033[0m $s",
'php' => fn($s) => "\033[1;34m [php]\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) {

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

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