[Site] Add tags

Only as visual indicators for now (#stepByStep)

Author: smnandre

ux.symfony.com/assets/styles/app.scss

@@ -81,6 +81,7 @@
 @import "components/PackageHeader";
 @import "components/PackageBox";
 @import "components/Tabs";
+@import "components/Tag";
 @import "components/Terminal";
 @import "components/TerminalCommand";
 @import "components/ThemeSwitcher";

ux.symfony.com/assets/styles/components/_DemoCard.scss

@@ -77,5 +77,9 @@
   margin: 0;
 }
 .DemoCard:hover .DemoCard__description {
-    opacity: .85;
+  opacity: .85;
+}
+
+.DemoCard__tags {
+  margin-bottom: 0;
 }

ux.symfony.com/assets/styles/components/_Tag.scss

@@ -0,0 +1,22 @@
+
+.Tag {
+  --background: #E2EAF2;
+  --color: #191E27;
+
+  font-stretch: semi-condensed;
+  font-weight: 400;
+  display: inline-flex;
+  font-size: .65rem;
+  padding-inline: .4rem;
+  line-height: 1.4rem;
+  border-radius: .35rem;
+  text-transform: uppercase;
+  vertical-align: middle;
+  color: var(--color);
+  background: var(--background);
+}
+
+[data-bs-theme="dark"] .Tag {
+  --background: #191E27;
+  --color: #A5C4E2;
+}

ux.symfony.com/src/Model/LiveDemo.php

@@ -19,6 +19,10 @@ public function __construct(
         private string $description,
         private string $route,
         private string $longDescription,
+        /**
+         * @var string[]
+         */
+        private array $tags = [],
     ) {
     }
 
@@ -47,6 +51,11 @@ public function getRoute(): string
         return $this->route;
     }
 
+    public function getTags(): array
+    {
+        return $this->tags;
+    }
+
     public function getScreenshotFilename(): string
     {
         return 'images/live_demo/'.$this->identifier.'.png';

ux.symfony.com/src/Service/LiveDemoRepository.php

@@ -32,7 +32,8 @@ public function findAll(): array
 <br>
 This renders a normal Symfony form but with extras added on top,
 all generated from Symfony & Twig.
-EOF
+EOF,
+                tags: ['form', 'validation', 'inline'],
             ),
             new LiveDemo(
                 'infinite-scroll',
@@ -43,6 +44,7 @@ public function findAll(): array
 Infinite scroll allows users to continuously load content as they scroll down the page.
 <br><code>Part One</code> of this demo shows how to <code>append new items</code> to the page with a <a href="/live-component"><code>LiveComponent</code></a>.  
 EOF,
+                tags: ['pattern', 'pagination', 'navigation'],
             ),
             new LiveDemo(
                 'live-memory',
@@ -54,6 +56,7 @@ public function findAll(): array
  rich interactions and real-time updates. This journey will take you through many features of Live Components, and you'll
   learn how to use them to create a fun and engaging game.
 EOF,
+                tags: ['game', 'time', 'events','LiveAction'],
             ),
             new LiveDemo(
                 'form-collection-type',
@@ -65,7 +68,8 @@ public function findAll(): array
 writing zero JavaScript.
 <br>
 This demo shows off adding and removing items entirely in PHP & Twig.
-EOF
+EOF,
+                tags: ['form', 'collection'],
             ),
             new LiveDemo(
                 'dependent-form-fields',
@@ -75,7 +79,8 @@ public function findAll(): array
                 longDescription: <<<EOF
 Unleash the power of form events, thanks to <a href="/live-component"><code>LiveComponent</code></a>
 and <a href="https://github.com/SymfonyCasts/dynamic-forms"><code>DynamicForms</code></a>.
-EOF
+EOF,
+                tags: ['form', 'field', 'events'],
             ),
             new LiveDemo(
                 'voting',
@@ -86,7 +91,8 @@ public function findAll(): array
 With each row as its own component, it's easy to add up & down voting + keep track of which items have been voted on.
 <br>
 This uses a <a href="https://symfony.com/bundles/ux-live-component/current/index.html#actions">LiveAction</a> to save everything with Ajax.
-EOF
+EOF,
+                tags: ['form', 'LiveAction'],
             ),
             new LiveDemo(
                 'inline-edit',
@@ -96,7 +102,8 @@ public function findAll(): array
                 longDescription: <<<EOF
 Inline editing? Simple. Use LiveComponents to track if you're in "edit" mode, let
 the user update any fields on your entity, and save through a <code>LiveAction</code>.
-EOF
+EOF,
+                tags: ['form', 'inline', 'LiveAction'],
             ),
             new LiveDemo(
                 'chartjs',
@@ -107,7 +114,8 @@ public function findAll(): array
 What do you get with Live Components + UX Chart.js + UX Autocomplete?
 <br>
 An auto-updating chart that you will ❤️.
-EOF
+EOF,
+                tags: ['chart', 'data', 'LiveAction', 'stimulus'],
             ),
             new LiveDemo(
                 'invoice',
@@ -118,7 +126,8 @@ public function findAll(): array
 Create or edit an `Invoice` entity along with child components for each related `InvoiceItem` entity.
 <br>
 Children components emit events to communicate to the parent and everything is saved in a `saveInvoice` LiveAction method.
-EOF
+EOF,
+                tags: ['form', 'entity', 'events', 'LiveAction'],
             ),
             new LiveDemo(
                 'product-form',
@@ -127,7 +136,8 @@ public function findAll(): array
                 route: 'app_demo_live_component_product_form',
                 longDescription: <<<EOF
 Open a child modal component to create a new Category.
-EOF
+EOF,
+                tags: ['form', 'entity', 'events', 'modal'],
             ),
             new LiveDemo(
                 'upload',
@@ -136,7 +146,8 @@ public function findAll(): array
                 route: 'app_demo_live_component_upload',
                 longDescription: <<<EOF
 File uploads are tricky. Submit them to a `#[LiveAction]` with the `files` modifier on `data-live-action` then process them.
-EOF
+EOF,
+                tags: ['form', 'file', 'upload', 'LiveAction'],
             ),
         ];
     }

ux.symfony.com/templates/components/DemoCard.html.twig

@@ -18,6 +18,11 @@
         <p class="DemoCard__description">
             {{ demo.description }}
         </p>
+        <p class="DemoCard__tags">
+            {% for tag in demo.tags %}
+                <span class="Tag">{{ tag }}</span>
+            {% endfor %}
+        </p>
     </div>
 
 </article>