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({