Add a modal for images to expand to upon being clicked instead of leaving the current page

src/Elastic.Markdown/Assets/modal.css

@@ -0,0 +1,31 @@
+.modal {
+    @apply fixed inset-0 z-50 flex items-center justify-center bg-black/50 hidden;
+}
+
+.modal-content {
+    @apply relative bg-white p-6 rounded-lg shadow-lg max-w-3xl w-full items-center;
+}
+
+.modal-content figure {
+    @apply text-center;
+}
+
+.modal-content img {
+    @apply max-w-full h-auto rounded-lg mx-auto;
+}
+
+.modal-content figcaption {
+    @apply mt-4 text-sm;
+}
+
+.modal-footer {
+    @apply mt-4 text-right;
+}
+
+.modal-close {
+    @apply cursor-pointer absolute top-2 right-4 transition-colors;
+
+    & > a {
+        @apply no-underline text-2xl font-bold text-ink-dark hover:text-ink;
+    }
+}

src/Elastic.Markdown/Assets/styles.css

@@ -11,6 +11,7 @@
 @import "./markdown/table.css";
 @import "./markdown/definition-list.css";
 @import "./markdown/images.css";
+@import "./modal.css";
 
 
 :root {

src/Elastic.Markdown/Slices/Directives/Image.cshtml

@@ -1,5 +1,20 @@
 @inherits RazorSlice<ImageViewModel>
-<a class="reference internal image-reference" href="@Model.ImageUrl">
+<a class="reference internal image-reference" href="javascript:void(0)" onclick="document.getElementById('modal-@Model.UniqueImageId').style.display='flex'">
 	<img loading="lazy" alt="@Model.Alt" src="@Model.ImageUrl" style="@Model.Style" class="@Model.Screenshot" />
 	[CONTENT]
 </a>
+
+<div id="[email protected]" class="modal"
+	onclick="document.querySelector('#[email protected] .modal-content').contains(event.target) ? void(0) : document.getElementById('[email protected]').style.display='none'">
+	<div class="modal-content">
+		<span class="modal-close">
+			<a href="javascript:void(0);" class="close-button"
+				onclick="document.getElementById('[email protected]').style.display='none'">
+				&times;
+			</a>
+		</span>
+		<a class="reference internal image-reference" href="@Model.ImageUrl" target="_blank">
+			<img loading="lazy" alt="@Model.Alt" src="@Model.ImageUrl" />
+		</a>
+	</div>
+</div>

src/Elastic.Markdown/Slices/Directives/_ViewModels.cs

@@ -55,7 +55,7 @@ public class ImageViewModel
 	public required string? Target { get; init; }
 	public required string? Width { get; init; }
 	public required string? ImageUrl { get; init; }
-
+	public string UniqueImageId { get; } = Guid.NewGuid().ToString("N")[..8];
 	public required string? Screenshot { get; init; }
 
 	public string Style