adding inline image capability

Author: prateekbh

src/routes/blog/index.js

@@ -27,6 +27,15 @@ function CodeBlock(props) {
 	);
 }
 
+function InlineImage({ alt, title, src }) {
+	return (
+		<div class={style.inlineImageContainer}>
+			<img class={style.inlineImage} src={src} alt={alt} />
+			{title && <span class={style.inlineImageTitle}>{title}</span>}
+		</div>
+	);
+}
+
 function getBlogBody(data, isLoading) {
 	if (isLoading) {
 		return (
@@ -52,6 +61,9 @@ function getBlogBody(data, isLoading) {
 				<div class={style.blogbody}>
 					<Markdown options={{
 						overrides: {
+							img: {
+								component: InlineImage
+							},
 							code: {
 								component: CodeBlock
 							}

src/routes/blog/style.css

@@ -105,3 +105,22 @@ code.inline {
 .loadingBody:nth-child(3) {
   width: 65%;
 }
+
+.inlineImageContainer{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 80%;
+  margin: 32px auto;
+}
+
+.inlineImage {
+  max-width: 100%;
+}
+
+.inlineImageTitle {
+  font-size: 0.8rem;
+  margin-top: 8px;
+  color: #777;
+}