made a pdf printable page

eleventy.config.js

@@ -4,6 +4,53 @@ module.exports = function(eleventyConfig) {
     host: "0.0.0.0",
     port: 80 
   });
+  eleventyConfig.addWatchTarget("byTag"), (collection, tag) => {
+    return collection.filter(item => item.data.tags && item.data.tags.includes(tag));
+  };
+  eleventyConfig.addFilter("filterTags", (tags) => {
+    return (tags || []).filter(tag => !["recipe", "all", "nav"].includes(tag));
+  });
+
+  eleventyConfig.addCollection("recipesByTag", function(collectionApi) {
+    const recipes = collectionApi.getFilteredByTag("recipe");
+    const tagMap = {};
+
+    recipes.forEach(recipe => {
+      const customTags = (recipe.data.tags || []).filter(t => !["recipe", "all", "nav"].includes(t));
+      const tagsToUse = customTags.length > 0 ? customTags : ["other"];
+      
+      tagsToUse.forEach(tag => {
+        if (!tagMap[tag]) {
+          tagMap[tag] = [];
+        }
+        tagMap[tag].push(recipe);
+      });
+    });
+
+    return Object.keys(tagMap).sort().map(tag => ({
+      tagName: tag,
+      recipes: tagMap[tag].sort((a, b) => (a.data.title || "").localeCompare(b.data.title || ""))
+    }));
+  });
+
+  eleventyConfig.addCollection("recipesByAuthor", function(collectionApi) {
+    const recipes = collectionApi.getFilteredByTag("recipe");
+    const authorMap = {};
+
+    recipes.forEach(recipe => {
+      const author = (recipe.data.author || "Unknown Cook").trim();
+      if (!authorMap[author]) {
+        authorMap[author] = [];
+      }
+      authorMap[author].push(recipe);
+    });
+
+    return Object.keys(authorMap).sort().map(author => ({
+      authorName: author,
+      recipes: authorMap[author].sort((a, b) => (a.data.title || "").localeCompare(b.data.title || ""))
+    }));
+  });
+
   return {
     dir: {
       input: "src",          // Where your markdown files live

src/_layouts/home.njk

@@ -13,6 +13,7 @@
       <nav>
         <ul>
           <li><a href="/">Home</a></li>
+          <li><a href="/printable-recipes/" target="_blank">Printable PDF</a></li>
         </ul>
       </nav>
     </div>
@@ -24,7 +25,7 @@
 
   <footer>
     <div class="container">
-      <p>&copy; 2026 Family Recipes</p>
+      <p>2026 Family Recipes</p>
     </div>
   </footer>
 </body>

src/_layouts/recipe.njk

@@ -14,6 +14,7 @@
         <ul>
           <li><a href="/">Home</a></li>
           <li><a href="/recipies/">Recipes</a></li>
+          <li><a href="/printable-recipes/" target="_blank">Printable PDF</a></li>
         </ul>
       </nav>
     </div>
@@ -27,6 +28,12 @@
           {% if author %}
             <p class="recipe-author">From the kitchen of: <em>{{ author }}</em></p>
           {% endif %}
+          {% if tags %}
+              {% for tag in tags | filterTags %}
+                <span class="tag-badge">{{ tag }}</span>{% if not loop.last %}, {% endif %}
+              {% endfor %}
+            </p>
+          {% endif %}
         </div>
         {% if image %}
           <div class="recipe-illustration">

src/css/style.css

@@ -111,8 +111,10 @@ footer, .Footer {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  min-height: 140px;
 }
 
+
 .recipe-card:hover {
   transform: translateY(-3px);
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
@@ -227,6 +229,170 @@ footer, .Footer {
   color: #292524;
 }
 
+.tag-badge { 
+  display: inline-block;
+  padding-right: 0.4rem;
+  padding-top: 0.5rem;
+  color: #b45309;
+}
+
+/* Print & PDF Export Styles */
+@media print {
+  @page {
+    size: portrait;
+    margin: 0.5in;
+  }
+
+  header, footer, .no-print {
+    display: none !important;
+  }
+  
+  body {
+    background-color: #ffffff !important;
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .container {
+    max-width: 100% !important;
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  .printable-recipe-card {
+    page-break-before: always !important;
+    break-before: page !important;
+    page-break-after: always !important;
+    break-after: page !important;
+    page-break-inside: avoid !important;
+    break-inside: avoid !important;
+    height: 100vh !important;
+    max-height: 100vh !important;
+    box-sizing: border-box !important;
+    overflow: hidden !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0.5rem 0 !important;
+    margin: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: flex-start !important;
+  }
+
+  .printable-recipe-card:first-child {
+    page-break-before: auto !important;
+    break-before: auto !important;
+  }
+
+  .printable-recipe-card .recipe-title {
+    font-size: 1.5rem !important;
+    margin-bottom: 0.2rem !important;
+  }
+
+  .printable-recipe-card .recipe-author {
+    font-size: 0.85rem !important;
+  }
+
+  .printable-recipe-card .recipe-illustration {
+    width: 60px !important;
+    height: 60px !important;
+    padding: 3px !important;
+  }
+
+  .printable-recipe-card .recipe-divider {
+    margin: 0.5rem 0 0.75rem 0 !important;
+  }
+
+  .printable-recipe-card .recipe-body h2,
+  .printable-recipe-card .recipe-body h3 {
+    font-size: 0.95rem !important;
+    margin-top: 0.75rem !important;
+    margin-bottom: 0.3rem !important;
+    padding-bottom: 0.15rem !important;
+  }
+
+  .printable-recipe-card .recipe-body p,
+  .printable-recipe-card .recipe-body li {
+    font-size: 0.82rem !important;
+    line-height: 1.35 !important;
+    margin-bottom: 0.2rem !important;
+  }
+
+  .printable-recipe-card .recipe-body ul,
+  .printable-recipe-card .recipe-body ol {
+    margin-bottom: 0.6rem !important;
+    padding-left: 1.2rem !important;
+  }
+
+  .category-header-card {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+    text-align: center !important;
+    background-color: #faf8f5 !important;
+    border: 2px solid var(--border-color) !important;
+  }
+
+  .category-header-content {
+    margin: auto 0;
+  }
+
+  .category-label {
+    font-size: 0.9rem !important;
+    letter-spacing: 0.25em !important;
+    color: var(--primary-color) !important;
+    font-weight: 700 !important;
+  }
+
+  .category-header-title {
+    font-size: 2.8rem !important;
+    font-family: var(--font-serif) !important;
+    color: #1c1917 !important;
+    margin: 0.5rem 0 !important;
+    letter-spacing: 0.05em !important;
+  }
+
+  .category-count {
+    font-size: 1.1rem !important;
+    color: #78716c !important;
+    font-style: italic !important;
+  }
+}
+
+/* Category header web styles */
+.category-header-card {
+  min-height: 300px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background-color: #faf8f5;
+  border: 2px solid var(--border-color);
+  margin-bottom: 3rem;
+}
+
+.category-label {
+  display: block;
+  font-size: 0.85rem;
+  letter-spacing: 0.25em;
+  color: var(--primary-color);
+  font-weight: 700;
+}
+
+.category-header-title {
+  font-size: 2.5rem;
+  font-family: var(--font-serif);
+  color: #1c1917;
+  margin: 0.4rem 0;
+}
+
+.category-count {
+  font-size: 1rem;
+  color: #78716c;
+  font-style: italic;
+  margin: 0;
+}
 
 
 

src/index.md

@@ -6,14 +6,35 @@ title: Homepage
 
 An index of family recipes collected over generations.
 
+<div class="sort-controls">
+    Sort by:
+    <button onclick="sortGrid('title')">Title</button>
+    <button onclick="sortGrid('author')">Author</button>
+</div>
+<script>
+function sortGrid(attr) {
+    const grid = document.querySelector('.recipe-grid');
+    const cards = Array.from(grid.children);
+    cards.sort((a, b) => {
+        const valA = (a.dataset[attr] || '').trim();
+        const valB = (b.dataset[attr] || '').trim();
+        if (!valA && valB) return 1;
+        if (valA && !valB) return -1;
+        return valA.localeCompare(valB);
+    });
+    cards.forEach(card => grid.appendChild(card));
+}
+</script>
 <div class="recipe-grid">
-{% for recipe in collections.recipe %}
+{% for recipe in collections.recipe | sort(attribute="data.title") %}
-  <article class="recipe-card">
+  <article class="recipe-card" data-title="{{ recipe.data.title | default: '' }}" data-author="{{ recipe.data.author | default: 'Unknown Author' }}">
     <h3><a href="{{ recipe.url }}">{{ recipe.data.title }}</a></h3>
-    {% if recipe.data.author %}
+    <p class="recipe-author">From the kitchen of: <em>{{ recipe.data.author | default: 'Unknown Author' }}</em></p>
-      <p class="recipe-author">From the kitchen of: <em>{{ recipe.data.author }}</em></p>
-    {% endif %}
   </article>
 {% endfor %}
 </div>
 
+
+
+
+

src/printable-recipes.njk

@@ -0,0 +1,162 @@
+---
+layout: home.njk
+title: Printable Family Recipes
+permalink: "/printable-recipes/"
+---
+
+<div class="no-print" style="margin-bottom: 2rem; background: #ffffff; padding: 1.25rem; border-radius: 10px; border: 1px solid var(--border-color); text-align: center;">
+  <h2 style="margin-top: 0; margin-bottom: 1rem; font-family: var(--font-serif); font-size: 1.25rem;">Print & Export Options</h2>
+  
+  <div style="display: flex; gap: 0.75rem; justify-content: center; align-items: center; margin-bottom: 1.25rem; flex-wrap: wrap;">
+    <label style="font-weight: 600;">Layout Mode:</label>
+    <button id="btn-alphabetical" onclick="switchView('alphabetical')" style="padding: 0.5rem 1rem; font-size: 0.95rem; font-weight: 600; background-color: var(--primary-color); color: white; border: none; border-radius: 6px; cursor: pointer;">
+      Alphabetical (A–Z)
+    </button>
+    <button id="btn-grouped-tag" onclick="switchView('grouped-tag')" style="padding: 0.5rem 1rem; font-size: 0.95rem; font-weight: 500; background-color: #e7e0d3; color: var(--text-color); border: none; border-radius: 6px; cursor: pointer;">
+      Grouped by Category / Tag
+    </button>
+    <button id="btn-grouped-author" onclick="switchView('grouped-author')" style="padding: 0.5rem 1rem; font-size: 0.95rem; font-weight: 500; background-color: #e7e0d3; color: var(--text-color); border: none; border-radius: 6px; cursor: pointer;">
+      Grouped by Cook / Author
+    </button>
+  </div>
+
+  <button onclick="window.print()" style="padding: 0.75rem 1.75rem; font-size: 1rem; font-weight: 600; background-color: var(--primary-color); color: white; border: none; border-radius: 6px; cursor: pointer;">
+    🖨️ Print / Save as PDF
+  </button>
+</div>
+
+<!-- Alphabetical View -->
+<div id="view-alphabetical" class="printable-recipes-container">
+{% for recipe in collections.recipe | sort(attribute="data.title") %}
+  <article class="recipe-card-page printable-recipe-card">
+    <div class="recipe-header">
+      <div class="recipe-title-section">
+        <h1 class="recipe-title">{{ recipe.data.title | upper }}</h1>
+        {% if recipe.data.author %}
+          <p class="recipe-author">From the kitchen of: <em>{{ recipe.data.author }}</em></p>
+        {% endif %}
+      </div>
+      {% if recipe.data.image %}
+        <div class="recipe-illustration">
+          <img src="{{ recipe.data.image }}" alt="{{ recipe.data.title }}">
+        </div>
+      {% endif %}
+    </div>
+    <hr class="recipe-divider">
+
+    <div class="recipe-body">
+      {{ recipe.templateContent | safe }}
+    </div>
+  </article>
+{% endfor %}
+</div>
+
+<!-- Grouped by Tag View -->
+<div id="view-grouped-tag" class="printable-recipes-container" style="display: none;">
+{% for group in collections.recipesByTag %}
+  <!-- Category Cover Header Page -->
+  <article class="recipe-card-page printable-recipe-card category-header-card">
+    <div class="category-header-content">
+      <span class="category-label">CATEGORY</span>
+      <h1 class="category-header-title">{{ group.tagName | upper }}</h1>
+      <p class="category-count">{{ group.recipes.length }} Recipes</p>
+    </div>
+  </article>
+
+  {% for recipe in group.recipes %}
+    <article class="recipe-card-page printable-recipe-card">
+      <div class="recipe-header">
+        <div class="recipe-title-section">
+          <h1 class="recipe-title">{{ recipe.data.title | upper }}</h1>
+          {% if recipe.data.author %}
+            <p class="recipe-author">From the kitchen of: <em>{{ recipe.data.author }}</em></p>
+          {% endif %}
+        </div>
+        {% if recipe.data.image %}
+          <div class="recipe-illustration">
+            <img src="{{ recipe.data.image }}" alt="{{ recipe.data.title }}">
+          </div>
+        {% endif %}
+      </div>
+      <hr class="recipe-divider">
+
+      <div class="recipe-body">
+        {{ recipe.templateContent | safe }}
+      </div>
+    </article>
+  {% endfor %}
+{% endfor %}
+</div>
+
+<!-- Grouped by Author View -->
+<div id="view-grouped-author" class="printable-recipes-container" style="display: none;">
+{% for group in collections.recipesByAuthor %}
+  <!-- Author Cover Header Page -->
+  <article class="recipe-card-page printable-recipe-card category-header-card">
+    <div class="category-header-content">
+      <span class="category-label">FROM THE KITCHEN OF</span>
+      <h1 class="category-header-title">{{ group.authorName | upper }}</h1>
+      <p class="category-count">{{ group.recipes.length }} Recipes</p>
+    </div>
+  </article>
+
+  {% for recipe in group.recipes %}
+    <article class="recipe-card-page printable-recipe-card">
+      <div class="recipe-header">
+        <div class="recipe-title-section">
+          <h1 class="recipe-title">{{ recipe.data.title | upper }}</h1>
+          {% if recipe.data.author %}
+            <p class="recipe-author">From the kitchen of: <em>{{ recipe.data.author }}</em></p>
+          {% endif %}
+        </div>
+        {% if recipe.data.image %}
+          <div class="recipe-illustration">
+            <img src="{{ recipe.data.image }}" alt="{{ recipe.data.title }}">
+          </div>
+        {% endif %}
+      </div>
+      <hr class="recipe-divider">
+
+      <div class="recipe-body">
+        {{ recipe.templateContent | safe }}
+      </div>
+    </article>
+  {% endfor %}
+{% endfor %}
+</div>
+
+<script>
+function switchView(mode) {
+  const alphaView = document.getElementById('view-alphabetical');
+  const tagView = document.getElementById('view-grouped-tag');
+  const authorView = document.getElementById('view-grouped-author');
+  
+  const btnAlpha = document.getElementById('btn-alphabetical');
+  const btnTag = document.getElementById('btn-grouped-tag');
+  const btnAuthor = document.getElementById('btn-grouped-author');
+
+  [alphaView, tagView, authorView].forEach(v => v.style.display = 'none');
+  [btnAlpha, btnTag, btnAuthor].forEach(b => {
+    b.style.backgroundColor = '#e7e0d3';
+    b.style.color = 'var(--text-color)';
+    b.style.fontWeight = '500';
+  });
+
+  if (mode === 'grouped-tag') {
+    tagView.style.display = 'block';
+    btnTag.style.backgroundColor = 'var(--primary-color)';
+    btnTag.style.color = 'white';
+    btnTag.style.fontWeight = '600';
+  } else if (mode === 'grouped-author') {
+    authorView.style.display = 'block';
+    btnAuthor.style.backgroundColor = 'var(--primary-color)';
+    btnAuthor.style.color = 'white';
+    btnAuthor.style.fontWeight = '600';
+  } else {
+    alphaView.style.display = 'block';
+    btnAlpha.style.backgroundColor = 'var(--primary-color)';
+    btnAlpha.style.color = 'white';
+    btnAlpha.style.fontWeight = '600';
+  }
+}
+</script>