fix image positioning

Signed-off-by: Avinal Kumar <avinal.xlvii@gmail.com>

src/Layouts/Blog.elm

@@ -66,7 +66,7 @@ subscriptions _ =
 
 blogTheme : String
 blogTheme =
-    "mt-4 prose prose-invert mx-auto lg:prose-lg prose-a:decoration-cyan-500 hover:prose-a:decoration-pink-500 prose-img:float-right"
+    "mt-4 prose prose-invert mx-auto lg:prose-lg prose-a:decoration-cyan-500 hover:prose-a:decoration-pink-500"
 
 
 view : { fromMsg : Msg -> mainMsg, content : View mainMsg, model : Model } -> View mainMsg

src/web-components/MarkedRender.js

@@ -42,7 +42,21 @@ customElements.define(
       };
 
       renderer.image = (href, title, text) => {
-        return `<img class="max-w-xs grow-0 shrink-0 basis-auto w-full" src=${href} alt="${text}">`;
+        let pos = text.search(":");
+        let direction = text.substr(pos + 1);
+        text = text.substr(0, pos);
+        let put = "max-w-xs ";
+        switch (direction) {
+          case "right":
+            put += "float-right ";
+            break;
+          case "left":
+            put += "float-left ";
+            break;
+          default:
+            put = "float-none ";
+        }
+        return `<img class="${put} grow-0 shrink-0 basis-auto w-full px-3" src=${href} alt="${text}">`;
       };
 
       marked.setOptions({

static/content/posts/development/i-am-loving-it-redhat.md

@@ -86,7 +86,7 @@ lifecycle.
 
 ### Kubernetes
 
-![Kubernetes tech](/images/kubernetes-meme.webp)
+![Kubernetes tech:left](/images/kubernetes-meme.webp)
 
 **Kubernetes** is the Greek word for a ship's captain. We get the words
 Cybernetic and Gubernatorial from it. The Kubernetes project focuses on
@@ -116,4 +116,4 @@ created and then transfer the request to Tekton API to create the
 corresponding resource on the OpenShift/Kubernetes cluster.*
 
 So are you interested in how it went? Please follow up with my [next
-blog](https://avinal.space/posts/development/lovely-dangerous-things-redhat.html).
+blog](https://avinal.space/posts/development/lovely-dangerous-things-redhat).

static/content/posts/development/lovely-dangerous-things-redhat.md

@@ -38,14 +38,13 @@ to the final diagram. Yeah, we learned. I will be explaining our
 final(obviously) architectural diagram and try to make some sense out of
 band-aids and duct tapes.
 
-<img src="/images/mks-architecture.webp"
+![The MKS Architecture](/images/mks-architecture.webp)
-class="img-fluid my-3 img-fluid my-3" alt="The MKS Arhitecture" />
 
 Let me start with explaining **What are MKS Resources?**. I hope you
 know at least tidbits about Kubernetes and by the definition: *A
 resource is an endpoint in the Kubernetes API that stores a collection
 of API objects of a certain kind; for example, the built-in
-:code:\`pods\` resource contains a collection of Pod objects.* But
+`pods` resource contains a collection of Pod objects.* But
 developers soon realized that these in-built resources were not enough
 for the ever-growing applications of Kubernetes. Here [custom
 resource](https://kubernetes.io/docs/concepts/extend-kubernetes/api-extension/custom-resources/)
@@ -57,9 +56,7 @@ Definition](https://kubernetes.io/docs/tasks/extend-kubernetes/custom-resources/
 So MKS Resources are such custom resources that correspond to the
 TektonCD custom resources.
 
-<img src="/images/venus-flytrap.gif"
+![A venus flytrap engulphing an insect.:right](/images/venus-flytrap.gif)
-class="float-md-right ml-3 float-md-right ml-3" width="250"
-alt="A venus flytrap engulphing an insect." />
 
 Let us now focus on the box containing `Controller` and `API server`.
 The controller can be said as a stimulus-response mechanism. Take the

static/content/posts/gsoc/final-evaluation.md

@@ -31,16 +31,13 @@ via custom scripts.
 
 ## GitHub Actions CI/CD
 
-<img src="/images/ci.webp"
-class="float-md-right rounded border border-info ml-3 float-md-right rounded border border-info ml-3"
-width="350" alt="A CI Meme" />
-
 Since the FOSSology project moved on Github, it has used only the free
 Travis CI service for OSS projects. At the time of writing Travis CI has
 reduced its free tier CI services. GitHub Actions provides faster
 builds. Since GitHub Actions is a fully managed service by GitHub, we
 don't need to know how to scale and operate the infrastructure to run
 it.
+![A CI Meme:left](/images/ci.webp)
 
 It is straightforward to use with GitHub because when we fork a
 repository, the actions automatically get forked. This allows you to
@@ -721,7 +718,7 @@ Actions is almost complete and working as expected. But it is not free
 of drawbacks and issues. This section outlines the known issues at the
 time of writing.
 
-![A Bug Meme](https://imgs.xkcd.com/comics/conference_question.png)
+![A Bug Meme:right](https://imgs.xkcd.com/comics/conference_question.png)
 
 - Coverage builds may fail with linking errors.
 - Packaging prefix is the same as the install prefix. This requires the