@myelophone/nuxt 0.18.2

package/app/components/ui/LightBox.vue

@@ -0,0 +1,155 @@
+<template>
+	<div class="lightbox-grid">
+		<div
+			v-for="(img, index) in images"
+			:key="index"
+			:class="['pic-item', itemClass]"
+			:style="itemStyle"
+			@click="showImg(index)"
+		>
+			<SafeImgWithLoader
+				:src="extractSrc(img)"
+				:alt="extractTitle(img)"
+				crossorigin="anonymous"
+				:class="imgClass"
+				:style="[{ cursor: 'pointer' }, imgStyle]"
+			/>
+		</div>
+
+		<ClientOnly>
+			<VueEasyLightbox
+				:visible="visibleRef"
+				:imgs="images"
+				:index="indexRef"
+				v-bind="lightboxProps"
+				@hide="onHide"
+			>
+				<template #loading>
+					<div class="lightbox-loader-overlay">
+						<svg
+							width="32"
+							height="32"
+							viewBox="0 0 32 32"
+							xmlns="http://www.w3.org/2000/svg"
+							class="loadersvg-lightbox"
+						>
+							<g fill="none" fill-rule="evenodd">
+								<g fill="var(--loader-fill-color, #fff)">
+									<path
+										d="M16 32a16 16 0 110-32 16 16 0 010 32zm0-2a14 14 0 100-28 14 14 0 000 28z"
+										fill-rule="nonzero"
+										opacity=".1"
+									/>
+									<path
+										d="M16 2V0A16 16 0 000 16h2A14 14 0 0116 2z"
+									/>
+								</g>
+							</g>
+						</svg>
+					</div>
+				</template>
+			</VueEasyLightbox>
+		</ClientOnly>
+	</div>
+</template>
+
+<script setup lang="ts">
+interface LightboxImg {
+	src?: string;
+	title?: string;
+	alt?: string;
+}
+import type { PropType, CSSProperties } from "vue";
+const VueEasyLightbox = defineAsyncComponent(() => import("vue-easy-lightbox"));
+
+const props = defineProps({
+	images: {
+		type: Array as PropType<(string | LightboxImg)[]>,
+		required: true,
+		default: () => [],
+	},
+	itemStyle: {
+		type: [Object, Array] as PropType<CSSProperties | CSSProperties[]>,
+		default: () => ({}),
+	},
+	imgStyle: {
+		type: [Object, Array] as PropType<CSSProperties | CSSProperties[]>,
+		default: () => ({ maxWidth: "100%" }),
+	},
+	itemClass: {
+		type: [String, Object, Array] as PropType<
+			| string
+			| Record<string, unknown>
+			| (string | Record<string, unknown>)[]
+		>,
+		default: "",
+	},
+	imgClass: {
+		type: [String, Object, Array] as PropType<
+			| string
+			| Record<string, unknown>
+			| (string | Record<string, unknown>)[]
+		>,
+		default: "",
+	},
+	lightboxProps: { type: Object, default: () => ({}) },
+});
+
+const visibleRef = ref(false);
+const indexRef = ref(0);
+
+const extractSrc = (img: any) =>
+	typeof img === "string" ? img : img?.src || "";
+const extractTitle = (img: any) =>
+	typeof img === "object" ? img.title || "" : "";
+
+const showImg = (index: number) => {
+	indexRef.value = index;
+	visibleRef.value = true;
+};
+const onHide = () => (visibleRef.value = false);
+</script>
+
+<style scoped>
+.lightbox-loader-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	pointer-events: none;
+	z-index: 9999;
+}
+
+.loadersvg-lightbox {
+	animation: rotate 0.8s linear infinite;
+}
+
+@keyframes rotate {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+:deep(.vel-loading) {
+	background: transparent !important;
+	display: block !important;
+}
+
+.lightbox-grid {
+	width: 100%;
+}
+
+.pic-item {
+	transition: opacity 0.2s;
+}
+.pic-item:hover {
+	opacity: 0.8;
+}
+</style>

package/app/components/ui/LocalTime.vue

@@ -0,0 +1,170 @@
+<template>
+	<div class="ui-local-time" :class="containerClass">
+		<div v-if="label" class="time-label">
+			{{ label }}
+		</div>
+
+		<div class="dynamic-content" :class="{ 'is-ready': isMounted }">
+			<div class="time-value">
+				<template v-if="!isMounted">
+					<span class="time-main">00:00</span>
+					<span v-if="showSeconds" class="time-seconds">:00</span>
+					<span v-if="!is24" class="time-period">AM</span>
+				</template>
+				<template v-else>
+					<span class="time-main"
+						>{{ timeParts.hours }}:{{ timeParts.minutes }}</span
+					>
+					<span v-if="showSeconds" class="time-seconds"
+						>:{{ timeParts.seconds }}</span
+					>
+					<span v-if="!is24" class="time-period">{{
+						timeParts.dayPeriod
+					}}</span>
+				</template>
+			</div>
+
+			<div v-if="showDate" class="date-value">
+				<span v-if="!isMounted" class="date-placeholder">&nbsp;</span>
+				<span v-else>{{ currentDate }}</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	timezone: { type: String, required: true },
+	label: { type: String, default: "" },
+	showDate: { type: Boolean, default: false },
+	showSeconds: { type: Boolean, default: false },
+	is24: { type: Boolean, default: true },
+	containerClass: { type: String, default: "" },
+});
+
+const settingsStore = useSettingsStore();
+const now = ref(new Date());
+const isMounted = ref(false);
+let timer = null;
+
+onMounted(() => {
+	isMounted.value = true;
+	timer = setInterval(() => {
+		now.value = new Date();
+	}, 1000);
+});
+
+onBeforeUnmount(() => {
+	if (timer) clearInterval(timer);
+});
+
+const timeParts = computed(() => {
+	const formatter = new Intl.DateTimeFormat(
+		settingsStore.currentLocale || "en-US",
+		{
+			hour: "2-digit",
+			minute: "2-digit",
+			second: "2-digit",
+			hour12: !props.is24,
+			timeZone: props.timezone,
+		},
+	);
+
+	const parts = formatter.formatToParts(now.value);
+	const getPart = (type) => parts.find((p) => p.type === type)?.value || "";
+
+	return {
+		hours: getPart("hour"),
+		minutes: getPart("minute"),
+		seconds: getPart("second"),
+		dayPeriod: getPart("dayPeriod") || getPart("ampm"),
+	};
+});
+
+const currentDate = computed(() => {
+	if (!props.showDate) return "";
+	return new Intl.DateTimeFormat(settingsStore.currentLocale || "en-US", {
+		day: "numeric",
+		month: "long",
+		year: "numeric",
+		timeZone: props.timezone,
+	}).format(now.value);
+});
+</script>
+
+<style scoped>
+.ui-local-time {
+	display: flex;
+	flex-direction: column;
+	color: var(--ui-text);
+	font-variant-numeric: tabular-nums;
+}
+
+.time-label {
+	height: 14px;
+	font-size: 0.75rem;
+	opacity: 0.5;
+	text-transform: uppercase;
+	letter-spacing: 0.03em;
+	margin-bottom: 4px;
+	line-height: 1;
+}
+
+.dynamic-content {
+	opacity: 0;
+	transition: opacity 0.4s ease-in-out;
+}
+
+.dynamic-content.is-ready {
+	opacity: 1;
+}
+
+.time-value {
+	height: 1.5rem;
+	font-size: 1.5rem;
+	line-height: 1.5rem;
+	font-weight: 400;
+	display: flex;
+	align-items: baseline;
+	white-space: nowrap;
+}
+
+.time-main {
+	font-size: 1.5rem;
+	line-height: 1;
+}
+
+.time-seconds {
+	opacity: 0.5;
+	font-size: 1rem;
+	margin-left: 1px;
+}
+
+.time-period {
+	font-size: 0.9rem;
+	font-weight: 500;
+	text-transform: uppercase;
+	margin-left: 6px;
+}
+
+.date-value {
+	height: 1.25rem;
+	line-height: 1.25rem;
+	font-size: 0.9rem;
+	opacity: 0.6;
+	margin-top: 4px;
+	text-transform: capitalize;
+}
+
+.is-compact .time-value {
+	height: 1rem;
+	line-height: 1rem;
+}
+.is-compact .time-main {
+	font-size: 1rem;
+}
+.is-compact .time-seconds,
+.is-compact .time-period {
+	font-size: 0.7rem;
+}
+</style>

package/app/components/ui/Modal.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+interface Props {
+	modelValue: boolean;
+	title?: string;
+	width?: string;
+	preventClose?: boolean;
+	bodyClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: false,
+	width: "max-w-md",
+	preventClose: false,
+	bodyClass: "px-6 py-5 max-h-[70vh] overflow-y-auto custom-scrollbar",
+});
+
+const emit = defineEmits(["update:modelValue", "close"]);
+const uid = useId();
+const { register, unregister, isTop } = useModalState();
+const isMounted = ref(false);
+
+onMounted(() => {
+	isMounted.value = true;
+});
+watch(
+	() => props.modelValue,
+	(isOpen) => {
+		if (isOpen) register(uid);
+		else unregister(uid);
+	},
+);
+onUnmounted(() => unregister(uid));
+const close = () => {
+	if (props.preventClose) return;
+	emit("update:modelValue", false);
+	emit("close");
+};
+const handleBackdropClick = () => {
+	if (isTop(uid)) close();
+};
+const handleEsc = (e: KeyboardEvent) => {
+	if (e.key === "Escape" && props.modelValue && isTop(uid)) close();
+};
+
+onMounted(() => {
+	if (typeof window !== "undefined")
+		window.addEventListener("keydown", handleEsc);
+});
+onUnmounted(() => {
+	if (typeof window !== "undefined")
+		window.removeEventListener("keydown", handleEsc);
+});
+</script>
+
+<template>
+	<Teleport v-if="isMounted" to="body">
+		<Transition
+			enter-active-class="transition duration-200 ease-out"
+			enter-from-class="opacity-0"
+			enter-to-class="opacity-100"
+			leave-active-class="transition duration-150 ease-in"
+			leave-from-class="opacity-100"
+			leave-to-class="opacity-0"
+		>
+			<div
+				v-if="modelValue"
+				class="relative z-80"
+				aria-modal="true"
+				role="dialog"
+				data-nosnippet
+			>
+				<div
+					class="fixed inset-0 bg-black/40 backdrop-blur-sm transition-opacity"
+					@click="handleBackdropClick"
+				></div>
+
+				<div class="fixed inset-0 z-10 overflow-y-auto w-screen">
+					<div
+						class="flex min-h-full items-center justify-center p-4 text-center sm:p-0"
+						@click.self="handleBackdropClick"
+					>
+						<Transition
+							enter-active-class="transition duration-300 ease-out"
+							enter-from-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+							enter-to-class="opacity-100 translate-y-0 sm:scale-100"
+							leave-active-class="transition duration-200 ease-in"
+							leave-from-class="opacity-100 translate-y-0 sm:scale-100"
+							leave-to-class="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+						>
+							<div
+								class="relative transform overflow-hidden rounded-xl text-left shadow-2xl transition-all w-full bg-(--ui-bg) text-(--ui-text) border border-neutral-200 dark:border-neutral-800"
+								:class="[width]"
+								@click.stop
+							>
+								<div
+									v-if="title || $slots.header"
+									class="flex items-center justify-between px-6 py-4 border-b border-neutral-200/50 dark:border-neutral-800/50"
+								>
+									<slot name="header">
+										<h3
+											class="text-lg font-semibold leading-6 opacity-90"
+										>
+											{{ title }}
+										</h3>
+									</slot>
+
+									<button
+										v-if="!preventClose"
+										@click="close"
+										class="ml-4 -mr-1 rounded-md p-1 hover:bg-black/5 dark:hover:bg-white/10 transition-colors focus:outline-none"
+									>
+										<svg
+											class="h-5 w-5 opacity-50 hover:opacity-100"
+											fill="none"
+											viewBox="0 0 24 24"
+											stroke="currentColor"
+										>
+											<path
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												stroke-width="2"
+												d="M6 18L18 6M6 6l12 12"
+											/>
+										</svg>
+									</button>
+								</div>
+
+								<div :class="bodyClass">
+									<slot />
+								</div>
+
+								<div
+									v-if="$slots.footer"
+									class="bg-neutral-50/50 dark:bg-neutral-900/20 px-6 py-4 border-t border-neutral-200/50 dark:border-neutral-800/50 flex flex-col-reverse sm:flex-row sm:justify-end gap-3"
+								>
+									<slot name="footer" :close="close" />
+								</div>
+							</div>
+						</Transition>
+					</div>
+				</div>
+			</div>
+		</Transition>
+	</Teleport>
+</template>
+
+<style scoped>
+.custom-scrollbar::-webkit-scrollbar {
+	width: 6px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+	background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+	background-color: rgba(156, 163, 175, 0.3);
+	border-radius: 20px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+	background-color: rgba(156, 163, 175, 0.5);
+}
+</style>

package/app/components/ui/Popup.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+interface Props {
+	id: string;
+	title?: string;
+	description?: string;
+	image?: string;
+	variant?:
+		| "simple"
+		| "image-left"
+		| "image-right"
+		| "bg-image"
+		| "modern-gradient";
+	frequencyDays?: number;
+	triggerDelay?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	variant: "simple",
+	frequencyDays: 7,
+	triggerDelay: 2000,
+});
+
+const { isOpen, open, close } = usePopupControl(props.id, props.frequencyDays);
+const isMounted = ref(false);
+
+onMounted(() => {
+	isMounted.value = true;
+	setTimeout(() => {
+		open();
+	}, props.triggerDelay);
+});
+
+const isSideLayout = computed(() =>
+	["image-left", "image-right"].includes(props.variant),
+);
+
+const textColorClass = computed(() => {
+	if (props.variant === "bg-image") return "text-white";
+	return "text-gray-900 dark:text-white";
+});
+
+const descColorClass = computed(() => {
+	if (props.variant === "bg-image") return "text-gray-200";
+	return "text-gray-500 dark:text-gray-400";
+});
+</script>
+
+<template>
+	<div
+		v-if="isMounted"
+		style="
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 0;
+			height: 0;
+			overflow: hidden;
+			pointer-events: none;
+			z-index: -1;
+		"
+		aria-hidden="true"
+	>
+		<Teleport to="body">
+			<Transition
+				enter-active-class="transition duration-300 ease-out"
+				enter-from-class="opacity-0"
+				enter-to-class="opacity-100"
+				leave-active-class="transition duration-200 ease-in"
+				leave-from-class="opacity-100"
+				leave-to-class="opacity-0"
+			>
+				<div
+					v-if="isOpen"
+					class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/75"
+					style="pointer-events: auto"
+					@click.self="close(false)"
+				>
+					<Transition
+						enter-active-class="transition duration-300 ease-out"
+						enter-from-class="opacity-0 scale-95 translate-y-4"
+						enter-to-class="opacity-100 scale-100 translate-y-0"
+						leave-active-class="transition duration-200 ease-in"
+						leave-from-class="opacity-100 scale-100 translate-y-0"
+						leave-to-class="opacity-0 scale-95 translate-y-4"
+					>
+						<div
+							data-nosnippet
+							role="dialog"
+							aria-modal="true"
+							class="relative w-full overflow-hidden bg-white shadow-2xl rounded-2xl dark:bg-gray-800"
+							:class="{
+								'max-w-lg': !isSideLayout,
+								'max-w-2xl': isSideLayout,
+								'bg-linear-to-br from-indigo-50 to-white dark:from-gray-800 dark:to-gray-900':
+									variant === 'modern-gradient',
+							}"
+						>
+							<div
+								v-if="variant === 'bg-image' && image"
+								class="absolute inset-0 z-0"
+							>
+								<img
+									:src="image"
+									class="object-cover w-full h-full"
+									alt=""
+									loading="lazy"
+								/>
+								<div class="absolute inset-0 bg-black/70"></div>
+							</div>
+
+							<button
+								@click="close(true)"
+								class="absolute top-4 right-4 z-20 flex items-center justify-center w-8 h-8 transition-colors rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-indigo-500"
+								:class="
+									variant === 'bg-image'
+										? 'text-white/70 hover:bg-white/20 hover:text-white'
+										: 'text-gray-400 hover:bg-gray-100 hover:text-gray-500 dark:hover:bg-gray-700'
+								"
+							>
+								<UiIcon
+									name="heroicons:x-mark"
+									class="w-6 h-6"
+								/>
+							</button>
+
+							<div
+								class="relative z-10 flex flex-col"
+								:class="{
+									'md:flex-row': variant === 'image-left',
+									'md:flex-row-reverse':
+										variant === 'image-right',
+								}"
+							>
+								<div
+									v-if="
+										isSideLayout ||
+										(image && variant === 'simple')
+									"
+									class="relative shrink-0"
+									:class="{
+										'h-48 md:h-auto md:w-2/5': isSideLayout,
+										'h-48 w-full':
+											variant === 'simple' && image,
+									}"
+								>
+									<img
+										v-if="image"
+										:src="image"
+										alt=""
+										class="absolute inset-0 object-cover w-full h-full"
+										loading="lazy"
+									/>
+									<div
+										v-else
+										class="flex items-center justify-center w-full h-full bg-indigo-100 dark:bg-indigo-900/30"
+									>
+										<slot name="icon">
+											<UiIcon
+												name="heroicons:photo"
+												class="w-12 h-12 text-indigo-300"
+											/>
+										</slot>
+									</div>
+								</div>
+
+								<div class="p-6 md:p-8 grow">
+									<div class="mb-5">
+										<h3
+											class="text-2xl font-bold tracking-tight"
+											:class="textColorClass"
+										>
+											{{ title }}
+										</h3>
+										<p
+											class="mt-2 text-base"
+											:class="descColorClass"
+										>
+											{{ description }}
+										</p>
+									</div>
+
+									<div class="space-y-4">
+										<slot :close="close" />
+									</div>
+
+									<div
+										v-if="$slots.actions"
+										class="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-end"
+									>
+										<slot name="actions" :close="close" />
+									</div>
+								</div>
+							</div>
+						</div>
+					</Transition>
+				</div>
+			</Transition>
+		</Teleport>
+	</div>
+</template>

package/app/components/ui/PostContent.server.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { getPost, renderMarkdown } from "#myelophone/app/utils/blog.server";
+
+const props = defineProps<{
+	slug: string;
+}>();
+
+const post = await getPost(props.slug);
+const html = post ? renderMarkdown(post.content) : "";
+
+if (post) {
+	useAppSeo({
+		title: post.meta.title,
+		description: post.meta.description,
+		image: post.meta.image,
+	});
+}
+</script>
+
+<template>
+	<ViewNotFound v-if="!post" :set-response-status="false" />
+	<article v-else class="post-content" v-html="html" />
+</template>