Add image viewing in blog entries

assets/blog/2021-10-07_Deep Learning Framework Benchmarks/Deep Learning Framework Benchmarks.md

@@ -132,4 +132,4 @@ The code is not yet complete and in the future I would like to test for more:
 * RNN : which was the trigger that started all of this
 * Data transfert? (CPU->GPU and GPU->CPU)
 
-If you have questions or remarks you can contact me or reply the [reddit post]() (TO BE INSERTED).
+If you have questions or remarks you can contact me or reply the [reddit post](https://www.reddit.com/r/MachineLearning/comments/q2y9n5/d_deep_learning_framework_benchmark/).

src/blog_entry.jsx

@@ -29,12 +29,30 @@ class BlogEntryComponent extends Component
 
 	render()
 	{
-		return (
+		return [
 			<div className="blog-entry"
 				dangerouslySetInnerHTML={this.props.blog_entry_name === this.entry_name ?
 					{__html: this.props.blog_entry} : null}>
-			</div>
-		)
+			</div>,
+			<div id="image-container" onclick={() => close_image()}>
+				<img id="image-view"/>
+			</div>,
+			<script>
+				{`const container = document.getElementById("image-container")
+				const image_view = document.getElementById("image-view")
+
+				function open_image(src)
+				{
+					image_view.src = src
+					container.style.display = 'flex'
+				}
+
+				function close_image()
+				{
+					container.style.display = 'none'
+				}`}
+			</script>
+		]
 	}
 }
 

src/blog_entry.scss

@@ -76,6 +76,25 @@
 			margin: 0 10px;
 			object-fit: contain;
 			width: 100%;
+			cursor: pointer;
 		}
 	}
+}
+
+#image-container
+{
+	position: fixed;
+	display: none;
+	background-color: rgba(0, 0, 0, 0.8);
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	justify-content: center;
+	align-items: center;
+}
+
+#image-view
+{
+	height: 90vh;
 }

src/test.js

@@ -0,0 +1,13 @@
+const container = document.getElementById("image-container")
+const image_view = document.getElementById("image-view")
+
+function view_image(src)
+{
+	image_view.src = src
+	container.style.display = 'flex'
+}
+
+function close_image()
+{
+	container.style.display = 'none'
+}

webpack.base.js

@@ -36,7 +36,7 @@ renderer.image = (href, title, text) => {
 	{
 		out += ' title="' + text + '"';
 	}
-	out += '/>';
+	out += ' onclick="open_image(\'' + href + '\')" />';
 	return out;
 }