feat: image enlarge

src/components/ArticleContainer.astro

@@ -0,0 +1,87 @@
+---
+import { Icon } from "astro-icon/components";
+
+export interface Props {
+	className?: string;
+	dataPagefindBody?: boolean;
+}
+const { className = "", dataPagefindBody = true } = Astro.props;
+---
+
+<article class={`${className}`} data-pagefind-body={dataPagefindBody}>
+	<slot />
+
+	<div id="myModal" class="modal">
+		<span class="close">
+			<Icon aria-hidden="true" class="h-6 w-6" focusable="false" name="mdi:close" />
+		</span>
+		<img class="modal-content" id="img01" />
+		<div id="caption"></div>
+	</div>
+</article>
+
+<style>
+	.modal {
+		display: none;
+		position: fixed;
+		z-index: 100;
+		margin: auto;
+		padding: 50px;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		overflow: auto;
+		background-color: rgba(0, 0, 0, 0.9);
+		align-items: center;
+		justify-content: center;
+	}
+
+	.modal-content {
+		margin: auto;
+		display: block;
+		width: 80%;
+	}
+
+	.close {
+		position: fixed;
+		top: 15px;
+		right: 35px;
+		color: #f1f1f1;
+		font-size: 40px;
+		font-weight: bold;
+		transition: 0.3s;
+	}
+
+	.close:hover,
+	.close:focus {
+		color: #bbb;
+		text-decoration: none;
+		cursor: pointer;
+	}
+</style>
+
+<script>
+	const modal = document.getElementById("myModal");
+	const modalImg = document.getElementById("img01") as HTMLImageElement;
+	const imgs = document.querySelectorAll("article img") as NodeListOf<HTMLImageElement>;
+
+	imgs.forEach(function (img) {
+		img.style.cursor = "pointer";
+		img.addEventListener("click", () => {
+			if (modal && modalImg) {
+				modal.style.display = "flex";
+				document.body.style.overflow = "hidden";
+
+				modalImg.src = img.src;
+			}
+		});
+	});
+
+	const span = document.getElementsByClassName("close")[0];
+	span?.addEventListener("click", () => {
+		if (modal) {
+			modal.style.display = "none";
+			document.body.style.overflow = "auto";
+		}
+	});
+</script>

src/components/note/Note.astro

@@ -3,6 +3,7 @@ import { type CollectionEntry, render } from "astro:content";
 import FormattedDate from "@/components/FormattedDate.astro";
 import type { HTMLTag, Polymorphic } from "astro/types";
 import GiscusComment from "@/components/componentsBefore/GiscusComment";
+import ArticleContainer from "./ArticleContainer.astro";
 type Props<Tag extends HTMLTag> = Polymorphic<{ as: Tag }> & {
 	note: CollectionEntry<"note">;
 	isPreview?: boolean | undefined;
@@ -32,12 +33,10 @@ if (modifiedDate && modifiedDate.getTime() === date.getTime()) {
 }
 ---
 
-<article
-	class:list={[
-		isPreview &&
-			"inline-grid w-full rounded-md bg-[rgb(240,240,240)] px-4 py-3 dark:bg-[rgb(33,35,38)]",
-	]}
-	data-pagefind-body={isPreview ? false : true}
+<ArticleContainer
+	className={isPreview &&
+		"inline-grid w-full rounded-md bg-[rgb(240,240,240)] px-4 py-3 dark:bg-[rgb(33,35,38)]"}
+	dataPagefindBody={isPreview ? false : true}
 >
 	<Tag class="title" class:list={{ "text-base": isPreview }}>
 		{
@@ -71,4 +70,4 @@ if (modifiedDate && modifiedDate.getTime() === date.getTime()) {
 		<Content />
 	</div>
 	{!isPreview && <GiscusComment client:load />}
-</article>
+</ArticleContainer>

src/layouts/BlogPost.astro

@@ -6,6 +6,7 @@ import TOC from "@/components/blog/TOC.astro";
 import WebMentions from "@/components/blog/webmentions/index.astro";
 import GiscusComment from "@/components/componentsBefore/GiscusComment";
 import BaseLayout from "./Base.astro";
+import ArticleContainer from "@/components/note/ArticleContainer.astro";
 
 interface Props {
 	post: CollectionEntry<"post">;
@@ -36,7 +37,7 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
 		tags: [category, ...tags].join(", "),
 	}}
 >
-	<article class="grow break-words" data-pagefind-body>
+	<ArticleContainer className="grow break-words" dataPagefindBody={true}>
 		<div id="blog-hero" class="mb-12"><Masthead content={post} readingTime={readingTime} /></div>
 		<div class="flex flex-col gap-10 lg:flex-row lg:items-start">
 			{!!headings.length && <TOC headings={headings} />}
@@ -48,7 +49,7 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
 			</div>
 		</div>
 		<GiscusComment client:load />
-	</article>
+	</ArticleContainer>
 	<button
 		class="hover:border-link fixed end-4 bottom-8 z-90 flex h-10 w-10 translate-y-28 cursor-pointer items-center justify-center rounded-full border-2 border-transparent bg-zinc-200 text-3xl opacity-0 transition-all transition-discrete duration-300 data-[show=true]:translate-y-0 data-[show=true]:opacity-100 sm:end-8 sm:h-12 sm:w-12 dark:bg-zinc-700"
 		data-show="false"