Add image viewing in blog entries

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'
+}