feat: created index pages for posts and recipes

css/style.css

@@ -64,6 +64,28 @@ a {
   color: var(--secondary-color);
 }
 
+/* Section header with view all link */
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.section-header h1 {
+  margin: 1.5rem 0 1rem;
+}
+
+.view-all {
+  margin-top: 1.5rem;
+  font-size: 0.9rem;
+  color: var(--secondary-color);
+  text-decoration: none;
+}
+
+.view-all:hover {
+  text-decoration: underline;
+}
+
 /* Blog post list */
 .post-list {
   list-style: none;

index.njk

@@ -9,10 +9,16 @@ description: Welcome to my website! I write about tech, politics, food, and hobb
 </section>
 
 {% if collections.posts.length > 0 %}
-<h1>Blog Posts</h1>
+<div class="section-header">
+  <h1>Blog Posts</h1>
+  {% if collections.posts.length > 3 %}
+  <a href="/posts/" class="view-all">view all</a>
+  {% endif %}
+</div>
 
 <ul class="post-list">
   {% for post in collections.posts %}
+  {% if loop.index0 < 3 %}
   <li>
     <a href="{{ post.url }}" class="post-card">
       <h2>{{ post.data.title }}</h2>
@@ -22,28 +28,34 @@ description: Welcome to my website! I write about tech, politics, food, and hobb
       {% endif %}
     </a>
   </li>
+  {% endif %}
   {% endfor %}
 </ul>
 {% endif %}
 
-{% set hasRecipes = false %}
+{% set recipesList = [] %}
 {% for slug, recipeData in collections.recipesBySlug %}
   {% if recipeData.newest %}
-    {% set hasRecipes = true %}
+    {% set recipesList = recipesList.concat([{slug: slug, data: recipeData}]) %}
   {% endif %}
 {% endfor %}
 
-{% if hasRecipes %}
-<h1>Recipes</h1>
+{% if recipesList.length > 0 %}
+<div class="section-header">
+  <h1>Recipes</h1>
+  {% if recipesList.length > 3 %}
+  <a href="/recipes/" class="view-all">view all</a>
+  {% endif %}
+</div>
 
 <ul class="post-list">
-  {% for slug, recipeData in collections.recipesBySlug %}
-    {% if recipeData.newest %}
+  {% for recipe in recipesList %}
+  {% if loop.index0 < 3 %}
   <li>
-      <a href="/recipe/{{ slug }}/" class="post-card">
-        <h2>{{ recipeData.newest.data.title }}</h2>
-        {% if recipeData.newest.data.description %}
-        <p>{{ recipeData.newest.data.description }}</p>
+    <a href="/recipe/{{ recipe.slug }}/" class="post-card">
+      <h2>{{ recipe.data.newest.data.title }}</h2>
+      {% if recipe.data.newest.data.description %}
+      <p>{{ recipe.data.newest.data.description }}</p>
       {% endif %}
     </a>
   </li>

posts-index.njk

@@ -0,0 +1,26 @@
+---
+layout: base.njk
+title: All Blog Posts
+description: All blog posts on Volpe.
+permalink: /posts/
+---
+
+<h1>Blog Posts</h1>
+
+{% if collections.posts.length > 0 %}
+<ul class="post-list">
+  {% for post in collections.posts %}
+  <li>
+    <a href="{{ post.url }}" class="post-card">
+      <h2>{{ post.data.title }}</h2>
+      <time datetime="{{ post.data.createdAt | dateTimeFormat }}">{{ post.data.createdAt | dateTimeFormat }}</time>
+      {% if post.data.description %}
+      <p>{{ post.data.description }}</p>
+      {% endif %}
+    </a>
+  </li>
+  {% endfor %}
+</ul>
+{% else %}
+<p>No blog posts yet.</p>
+{% endif %}

recipes-index.njk

@@ -0,0 +1,34 @@
+---
+layout: base.njk
+title: All Recipes
+description: All recipes on Volpe.
+permalink: /recipes/
+---
+
+<h1>Recipes</h1>
+
+{% set hasRecipes = false %}
+{% for slug, recipeData in collections.recipesBySlug %}
+  {% if recipeData.newest %}
+    {% set hasRecipes = true %}
+  {% endif %}
+{% endfor %}
+
+{% if hasRecipes %}
+<ul class="post-list">
+  {% for slug, recipeData in collections.recipesBySlug %}
+    {% if recipeData.newest %}
+    <li>
+      <a href="/recipe/{{ slug }}/" class="post-card">
+        <h2>{{ recipeData.newest.data.title }}</h2>
+        {% if recipeData.newest.data.description %}
+        <p>{{ recipeData.newest.data.description }}</p>
+        {% endif %}
+      </a>
+    </li>
+    {% endif %}
+  {% endfor %}
+</ul>
+{% else %}
+<p>No recipes yet.</p>
+{% endif %}