[Site] Improve social meta

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

@@ -24,6 +24,7 @@ public function __construct(
         private string $route,
         private string $color,
         private string $gradient,
+        private string $tagLine,
         private string $description,
         private string $createString,
         private ?string $imageFileName = null,
@@ -55,9 +56,14 @@ public function getGradient(): string
         return $this->gradient;
     }
 
-    public function getImageFilename(): string
+    public function getImageFilename(?string $format = null): string
     {
-        return $this->imageFileName ?? ltrim($this->name, 'ux-').'.png';
+        return $this->imageFileName ?? ltrim($this->name, 'ux-').($format ? ('-'.$format) : '').'.png';
+    }
+
+    public function getTagLine(): string
+    {
+        return $this->tagLine;
     }
 
     public function getDescription(): string
@@ -120,4 +126,9 @@ public function getCreateString(): string
     {
         return $this->createString;
     }
+
+    public function getImage(?string $format = null): string
+    {
+        return 'images/ux_packages/'.$this->getImageFilename($format);
+    }
 }

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

@@ -46,7 +46,7 @@ public function findAll(): array
             ),
             new LiveDemo(
                 'live-memory',
-                name: 'LiveMemory Card Game',
+                name: 'Live Memory Card Game',
                 description: 'A Memorable Game UX with Live Components!',
                 route: 'app_demo_live_memory',
                 longDescription: <<<EOF

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

@@ -27,6 +27,7 @@ public function findAll(?string $query = null): array
                 'app_turbo',
                 '#5920A0',
                 'linear-gradient(95deg, #5920A0 -5%, #844EC9 105%)',
+                'Single-page Symfony app',
                 'Integration with Turbo for single-page-app and real-time experience',
                 'I need to transform my app into an SPA!'
             ))
@@ -39,6 +40,7 @@ public function findAll(?string $query = null): array
                 'app_live_component',
                 '#D98A11',
                 'linear-gradient(124deg, #BF5421, #D98A11)',
+                'Interactive UI in PHP & Twig',
                 'Build dynamic interfaces with zero JavaScript',
                 'I need Twig templates that update in real-time!'
             ),
@@ -49,6 +51,7 @@ public function findAll(?string $query = null): array
                 'app_autocomplete',
                 '#DF275E',
                 'linear-gradient(95deg, #DF275E -5%, #E85995 105%)',
+                'Ajax-powered Form Select',
                 'Ajax-powered, auto-completable `select` elements',
                 'I need an Ajax-autocomplete select field'
             ),
@@ -59,6 +62,7 @@ public function findAll(?string $query = null): array
                 'app_icons',
                 '#fff',
                 'linear-gradient(to bottom right, cyan, purple)',
+                'SVG icons made easy',
                 'Render SVG icons seamlessly from your Twig templates.',
                 'I need to render SVG icons.',
                 'icons.svg',
@@ -70,6 +74,7 @@ public function findAll(?string $query = null): array
                 'app_chartjs',
                 '#21A81E',
                 'linear-gradient(95deg, #21A81E, #45DD42 108%)',
+                'Interactive charts with Chart.js',
                 'Easy charts with Chart.js',
                 'I need to build a chart'
             ))
@@ -81,6 +86,7 @@ public function findAll(?string $query = null): array
                 'app_react',
                 '#10A2CB',
                 'linear-gradient(95deg, #10a2cb -5%, #42caf0 105%)',
+                'Render React components from Twig',
                 'Quickly render `<React />` components &amp; pass them props.',
                 'I need to render React components from Twig'
             ))
@@ -92,6 +98,7 @@ public function findAll(?string $query = null): array
                 'app_vue',
                 '#35b67c',
                 'linear-gradient(95deg, #35B67C -5%, #8CE3BC 105%)',
+                'Render Vue components from Twig',
                 'Quickly render `<Vue />` components &amp; pass them props.',
                 'I need to render Vue.js components from Twig'
             ))
@@ -103,6 +110,7 @@ public function findAll(?string $query = null): array
                 'app_svelte',
                 '#FF3E00',
                 'linear-gradient(115deg, #BE3030, #FF3E00)',
+                'Render Svelte components from Twig',
                 'Quickly render `<Svelte />` components &amp; pass them props.',
                 'I need to render Svelte components from Twig',
                 'svelte.svg',
@@ -115,6 +123,7 @@ public function findAll(?string $query = null): array
                 'app_cropperjs',
                 '#1E8FA8',
                 'linear-gradient(136deg, #1E8FA8 -7%, #3FC0DC 105%)',
+                'Form Tools for cropping images',
                 'Form Type and tools for cropping images',
                 'I need to add a JavaScript image cropper'
             ))
@@ -126,6 +135,7 @@ public function findAll(?string $query = null): array
                 'app_lazy_image',
                 '#AC2777',
                 'linear-gradient(136deg, #AC2777 -8%, #F246AD 105%)',
+                'Delay Loading with Blurhash',
                 'Optimize Image Loading with BlurHash',
                 'I need to delay large image loading'
             ),
@@ -136,6 +146,7 @@ public function findAll(?string $query = null): array
                 'app_twig_component',
                 '#7FA020',
                 'linear-gradient(95deg, #7FA020 -5%, #A1C94E 105%)',
+                'Render Reusable UI Elements',
                 'Create PHP classes that can render themselves',
                 'I need to create PHP classes that render'
             ),
@@ -146,15 +157,18 @@ public function findAll(?string $query = null): array
                 'app_dropzone',
                 '#AC9F27',
                 'linear-gradient(135deg, #AC9F27 -8%, #E8D210 105%)',
+                'Upload Files with Style',
                 'Form type for stylized "drop zone" for file uploads',
                 'I need an upload field that looks great'
             ),
+
             (new UxPackage(
                 'swup',
                 'Swup Integration',
                 'app_swup',
                 '#D87036',
                 'linear-gradient(95deg, #D87036 -5%, #EA9633 105%)',
+                'Stylized Page Transitions',
                 'Integration with the page transition library Swup',
                 'I need stylized page transitions'
             ))
@@ -166,6 +180,7 @@ public function findAll(?string $query = null): array
                 'app_notify',
                 '#204CA0',
                 'linear-gradient(95deg, #204CA0 -6%, #3D82EA 105%)',
+                'Native Browser Notifications',
                 'Trigger native browser notifications from inside PHP',
                 'I need to send browser notifications',
             ),
@@ -176,6 +191,7 @@ public function findAll(?string $query = null): array
                 'app_toggle_password',
                 '#BE0404',
                 'linear-gradient(142deg, #FD963C -15%, #BE0404 95%)',
+                'Password Visibility Switch',
                 'Switch the visibility of a password field',
                 'I need to toggle the visibility of a password field',
             ),
@@ -186,6 +202,7 @@ public function findAll(?string $query = null): array
                 'app_typed',
                 '#20A091',
                 'linear-gradient(95deg, #20A091 -5%, #4EC9B3 105%)',
+                'Animated Typing with Typed.js',
                 'Animated typing with Typed.js',
                 'I need to type onto the screen... like this'
             ))
@@ -197,6 +214,7 @@ public function findAll(?string $query = null): array
                 'app_translator',
                 '#2248D0',
                 'linear-gradient(139deg, #2248D0 -20%, #00FFB2 113%)',
+                'Symfony Translations in JavaScript',
                 "Use Symfony's translations in JavaScript",
                 'I need to translate strings in JavaScript',
                 'translator.svg'

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

@@ -3,28 +3,33 @@
     <link rel="canonical" href="{{ meta.canonical }}">
 {% endif %}
 
-<meta name="description" content="{% block description %}{{ meta.description|default|u.truncate(200, '...') }}{% endblock %}">
+<meta name="description" content="{% block description %}{{ meta.description|default|u.truncate(200, '...', false) }}{% endblock %}">
 
-{% set og_title = meta.og.title ?? meta.title ?? null %}
-{% if og_title %}
-    <meta property="og:title" content="{{ og_title|u.truncate(55, '...') }}">
-{% endif %}
-{% set og_description = meta.og.description ?? meta.description ?? null %}
-{% if og_description %}
-    <meta property="og:description" content="{{ og_description|u.truncate(160, '...') }}">
-{% endif %}
-{% set og_url = meta.og.url ?? meta.canonical ?? null %}
-{% if og_url %}
-    <meta property="og:url" content="{{ absolute_url(og_url) }}">
-{% endif %}
-{% set image = meta.og.image ?? meta.image ?? null %}
-{% if image.url|default %}
-    <meta property="og:image" content="{{ absolute_url(image.url) }}">
-    <meta property="og:image:width" content="{{ image.width }}">
-    <meta property="og:image:height" content="{{ image.height }}">
-    <meta property="og:image:type" content="{{ image.type|default('image/png') }}">
-    {% if image.alt|default %}
-        <meta property="og:image:alt" content="{{ image.alt }}">
+{# META < META.SOCIAL #}
+{% set social = {
+    title: meta.title,
+    description: meta.description ?? '',
+    image: meta.image ?? null,
+    url: meta.canonical ?? null,
+}|merge(meta.social ?? {}) %}
+
+{# META < META.SOCIAL < META.OG #}
+{% set og = social|merge(meta.og ?? {}) %}
+<meta property="og:title" content="{{ og.title|u.truncate(55, '...', false) }}">
+<meta property="og:description" content="{{ og.description|u.truncate(120, '...', false) }}">
+<meta property="og:url" content="{{ absolute_url(og.url) }}">
+<meta property="og:site_name" content="Symfony UX" />
+{% if og.image.url|default %}
+    <meta property="og:image" content="{{ absolute_url(og.image.url) }}">
+     {% if og.image.width|default and og.image.height|default %}
+        <meta property="og:image:width" content="{{ og.image.width }}">
+        <meta property="og:image:height" content="{{ og.image.height }}">
+     {% endif %}
+    {% if og.image.type|default %}
+        <meta property="og:image:type" content="{{ og.image.type }}">
+    {% endif %}
+    {% if og.image.alt|default %}
+        <meta property="og:image:alt" content="{{ og.image.alt }}">
     {% endif %}
 {% else %}
     <meta property="og:image" content="{{ absolute_url(asset('images/symfony-ux.png')) }}">
@@ -33,17 +38,20 @@
     <meta property="og:image:type" content="image/png">
     <meta property="og:image:alt" content="Symfony UX">
 {% endif %}
-<meta property="og:site_name" content="Symfony UX" />
 
-{% if meta.tiwtter.title|default %}
-    <meta name="twitter:title" content="{{ meta.twitter.title|u.truncate(55, '...') }}">
-{% endif %}
-{% if meta.twitter.description|default %}
-    <meta name="twitter:description" content="{{ meta.twitter.description|u.truncate(160, '...') }}">
-{% endif %}
-{% set image = meta.twitter.image ?? meta.og.image ?? meta.image ?? null %}
-{% if image.url|default %}
-    <meta name="twitter:image" content="{{ absolute_url(image.url) }}">
-    <meta name=”twitter:card” content=”summary_large_image” />
+{# META < META.SOCIAL < META.TWITTER #}
+{% set twitter = social|merge(meta.twitter ?? {}) %}
+{% set twitter_card = twitter.image.width|default(0) > 1200 ? 'summary_large_image' : 'summary' %}
+<meta name="twitter:title" content="{{ twitter.title|u.truncate(55, '...', false) }}">
+<meta name="twitter:card" content="{{ twitter.card ?? twitter_card }}">
+<meta name="twitter:description" content="{{ twitter.description|u.truncate(120, '...', false) }}">
+<meta name="twitter:url" content="{{ absolute_url(twitter.url) }}">
+<meta name="twitter:creator" content="{{ twitter.creator ?? '@symfonyux' }}">
+<meta name="twitter:site" content="@symfonyux">
+{% if twitter.image.url|default %}
+    <meta name="twitter:image" content="{{ absolute_url(twitter.image.url) }}">
+    {% if twitter.image.width|default and twitter.image.height|default %}
+        <meta name="twitter:image:width" content="{{ twitter.image.width }}">
+        <meta name="twitter:image:height" content="{{ twitter.image.height }}">
+    {% endif %}
 {% endif %}
-<meta name="twitter:site" content="@SymfonyUX">

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

@@ -2,21 +2,20 @@
 
 {% set meta = {
     title: demo.name,
-    title_suffix: ' - Symfony UX Demo',
-    description: demo.description,
-    og: {
-        title: demo.name ~ ' - Symfony UX Demo',
-        description: demo.longDescription|striptags|u.truncate(200, '...')
-    },
-    image: {
-        url: absolute_url(asset(demo.screenshotFilename('1280x720'))),
-        width: 1280,
-        height: 720,
-    },
+    title_suffix: ' -  Live Component - Symfony UX',
+    description: demo.description|striptags,
     canonical: url(demo.route),
-    twitter: {
-        card: 'summary_large_image',
-    }
+    social: {
+        title: demo.name ~ ' - Symfony UX',
+        description: demo.longDescription|striptags,
+        image: {
+            url: absolute_url(asset(demo.screenshotFilename('1280x720'))),
+            type: 'image/png',
+            width: 1280,
+            height: 720,
+            alt: demo.name ~ ' - Demo Screenshot',
+        },
+    },
 } %}
 
 {% block content %}
@@ -27,7 +26,7 @@
                 <div class="text-center mt-md-0">
                     <p class="eyebrows">
                         <a href="{{ url('app_demos') }}">DEMOS</a> /
-                        <a href="{{ url('app_demos') }}">LiveComponent</a>
+                        <a href="{{ url('app_live_component') }}">Live Component</a>
                     </p>
                     <h1 class="text-center">{{ demo.name }}</h1>
                     <div style="font-size: 1rem; line-height: 1.75rem;" class="mt-4 demo-introduction">

ux.symfony.com/templates/demos/live_memory/index.html.twig

@@ -1,20 +1,4 @@
-{% extends 'base.html.twig' %}
-
-{% set meta = {
-    title: demo.name,
-    title_suffix: ' - Symfony UX Demo',
-    description: demo.description,
-    canonical: url(demo.route),
-    image: {
-        url: absolute_url(asset(demo.screenshotFilename('1280x720'))),
-        width: 1080,
-        height: 720,
-    },
-    og: {
-        title: demo.name ~ ' - Symfony UX Demo',
-        description: demo.longDescription|striptags|u.truncate(200, '...')
-    }
-} %}
+{% extends 'demos/live_demo.html.twig' %}
 
 {% block stylesheets %}
     <link rel="stylesheet" href="{{ asset('styles/demos/live-memory.min.css') }}"/>

ux.symfony.com/templates/ux_packages/package.html.twig

@@ -1,9 +1,20 @@
 {% extends 'base.html.twig' %}
 
 {% set meta = {
-    title: package.humanName,
+    title: package.humanName ~ ' - ' ~ package.tagline,
     description: package.description,
     canonical: url(package.route),
+    social: {
+        title: package.tagline ~ ' - Symfony UX ' ~ package.humanName,
+        description: package.description|striptags,
+        image: {
+            url: absolute_url(asset(package.imageFileName('1200x675'))),
+            type: 'image/png',
+            width: 1200,
+            height: 675,
+            alt: package.name ~ ' - Component Icon',
+        },
+    }
 } %}
 
 {% block header %}