From 4ad39d04d8da4fc3cbabdbc2cdad3ce6bf85fc9c Mon Sep 17 00:00:00 2001
From: venus <git@riverrooks.art>
Date: Sat, 1 Aug 2026 12:37:43 -0500
Subject: [PATCH] made a pdf printable page

---
 src/printable-recipes.njk | 162 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 162 insertions(+)
 create mode 100644 src/printable-recipes.njk

diff --git a/src/printable-recipes.njk b/src/printable-recipes.njk
new file mode 100644
index 0000000..66a625d
--- /dev/null
+++ b/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>