From 7e215b9c50aa56e68fc1fff3db83faf08f5230ad Mon Sep 17 00:00:00 2001 From: nexxo Date: Sat, 1 Aug 2026 18:13:55 +0200 Subject: [PATCH] Die Website hatte gar kein Alpine: elf x-show taten nichts, darunter der Preis-Umschalter --- package-lock.json | 27 ++++++++++++++++- package.json | 1 + resources/js/site.js | 30 +++++++++++++++++++ .../views/components/layouts/site.blade.php | 7 +++++ vite.config.js | 5 +++- 5 files changed, 68 insertions(+), 2 deletions(-) create mode 100644 resources/js/site.js diff --git a/package-lock.json b/package-lock.json index 6d0ebd0..ab416a7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,5 +1,5 @@ { - "name": "clupilot", + "name": "html", "lockfileVersion": 3, "requires": true, "packages": { @@ -8,6 +8,7 @@ "@fontsource/ibm-plex-mono": "^5.3.0", "@fontsource/ibm-plex-sans": "^5.3.0", "@fontsource/ibm-plex-serif": "^5.3.0", + "alpinejs": "^3.15.12", "chart.js": "^4.5.1", "laravel-echo": "^2.4.0", "pusher-js": "^8.6.0" @@ -482,6 +483,30 @@ "tslib": "^2.4.0" } }, + "node_modules/@vue/reactivity": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.1.5.tgz", + "integrity": "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg==", + "license": "MIT", + "dependencies": { + "@vue/shared": "3.1.5" + } + }, + "node_modules/@vue/shared": { + "version": "3.1.5", + "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz", + "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==", + "license": "MIT" + }, + "node_modules/alpinejs": { + "version": "3.15.12", + "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.15.12.tgz", + "integrity": "sha512-nJvPAQVNPdZZ0NrExJ/kzQco3ijR8LwvCOadQecllESiqT4NyZ/57sN9V2XyvhlBGAbmlKYgeWZvYdKq99ij/Q==", + "license": "MIT", + "dependencies": { + "@vue/reactivity": "~3.1.1" + } + }, "node_modules/ansi-regex": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz", diff --git a/package.json b/package.json index 376be9e..74e728a 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@fontsource/ibm-plex-mono": "^5.3.0", "@fontsource/ibm-plex-sans": "^5.3.0", "@fontsource/ibm-plex-serif": "^5.3.0", + "alpinejs": "^3.15.12", "chart.js": "^4.5.1", "laravel-echo": "^2.4.0", "pusher-js": "^8.6.0" diff --git a/resources/js/site.js b/resources/js/site.js new file mode 100644 index 0000000..b37dc69 --- /dev/null +++ b/resources/js/site.js @@ -0,0 +1,30 @@ +/* + * Alpine für die öffentliche Website — und nur für sie. + * + * Die Konsole und das Portal bekommen Alpine von Livewire mitgeliefert; die + * Website lädt Livewire nicht (sie hat kein einziges Livewire-Bauteil) und + * stand damit ganz ohne da. `resources/js/app.js` fiel das nicht auf: es + * importiert Alpine nirgends, sondern greift nur innerhalb von `alpine:init` + * auf `window.Alpine` zu — ein Ereignis, das ohne Alpine nie eintritt. + * + * Die Folge war unsichtbar und trotzdem groß: elf `x-show` auf der Startseite + * taten nichts. Der Umschalter zwischen Monats- und Jahrespreis rührte sich + * nicht, und weil die Jahres-Ansicht `x-cloak` trägt — und + * `[x-cloak]{display:none!important}` sehr wohl ausgeliefert wird —, war der + * Jahrespreis dauerhaft verborgen statt bloß ungeschaltet. Dasselbe traf das + * Menü am Telefon. + * + * Ein eigenes Bündel statt `@livewireScripts` im öffentlichen Layout: die + * gesamte Livewire-Laufzeit samt ihrem Endpunkt gehört nicht auf eine Seite, + * die kein Bauteil davon benutzt. Alpine allein ist ein Bruchteil davon. + * + * Wird NACH `app.js` geladen (siehe `components/layouts/site.blade.php`), damit + * dessen `alpine:init`-Anmeldungen stehen, bevor hier gestartet wird. Auf + * Konsolen- und Portalseiten läuft diese Datei nicht — dort startet Livewire + * Alpine, und ein zweiter Start würde beide zerlegen. + */ +import Alpine from 'alpinejs' + +window.Alpine = Alpine + +Alpine.start() diff --git a/resources/views/components/layouts/site.blade.php b/resources/views/components/layouts/site.blade.php index 3c69352..009e6c4 100644 --- a/resources/views/components/layouts/site.blade.php +++ b/resources/views/components/layouts/site.blade.php @@ -9,6 +9,13 @@ @if ($description)@endif @if ($robots)@endif + {{-- Alpine, nur hier. Die Konsole und das Portal bekommen es von Livewire; + diese Seite lädt Livewire nicht und stand deshalb ganz ohne da — mit + elf `x-show`, die nichts taten, darunter der Umschalter zwischen + Monats- und Jahrespreis und das Menü am Telefon. NACH `x-shell.head`, + damit die `alpine:init`-Anmeldungen aus `app.js` stehen, bevor hier + gestartet wird. --}} + @vite('resources/js/site.js') {{-- Parts of the page arrive on scroll, which an observer decides. Without JavaScript nothing is ever observed. --}} diff --git a/vite.config.js b/vite.config.js index bedcb33..8ecb276 100644 --- a/vite.config.js +++ b/vite.config.js @@ -14,7 +14,10 @@ const hmrClientPort = Number(process.env.VITE_PORT || 5173); export default defineConfig({ plugins: [ laravel({ - input: ['resources/css/app.css', 'resources/js/app.js'], + // site.js ist ein eigener Einstiegspunkt, kein Teil von app.js: es + // startet Alpine, und auf Konsolen- und Portalseiten tut das schon + // Livewire. Zwei Starts zerlegen beide. Siehe resources/js/site.js. + input: ['resources/css/app.css', 'resources/js/app.js', 'resources/js/site.js'], refresh: true, }), ],