git.stevedylan.dev

chore: updated more components f5cbdb21

Steve · 2025-10-02 23:34 2 file(s) · +15 −17

src/components/BaseHead.astro +0 −16

	ogImage ? ogImage : "/social-card.png",
	Astro.url,
).href;
const fcImage = new URL(ogImage ? ogImage : "/image.png", Astro.url).href;

const fcData = JSON.stringify({
	version: "next",
	imageUrl: fcImage,
	button: {
		title: "Read Blog",
		action: {
			type: "launch_frame",
			name: "Read Blog",
			url: canonicalURL,
			splashImageUrl: "https://stevedylan.dev/splash.png",
			splashBackgroundColor: "#000000",
		},
	},
});
---

<meta charset="utf-8" />

src/components/ImageCollage.astro +15 −1

		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		background-color: rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;

	.collage-overlay.active img {
		transform: scale(1);
	}

	@media (max-width: 768px) {
		.collage-item {
			cursor: default;
		}

		.collage-item:hover {
			transform: none;
		}
	}
</style>

<script>
	document.addEventListener('DOMContentLoaded', () => {
		const isMobile = () => window.innerWidth <= 768;

		const collageItems = document.querySelectorAll('.collage-item');
		const overlay = document.getElementById('collage-overlay');
		const expandedImage = document.getElementById('expanded-image') as HTMLImageElement;

		collageItems.forEach((item) => {
			item.addEventListener('click', () => {
				if (isMobile()) return;

				const img = item.querySelector('img') as HTMLImageElement;
				if (img && overlay && expandedImage) {
					expandedImage.src = img.src;

56	56		top: 0;
57	57		left: 0;
58	58		width: 100vw;
59		-	height: 100vh;
	59	+	height: 100dvh;
60	60		background-color: rgba(0, 0, 0, 0);
61	61		display: flex;
62	62		align-items: center;

84	84		.collage-overlay.active img {
85	85		transform: scale(1);
86	86		}
	87	+
	88	+	@media (max-width: 768px) {
	89	+	.collage-item {
	90	+	cursor: default;
	91	+	}
	92	+
	93	+	.collage-item:hover {
	94	+	transform: none;
	95	+	}
	96	+	}
87	97		</style>
88	98
89	99		<script>
90	100		document.addEventListener('DOMContentLoaded', () => {
	101	+	const isMobile = () => window.innerWidth <= 768;
	102	+
91	103		const collageItems = document.querySelectorAll('.collage-item');
92	104		const overlay = document.getElementById('collage-overlay');
93	105		const expandedImage = document.getElementById('expanded-image') as HTMLImageElement;
94	106
95	107		collageItems.forEach((item) => {
96	108		item.addEventListener('click', () => {
	109	+	if (isMobile()) return;
	110	+
97	111		const img = item.querySelector('img') as HTMLImageElement;
98	112		if (img && overlay && expandedImage) {
99	113		expandedImage.src = img.src;

14	14		ogImage ? ogImage : "/social-card.png",
15	15		Astro.url,
16	16		).href;
17		-	const fcImage = new URL(ogImage ? ogImage : "/image.png", Astro.url).href;
18		-
19		-	const fcData = JSON.stringify({
20		-	version: "next",
21		-	imageUrl: fcImage,
22		-	button: {
23		-	title: "Read Blog",
24		-	action: {
25		-	type: "launch_frame",
26		-	name: "Read Blog",
27		-	url: canonicalURL,
28		-	splashImageUrl: "https://stevedylan.dev/splash.png",
29		-	splashBackgroundColor: "#000000",
30		-	},
31		-	},
32		-	});
33	17		---
34	18
35	19		<meta charset="utf-8" />