[Site] Clean demos & packages pages

Author: smnandre

ux.symfony.com/assets/controllers/code-expander-controller.js

@@ -4,6 +4,12 @@ import { Controller } from '@hotwired/stimulus';
 export default class extends Controller {
     static targets = ['useStatements', 'expandCodeButton', 'codeContent'];
 
+    connect() {
+        if (this.hasExpandCodeButtonTarget && !this.#isOverflowing(this.codeContentTarget)) {
+            this.expandCodeButtonTarget.remove();
+        }
+    }
+
     expandUseStatements(event) {
         this.useStatementsTarget.style.display = 'block';
         event.currentTarget.remove();

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

@@ -38,10 +38,7 @@
   max-height: 100%;
   width: 100%;
   display: block;
-  transition: transform 500ms linear;
-  transform: scale(1) translateY(0);
   border-radius: .25rem;
-  transform-style: preserve-3d;
   opacity: .80;
 }
 .DemoCard:hover .DemoCard__image {
@@ -53,7 +50,7 @@
   flex: 1;
   border-bottom-left-radius: var(--radius);
   border-bottom-right-radius: var(--radius);
-  gap: .5rem;
+  gap: .15rem;
   display: flex;
   flex-direction: column;
 }
@@ -81,5 +78,6 @@
 }
 
 .DemoCard__tags {
+  margin-top: auto;
   margin-bottom: 0;
 }

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

@@ -10,12 +10,18 @@
 
 .Terminal_header {
     display: flex;
-    background-color: #0D0D0DBA;
+    background-color: var(--bg-header, #0D0D0DBA);
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
     align-items: center;
     justify-content: space-between;
     padding: .5rem;
+    opacity: var(--header-opacity, 1);
+    transition: all 250ms ease-in-out;
+
+    .Terminal:hover & {
+        opacity: 1;
+    }
 
     .nav-tabs {
         border: 0;

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

@@ -190,8 +190,6 @@ public function findAll(?string $query = null): array
                 'I need to translate strings in JavaScript',
                 'translator.svg'
             ),
-
-            // new UxPackage('form-collection', 'Form Collection', 'app_form_collection', 'linear-gradient(95.22deg, #5920A0 -4.7%, #844EC9 105.43%), #5920A0', 'Handle CollectionType embedded forms with zero custom JavaScript'),
         ];
 
         if (!$query) {
@@ -212,7 +210,7 @@ public function find(string $name): UxPackage
             }
         }
 
-        throw new \InvalidArgumentException(sprintf('Unknown package "%s"', $name));
+        throw new \InvalidArgumentException(sprintf('Unknown package "%s".', $name));
     }
 
     public function count(): int
@@ -229,6 +227,6 @@ public function findByRoute(string $route): UxPackage
             }
         }
 
-        throw new \InvalidArgumentException(sprintf('Could not find a package for the current route "%s"', $route));
+        throw new \InvalidArgumentException(sprintf('Could not find a package for the current route "%s".', $route));
     }
 }

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

@@ -0,0 +1,24 @@
+<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"
+            />
+        </div>
+    </div>
+</aside>

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

@@ -7,7 +7,10 @@
             {% block content %}{% endblock %}
         {% endapply %}
     </div>
-    <div class="col-12 col-md-6" {{ not reversed ? 'order-md-1' }}>
-        <twig:CodeBlock :filename="filename" />
+    <div class="col-12 col-md-6 {{ not reversed ? 'order-md-1' }}"  style="padding-inline: 0;">
+        <twig:CodeBlock
+            :filename="filename"
+            style="--bg-header: rgba(13, 13, 13, 0.729); --header-opacity: .5;"
+        />
     </div>
 </div>

ux.symfony.com/templates/main/demos.html.twig

@@ -11,6 +11,14 @@
     <div class="hero">
         <div class="container-fluid container-xxl px-4 pt-4 px-md-5">
             <h1 class="text-center mt-5">All Demos</h1>
+            <div style="font-size: 1rem; line-height: 1.75rem;" class="mt-4 text-center demo-introduction">
+                <p>
+                    Discover all that <code>Symfony UX</code> offers through our collection of demos!<br/>
+                    Source code is provided for each demo: PHP, Twig, JS, and CSS.
+                </p>
+            </div>
+            <p class="text-center mt-2 mb-5">
+            </p>
         </div>
     </div>
 
@@ -23,3 +31,7 @@
     </div>
 
 {% endblock %}
+
+{% block aside %}
+    {{ include('_aside.html.twig') }}
+{% endblock %}

ux.symfony.com/templates/main/homepage.html.twig

@@ -113,29 +113,6 @@
     </div>
 </div>
 
-<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"
-            />
-        </div>
-    </div>
-</aside>
+{{ include('_aside.html.twig') }}
 
 {% endblock %}

ux.symfony.com/templates/main/packages.html.twig

@@ -9,8 +9,8 @@
 {% block content %}
 <div class="hero">
     <div class="container-fluid container-xxl px-4 pt-4 px-md-5">
-        <h1 class="text-center mt-5">All Packages</h1>
-        <p class="text-center mt-2 mb-5">A treasure chest of packages to solve your<br>frontend problems.</p>
+        <h1 class="text-center mt-5">Symfony UX Packages</h1>
+        <p class="text-center mt-2 mb-5">A treasure chest of bundles, components and packages</p>
     </div>
 </div>
 
@@ -26,20 +26,5 @@
 {% endblock %}
 
 {% block aside %}
-    <div style="background-color: var(--bs-secondary-bg);" class="mt-5">
-        <div class="container-fluid container-xxl p-5">
-            <div style="display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));">
-                <twig:DocsLink
-                    url="https://symfonycasts.com/screencast/stimulus"
-                    title="Screencasts"
-                    text="Jump right into with the Symfony UX & Stimulus screencast."
-                />
-                <twig:DocsLink
-                    url="https://symfony.com/doc/current/frontend/ux.html"
-                    title="Documentation"
-                    text="Ready to get started? The official symfony.com UX Docs."
-                />
-            </div>
-        </div>
-    </div>
+    {{ include('_aside.html.twig') }}
 {% endblock %}