feat: use pico (#85)

README.md

@@ -125,10 +125,7 @@ You can also directly use the [FrankenPHP](https://github.com/strangebuzz/MicroS
 * [Twig 3.8](https://twig.symfony.com)
 * Hotwired [stimulus 3.2](https://stimulus.hotwired.dev/) and [Turbo 8.0](https://turbo.hotwired.dev/)
 * [PHPUnit 11.0](https://phpunit.de/announcements/phpunit-11.html)
-* The classless [BareCSS](http://barecss.com) CSS framework
-
-**PS**: A [fork of BareCSS](https://github.com/strangebuzz/BareCSS/) was created
-to fix some issues as the project is not maintained anymore.
+* The [Pico CCS](https://picocss.com) framework
 
 
 ## Features 🚀

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,14 +1,35 @@
+/**
+ * Reduce default size.
+ *
+ * @see https://picocss.com/docs/css-variables#all-css-variables
+ */
+:root {
+    --pico-font-size: 100%;  /* default size is 131.25% */
+}
+
+/**
+ * No text decoration for the header brand link.
+ */
+hgroup > h1 > a {
+    text-decoration: none;
+}
+
+footer div.github {
+    text-align: right;
+}
+
 /**
  * Mark required fields in Symfony forms.
  *
  * @see https://symfony.com/doc/current/forms.html#form-type-options
  */
 label.required:after {
     content: " *";
+    font-weight: bold;
 }
 
 /**
- * Form errors in red.
+ * Mark 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 = substr(Kernel::VERSION, 0, 3); // minor 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 <b>$sfVersion</b> 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/HelloWorldAction.php

@@ -12,8 +12,6 @@
 
 /**
  * We use the two binds we have defined in config/services.yaml.
- *
- * @see HelloWorldTest
  */
 #[AsController]
 #[Cache(maxage: 3600, public: true)]

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>
+                &raquo; <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>
+                <h3>Enter your information 🖋</h3>
 
-            {{ 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 %}

templates/App/Controller/HomeAction.html.twig

@@ -1,11 +1,14 @@
 {% extends 'base.html.twig' %}
 
 {% block body %}
-    <p>{{ description|raw }}</p>
+    <p>
+        This page displays the <a 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>).
+    </p>
 
     <hr/>
 
-    {{ readme|raw|markdown_to_html|raw|add_att_attributes|raw }}
+    {{ readme|raw|markdown_to_html|raw }}
 
     {# Uncomment this and adapat it to your needs.
 
@@ -36,33 +39,4 @@
     <h2>License ⚖️</h2>
     #}
 
-
-{% endblock %}
-
-{% block stylesheets %}
-    {{ parent() }}
-    {# Hack to make the links visible #}
-    <style>
-        section > ul > li > a::before,
-        section > ul > li > ul > li > a::before {
-            content: "";
-            display: inline-block;
-            width: 100%;
-            height: 100%;
-            background: #fd0;
-            position: absolute;
-            opacity: .5;
-            -webkit-transform: scale3d(1,.1,1);
-            transform: scale3d(1,.1,1);
-            -webkit-transform-origin: bottom;
-            transform-origin: bottom;
-            z-index: -1;
-        }
-
-        section > ul > li > a:hover::before,
-        section > ul > li > ul > li > a:hover::before {
-            -webkit-transform: none;
-            transform: none;
-        }
-    </style>
-{% endblock %}
+{% endblock %}