Transform images + placeholders

crates/service/service-webpage/src/pages/mod.rs

@@ -24,21 +24,21 @@ pub fn links() -> Page {
 
 	page_from_markdown(
 		include_str!("links.md"),
-		Some("/assets/img/icon.png".to_string()),
+		Some("/assets/img/icon.png".to_owned()),
 	)
 }
 
 pub fn betalupi() -> Page {
 	page_from_markdown(
 		include_str!("betalupi.md"),
-		Some("/assets/img/icon.png".to_string()),
+		Some("/assets/img/icon.png".to_owned()),
 	)
 }
 
 pub fn htwah_typesetting() -> Page {
 	page_from_markdown(
 		include_str!("htwah-typesetting.md"),
-		Some("/assets/img/icon.png".to_string()),
+		Some("/assets/img/icon.png".to_owned()),
 	)
 }
 
@@ -99,7 +99,7 @@ pub fn page_wrapper<'a>(
 			(DOCTYPE)
 			html {
 				head {
-					meta charset="UTF" {}
+					meta charset="UTF8" {}
 					meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" {}
 					meta content="text/html; charset=UTF-8" http-equiv="content-type" {}
 					meta property="og:type" content="website" {}
@@ -108,6 +108,28 @@ pub fn page_wrapper<'a>(
 
 					(&meta)
 					title { (PreEscaped(meta.title.clone())) }
+
+
+					script {
+						(PreEscaped("
+							window.onload = function() {
+								var imgs = document.querySelectorAll('.img-placeholder');
+
+								imgs.forEach(img => {
+									img.style.border = 'none';
+									img.style.filter = 'blur(10px)';
+									img.style.transition = 'filter 0.3s';
+
+									var lg = new Image();
+									lg.src = img.dataset.large;
+									lg.onload = function () {
+										img.src = img.dataset.large;
+										img.style.filter = 'blur(0px)';
+									};
+								})
+							}
+						"))
+					}
 				}
 
 				body {