wip: initial commit

assets/app.js

@@ -5,6 +5,5 @@ import './bootstrap.js';
  * This file will be included onto the page via the importmap() Twig function,
  * which should already be in your base.html.twig.
  */
+import '@picocss/pico';
 import './styles/app.css';
-
-console.log('This log comes from assets/app.js - welcome to AssetMapper! 🎉');

assets/bootstrap.js

@@ -3,3 +3,10 @@ import { startStimulusApp } from '@symfony/stimulus-bundle';
 const app = startStimulusApp();
 // register any custom, 3rd party controllers here
 // app.register('some_controller_name', SomeImportedController);
+
+import htmx from 'htmx.org'
+window.htmx = htmx
+htmx.config.includeIndicatorStyles = false
+htmx.config.historyEnabled = false
+htmx.config.historyCacheSize = 0
+htmx.config.allowScriptTags = false

assets/controllers.json

@@ -1,15 +1,4 @@
 {
-    "controllers": {
-        "@symfony/ux-turbo": {
-            "turbo-core": {
-                "enabled": true,
-                "fetch": "eager"
-            },
-            "mercure-turbo-stream": {
-                "enabled": false,
-                "fetch": "eager"
-            }
-        }
-    },
+    "controllers": [],
     "entrypoints": []
 }

assets/controllers/hello_controller.js

@@ -1,16 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-/*
- * This is an example Stimulus controller!
- *
- * Any element with a data-controller="hello" attribute will cause
- * this controller to be executed. The name "hello" comes from the filename:
- * hello_controller.js -> "hello"
- *
- * Delete this file or adapt it for your use!
- */
-export default class extends Controller {
-    connect() {
-        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
-    }
-}

assets/styles/app.css

@@ -1,3 +1,21 @@
-body {
-    background-color: skyblue;
+#content {
+    position: relative;
 }
+
+#loading-indicator {
+    display: none;
+}
+
+#loading-indicator.htmx-request {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: white;
+}
+
+[disabled] {
+    cursor: not-allowed;
+}