Add blog page

.ruby-version

@@ -1 +1 @@
-3.4
+3.3.5

_config.yml

@@ -66,4 +66,6 @@ collections:
     output: false
   stories:
     output: false
+  blog:
+    output: true
 

_i18n/ca.yml

@@ -26,3 +26,6 @@ home:
   team:
     title: "Equip"
     description: "Per què darrera hi ha persones que t’ajudarem amb tot allò que necessites.<br><br> Mira la nostra <span class=\"destecat\">Pokecodex!</span>"
+  blog:
+    title: "Blog"
+    description: "Descobreix els nostres últims articles i notícies sobre tecnologia, participació ciutadana i desenvolupament digital."

_i18n/en.yml

@@ -26,3 +26,6 @@ home:
   team:
     title: "Team"
     description: "Because behind there are people who will help you with everything you need.<br><br> Check out our <span class=\"destecat\">Pokecodex!</span>"
+  blog:
+    title: "Blog"
+    description: "Discover our latest articles and news on technology, citizen participation and digital development."

_i18n/es.yml

@@ -26,3 +26,6 @@ home:
   team:
     title: "Equipo"
     description: Por que detrás hay personas que te ayudaremos en tot lo que necesites.<br><br> Mira nuestra <span class="destecat">Pokedex</span>!
+  blog:
+    title: "Blog"
+    description: "Descubre nuestros últimos artículos y noticias sobre tecnología, participación ciudadana y desarrollo digital."

_includes/nav.html

@@ -16,6 +16,9 @@
       <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item">
         <a href="/#equip" class="nav-link">{% t home.team.title %}</a>
       </li>
+      <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item">
+        <a href="/#blog" class="nav-link">{% t home.blog.title %}</a>
+      </li>
       <li class="menu-item menu-item-type-post_type menu-item-object-page nav-item">
         <a href="/#contacte" class="nav-link">Contact</a>
       </li>

_includes/posts.html

@@ -0,0 +1,74 @@
+{% assign blog = site.blog | where: "lang", site.lang | sort: "order" %}
+<section id="blog" class="modul equip">
+  <!-- Contingut del modul -->
+  <div class="modul__grid">
+    <header class="modul__header">
+      <h2 class="">{% t home.blog.title %}</h2>
+      <p>{% t home.blog.description %}</p>
+    </header>
+    <div id="slider-blogs" class="modul__content--slider">
+      <!-- Add Arrows & Pagination -->
+      <div class="swiper-navigation">
+        <div class="swiper-pagination md:!hidden"></div>
+        <div class="swiper-button-prev">
+          <span class="icon medium icon-arrow--left"></span><span class="icon small icon-arrow--left"></span>
+        </div>
+        <div class="swiper-button-next">
+          <span class="icon medium icon-arrow--right"></span><span class="icon small icon-arrow--right"></span>
+        </div>
+      </div>
+      <!-- Cards -->
+      <div class="cards swiper-wrapper">
+        {% for post  in blog %}
+          <div class="card-blog swiper-slide relative rounded-[0.8rem] isolate">
+            <div class="card-blog__img relative isolate flex justify-center overflow-hidden w-full h-full pt-[2.4rem] px-[2.4rem] pb-0">
+              <img class="object-cover block w-[90%] h-[90%]" src="{{ post.image | relative_url }}" alt="{{ post.title }}" />
+            </div>
+            <div class="card-blog__content relative p-[2.4rem] pb-[1.6rem] bg-[var(--c-bg-card)] rounded-b-[0.8rem] min-h-[14.2rem]">
+              <h3 class="card-blog__date text-xs text-gray">{{ post.date | date: "%-d %b %Y" }}</h3>
+              <a href="{{ post.url | relative_url }}" class="card-blog__title text-md">{{ post.title }}</a>
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+  </div>
+</section>
+<script>
+window.addEventListener("load", () => {
+  const swiper = new Swiper("#slider-blogs", {
+    autoplay: false,
+    loop: false,
+    pagination: {
+      el: ".swiper-pagination",
+      type: "fraction",
+    },
+    navigation: {
+      nextEl: ".swiper-button-next",
+      prevEl: ".swiper-button-prev",
+    },
+    breakpoints: {
+      320: {
+        slidesPerView: 1,
+        spaceBetween: 16,
+      },
+      768: {
+        slidesPerView: 2,
+        spaceBetween: 32,
+      },
+      1024: {
+        slidesPerView: 3,
+        spaceBetween: 32,
+      },
+      1440: {
+        slidesPerView: 3,
+        spaceBetween: 32,
+      },
+      1920: {
+        slidesPerView: 4,
+        spaceBetween: 32,
+      },
+    },
+  });
+});
+</script>

_layouts/blog.html

@@ -0,0 +1,69 @@
+---
+layout: default
+---
+<section id="pagina-blogs" class="modul blog pt-[60px] md:pt-[100px] px-[4%]">
+  <div class="relative flex flex-col max-w-4xl mx-auto md:w-[500px] lg:w-[800px] md:max-w-[600px] lg:max-w-[1200px] py-16 px-4 sm:px-6 lg:px-8">
+
+    <!-- Categorías -->
+    {% if page.category %}
+      <div class="flex flex-wrap justify-center gap-2 mb-14">
+        {% for cat in page.category %}
+          <span class="px-3 py-1 bg-gray-4 text-gray-3 text-sm rounded-full">
+            {{ cat | upcase }}
+          </span>
+        {% endfor %}
+      </div>
+    {% endif %}
+
+    <!-- Título -->
+    <div class="mb-12">
+      <h1 class="text-3xl font-bold text-gray-900 mb-4">{{ page.title }}</h1>
+      {% if page.subtitle %}
+      <p class="text-lg text-gray-600">{{ page.subtitle }}</p>
+      {% endif %}
+    </div>
+
+    <!-- Metadatos del post -->
+    <div class="py-4">
+      <p class="text-sm text-gray-500 mb-4 text-left">
+        {{ page.date | date: "%-d %b %Y" }} · {{ page.author }} · ⏱️ {{ page.reading_time }} min 
+      </p>
+    </div>
+
+    <!-- Imagen destacada -->
+    <div class="w-full overflow-hidden rounded-2xl shadow-lg mb-8">
+      <img src="{{ page.image }}" alt="{{ page.title }}" class="w-full h-64 sm:h-80 object-cover">
+    </div>
+
+    <!-- Contenido -->
+    <article class="prose prose-2xl prose-slate 
+         prose-headings:text-gray-4
+         prose-p:text-gray-2 
+         prose-a:text-blue-600 hover:prose-a:text-blue-800 
+         prose-img:rounded-xl 
+         prose-strong:text-gray-900 
+         prose-blockquote:border-l-4 prose-blockquote:border-blue-300 prose-blockquote:italic 
+         prose-code:bg-gray-5 prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded 
+         leading-relaxed max-w-none pt-6">
+      {{ content }}
+    </article>
+
+    <!-- Tags -->
+    <div class="text-left mb-2 pt-16">
+      {% if page.tags %}
+        <div class="flex gap-2">
+          {% for tag in page.tags %}
+            <span class="px-3 py-1 bg-yellowpoke text-black text-sm rounded-full">
+              #{{ tag }}
+            </span>
+          {% endfor %}
+        </div>
+      {% endif %}
+    </div>
+  </div>
+</section>
+<style>
+  header#masthead.site-header {
+    background-color: #FFE223;
+  }
+</style>

_layouts/home.html

@@ -18,4 +18,6 @@
 {% include team.html %}
 <!-- ...Modul 3 -->
 
-
+<!-- Modul 4-->
+{% include posts.html %}
+<!-- ...Modul 4 -->

admin/config.yml

@@ -74,3 +74,21 @@ collections:
       - { label: "Description", name: "description", widget: "text", i18n: true }
       - { label: "Order", name: order, widget: "number", i18n: duplicate }
       - { label: "Language", name: "lang", widget: "hidden", i18n: "duplicate" }
+  - name: "blog"
+    label: "Blog Posts"
+    folder: "_blog"
+    create: true
+    i18n: true
+    fields:
+      - { label: "Layout", name: "layout", widget: "hidden", default: "blog", i18n: true }
+      - { label: "Title", name: "title", widget: "string", i18n: true }
+      - { label: "Subtitle", name: "subtitle", widget: "string", i18n: true, required: false }
+      - { label: "Body", name: "body", widget: "markdown", i18n: true }
+      - { label: "Author", name: "author", widget: "string", i18n: duplicate }
+      - { label: "Publish Date", name: "date", widget: "datetime" }
+      - { label: "Categories", name: "category", widget: "list", i18n: true }
+      - { label: "Tags", name: "tags", widget: "list", i18n: true, required: false }
+      - { label: "Image", name: "image", widget: "image", i18n: duplicate }
+      - { label: "Language", name: "lang", widget: "select", options: ["ca", "en", "es"], default: "ca", i18n: true }
+      - { label: "Reading time (minutes)", name: "reading_time", widget: "number", i18n: duplicate, required: false }
+      - { label: "Order", name: order, widget: "number", i18n: duplicate }