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