chore: Progress sync for the night

eleventy.config.js

@@ -3,6 +3,14 @@ import filtersPlugin from "./src/_config/filters.js";
 
 /** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
 export default async function(eleventyConfig) {
+  eleventyConfig.addDateParsing(function(dateValue) {
+    if (dateValue != null && typeof(dateValue) === 'object') {
+      dateValue = new Date(dateValue.getFullYear(), dateValue.getMonth(), dateValue.getDate() + 1);
+    }
+    
+    return dateValue; // fallback
+  });
+
   eleventyConfig.addPassthroughCopy(
     {'./public/': '/'}
   );

public/css/about.css

@@ -21,18 +21,6 @@
 .content > p:not(:first-child) {
   margin-top: 2rem;
 }
-.alternating-background-container > :nth-child(2n-1) {
-  background-color: var(--primary-alternating-color);
-}
-.alternating-background-container > :nth-child(2n) {
-  background-color: var(--secondary-alternating-color);
-}
-.alternating-background-container > div {
-  padding: 2rem 0;
-}
-.alternating-primary-brown {
-  --primary-alternating-color: rgba(var(--brown), .21);
-}
 
 @media (min-width: 992px) {
   .title {

public/css/posts.css

@@ -0,0 +1,25 @@
+.mb-2 {
+  margin-bottom: 2rem;
+}
+
+.posts {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: 1fr;
+  grid-column-gap: 2rem;
+  grid-row-gap: 2rem;
+}
+.posts > div {
+  width: 100%;
+}
+.post-card > img {
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+}
+
+@media (min-width: 992px) {
+  .posts {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}

public/css/style.css

@@ -61,6 +61,14 @@ footer {
   margin-right: auto;
 }
 
+.title {
+  font-size: 3rem;
+  font-weight: 400;
+}
+.text-center {
+  text-align: center;
+}
+
 .h-100 {
   height: 100%;
 }
@@ -153,6 +161,19 @@ footer {
   max-width: 100px;
 }
 
+.alternating-background-container > :nth-child(2n-1) {
+  background-color: var(--primary-alternating-color);
+}
+.alternating-background-container > :nth-child(2n) {
+  background-color: var(--secondary-alternating-color);
+}
+.alternating-background-container > div {
+  padding: 2rem 0;
+}
+.alternating-primary-brown {
+  --primary-alternating-color: rgba(var(--brown), .21);
+}
+
 .mobile-nav {
   display: flex;
   flex-direction: column;

src/post/post-1.md

@@ -0,0 +1,7 @@
+---
+title: Example post 1
+date: 2025-08-01
+thumbnail: https://dummyimage.com/1280x720/fff/aaa
+---
+
+First post! Content change

src/post/post-10.md

@@ -0,0 +1,7 @@
+---
+title: Example post 10
+date: 2025-08-10
+thumbnail: https://dummyimage.com/1280x720/fff/aaa
+---
+
+Second post!

src/post/post-11.md

@@ -0,0 +1,7 @@
+---
+title: Example post 3
+date: 2025-08-11
+thumbnail: https://dummyimage.com/1280x720/fff/aaa
+---
+
+Second post!

src/post/post-12.md

@@ -0,0 +1,7 @@
+---
+title: Example post 12
+date: 2025-08-12
+thumbnail: https://dummyimage.com/1280x720/fff/aaa
+---
+
+Second post!

src/post/post-2.md

@@ -0,0 +1,7 @@
+---
+title: Example post 2 - for Paz
+date: 2025-08-02
+thumbnail: https://dummyimage.com/1280x720/fff/aaa
+---
+
+Second post!

src/post/post-3.md

@@ -0,0 +1,7 @@
+---
+title: Example post 3
+date: 2025-08-03
+thumbnail: https://dummyimage.com/1280x720/fff/aaa
+---
+
+Second post!

src/post/post-4.md

@@ -0,0 +1,7 @@
+---
+title: Example post 4
+date: 2025-08-04
+thumbnail: https://dummyimage.com/1280x720/fff/aaa
+---
+
+Second post!

src/post/post-5.md

@@ -0,0 +1,7 @@
+---
+title: Example post 5
+date: 2025-08-05
+thumbnail: https://dummyimage.com/1280x720/fff/aaa
+---
+
+Second post!

src/post/post-6.md

@@ -0,0 +1,7 @@
+---
+title: Example post 6
+date: 2025-08-06
+thumbnail: https://dummyimage.com/1280x720/fff/aaa
+---
+
+Second post!

src/post/post-7.md

@@ -0,0 +1,7 @@
+---
+title: Example post 7
+date: 2025-08-07
+thumbnail: https://dummyimage.com/1280x720/fff/aaa
+---
+
+Second post!

src/post/post-8.md

@@ -0,0 +1,7 @@
+---
+title: Example post 8
+date: 2025-08-08
+thumbnail: https://dummyimage.com/1280x720/fff/aaa
+---
+
+Second post!

src/post/post-9.md

@@ -0,0 +1,7 @@
+---
+title: Example post 9
+date: 2025-08-09
+thumbnail: https://dummyimage.com/1280x720/fff/aaa
+---
+
+Second post!

src/posts.liquid

@@ -1,11 +1,47 @@
 ---
+pagination:
+  data: collections.posts
+  size: 10
+  alias: post
+  reverse: true
+permalink: "/posts{% if pagination.pageNumber != 0 %}/{{ pagination.pageNumber }}{% endif %}/"
 layout: layout.liquid
 title: Posts
+css: posts.css
 ---
 
-<div class="container">
-  {% for post in collections.post %}
-  <h2><a href="{{ post.url }}">{{ post.data.title }}</a></h2>
-  <p>{{ post.content }}</p>
+<div class="alternating-background-container alternating-primary-brown">
+  <div>
+    <div class="contaier">
+      <h1 class="title text-center">All Posts</h1>
+    </div>
+  </div>
+  <div class="container posts">
+    {% for post in pagination.items %}
+      <div class="post-card">
+        {% if post.data.thumbnail %}
+          <img src="{{ post.data.thumbnail }}" alt="{{ post.data.title }}" />
+        {% endif %}
+        <div class="post-body">
+          <p class="post-date">{{ post.date | date: "%B %-d, %Y" }}</p>
+          <h1>{{ post.data.title }}</h1>
+          <p>{{ post.data.context }}</p>
+          <!-- <p>Views {} | Likes {}</p> -->
+        </div>
+      </div>
     {% endfor %}
   </div>
+</div>
+<div class="container">
+  <div class="pagination mb-2">
+    {% if pagination.href.previous %}
+      <a href="{{ pagination.href.previous }}">← Previous</a>
+    {% endif %}
+
+    Page {{ pagination.pageNumber | plus: 1 }} of {{ pagination.pages | size }}
+
+    {% if pagination.href.next %}
+      <a href="{{ pagination.href.next }}">Next →</a>
+    {% endif %}
+  </div>
+</div>

src/posts/post-1.md

@@ -1,5 +0,0 @@
----
-title: Example post 11111
----
-
-First post! Content change

src/posts/post-2.md

@@ -1,5 +0,0 @@
----
-title: Example post 2 - for Paz
----
-
-Second post!