feat: use pico

assets/app.js

@@ -5,8 +5,12 @@
  * which should already be in your base.html.twig.
  */
 
+// vendors
+import './js/pico-minimal-theme-switcher.js';
+import './vendor/@picocss/pico/css/pico.min.css';
+
+// app
 import './bootstrap.js';
-import './vendor/barecss/css/bare.min.css';
 import './styles/app.css';
 
 // "optin" - No turbo forms unless you insist. Use data-turbo="true" to enable turbo on individual forms.

assets/js/pico-minimal-theme-switcher.js

@@ -0,0 +1,81 @@
+/*!
+ * Minimal theme switcher
+ *
+ * Pico.css - https://picocss.com
+ * Copyright 2019-2024 - Licensed under MIT
+ *
+ * @see https://x4qtf8.csb.app/js/minimal-theme-switcher.js
+ */
+
+const themeSwitcher = {
+    // Config
+    _scheme: "auto",
+    menuTarget: "details.dropdown",
+    buttonsTarget: "a[data-theme-switcher]",
+    buttonAttribute: "data-theme-switcher",
+    rootAttribute: "data-theme",
+    localStorageKey: "picoPreferredColorScheme",
+
+    // Init
+    init() {
+        this.scheme = this.schemeFromLocalStorage;
+        this.initSwitchers();
+    },
+
+    // Get color scheme from local storage
+    get schemeFromLocalStorage() {
+        return window.localStorage?.getItem(this.localStorageKey) ?? this._scheme;
+    },
+
+    // Preferred color scheme
+    get preferredColorScheme() {
+        return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    },
+
+    // Init switchers
+    initSwitchers() {
+        const buttons = document.querySelectorAll(this.buttonsTarget);
+        buttons.forEach((button) => {
+            button.addEventListener(
+                "click",
+                (event) => {
+                    event.preventDefault();
+                    // Set scheme
+                    this.scheme = button.getAttribute(this.buttonAttribute);
+                    // Close dropdown
+                    document.querySelector(this.menuTarget)?.removeAttribute("open");
+                },
+                false
+            );
+        });
+    },
+
+    // Set scheme
+    set scheme(scheme) {
+        if (scheme === "auto") {
+            this._scheme = this.preferredColorScheme;
+        } else if (scheme === "dark" || scheme === "light") {
+            this._scheme = scheme;
+        }
+        this.applyScheme();
+        this.schemeToLocalStorage();
+    },
+
+    // Get scheme
+    get scheme() {
+        return this._scheme;
+    },
+
+    // Apply scheme
+    applyScheme() {
+        document.querySelector("html")?.setAttribute(this.rootAttribute, this.scheme);
+    },
+
+    // Store scheme to local storage
+    schemeToLocalStorage() {
+        window.localStorage?.setItem(this.localStorageKey, this.scheme);
+    },
+};
+
+// Init
+themeSwitcher.init();

assets/styles/app.css

@@ -1,15 +1,29 @@
+/**
+ * Reduce Pico size.
+ */
+:root {
+    --pico-font-size: 100%;
+}
+
+/**
+ * No text decoration for brand link.
+ */
+hgroup > h1 > a {
+    text-decoration: none;
+}
+
 /**
  * Mark required fields in Symfony forms.
  *
  * @see https://symfony.com/doc/current/forms.html#form-type-options
- */
 label.required:after {
     content: " *";
 }
+ */
 
 /**
  * Form errors in red.
- */
 form > div > div > ul > li {
     color: red;
 }
+ */

assets/vendor/installed.php

@@ -9,9 +9,19 @@
     array (
     ),
   ),
-  'barecss/css/bare.min.css' => 
+  '@hotwired/turbo' => 
   array (
-    'version' => '1.1.1',
+    'version' => '8.0.12',
+    'dependencies' => 
+    array (
+    ),
+    'extraFiles' => 
+    array (
+    ),
+  ),
+  '@picocss/pico/css/pico.min.css' => 
+  array (
+    'version' => '2.0.6',
     'dependencies' => 
     array (
     ),

config/services.php

@@ -9,6 +9,7 @@
 declare(strict_types=1);
 
 use Symfony\Component\DependencyInjection\Loader\Configurator\ContainerConfigurator;
+use Symfony\Component\HttpKernel\Kernel;
 
 return static function (ContainerConfigurator $containerConfigurator): void {
     // Parameters
@@ -23,10 +24,10 @@
     $parameters->set('brand_emoji', '🎶️');
     $parameters->set('website', 'https://github.com/strangebuzz/MicroSymfony');
     $parameters->set('version', '1.0.0');
+    $sfVersion = Kernel::VERSION;
 
-    $description = <<<'DESCRIPTION'
-This page displays the <a att="" target="_blank" href="https://github.com/strangebuzz/MicroSymfony/blob/main/README.md">README.md</a>
-file of the GitHub repository (This text comes from <code>config/services.php</code>).
+    $description = <<<DESCRIPTION
+A Symfony $sfVersion application template on steroids, ready to use.
 DESCRIPTION;
     $parameters->set('description', $description);
 

importmap.php

@@ -18,17 +18,17 @@
         'path' => 'app.js',
         'entrypoint' => true,
     ],
-    '@hotwired/stimulus' => [
-        'version' => '3.2.2',
-    ],
     '@symfony/stimulus-bundle' => [
         'path' => '@symfony/stimulus-bundle/loader.js',
     ],
-    'barecss/css/bare.min.css' => [
-        'version' => '1.1.0',
-        'type' => 'css',
+    '@hotwired/stimulus' => [
+        'version' => '3.2.2',
     ],
     '@hotwired/turbo' => [
-        'version' => '7.3.0',
+        'version' => '8.0.12',
+    ],
+    '@picocss/pico/css/pico.min.css' => [
+        'version' => '2.0.6',
+        'type' => 'css',
     ],
 ];

src/Controller/ComposerAction.php

@@ -14,7 +14,7 @@
  * @see ComposerActionTest
  */
 #[AsController]
-#[Cache(maxage: 3600, public: true)]
+//#[Cache(maxage: 3600, public: true)]
 final class ComposerAction extends AbstractController
 {
     /**

src/Controller/FormAction.php

@@ -17,7 +17,7 @@
  * @see FormActionTest
  */
 #[AsController]
-#[Cache(maxage: 3600, public: true)]
+//#[Cache(maxage: 3600, public: true)]
 final class FormAction extends AbstractController
 {
     /**

src/Controller/HelloWorldAction.php

@@ -16,7 +16,7 @@
  * @see HelloWorldTest
  */
 #[AsController]
-#[Cache(maxage: 3600, public: true)]
+//#[Cache(maxage: 3600, public: true)]
 final class HelloWorldAction extends AbstractController
 {
     #[Route(path: '/hello-world', name: self::class)]

src/Controller/HomeAction.php

@@ -14,7 +14,7 @@
  * @see StaticActionTest
  */
 #[AsController]
-#[Cache(maxage: 3600, public: true)]
+//#[Cache(maxage: 3600, public: true)]
 final class HomeAction extends AbstractController
 {
     /**

templates/App/Controller/FormAction.html.twig

@@ -5,22 +5,22 @@
 {% block title %}{{ h2 }} | {{ brand }}{% endblock %}
 
 {% block body %}
-    <div class="sub-heading">
-        <h2>{{ h2 }} 📋</h2>
-    </div>
+    <h2>{{ h2 }} 📋</h2>
 
-    <card>
+    <article>
         <p>
             This is a basic form example using a DTO, there are some constraints.
-            <a att="" href="https://www.strangebuzz.com/en/blog/disable-the-html5-validation-of-all-your-symfony-forms-with-a-feature-flag">
+            <a href="https://www.strangebuzz.com/en/blog/disable-the-html5-validation-of-all-your-symfony-forms-with-a-feature-flag">
                 The browser validation is deactivated</a>, so you can easily test the
             server side validation.
         </p>
-    </card>
+    </article>
 
     {% if form.vars.submitted and form.vars.valid %}
-        <card>
-            <h3>Submitted and valid values ✨</h3>
+        <article>
+            <header>
+                <h3>Submitted and valid values ✨</h3>
+            </header>
 
             <table>
                 <tr>
@@ -54,17 +54,23 @@
                 </tr>
             </table>
 
-            <a href="{{ path(ctrl_fqcn('FormAction')) }}" btn primary>Retry</a>
-        </card>
+            <footer>
+                <a href="{{ path(ctrl_fqcn('FormAction')) }}">Retry</a>
+            </footer>
+        </article>
     {% else %}
-        <h2>Create a new account 🔏</h2>
+        <article>
+            <header>
+                <h2>Create a new account 🔏</h2>
+            </header>
 
-        <p>* = required fields</p>
+            <p>* = required fields</p>
 
-        <fieldset>
-            <legend>&nbsp;Enter your information 🖋&nbsp;</legend>
+            <fieldset>
+                <legend>&nbsp;Enter your information 🖋&nbsp;</legend>
 
-            {{ form(form, {'attr': {'novalidate': 'novalidate'}}) }}
-        </fieldset>
+                {{ form(form, {'attr': {'novalidate': 'novalidate'}}) }}
+            </fieldset>
+        </article>
     {% endif %}
 {% endblock %}

templates/App/Controller/HelloWorldAction.html.twig

@@ -1,9 +1,7 @@
 {% extends 'base.html.twig' %}
 
 {% block body %}
-    <div class="sub-heading">
-        <h2>Hello World! 👋</h2>
-    </div>
+    <h2>Hello World! 👋</h2>
 
     <p>This a simple hello world page without any heavy process.
         Just a basic Twig template rendering.</p>
@@ -25,5 +23,4 @@
         <li>app.environment: <b>{{ app.environment }}</b></li>
         <li>app.debug: <b>{{ app.debug ? 'true' : 'false' }}</b></li>
     </ul>
-
 {% endblock %}