[Site] Update demo pages

Author: smnandre

ux.symfony.com/assets/styles/components/_demo-container.scss

@@ -5,6 +5,16 @@
   border-top-right-radius: 12px;
 }
 
+.demo-introduction {
+  a {
+    color: var(--bs-code-color);
+    font-weight: 500;
+  }
+  code {
+    font-size: .95em;
+  }
+}
+
 .demo-container-inner {
   background-color: var(--bs-secondary-bg);
   border: 1px solid var(--bs-secondary-bg-subtle);

ux.symfony.com/src/Form/MealPlannerForm.php

@@ -26,6 +26,11 @@ class MealPlannerForm extends AbstractType
 {
     public function buildForm(FormBuilderInterface $builder, array $options): void
     {
+        /**
+         * Install DynamicFormBuilder:.
+         *
+         *    composer require symfonycasts/dynamic-forms
+         */
         $builder = new DynamicFormBuilder($builder);
 
         $builder

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

@@ -52,9 +52,8 @@ public function findAll(): array
                 description: 'After selecting the first field, automatically reload the options for a second field.',
                 route: 'app_demo_live_component_dependent_form_fields',
                 longDescription: <<<EOF
-Say goodbye to the hassle of dependent form fields with Live Components.
-<br>
-Whip up a <a href="https://symfony.com/doc/current/form/dynamic_form_modification.html#form-events-submitted-data">form with dynamic events</a> and then head out for a well-deserved lunch.
+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
             ),
             new LiveDemo(

ux.symfony.com/src/Util/SourceCleaner.php

@@ -17,9 +17,14 @@ class SourceCleaner
 {
     public static function cleanupPhpFile(string $contents, bool $removeClass = false): string
     {
-        $contents = u($contents)
-            ->replace("<?php\n", '')
-            ->replaceMatches('/namespace[^\n]*/', '');
+        $contents = u($contents)->replace("<?php\n", '');
+
+        // Remove LICENCE header
+        if ($contents->indexOf('* This file is part of the Symfony package')) {
+            $contents = $contents->after(' */');
+        }
+
+        $contents = $contents->replaceMatches('/namespace[^\n]*/', '');
 
         if ($removeClass) {
             $contents = $contents->replaceMatches('/class[^\n]*\n{/', '')

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

@@ -26,7 +26,11 @@
                 {{ stimulus_target('code-expander', 'expandCodeButton') }}
                 {{ stimulus_action('code-expander', 'expandCode') }}
                 style="display: none;"
-            >Expand code</button>
+            >
+                <twig:Icon name="arrow-down" />
+                Expand code
+                <twig:Icon name="arrow-down" />
+            </button>
         {% endblock %}
     </div>
 </div>

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

@@ -24,7 +24,7 @@
                 <a href="{{ url('app_demos') }}">DEMO</a>
             </p>
             <h1 class="ubuntu text-center">{{ demo.name }}</h1>
-            <div style="font-size: 1rem; line-height: 1.75rem;" class="mt-4">
+            <div style="font-size: 1rem; line-height: 1.75rem;" class="mt-4 demo-introduction">
                 {{ demo.longDescription|markdown_to_html }}
             </div>
         </div>
@@ -37,7 +37,7 @@
     </div>
 
     <div class="container-fluid container-xxl px-4 pt-4 px-md-5 pt-md-5 mb-5">
-        <div class="mb-3" style="position: relative;">
+        <div class="mb-5" style="position: relative;">
             <div class="p-4 markdown-container bg-body shadow-blur shadow-blur--rainbow" id="demo">
                 {% block demo_content %}{% endblock %}
             </div>