feature #1907 [Site] Social metadata (smnandre)

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

Discussion
----------

[Site] Social metadata

Add  FB/Twitter metadata, link the twitter acount and update demo images.

Social images for ackages will be done later

--

TODO After
- [x] bigger social demo images (1200x675) -> will oversize them via Pixelmator
- [ ] one social image per package (on it)

Commits
-------

2a369c6 [Site] Social metadata

Author: kbond

ux.symfony.com/assets/icons/hugeicons/new-twitter.svg

@@ -24,7 +24,7 @@
   flex-wrap: nowrap;
   display: flex;
   flex-direction: row-reverse;
-  gap: 1.5rem;
+  gap: 1rem;
   align-items: center;
 
   @media (min-width: 860px) {
@@ -83,18 +83,22 @@
   font-weight: 500;
   letter-spacing: 0;
   opacity: .9;
-  transition: opacity 250ms;
   padding: 0;
   border: none;
   background: none;
   text-align: center;
   line-height: 2rem;
   position: relative;
+  transition: all 250ms;
   &:hover {
     opacity: 1;
   }
 }
 
+.AppNav_actions .AppNav_item:hover {
+  transform: scale(1.1);
+}
+
 .AppNav_item--icon {
   padding: 0;
   width: 1.5rem;

ux.symfony.com/assets/images/icons/x-twitter.svg

@@ -56,8 +56,8 @@ public function getTags(): array
         return $this->tags;
     }
 
-    public function getScreenshotFilename(): string
+    public function getScreenshotFilename(?string $format = null): string
     {
-        return 'images/live_demo/'.$this->identifier.'.png';
+        return 'images/live_demo/'.$this->identifier.($format ? ('-'.$format) : '').'.png';
     }
 }

ux.symfony.com/assets/images/live_demo/auto-validating-form-1280x720.png

@@ -3,26 +3,34 @@
 
         <nav class="AppNav AppNav--white">
 
-            <a class="AppHeader_logo" href="{{ path('app_homepage') }}"  aria-label="Homepage">
+            <a class="AppHeader_logo" href="{{ path('app_homepage') }}"  aria-label="Symfony UX">
                 <img src="{{ asset('images/sf-ux.svg') }}" alt="Symfony UX" width="161" height="30" />
             </a>
 
             <div class="AppNav_actions">
                 <button
                     class="AppHeader_toggler AppNav_item AppNav_item--icon"
-                    aria-label="Toggle Menu"
                     data-action="ux-header#toggleMenu"
+                    aria-label="Toggle menu"
                 >
                     <twig:Icon name="menu"/>
                 </button>
-
                 <twig:ThemeSwitcher class="AppNav_item AppNav_item--icon" aria-label="Switch dark/light mode"/>
                 <a
                     class="AppNav_item AppNav_item--icon"
-                    aria-label="Symfony UX on GitHub"
+                    href="https://x.com/symfonyux"
+                    rel="external me"
+                    title="Symfony UX on X (Twitter)"
+                >
+                    <twig:Icon name="x-twitter"/>
+                </a>
+                <a
+                    class="AppNav_item AppNav_item--icon"
                     href="https://github.com/symfony/ux"
+                    rel="external me"
+                    title="Symfony UX on GitHub"
                 >
-                    <twig:Icon name="github"/>
+                    <twig:Icon name="github" />
                 </a>
             </div>
 

ux.symfony.com/assets/images/live_demo/chartjs-1280x720.png

@@ -0,0 +1,49 @@
+
+{% if meta.canonical|default %}
+    <link rel="canonical" href="{{ meta.canonical }}">
+{% endif %}
+
+<meta name="description" content="{% block description %}{{ meta.description|default|u.truncate(200, '...') }}{% 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 }}">
+    {% endif %}
+{% else %}
+    <meta property="og:image" content="{{ absolute_url(asset('images/symfony-ux.png')) }}">
+    <meta property="og:image:width" content="1024">
+    <meta property="og:image:height" content="576">
+    <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” />
+{% endif %}
+<meta name="twitter:site" content="@SymfonyUX">

ux.symfony.com/assets/images/live_demo/dependent-form-fields-1280x720.png

@@ -5,24 +5,20 @@
         <title>{% block title %}{{ meta.title|default }}{{ meta.title_suffix|default(' - Symfony UX') }}{% endblock %}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <meta name="color-scheme" content="dark light">
-        {% block stylesheets %}
-        {% endblock %}
-        {% if meta.canonical|default %}
-            <link rel="canonical" href="{{ meta.canonical }}">
-        {% endif %}
         <meta name="view-transition" content="same-origin" />
         <link rel="icon" href="/favicon.ico" sizes="48x48">
         <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml">
         <link rel="apple-touch-icon" href="/apple-touch-icon.png">
         <link rel="manifest" href="/site.webmanifest">
         <link rel="mask-icon" href="https://symfony.com/favicons/safari-pinned-tab.svg" color="#5bbad5">
-        <meta name="description" content="{% block description %}{{ meta.description|default }}{% endblock %}">
-        <meta property="og:site_name" content="Symfony UX" />
-        <meta property="og:image" content="{{ absolute_url(asset('images/symfony-ux.png')) }}">
-        <meta property="og:image:width" content="1024">
-        <meta property="og:image:height" content="576">
-        <meta property="og:image:alt" content="Symfony UX">
-        <meta property="og:image:type" content="image/png">
+
+        {% block stylesheets %}
+        {% endblock %}
+
+        {% block meta %}
+            {{ include('_meta.html.twig', {meta: meta|default}) }}
+        {% endblock %}
+
         {% block javascripts %}
             <script>
               const theme = localStorage.getItem('user-theme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
@@ -42,6 +38,7 @@
         {% endblock %}
     </head>
     <body>
+
         {% block banner %}
             {{ include('_banner.html.twig') }}
         {% endblock %}

ux.symfony.com/assets/images/live_demo/dependent-form-fields.png

@@ -4,7 +4,19 @@
     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,
+    },
     canonical: url(demo.route),
+    twitter: {
+        card: 'summary_large_image',
+    }
 } %}
 
 {% block content %}

ux.symfony.com/assets/images/live_demo/form-collection-type-1280x720.png

@@ -5,6 +5,15 @@
     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, '...')
+    }
 } %}
 
 {% block stylesheets %}