From 77eec532a5a9177a8423370fb9ceda6412c2f713 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Vojte=CC=8Cch=20Struha=CC=81r?= <vojtechstruhar@gmail.com>
Date: Sat, 7 Jun 2025 12:55:02 +0200
Subject: [PATCH] Print pagebreaks, inline width images

---
 astro.config.mjs                              | 11 ++++-
 public/scripts/load-images-before-print.js    |  8 ++++
 .../docs/szmgr/SZP09_zpracovani_obrazu.md     |  2 +-
 src/styles/images-adjustment.css              | 43 +++++++++++++++++++
 src/styles/pixelated-logo.css                 |  3 --
 src/styles/print-improvements.css             |  6 +++
 6 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 public/scripts/load-images-before-print.js
 create mode 100644 src/styles/images-adjustment.css
 delete mode 100644 src/styles/pixelated-logo.css
 create mode 100644 src/styles/print-improvements.css

diff --git a/astro.config.mjs b/astro.config.mjs
index 3f15842..66fd24e 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -23,6 +23,14 @@ export default defineConfig({
 				src: "./src/assets/fi_16.png"
 			},
 			social: [{ icon: 'github', label: 'GitHub', href: 'https://git.vojtechstruhar.com/Vojta/fi-notes' }],
+			head: [
+				{
+					tag: "script",
+					attrs: {
+						src: "/scripts/load-images-before-print.js"
+					}
+				}
+			],
 			customCss: [
 				"remark-github-alerts/styles/github-colors-light.css",
 				"remark-github-alerts/styles/github-colors-dark-class.css",
@@ -30,8 +38,9 @@ export default defineConfig({
 				"katex/dist/katex.min.css",
 				"./src/styles/theme.css",
 				"./src/styles/footnotes-fix.css",
-				"./src/styles/pixelated-logo.css",
+				"./src/styles/images-adjustment.css",
 				"./src/styles/scroll-fix.css",
+				"./src/styles/print-improvements.css",
 			],
 			sidebar: [
 				{
diff --git a/public/scripts/load-images-before-print.js b/public/scripts/load-images-before-print.js
new file mode 100644
index 0000000..9323ff3
--- /dev/null
+++ b/public/scripts/load-images-before-print.js
@@ -0,0 +1,8 @@
+function loadAllImages() {
+    document.querySelectorAll('img[loading="lazy"]').forEach(img => {
+        img.setAttribute('loading', 'eager');
+    });
+}
+
+// Before printing (manually or via browser)
+window.addEventListener('beforeprint', loadAllImages);
diff --git a/src/content/docs/szmgr/SZP09_zpracovani_obrazu.md b/src/content/docs/szmgr/SZP09_zpracovani_obrazu.md
index 127c70e..563d95e 100644
--- a/src/content/docs/szmgr/SZP09_zpracovani_obrazu.md
+++ b/src/content/docs/szmgr/SZP09_zpracovani_obrazu.md
@@ -776,7 +776,7 @@ Inverzní funkce je velice užitečná, ale poměrně složitá, takže doufám,
 [^edge-detection]: [Wikipedia: Edge detection](https://en.wikipedia.org/wiki/Edge_detection)
 [^fourier]: [Wikipedia: Fourier transform](https://en.wikipedia.org/wiki/Fourier_transform)
 [^fft]: [Wikipedia: Fast Fourier transform](https://en.wikipedia.org/wiki/Fast_Fourier_transform)
-[^samping]: [Wikipedia: Sampling (signal processing)](<https://en.wikipedia.org/wiki/Sampling_(signal_processing)>)
+[^sampling]: [Wikipedia: Sampling (signal processing)](<https://en.wikipedia.org/wiki/Sampling_(signal_processing)>)
 [^scaling]: [Wikipedia: Image scaling](https://en.wikipedia.org/wiki/Image_scaling)
 [^n-s]: [Wikipedia: Nyquist–Shannon sampling theorem](https://en.wikipedia.org/wiki/Nyquist%E2%80%93Shannon_sampling_theorem)
 [^geometric-transform]: [Wikipedia: Geometric transformation](https://en.wikipedia.org/wiki/Geometric_transformation)
diff --git a/src/styles/images-adjustment.css b/src/styles/images-adjustment.css
new file mode 100644
index 0000000..503cbab
--- /dev/null
+++ b/src/styles/images-adjustment.css
@@ -0,0 +1,43 @@
+.site-title img {
+    image-rendering: pixelated;
+}
+
+img[alt="width=30%"] {
+  width: 30%;
+  display: inline;
+}
+
+img[alt="width=69%"] {
+  width: 69%;
+  display: inline;
+}
+
+img[alt="width=49%"] {
+  width: 49%;
+  display: inline;
+}
+
+img[alt="width=200"] {
+    width: 200px;
+    margin: auto;
+}
+img[alt="width=300"] {
+    width: 300px;
+    margin: auto;
+}
+img[alt="width=400"] {
+    width: 400px;
+    margin: auto;
+}
+img[alt="width=500"] {
+    width: 500px;
+    margin: auto;
+}
+img[alt="width=600"] {
+    width: 600px;
+    margin: auto;
+}
+img[alt="width=700"] {
+    width: 700px;
+    margin: auto;
+}
diff --git a/src/styles/pixelated-logo.css b/src/styles/pixelated-logo.css
deleted file mode 100644
index d8075fa..0000000
--- a/src/styles/pixelated-logo.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.site-title img {
-    image-rendering: pixelated;
-}
\ No newline at end of file
diff --git a/src/styles/print-improvements.css b/src/styles/print-improvements.css
new file mode 100644
index 0000000..98b9546
--- /dev/null
+++ b/src/styles/print-improvements.css
@@ -0,0 +1,6 @@
+@media print {
+    h2,
+    h3 {
+        break-after: avoid;
+    }
+}
\ No newline at end of file