made a pdf printable page
This commit is contained in:
venus
162
src/printable-recipes.njk
Normal file
162
src/printable-recipes.njk
Normal file
@@ -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>
|
||||||
Reference in New Issue
Block a user