minor symfony#1949 [Site] Add Badge & Cluster (smnandre)

This PR was squashed before being merged into the 2.x branch.

Discussion
----------

[Site] Add Badge & Cluster

![badges](https://github.com/user-attachments/assets/b1327d00-3ac0-48d1-ae8b-4c16eb91c2ef)

Commits
-------

8b0e215 [Site] Add Badge & Cluster

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

@@ -61,10 +61,12 @@
 
 // Layouts
 @import "layouts/container";
+@import "layouts/cluster";
 @import "layouts/grid";
 @import "layouts/section";
 
 // Components
+@import "components/Badge";
 @import "components/Banner";
 @import "components/Browser";
 @import "components/Changelog";

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

@@ -0,0 +1,50 @@
+// -----------------------------------------------------------------
+// Badge
+// -----------------------------------------------------------------
+
+.Badge {
+  background: #1D1F23;
+  padding: .2rem .75rem;
+  border-radius: .5rem;
+  display: inline-flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  border: 1px solid #141415;
+  font-size: .8rem;
+  gap: .5rem;
+  position: relative;
+}
+
+.Badge__label {
+  font-stretch: condensed;
+  text-transform: uppercase;
+  color: #fff;
+  font-weight: lighter;
+  font-size: smaller;
+  display: flex;
+  align-items: center;
+  gap: .5rem;
+
+  &:after {
+    content: ":";
+    opacity: .5;
+    margin-left: -.25rem;
+  }
+}
+
+.Badge__icon {
+  width: 1em;
+  height: 1em;
+  margin-block-start: -0.125em;
+}
+
+.Badge__value {
+  color: #81ADB5;
+  font-weight: normal;
+
+  a::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+  }
+}

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

@@ -34,7 +34,6 @@
         width: 0%;
     }
     a:hover::before {
-      # transition: decoration 0.3s;
       width: 100%;
     }
   }

ux.symfony.com/assets/styles/layouts/_cluster.scss

@@ -0,0 +1,7 @@
+.cluster {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+  align-items: center;
+}

ux.symfony.com/cookbook/component_architecture.md

@@ -5,6 +5,8 @@ image: images/cookbook/component-architecture.png
 tags: 
     - javascript
     - symfony
+author: Mathéo Daninos
+published_at: '2024-08-02'
 ---
 
 ## Introduction

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

@@ -23,6 +23,8 @@ public function __construct(
         public string $description,
         public string $content,
         public array $tags,
+        public Person|string $author,
+        public \DateTimeImmutable|string $publishedAt,
     ) {
     }
 }

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

@@ -0,0 +1,20 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Model;
+
+final readonly class Person
+{
+    public function __construct(
+        public string $name,
+    ) {
+    }
+}

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

@@ -57,6 +57,8 @@ public function createFromFile(string $file): Cookbook
             description: $frontMatter['description'],
             content: $content,
             tags: $frontMatter['tags'],
+            author: $frontMatter['author'],
+            publishedAt: $frontMatter['published_at'],
         );
     }
 }

ux.symfony.com/src/Twig/Components/Badge/AuthorBadge.php

@@ -0,0 +1,34 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Twig\Components\Badge;
+
+use App\Model\Person;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent(
+    name: 'Badge:Author',
+    template: 'components/Badge.html.twig',
+    exposePublicProps: false,
+)]
+final class AuthorBadge extends Badge
+{
+    public Person|string $author;
+
+    public string $label = 'Author';
+
+    public string $icon = 'lucide:user-round';
+
+    public function mount(string $author): void
+    {
+        $this->value = $author;
+    }
+}

ux.symfony.com/src/Twig/Components/Badge/Badge.php

@@ -0,0 +1,62 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Twig\Components\Badge;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
+
+#[AsTwigComponent(
+    name: 'Badge',
+    template: 'components/Badge.html.twig',
+    exposePublicProps: false,
+)]
+class Badge
+{
+    public string $label;
+
+    public string $value;
+
+    public string $icon;
+
+    public string $url;
+
+    #[ExposeInTemplate(destruct: true)]
+    public function getBadge(): array
+    {
+        return [
+            'icon' => $this->getIcon(),
+            'label' => $this->getLabel(),
+            'value' => $this->getValue(),
+            'url' => $this->getUrl(),
+        ];
+    }
+
+    protected function getLabel(): string
+    {
+        return $this->label;
+    }
+
+    protected function getValue(): string
+    {
+        return $this->value ?? '';
+    }
+
+    protected function getIcon(): ?string
+    {
+        return $this->icon;
+    }
+
+    protected function getUrl(): ?string
+    {
+        return $this->url ?? '';
+    }
+}

ux.symfony.com/src/Twig/Components/Badge/DateBadge.php

@@ -0,0 +1,36 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Twig\Components\Badge;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+
+#[AsTwigComponent(
+    name: 'Badge:Date',
+    template: 'components/Badge.html.twig',
+    exposePublicProps: false,
+)]
+final class DateBadge extends Badge
+{
+    public string $label = 'Date';
+
+    public string $icon = 'lucide:calendar';
+
+    public string $format = 'Y-m-d';
+
+    public function mount(string|\DateTimeImmutable $date): void
+    {
+        if (\is_string($date)) {
+            $date = new \DateTimeImmutable($date);
+        }
+        $this->value = $date->format($this->format);
+    }
+}

ux.symfony.com/templates/_aside.html.twig

@@ -1,24 +1,26 @@
 <aside style="background-color: var(--bs-secondary-bg-subtle);" class="mt-5">
     <div class="container-fluid container-xxl p-4 p-md-5">
         <div style="display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));">
-            <twig:DocsLink
-                title="Documentation"
-                text="Get going with the official Symfony UX doc."
-                url="https://symfony.com/bundles/StimulusBundle/current/index.html"
-                icon="symfony"
-            />
-            <twig:DocsLink
-                title="Screencasts"
-                text="Watch UX screencasts on SymfonyCasts."
-                url="https://symfonycasts.com/screencast/stimulus"
-                icon="symfonycast"
-            />
-            <twig:DocsLink
-                title="Community"
-                text="Feedback · support · contributions."
-                url="https://github.com/symfony/ux"
-                icon="github"
-            />
+            {% block links %}
+                <twig:DocsLink
+                    title="Documentation"
+                    text="Get going with the official Symfony UX doc."
+                    url="https://symfony.com/bundles/StimulusBundle/current/index.html"
+                    icon="symfony"
+                />
+                <twig:DocsLink
+                    title="Screencasts"
+                    text="Watch UX screencasts on SymfonyCasts."
+                    url="https://symfonycasts.com/screencast/stimulus"
+                    icon="symfonycast"
+                />
+                <twig:DocsLink
+                    title="Community"
+                    text="Feedback · support · contributions."
+                    url="https://github.com/symfony/ux"
+                    icon="github"
+                />
+            {% endblock %}
         </div>
     </div>
 </aside>

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

@@ -0,0 +1,19 @@
+<div {{ attributes.defaults({
+    class: 'Badge',
+}) }}>
+    <span class="Badge__label">
+        {%- if icon %}
+            <twig:ux:Icon name="{{ icon }}" class="Badge__icon" />
+        {% endif -%}
+        {{- label -}}
+    </span>
+    <span class="Badge__value">
+        {%- if url %}
+            <a href="{{ url }}" class="Badge__link">
+                {{- value -}}
+            </a>
+        {% else %}
+            {{ value }}
+        {% endif -%}
+    </span>
+</div>

ux.symfony.com/templates/components/Package/PackageHeader.html.twig

@@ -18,6 +18,5 @@
                 style="--color-accent: {{ package.color }}; transform: translateY(50%);"
             />
         </div>
-
     </div>
 </div>

ux.symfony.com/templates/cookbook/index.html.twig

@@ -14,7 +14,7 @@
             <h1 class="text-center mt-5"><a href="{{ url('app_cookbook') }}">Cookbook</a></h1>
             <div style="font-size: 1rem; line-height: 1.75rem;" class="mt-4 text-center demo-introduction">
                 <p>
-                    some recipes to show how to use the component and concept of SymfonyUx
+                    Articles and guides explaining the components and concepts of Symfony UX.
                 </p>
             </div>
         </div>

ux.symfony.com/templates/cookbook/show.html.twig

@@ -56,9 +56,37 @@
             </div>
         </div>
 
+        <div class="container container-xl x-4 pt-4 px-md-5 pt-md-5">
+            <div class="cluster">
+                <twig:Badge:Author author="{{ cookbook.author }}" />
+                <twig:Badge:Date label="Published" date="{{ cookbook.publishedAt }}" />
+            </div>
+        </div>
+
     </article>
 {% endblock %}
 
 {% block aside %}
-    {{ include('_aside.html.twig') }}
+    {% embed '_aside.html.twig' %}
+        {% block links %}
+             <twig:DocsLink
+                    title="PHP Packages"
+                    text="Symfony UX bundles & components."
+                    url="{{ url('app_packages') }}"
+                    icon="lucide:package"
+                />
+                <twig:DocsLink
+                    title="Interactive Demos"
+                    text="With commented source code."
+                    url="{{ url('app_demo_live_component') }}"
+                    icon="lucide:monitor-check"
+                />
+                <twig:DocsLink
+                    title="Community"
+                    text="Feedback · support · contributions."
+                    url="https://github.com/symfony/ux"
+                    icon="github"
+                />
+        {% endblock %}
+    {% endembed %}
 {% endblock %}