Mise en page titre article

assets/styles/app.css

@@ -219,10 +219,20 @@ main h1 a:hover {
   color: rgb(22, 21, 36);
 }
 
-.article-by {
-  display: block;
-  font-size: 0.5em;
+.titre-article {
+  display: flex;
+  flex-direction: column;
+}
+
+.titre-article .article-by {
+  font-size: 1em;
   color: gray;
+  margin: 0;
+
+}
+
+.titre-article h1 {
+  margin: 0;
 }
 
 .table-articles {

composer.json

@@ -48,6 +48,7 @@
         "symfony/workflow": "7.1.*",
         "symfony/yaml": "7.1.*",
         "twig/extra-bundle": "^2.12|^3.0",
+        "twig/intl-extra": "^3.13",
         "twig/markdown-extra": "^3.13",
         "twig/twig": "^2.12|^3.0"
     },

composer.lock

@@ -4,7 +4,7 @@
         "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
         "This file is @generated automatically"
     ],
-    "content-hash": "166dcd3fd87f8aa3058db20811e93bc4",
+    "content-hash": "b2e1b9020b00ca5fe63ab065502c4d2e",
     "packages": [
         {
             "name": "composer/ca-bundle",
@@ -8520,6 +8520,70 @@
             ],
             "time": "2024-09-01T20:39:12+00:00"
         },
+        {
+            "name": "twig/intl-extra",
+            "version": "v3.13.0",
+            "source": {
+                "type": "git",
+                "url": "https://github.com/twigphp/intl-extra.git",
+                "reference": "1b8d78c5db08bdc61015fd55009d2e84b3aa7e38"
+            },
+            "dist": {
+                "type": "zip",
+                "url": "https://api.github.com/repos/twigphp/intl-extra/zipball/1b8d78c5db08bdc61015fd55009d2e84b3aa7e38",
+                "reference": "1b8d78c5db08bdc61015fd55009d2e84b3aa7e38",
+                "shasum": ""
+            },
+            "require": {
+                "php": ">=8.0.2",
+                "symfony/intl": "^5.4|^6.4|^7.0",
+                "twig/twig": "^3.13|^4.0"
+            },
+            "require-dev": {
+                "symfony/phpunit-bridge": "^6.4|^7.0"
+            },
+            "type": "library",
+            "autoload": {
+                "psr-4": {
+                    "Twig\\Extra\\Intl\\": ""
+                },
+                "exclude-from-classmap": [
+                    "/Tests/"
+                ]
+            },
+            "notification-url": "https://packagist.org/downloads/",
+            "license": [
+                "MIT"
+            ],
+            "authors": [
+                {
+                    "name": "Fabien Potencier",
+                    "email": "fabien@symfony.com",
+                    "homepage": "http://fabien.potencier.org",
+                    "role": "Lead Developer"
+                }
+            ],
+            "description": "A Twig extension for Intl",
+            "homepage": "https://twig.symfony.com",
+            "keywords": [
+                "intl",
+                "twig"
+            ],
+            "support": {
+                "source": "https://github.com/twigphp/intl-extra/tree/v3.13.0"
+            },
+            "funding": [
+                {
+                    "url": "https://github.com/fabpot",
+                    "type": "github"
+                },
+                {
+                    "url": "https://tidelift.com/funding/github/packagist/twig/twig",
+                    "type": "tidelift"
+                }
+            ],
+            "time": "2024-09-03T13:08:40+00:00"
+        },
         {
             "name": "twig/markdown-extra",
             "version": "v3.13.0",

templates/index/index.html.twig

@@ -8,7 +8,10 @@
     <section id="section-articles">
         {% for article in articles %}
             <article class="article-preview">
-                <h1><a href="{{ path('app_view', {'slug': article.slug}) }}">{{ article.title}}</a><span class="article-by">{{ article.publicationDate | date('d-m-Y')}} {{ article.author }}</span></h1>
+                <div class="titre-article">
+                    <h1><a href="{{ path('app_view', {'slug': article.slug}) }}">{{ article.title}}</a></h1>
+                    <p class="article-by">{{ article.publicationDate | format_date('long') }} - {{ article.author }}</p>
+                </div>
                 <div class="contenu">
                     {{ article.content | markdown }}
                 </div>

templates/view/index.html.twig

@@ -14,7 +14,10 @@
 <div>
     <article class="article">
         <header>
-            <h1>{{ article.title}}<span class="article-by">{{ article.publicationDate | date('d-m-Y')}} {{ article.author }}</span></h1>
+            <div class="titre-article">
+                <h1>{{ article.title}}</h1>
+                <p class="article-by">{{ article.publicationDate | format_date('long')}} - {{ article.author }}</p>
+            </div>
         </header>
         <section class="contenu">
                 {{ article.content | markdown }}