[Site] Grouped fixes

ux.symfony.com/.platform.app.yaml

@@ -57,4 +57,4 @@ hooks:
         php bin/console app:load-data
         # needed because StimulusBundle / asset mapper will currently
         # expect this asset mapper directory to exist at runtime
-        mkdir var/translations
+        mkdir -p var/translations

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

@@ -78,6 +78,7 @@
 @import "components/IconModal";
 @import "components/IconSearch";
 @import "components/IconSetCard";
+@import "components/Pagination";
 @import "components/ProductGrid";
 @import "components/PackageHeader";
 @import "components/PackageBox";

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

@@ -113,7 +113,7 @@
   }
   .BannerInner {
     flex-direction: row;
-    padding: 4rem 2rem;
+    padding: 2rem;
     gap: 4rem;
   }
   .BannerTitle {

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

@@ -7,6 +7,7 @@
   position: relative;
   --left-pane: 10rem;
 }
+
 .Changelog::before {
   content: '';
   position: absolute;
@@ -27,6 +28,7 @@
 .ChangelogItem summary {
   list-style: none;
 }
+
 .ChangelogItem summary::-webkit-details-marker {
   display: none;
 }
@@ -42,6 +44,7 @@
   justify-content: center;
   text-align: center;
 }
+
 .ChangelogItem__Anchor::after {
   content: '';
   position: absolute;
@@ -60,6 +63,7 @@
   opacity: .90;
   transition: all 150ms ease-in-out;
 }
+
 .ChangelogItem__Version:hover {
   opacity: 1;
 }
@@ -78,6 +82,7 @@
   background-color: #eef0f91a;
   border: 1px solid var(--bs-secondary-bg);
 }
+
 [data-bs-theme="dark"] .ChangelogItem__Content {
   background-color: #1c2024;
 }
@@ -89,11 +94,13 @@
   gap: 1rem;
   justify-content: space-between;
 }
+
 .ChangelogItem__Head svg {
   transition: 150ms ease-in-out;
   transform: rotate(0deg);
   opacity: .5;
 }
+
 .ChangelogItem [open] .ChangelogItem__Head svg {
   transform: rotate(180deg);
   opacity: .75;
@@ -106,6 +113,7 @@
   color: var(--bs-body-color);
   margin-block-end: 0;
 }
+
 .ChangelogItem [open] .ChangelogItem__Title {
   font-size: 1.25rem;
 }
@@ -140,35 +148,31 @@
   padding-left: 0.25rem;
   margin-inline-start: .5rem;
 }
+
 .ChangelogItem__Text a {
   color: #a3bfe8;
 }
+
 .ChangelogItem__Text a:hover {
   color: #2072ea;
 }
+
 .ChangelogItem__Text p:last-child {
   margin-bottom: 0;
 }
 
 @media screen and (max-width: 980px) {
-    .Changelog {
-        --left-pane: 2rem;
-    }
-    .ChangelogItem {
-      gap: 2rem;
-    grid-template-columns: auto 1fr;
+  .Changelog {
+    --left-pane: 0rem;
   }
-    .ChangelogItem {
+  .ChangelogItem {
+    gap: 0;
     grid-template-columns: auto 1fr;
   }
-  .ChangelogItem__Anchor::after {
-    right: 2rem;
-    scale: 0.6;
+  .ChangelogItem__Anchor {
+    display: none;
   }
-  .ChangelogItem::before {
-    left: 2rem;
+  .Changelog::before {
+    display: none;
   }
-    .Changelog::before {
-        left: var(--left-pane);
-    }
 }

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

@@ -0,0 +1,27 @@
+// -----------------------------------------------------------------
+// Pagination
+// -----------------------------------------------------------------
+
+.Pagination {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  gap: 2rem;
+}
+
+.Pagination a {
+  display: grid;
+  place-content: center;
+  width: 3rem;
+  height: 3rem;
+  border-radius: 1rem;
+  transition: opacity 0.3s;
+  background: var(--bs-body-bg);
+  opacity: .5;
+
+  &[aria-current="true"],
+  &:hover {
+    opacity: 1;
+  }
+}

ux.symfony.com/composer.json

@@ -1,27 +1,27 @@
 {
     "type": "project",
+    "description": "Symfony UX website & demos",
     "license": "proprietary",
     "prefer-stable": true,
     "minimum-stability": "dev",
+    "homepage": "https://ux.symfony.com",
     "require": {
         "php": ">=8.3",
         "ext-ctype": "*",
         "ext-iconv": "*",
-        "babdev/pagerfanta-bundle": "^4.4",
         "composer/semver": "^3.4",
         "doctrine/doctrine-bundle": "^2.10",
         "doctrine/doctrine-migrations-bundle": "^3.2.4",
         "doctrine/orm": "^2.15.3",
         "intervention/image": "^2.7.2",
         "kornrunner/blurhash": "^1.2.2",
         "league/commonmark": "^2.4",
-        "pagerfanta/twig": "^3.8",
         "symfony/asset": "7.0.*",
         "symfony/asset-mapper": "7.0.*",
         "symfony/console": "7.0.*",
         "symfony/dotenv": "7.0.*",
         "symfony/expression-language": "7.0.*",
-        "symfony/flex": "^2.3.1",
+        "symfony/flex": "^2.4",
         "symfony/form": "7.0.*",
         "symfony/framework-bundle": "7.0.*",
         "symfony/http-client": "7.0.*",
@@ -44,7 +44,7 @@
         "symfony/ux-react": "2.x-dev",
         "symfony/ux-svelte": "2.x-dev",
         "symfony/ux-swup": "2.x-dev",
-        "symfony/ux-toggle-password": "@dev",
+        "symfony/ux-toggle-password": "2.x-dev",
         "symfony/ux-translator": "2.x-dev",
         "symfony/ux-turbo": "2.x-dev",
         "symfony/ux-twig-component": "2.x-dev",
@@ -55,12 +55,12 @@
         "symfonycasts/dynamic-forms": "^0.1.0",
         "symfonycasts/sass-bundle": "^0.6.0",
         "twbs/bootstrap": "^5.3",
-        "twig/extra-bundle": "^2.12|^3.6.1",
+        "twig/extra-bundle": "^3.8",
         "twig/html-extra": "^3.8",
-        "twig/intl-extra": "^3.6",
-        "twig/markdown-extra": "^3.6",
+        "twig/intl-extra": "^3.8",
+        "twig/markdown-extra": "^3.8",
         "twig/string-extra": "^3.8",
-        "twig/twig": "^2.12|^3.6.1"
+        "twig/twig": "^3.8"
     },
     "config": {
         "allow-plugins": {
@@ -91,7 +91,9 @@
         "symfony/polyfill-php73": "*",
         "symfony/polyfill-php74": "*",
         "symfony/polyfill-php80": "*",
-        "symfony/polyfill-php81": "*"
+        "symfony/polyfill-php81": "*",
+        "symfony/polyfill-php82": "*",
+        "symfony/polyfill-php83": "*"
     },
     "scripts": {
         "auto-scripts": {