readable date for noticias

.eleventy.js

@@ -59,13 +59,25 @@ module.exports = function (eleventyConfig) {
     return filtered;
   });
 
-  eleventyConfig.addFilter("excludeServiceFilter", function (collection, service) {
-    if (!service) return collection;
-    const filtered = collection.filter((item) =>
-      !item.data.title.includes(service)
-    );
-    return filtered;
-  })
+  eleventyConfig.addFilter(
+    "excludeServiceFilter",
+    function (collection, service) {
+      if (!service) return collection;
+      const filtered = collection.filter(
+        (item) => !item.data.title.includes(service)
+      );
+      return filtered;
+    }
+  );
+
+  eleventyConfig.addFilter("formattedDate", function (value) {
+    const date = new Date(value);
+    return date.toLocaleDateString("es-ES", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    });
+  });
 
   let options = {
     html: true,
@@ -74,7 +86,7 @@ module.exports = function (eleventyConfig) {
   };
   eleventyConfig.setLibrary("md", markdownit(options));
 
-  eleventyConfig.addFilter("cssmin", function(code) {
+  eleventyConfig.addFilter("cssmin", function (code) {
     return new CleanCSS({}).minify(code).styles;
   });
 

src/components/noticia-card.html

@@ -5,7 +5,7 @@
   <div class="content">
     <div class="head">
       <h4>{{ title }}</h4>
-      <p class="publish-date">{{ date }}</p>
+      <p class="publish-date">{{ date | formattedDate }}</p>
       <p class="first-paragraph">{{ firstParagraph }}</p>
     </div>
     <div class="tail">

src/layouts/noticia.html

@@ -7,7 +7,7 @@
   <img class="head-image" src="{{image}}" alt="" />
   <div class="content">
     <h1>{{title}}</h1>
-    <p class="publish-date">{{ date }}</p>
+    <p class="publish-date">{{ date | formattedDate }}</p>
     <div class="body">{{content}}</div>
   </div>
 </div>