fberger/brabetz-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add PDF download buttons to tutorials using html2pdf.js

Browse Source
This commit is contained in:
Felix Brabetz
2026-05-16 06:38:42 +02:00
parent 4aafe19531
commit a9d7d3572e
1 changed files with 49 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Tutorials.astro
+49 -6
View File
@@ -1,6 +1,37 @@
---
// src/components/Tutorials.astro
---
<!-- Include html2pdf.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" is:inline></script>
<script is:inline>
function downloadPDF(elementId, title) {
const element = document.getElementById(elementId);
// Optionen für html2pdf
const opt = {
margin: 15,
filename: `Tutorial-${title}.pdf`,
image: { type: 'jpeg', quality: 0.98 },
html2canvas: {
scale: 2,
backgroundColor: '#0c0a09', // Stone 950 (Dunkler Hintergrund für Premium-Look)
useCORS: true
},
jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' }
};
// Klonen um Padding für das PDF hinzuzufügen
const clone = element.cloneNode(true);
clone.style.padding = "20px";
clone.style.borderRadius = "0";
clone.style.border = "none";
// PDF generieren
html2pdf().set(opt).from(clone).save();
}
</script>
<!-- Tutorials Section -->
<section id="tutorials" class="py-32 bg-stone-950 relative overflow-hidden">
<!-- Background Glow -->
@@ -15,11 +46,13 @@
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12">
<!-- Tutorial 1: Trockenmauer -->
<div class="glass p-8 rounded-2xl border border-stone-800 flex flex-col justify-between">
<div id="tutorial-mauer" class="glass p-8 rounded-2xl border border-stone-800 flex flex-col justify-between">
<div>
<span class="text-xs font-mono text-emerald-500 uppercase tracking-widest">Tutorial #1</span>
<h3 class="text-xl font-bold text-white mt-2 mb-4">Die perfekte Trockenmauer bauen</h3>
<p class="text-stone-400 text-sm mb-4">Eine Trockenmauer hält ohne Mörtel – rein durch Schwerkraft und Reibung. Hier ist die Schritt-für-Schritt-Anleitung.</p>
<!-- Wetter-Hinweis -->
<a href="https://www.wetter.com/suche/?q=Rheingau-Taunus" target="_blank" class="text-xs font-mono text-emerald-400 mb-6 bg-stone-900/50 px-3 py-2 rounded-lg border border-emerald-900/30 inline-block hover:bg-emerald-900/20 transition-colors cursor-pointer">
<i class="fa-solid fa-cloud-sun"></i> Rheingau-Taunus: 4°C // Gutes Wetter für den Trockenmauerbau.
</a>
@@ -58,13 +91,18 @@
</div>
<div class="mt-8 pt-6 border-t border-stone-800 flex justify-between items-center">
<span class="text-xs text-stone-500 font-mono">Dauer: ca. 2 Tage</span>
<span class="text-xs text-emerald-500 font-mono">Schwierigkeit: Schwer</span>
<div class="flex gap-4 text-xs font-mono text-stone-500">
<span>Dauer: ca. 2 Tage</span>
<span class="text-emerald-500">Schwierigkeit: Schwer</span>
</div>
<button onclick="downloadPDF('tutorial-mauer', 'Trockenmauer')" class="text-xs font-mono text-emerald-400 hover:text-emerald-300 flex items-center gap-1 bg-stone-900 px-3 py-1.5 rounded border border-emerald-900/50 hover:border-emerald-500 transition-colors">
<i class="fa-solid fa-file-pdf"></i> PDF
</button>
</div>
</div>
<!-- Tutorial 2: Rasenpflege -->
<div class="glass p-8 rounded-2xl border border-stone-800 flex flex-col justify-between">
<div id="tutorial-rasen" class="glass p-8 rounded-2xl border border-stone-800 flex flex-col justify-between">
<div>
<span class="text-xs font-mono text-emerald-500 uppercase tracking-widest">Tutorial #2</span>
<h3 class="text-xl font-bold text-white mt-2 mb-4">Premium-Rasen im Sommer</h3>
@@ -104,8 +142,13 @@
</div>
<div class="mt-8 pt-6 border-t border-stone-800 flex justify-between items-center">
<span class="text-xs text-stone-500 font-mono">Dauer: Kontinuierlich</span>
<span class="text-xs text-emerald-500 font-mono">Schwierigkeit: Einfach</span>
<div class="flex gap-4 text-xs font-mono text-stone-500">
<span>Dauer: Kontinuierlich</span>
<span class="text-emerald-500">Schwierigkeit: Einfach</span>
</div>
<button onclick="downloadPDF('tutorial-rasen', 'Rasenpflege')" class="text-xs font-mono text-emerald-400 hover:text-emerald-300 flex items-center gap-1 bg-stone-900 px-3 py-1.5 rounded border border-emerald-900/50 hover:border-emerald-500 transition-colors">
<i class="fa-solid fa-file-pdf"></i> PDF
</button>
</div>
</div>
</div>