Transform images + placeholders

crates/service/service-webpage/src/pages/betalupi.md

@@ -31,4 +31,4 @@ A snippet of the [_Endless Sky_][es] map is below.
 
 <br/>
 
-<img alt="betalupi map" src="/assets/img/betalupi.png"></img>
+<img class="img-placeholder" src="/assets/img/betalupi.png?t=maxdim(10,10)" data-large="/assets/img/betalupi.png" style="width:100%;height=10rem;"></img>

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

@@ -27,8 +27,11 @@ pub fn index() -> Page {
 					h2 id="about" { "About" }
 
 					div {
+
 						img
-							src="/assets/img/cover-small.jpg"
+							class="img-placeholder"
+							src="/assets/img/cover-small.jpg?t=maxdim(10,10)"
+							data-large="/assets/img/cover-small.jpg"
 							style="float:left;margin:10px 10px 10px 10px;display:block;width:25%;"
 							{}
 

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 {

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

@@ -33,21 +33,21 @@ fn build_server() -> Arc<PageServer> {
 			"/assets/img/cover-small.jpg",
 			StaticAsset {
 				bytes: include_bytes!("../../assets/images/cover-small.jpg"),
-				mime: MimeType::Css,
+				mime: MimeType::Jpg,
 			},
 		)
 		.add_page(
 			"/assets/img/betalupi.png",
 			StaticAsset {
 				bytes: include_bytes!("../../assets/images/betalupi-map.png"),
-				mime: MimeType::Css,
+				mime: MimeType::Png,
 			},
 		)
 		.add_page(
 			"/assets/img/icon.png",
 			StaticAsset {
 				bytes: include_bytes!("../../assets/images/icon.png"),
-				mime: MimeType::Css,
+				mime: MimeType::Png,
 			},
 		)
 		//