strong bold medium and heading tag handling

_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

@@ -55,7 +55,6 @@ async fn main() {
 // - 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

axum_server/src/post_utils/post_parser.rs

@@ -177,12 +177,9 @@ pub fn parse_html(markdown: &str, generate_images: bool) -> String {
                 });
                 Event::Html(
                     formatdoc!(
-                        r##"
-                            <a name="{heading_id}" class="anchor" href="#{heading_id}">
-                              <span class="header-link"></span>
-                            </a>
+                        r##"id="{heading_id}">
                             {text}
-                            "##
+                        "##
                     )
                     .into(),
                 )
@@ -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,10 @@ a {
   }
 }
 
+strong {
+  @apply font-medium;
+}
+
 .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 +99,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;
   }

axum_server/styles/output.css

@@ -888,10 +888,6 @@ video {
   border-radius: 0.25rem;
 }
 
-.rounded-2xl {
-  border-radius: 1rem;
-}
-
 .rounded-full {
   border-radius: 9999px;
 }
@@ -908,10 +904,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));
@@ -1144,6 +1136,10 @@ a {
   }
 }
 
+strong {
+  font-weight: 500;
+}
+
 .article-body {
   h1 {
     margin-left: auto;
@@ -1407,9 +1403,6 @@ a {
       font-weight: 400;
     }
   }
-  strong {
-    font-weight: 500;
-  }
   pre {
     margin-top: 0.25rem;
     margin-bottom: 0.25rem;

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 %}

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/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"
     href="{{link.href}}"
   >
     {{link.label}}