holy shit the responsiveness

axum_server/src/picture_generator/picture_markup_generator.rs

@@ -19,9 +19,15 @@ pub fn generate_picture_markup(
     width: u32,
     height: u32,
     alt_text: &str,
+    class_name: Option<&str>,
     generate_image: bool,
 ) -> Result<String, anyhow::Error> {
     let exported_formats = get_export_formats(orig_img_path);
+    let class_attr = if let Some(class) = class_name {
+        format!(r#"class="{class}""#)
+    } else {
+        "".to_string()
+    };
 
     if exported_formats.is_empty() {
         return Ok(formatdoc!(
@@ -29,6 +35,7 @@ pub fn generate_picture_markup(
             src="{orig_img_path}"
             width="{width}"
             height="{height}"
+            {class_attr}
             alt="{alt_text}"
         >"#
         ));
@@ -99,6 +106,7 @@ pub fn generate_picture_markup(
             width="{width}"
             height="{height}"
             alt="{alt_text}"
+            {class_attr}
         >"#
     );
 
@@ -307,8 +315,15 @@ fn test_generate_picture_markup() {
         </picture>"#,
     };
     assert_eq!(
-        generate_picture_markup(orig_img_path, width, height, "Testing image alt", false)
+        generate_picture_markup(
-            .expect("picture markup has to be generated"),
+            orig_img_path,
+            width,
+            height,
+            "Testing image alt",
+            None,
+            false
+        )
+        .expect("picture markup has to be generated"),
         result
     );
 }

axum_server/src/post_utils/post_parser.rs

@@ -125,17 +125,23 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
             );
 
             // Place image into the content with scaled reso to a boundary
-            let picture_markup =
+            let picture_markup = generate_picture_markup(
-                generate_picture_markup(&dest_url, max_width, max_height, &title, generate_images)
+                &dest_url,
-                    .unwrap_or(formatdoc!(
+                max_width,
-                        r#"
+                max_height,
+                &title,
+                None,
+                generate_images,
+            )
+            .unwrap_or(formatdoc!(
+                r#"
                         <img
                           alt="{alt}"
                           src="{src}"
                         />"#,
-                        alt = title,
+                alt = title,
-                        src = dest_url,
+                src = dest_url,
-                    ));
+            ));
             debug!(
                 "Image link_type: {:?} url: {} title: {} id: {}",
                 link_type, dest_url, title, id

axum_server/styles/input.css

@@ -76,10 +76,6 @@ strong {
   @apply font-medium;
 }
 
-img[height] {
-  height: revert-layer;
-}
-
 .article-body {
   h1 {
     @apply px-4 text-2xl font-semibold text-blue-900 mb-3 mt-4 max-w-read mx-auto md:text-4xl lg:text-5xl;

axum_server/styles/output.css

@@ -654,6 +654,18 @@ video {
   grid-row: span 3 / span 3;
 }
 
+.float-start {
+  float: inline-start;
+}
+
+.clear-left {
+  clear: left;
+}
+
+.clear-both {
+  clear: both;
+}
+
 .m-0 {
   margin: 0px;
 }
@@ -710,11 +722,6 @@ video {
   margin-bottom: 1.25rem;
 }
 
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -739,6 +746,30 @@ video {
   margin-top: 0.75rem;
 }
 
+.ml-1 {
+  margin-left: 0.25rem;
+}
+
+.mr-1 {
+  margin-right: 0.25rem;
+}
+
+.mr-2 {
+  margin-right: 0.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mr-4 {
+  margin-right: 1rem;
+}
+
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
 .block {
   display: block;
 }
@@ -787,6 +818,18 @@ video {
   height: 240px;
 }
 
+.h-auto {
+  height: auto;
+}
+
+.h-\[236px\] {
+  height: 236px;
+}
+
+.max-h-\[236px\] {
+  max-height: 236px;
+}
+
 .min-h-full {
   min-height: 100%;
 }
@@ -807,6 +850,11 @@ video {
   width: 180px;
 }
 
+.w-fit {
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
 .max-w-\[32rem\] {
   max-width: 32rem;
 }
@@ -819,22 +867,6 @@ video {
   max-width: 64rem;
 }
 
-.max-w-sm {
-  max-width: 24rem;
-}
-
-.max-w-96 {
-  max-width: 24rem;
-}
-
-.max-w-\[30rem\] {
-  max-width: 30rem;
-}
-
-.max-w-md {
-  max-width: 28rem;
-}
-
 .max-w-xl {
   max-width: 36rem;
 }
@@ -1161,10 +1193,6 @@ strong {
   font-weight: 500;
 }
 
-img[height] {
-  height: revert-layer;
-}
-
 .article-body {
   h1 {
     margin-left: auto;
@@ -1808,14 +1836,49 @@ article a:visited {
 }
 
 @media (min-width: 640px) {
+  .sm\:float-none {
+    float: none;
+  }
+
+  .sm\:clear-none {
+    clear: none;
+  }
+
   .sm\:my-4 {
     margin-top: 1rem;
     margin-bottom: 1rem;
   }
 
-  .sm\:mx-auto {
+  .sm\:ml-0 {
-    margin-left: auto;
+    margin-left: 0px;
-    margin-right: auto;
+  }
+
+  .sm\:mb-0 {
+    margin-bottom: 0px;
+  }
+
+  .sm\:mt-0 {
+    margin-top: 0px;
+  }
+
+  .sm\:grid {
+    display: grid;
+  }
+
+  .sm\:grid-flow-col {
+    grid-auto-flow: column;
+  }
+
+  .sm\:grid-cols-\[max-content_1fr\] {
+    grid-template-columns: max-content 1fr;
+  }
+
+  .sm\:grid-rows-\[max-content_1fr_max-content\] {
+    grid-template-rows: max-content 1fr max-content;
+  }
+
+  .sm\:gap-4 {
+    gap: 1rem;
   }
 
   .sm\:py-4 {
@@ -1830,11 +1893,6 @@ article a:visited {
     margin-bottom: 2rem;
   }
 
-  .md\:mx-auto {
-    margin-left: auto;
-    margin-right: auto;
-  }
-
   .md\:grid {
     display: grid;
   }

axum_server/templates/components/blog_post_preview.html

@@ -1,8 +1,8 @@
-<article class="grid grid-cols-[max-content_1fr] grid-rows-[max-content_1fr_max-content] grid-flow-col gap-4 md:gap-x-8 break-inside-avoid">
+<article class="sm:grid sm:grid-cols-[max-content_1fr] sm:grid-rows-[max-content_1fr_max-content] sm:grid-flow-col sm:gap-4 md:gap-x-8 break-inside-avoid clear-both sm:clear-none">
-	<aside class="row-span-3 self-center">
+	<aside class="row-span-3 self-center float-start sm:float-none mr-3 mb-3 sm:ml-0 sm:mb-0">
 		{% match post.metadata.thumbnail %}
 		{% when Some with (orig_path) %}
-		{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", true).unwrap_or("thumbnail not found".to_string())|safe }}
+		{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(orig_path, 180, 240, "Article thumbnail", None, true).unwrap_or("thumbnail not found".to_string())|safe }}
 		{% when None %}
 		<div> 
 			{% include "components/blog_post_default_thumbnail.html" %}
@@ -15,7 +15,7 @@
 		</h3>
 	</header>
 	<section class="text-base leading-5 text-slate-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>
-	<footer class="text-sm md:text-base lg:text-lg">
+	<footer class="text-sm md:text-base lg:text-lg mt-3 sm:mt-0">
     <ul class="inline-block">
      {% for tag in post.metadata.tags %}
       <li class="inline-block">

axum_server/templates/components/project_preview_card.html

@@ -18,7 +18,7 @@
 
   {% match project.metadata.cover_image %}
   {% when Some with (source) %}
-  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 420, 236, "Project cover", true).unwrap_or("cover not found".to_string()) %}
+  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 420, 236, "Project cover", Some("max-h-[236px]"), true).unwrap_or("cover not found".to_string()) %}
   <figure class="mx-4 my-2 flex justify-center">
       {% match project.metadata.link %}
       {% when Some with (href) %}

axum_server/templates/components/social_card.html

@@ -1,15 +1,15 @@
-{% macro social_card_start(svg, heading) %}
+{% macro social_card_start(svg, heading, img) %}
 
-<section class="border rounded-md bg-pink-200 m-4 p-4">
+<section class="border rounded-md bg-pink-200 m-4 p-4 w-fit">
 	<header class="flex text-center justify-center items-center gap-2 mb-2">
 		 <svg aria-hidden="true" class="h-7 w-7 fill-blue-950">
 	    <use xlink:href="/svg/icons-sprite.svg#{{svg}}" />
 	  </svg>
 		<h3 class="text-lg font-medium mb-1">{{heading|safe}}</h3>
 	</header>
+	{% let alt_text = format!("{svg} thumbnail") %}
 
-{% endmacro %}
+	{{ crate::picture_generator::picture_markup_generator::generate_picture_markup(img, 420, 200, alt_text, Some("h-auto"), true).unwrap_or("thumbnail not found".to_string())|safe }}
 
-{% macro social_card_end() %}
+</section>
-	</section>
 {% endmacro %}

axum_server/templates/sections/social.html

@@ -1,52 +1,12 @@
 <h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">Socials</h2>
-{% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>") %}
-<!-- <script src= "https://player.twitch.tv/js/embed/v1.js"></script> -->
-<!-- <div id="twitch-player" class="h-64 aspect-video rounded overflow-hidden"></div> -->
-<!-- <script type="text/javascript"> -->
-<!-- var options = { -->
-<!-- width: "100%", -->
-<!-- height: "100%", -->
-<!-- channel: "michalvankodev", -->
-<!-- parent: ["localhost"] -->
-<!-- }; -->
-<!-- var player = new Twitch.Player("twitch-player", options); -->
-<!-- player.setVolume(0.5); -->
-</script>
-{% call sc::social_card_end() %}
 
-{% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>") %}
+<section class="flex flex-col items-center">
-<!-- STYLES needed to overwrite tiktok embed css -->
+{% call sc::social_card_start("twitch", "I stream (almost) regularly on <em>twitch.tv</em>", "images/social/instagram_plain.png") %}
-<!-- <blockquote -->
-<!-- class="h-64 aspect-video overflow-hidden p-0 m-0 tiktok-embed bg-pink-200" -->
-<!-- cite="https://www.tiktok.com/@michalvankodev" -->
-<!-- data-unique-id="michalvankodev" -->
-<!-- data-embed-from="embed_page" -->
-<!-- data-embed-type="creator" -->
-<!-- style="max-width:780px; min-width:288px; margin: 0; padding: 0; border-radius: 8px" -->
-<!-- > -->
-<!-- <section> -->
-<!-- <a target="_blank" href="https://www.tiktok.com/@michalvankodev?refer=creator_embed">@michalvankodev</a> -->
-<!-- </section> -->
-<!-- </blockquote> -->
-<!-- <script async src="https://www.tiktok.com/embed.js"></script> -->
-{% call sc::social_card_end() %}
 
-{% call sc::social_card_start("youtube", "Vlogs and highlights can be found on <em>YouTube</em>") %}
+{% call sc::social_card_start("tiktok", "Highlights can be found on <em>TikTok</em>", "images/social/instagram_plain.png") %}
-<!-- TODO create our own youtube widget which will populate this window on build -->
-<!-- <iframe -->
-<!-- class="h-64 aspect-video" -->
-<!-- id="ytplayer" -->
-<!-- type="text/html" -->
-<!-- width="100%" -->
-<!-- height="100%" -->
-<!-- src="https://www.youtube.com/embed/?listType=playlist&list=PLjUl8tFKyR8rCsckLn93PAwQg6tf0cyBl&enablejsapi=1&color=white" -->
-<!-- frameborder="0" -->
-<!-- allowfullscreen -->
-<!-- ></iframe> -->
-{% call sc::social_card_end() %}
 
+{% call sc::social_card_start("youtube", "Vlogs and highlights can be found on <em>YouTube</em>", "images/social/instagram_plain.png") %}
 
-{% call sc::social_card_start("instagram", "Photos and stories shared on <em>Instagram</em>") %}
+{% call sc::social_card_start("instagram", "Photos and stories shared on <em>Instagram</em>", "images/social/instagram_plain.png") %}
-<!-- <blockquote class="instagram-media aspect-video h-64" data-instgrm-permalink="https://www.instagram.com/michalvankodev/" data-instgrm-version="12" style=" background:#FFF; border:0; border-radius:3px; box-shadow:0 0 1px 0 rgba(0,0,0,0.5),0 1px 10px 0 rgba(0,0,0,0.15); margin: 1px; max-width:540px; min-width:326px; padding:0; width:99.375%; height:256px; max-height:100%;"></blockquote><script async src="https://www.instagram.com/embed.js"></script> -->
-{% call sc::social_card_end() %}
 
+</section>