From 34f7223b309b4bf4aee27fde18bcd0611bc5aab4 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 ++++++++
 src/styles/images-adjustment.css           | 18 ++++++++++++++++++
 src/styles/pixelated-logo.css              |  3 ---
 src/styles/print-improvements.css          | 13 +++++++++++++
 5 files changed, 49 insertions(+), 4 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/styles/images-adjustment.css b/src/styles/images-adjustment.css
new file mode 100644
index 0000000..be2f756
--- /dev/null
+++ b/src/styles/images-adjustment.css
@@ -0,0 +1,18 @@
+.site-title img {
+    image-rendering: pixelated;
+}
+
+img[alt="width=30%"]:has(+ img) {
+  width: 30%;
+  display: inline;
+}
+
+img[alt="width=69%"]:has(+ img) {
+  width: 69%;
+  display: inline;
+}
+
+img[alt="width=49%"] {
+  width: 49%;
+  display: inline;
+}
\ No newline at end of file
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..1c289f2
--- /dev/null
+++ b/src/styles/print-improvements.css
@@ -0,0 +1,13 @@
+@media print {
+    h2, h3 {
+        break-after: avoid;
+    }
+
+    li:last-child {
+        break-before: avoid;
+    }
+
+    p, li {
+        text-align: justify;
+    }
+}
\ No newline at end of file