mooooar moooar pretty fixes

_posts/blog/2020-02-28-how-ive-built-my-web-site.md

@@ -17,7 +17,9 @@ tags:
 
 Creating my own website with blog was something I had in my mind from start of my professional career after I left school.
 I had a lot of new experience with development which I wanted to elaborate on and save into a small library so I can take a look back on my thoughts how they evolve over time.
-This was like 6 years ago. I had a successful first attempt at doing so. I created a WordPress with the simplest theme I've found and wrote some articles. I've published it under a domain of one of the first startups I've been part of. I still have a backup of the _Wordpress_ database somewhere so I can export those articles here when I will feel like doing so. The blog haven't lived for long as the domain once expired and I was not satisfied with it enough to deploy it somewhere else.
+This was like 6 years ago. I had a successful first attempt at doing so.
+
+I created a WordPress with the simplest theme I've found and wrote some articles. I've published it under a domain of one of the first startups I've been part of. I still have a backup of the _Wordpress_ database somewhere so I can export those articles here when I will feel like doing so. The blog haven't lived for long as the domain once expired and I was not satisfied with it enough to deploy it somewhere else.
 
 For all those years I was trying to create it in my spare time (of which wasn't that much apparently). There were several attempts. One with _Angular_ when it was "the cool kid on the block". Another one with _cycle.js_ which was not that far from being done. I regret it now as it would be really satisfying to finish that one. I had created neat <abbr title="Server side rendering">SSR</abbr> layer which was not really difficult to accomplish with _cycle.js_ as it is reactive and it only required skipping first client render of _virtual-dom_ after page load. I'm still in love with _cycle.js_ but after _sapper_ was released I've found out of its ability to create a nice **static site** I wanted to try it out. I think that the approach of **compiling the source code** as classic client applications have been doing for many years makes a lot of sense on the internet as well. This is the one thing I'd really like to be able to accomplish with reactive frameworks like _cycle.js_.
 

axum_server/src/main.rs

@@ -35,6 +35,7 @@ async fn main() {
         .nest_service("/fonts", ServeDir::new("../static/fonts"))
         .nest_service("/generated_images", ServeDir::new("generated_images"))
         .nest_service("/svg", ServeDir::new("../static/svg"))
+        // TODO manifest logos have bad link, #directory-swap
         .nest_service(
             "/config.yml",
             ServeDir::new("../static/resources/config.yml"),
@@ -53,12 +54,10 @@ async fn main() {
 
 // TODO Socials
 // - fotos
-// TODO Colors
-// Text slate, and gray should be somehow customised
-// STRONG bold-medium
-// TODO print css and other 404 css linked in base.html
 // TODO go live pipeline
 // TODO after release
+// Remove old web completely
+// Restructure repository
 // - contact
 // - projects page
 // - linktree page

axum_server/src/picture_generator/picture_markup_generator.rs

@@ -22,13 +22,24 @@ pub fn generate_picture_markup(
     generate_image: bool,
 ) -> Result<String, anyhow::Error> {
     let exported_formats = get_export_formats(orig_img_path);
+
+    if exported_formats.is_empty() {
+        return Ok(formatdoc!(
+            r#"<img
+            src="{orig_img_path}"
+            width="{width}"
+            height="{height}"
+            alt="{alt_text}"
+        >"#
+        ));
+    }
     let path_to_generated = get_generated_file_name(orig_img_path);
 
-    // TODO This should get removed when we move the project structure #move
+    // TODO This should get removed when we move the project structure #directory-swap
-    let dev_only_img_path =
+    let disk_img_path =
         Path::new("../static/").join(orig_img_path.strip_prefix("/").unwrap_or(orig_img_path));
 
-    let orig_img_dimensions = image_dimensions(&dev_only_img_path)?;
+    let orig_img_dimensions = image_dimensions(&disk_img_path)?;
     let resolutions = get_resolutions(orig_img_dimensions, width, height);
 
     let path_to_generated_arc = Arc::new(path_to_generated);
@@ -40,8 +51,8 @@ pub fn generate_picture_markup(
 
     if generate_image {
         rayon::spawn(move || {
-            let orig_img = ImageReader::open(&dev_only_img_path)
+            let orig_img = ImageReader::open(&disk_img_path)
-                .with_context(|| format!("Failed to read instrs from {:?}", &dev_only_img_path))
+                .with_context(|| format!("Failed to read instrs from {:?}", &disk_img_path))
                 .unwrap()
                 .decode()
                 .unwrap();

axum_server/src/post_utils/post_parser.rs

@@ -177,10 +177,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
                 });
                 Event::Html(
                     formatdoc!(
-                        r##"
+                        r##"id="{heading_id}">
-                            <a name="{heading_id}" class="anchor" href="#{heading_id}">
-                              <span class="header-link"></span>
-                            </a>
                             {text}
                         "##
                     )
@@ -197,7 +194,7 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
         }) => {
             let id_str = id.map(|id| id.to_string());
             text_kind = TextKind::Heading(id_str);
-            Event::Html(format!("<{level}>").into())
+            Event::Html(format!("<{level} ").into())
         }
         Event::Start(_) => event,
         Event::End(TagEnd::Image) => Event::Html("</figcaption></figure>".into()),

axum_server/styles/input.css

@@ -76,6 +76,14 @@ a {
   }
 }
 
+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;
@@ -95,9 +103,6 @@ a {
   p {
     @apply px-4 my-2 text-slate-950 text-justify mx-auto max-w-read md:text-lg md:my-8 lg:text-readxl;
   }
-  strong {
-    @apply font-medium;
-  }
   pre {
     @apply p-4 my-1 overflow-auto text-sm mx-auto max-w-read;
   }
@@ -113,7 +118,7 @@ a {
   }
 
   table {
-    @apply text-sm mx-auto my-4 max-w-image table-auto border-collapse border-spacing-12 border border-gray-200 rounded md:text-base lg:text-xl lg:my-8;
+    @apply text-sm mx-auto my-4 max-w-image table-auto border-collapse border-spacing-12 border border-slate-200 rounded md:text-base lg:text-xl lg:my-8;
   }
 
   thead {

axum_server/styles/output.css

@@ -807,10 +807,6 @@ video {
   width: 180px;
 }
 
-.w-full {
-  width: 100%;
-}
-
 .max-w-maxindex {
   max-width: 100rem;
 }
@@ -828,6 +824,11 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.break-inside-avoid {
+  -moz-column-break-inside: avoid;
+       break-inside: avoid;
+}
+
 .grid-flow-col {
   grid-auto-flow: column;
 }
@@ -888,10 +889,6 @@ video {
   border-radius: 0.25rem;
 }
 
-.rounded-2xl {
-  border-radius: 1rem;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
@@ -908,10 +905,6 @@ video {
   border-width: 2px;
 }
 
-.border-4 {
-  border-width: 4px;
-}
-
 .border-blue-500 {
   --tw-border-opacity: 1;
   border-color: rgb(23 137 224 / var(--tw-border-opacity));
@@ -922,6 +915,11 @@ video {
   border-color: rgb(11 39 70 / var(--tw-border-opacity));
 }
 
+.border-slate-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(203 213 225 / var(--tw-border-opacity));
+}
+
 .bg-blue-100 {
   --tw-bg-opacity: 1;
   background-color: rgb(225 239 253 / var(--tw-bg-opacity));
@@ -946,11 +944,6 @@ video {
   fill: #0b2746;
 }
 
-.object-contain {
-  -o-object-fit: contain;
-     object-fit: contain;
-}
-
 .p-0 {
   padding: 0px;
 }
@@ -1091,21 +1084,16 @@ video {
   color: rgb(11 39 70 / var(--tw-text-opacity));
 }
 
-.text-gray-600 {
-  --tw-text-opacity: 1;
-  color: rgb(75 85 99 / var(--tw-text-opacity));
-}
-
-.text-gray-800 {
-  --tw-text-opacity: 1;
-  color: rgb(31 41 55 / var(--tw-text-opacity));
-}
-
 .text-pink-950 {
   --tw-text-opacity: 1;
   color: rgb(80 2 56 / var(--tw-text-opacity));
 }
 
+.text-slate-600 {
+  --tw-text-opacity: 1;
+  color: rgb(71 85 105 / var(--tw-text-opacity));
+}
+
 .text-slate-800 {
   --tw-text-opacity: 1;
   color: rgb(30 41 59 / var(--tw-text-opacity));
@@ -1115,11 +1103,6 @@ video {
   text-decoration-line: none;
 }
 
-.drop-shadow-md {
-  --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .transition-colors {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -1144,6 +1127,14 @@ a {
   }
 }
 
+strong {
+  font-weight: 500;
+}
+
+img[height] {
+  height: revert-layer;
+}
+
 .article-body {
   h1 {
     margin-left: auto;
@@ -1407,9 +1398,6 @@ a {
       font-weight: 400;
     }
   }
-  strong {
-    font-weight: 500;
-  }
   pre {
     margin-top: 0.25rem;
     margin-bottom: 0.25rem;
@@ -1512,7 +1500,7 @@ a {
   }
   table {
     --tw-border-opacity: 1;
-    border-color: rgb(229 231 235 / var(--tw-border-opacity));
+    border-color: rgb(226 232 240 / var(--tw-border-opacity));
   }
   table {
     font-size: 0.875rem;
@@ -1934,3 +1922,9 @@ a {
     grid-template-columns: 1fr 2fr;
   }
 }
+
+@media print {
+  .print\:hidden {
+    display: none;
+  }
+}

axum_server/templates/base.html

@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
   <head>
-    <title>{% block title %} {{title}} @michalvankodev {% endblock %}</title>
+    <title>{% block title %} {{title}} {% endblock %} @michalvankodev</title>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <meta name="theme-color" content="#333333" />
@@ -13,16 +13,13 @@
       rel="alternate"
       type="application/rss+xml"
       title="RSS feed for latest posts"
-      href="https://michalvanko.dev/feed.xml"
+      href="/feed.xml"
     />
 
     <!-- Tailwind output file -->
     <link rel="stylesheet" href="/styles/output.css" />
 
-    <link rel="stylesheet" href="/print.css" media="print" />
-    <link rel="stylesheet" href="/fonts.css" />
     <link rel="manifest" href="/manifest.json" />
-    <link rel="stylesheet" href="/prism.css" />
 
     <link rel="icon" type="image/svg+xml" href="/m-logo.svg" />
     <link rel="icon" type="image/png" href="/m-logo-192.png" />

axum_server/templates/blog_post.html

@@ -8,7 +8,7 @@
   <h1 class="text-3xl md:text-4xl lg:text-6xl lg:mt-20 text-blue-900 mb-3 font-bold">{{title}}</h1>
   <aside class="flex justify-between flex-row">
     {% include "post_tag_list.html" %}
-    <section class="created-at m-1 text-right text-sm text-gray-600 md:text-lg">
+    <section class="created-at m-1 text-right text-sm text-slate-600 md:text-lg">
       <span>Published on</span>
       <time datetime="{date}"> {{date|pretty_date}} </time>
     </section>

axum_server/templates/blog_post_list.html

@@ -9,7 +9,7 @@
     {% else %}
     <h1 class="m-5 text-4xl text-blue-950 font-extrabold md:text-6xl">
     {% if let Some(t) = tag %}
-    <em>{{t}}</em> 
+    #{{t}} 
     {% else %}
      Blog posts
     {% endif %}
@@ -25,13 +25,13 @@
       </ul>
     </section>
 
-    <hr class="border-blue-950 m-5 md:my-8">
+    <hr class="border-slate-300 m-5 md:my-8">
 
     <ul class="mx-5">
       {% for post in posts %}
       <li>
         {% include "components/blog_post_preview.html" %}
-        <hr class="border-blue-950 my-5 md:my-8">
+        <hr class="border-slate-300 my-5 md:my-8">
       </li>
       {% endfor %}
     </ul>

axum_server/templates/components/blog_post_default_thumbnail.html

@@ -1,3 +1,3 @@
-<div class="rounded-2xl w-[180px] h-[240px] bg-blue-100 border-4 border-blue-500 flex justify-center items-center">
+<div class="w-[180px] h-[240px] bg-blue-100 flex justify-center items-center">
   <span class="text-blue-500 text-8xl -translate-y-1.5">{{post.metadata.title|fmt("{:.1}")|lower}}</span>
 </div> 

axum_server/templates/components/blog_post_preview.html

@@ -1,4 +1,4 @@
-<article class="grid grid-cols-[max-content_1fr] grid-rows-[max-content_1fr_max-content] grid-flow-col gap-4 md:gap-x-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">
 	<aside class="row-span-3 self-center">
 		{% match post.metadata.thumbnail %}
 		{% when Some with (orig_path) %}
@@ -14,7 +14,7 @@
 		  <a rel="prefetch" href="/blog/{{post.slug}}" class="text-blue-950 no-underline">{{post.metadata.title}}</a>
 		</h3>
 	</header>
-	<section class="text-base leading-5 text-gray-800 md:text-xl text-justify">{{post.body|description_filter|safe}}</section>
+	<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">
     <ul class="inline-block">
      {% for tag in post.metadata.tags %}

axum_server/templates/components/project_preview_card.html

@@ -1,4 +1,4 @@
-<article class="border rounded-md bg-white m-4 p-4">
+<article class="border rounded-md bg-white m-4 p-4 break-inside-avoid">
   <header class="px-4 mb-3"> 
     <h2 class="text-xl font-semibold text-blue-900 md:text-2xl">
       {% match project.metadata.link %}
@@ -18,16 +18,17 @@
 
   {% match project.metadata.cover_image %}
   {% when Some with (source) %}
-  <figure class="mx-4 my-2">
+  {% let picture = crate::picture_generator::picture_markup_generator::generate_picture_markup(source, 420, 236, "Project cover", 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) %}
       <a href="{{href}}">
-        <img src="{{source}}" class="object-contain w-full aspect-video"/>
+       {{picture|safe}}
       </a>
       {% when None %}
-      <img src="{{source}}" />
+       {{picture|safe}}
       {% endmatch %}
-		<!-- TODO <figure> -->
+		<!-- TODO <figure> generate_image -->
   </figure>
   {% when None %}
   {% endmatch %}

axum_server/templates/components/talent_card.html

@@ -10,7 +10,7 @@
 		<header>
 			<h3 class="text-lg font-medium mb-1 md:text-2xl">{{heading}}</h3>
 		</header>
-		<p class="text-sm leading-5 text-gray-800 md:text-lg">{{description|safe}}</p>
+		<p class="text-sm leading-5 text-slate-800 md:text-lg">{{description|safe}}</p>
 	</section>
 </section>
 

axum_server/templates/index.html

@@ -7,23 +7,22 @@
 {% block content %}
 <section class="index-container lg:grid lg:grid-cols-2 xl:grid-cols-[1fr_2fr] lg:gap-y-8 lg:gap-x-32 max-w-maxindex mx-auto">
   <section id="about-me">
-    <header class="index-header hidden">
+    <!-- <header class="index-header hidden"> -->
-      <figure class="profile-pic">
+      <!-- <figure class="profile-pic"> -->
-        <picture>
+        <!-- <picture> -->
-          <img
+          <!-- <img -->
-            alt="Portrait"
+            <!-- alt="Portrait" -->
-            {# TODO generate `srcset` for optimal image #}
+            <!-- {# TODO Take a new photo #} -->
-            {# TODO Take a new photo #}
+            <!-- src="/images/profile-portugal-landscape.jpg" -->
-            src="/images/profile-portugal-landscape.jpg"
+          <!-- /> -->
-          />
+        <!-- </picture> -->
-        </picture>
+      <!-- </figure> -->
-      </figure>
 
-      <p class="motto">
+      <!-- <p class="motto"> -->
-        <cite>“Let your ambition carry you.”</cite>
+        <!-- <cite>“Let your ambition carry you.”</cite> -->
-        <span class="cite-owner">- La Flame</span>
+        <!-- <span class="cite-owner">- La Flame</span> -->
-      </p>
+      <!-- </p> -->
-    </header>
+    <!-- </header> -->
 
     <h2 class="text-blue-950 font-bold text-2xl m-5 md:text-4xl">About me</h2>
 
@@ -52,13 +51,13 @@
         {% endfor %}
       </ul>
     </section>
-    <hr class="border-blue-950 m-5">
+    <hr class="border-slate-300 m-5">
 
     <ul class="mx-5">
      {% for post in featured_blog_posts %}
       <li>
         {% include "components/blog_post_preview.html" %}
-        <hr class="border-blue-950 my-5 md:my-8">
+        <hr class="border-slate-300 my-5 md:my-8">
       </li>
      {% endfor %}
     </ul>
@@ -68,7 +67,7 @@
     {% include "sections/social.html" %}
   </section>
 
-  <hr class="border-blue-950 m-5 lg:hidden">
+  <hr class="border-slate-300 m-5 lg:hidden">
 
   <section id="showcase" class="col-span-2">
     {% include "sections/showcase.html" %}

axum_server/templates/site_header.html

@@ -3,7 +3,7 @@
   {% match header_props.back_link %}
   {% when Some with (link) %}
   <a
-    class="px-3 py-2 text-lg font-medium drop-shadow-md"
+    class="px-3 py-2 text-lg font-medium print:hidden"
     href="{{link.href}}"
   >
     {{link.label}}
@@ -16,5 +16,5 @@
       </a>
     </aside>
 </nav>
-<hr class="border-blue-950 mx-5">
+<hr class="border-slate-300 mx-5">
 </header>