@myelophone/nuxt 0.18.2

package/app/components/ui/ProtectedEmail.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+interface Props {
+	user: string;
+	domain: string;
+	tld?: string;
+	subject?: string;
+	class?: string;
+	placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	tld: "com",
+	placeholder: "[email hidden]",
+});
+
+const email = ref("");
+const href = ref("");
+const visible = ref(false);
+
+onMounted(() => {
+	const el = document.querySelector(
+		`[data-email-user="${props.user}"][data-email-domain="${props.domain}"]`,
+	) as HTMLElement | null;
+	if (!el) return;
+
+	const user = el.dataset.emailUser ?? "";
+	const domain = el.dataset.emailDomain ?? "";
+	const tld = el.dataset.emailTld ?? "";
+	const full = `${user}@${domain}.${tld}`;
+
+	email.value = full;
+	href.value = `mailto:${full}${props.subject ? `?subject=${encodeURIComponent(props.subject)}` : ""}`;
+	visible.value = true;
+});
+</script>
+
+<template>
+	<span
+		v-if="!visible"
+		:class="props.class"
+		:data-email-user="props.user"
+		:data-email-domain="props.domain"
+		:data-email-tld="props.tld"
+	>
+		<noscript>[email&nbsp;protected]</noscript>
+		{{ props.placeholder }}
+	</span>
+
+	<a v-else :href="href" :class="props.class" @click.stop>
+		<slot>{{ email }}</slot>
+	</a>
+</template>

package/app/components/ui/RelativeTime.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+const props = defineProps({
+	date: {
+		type: [String, Number, Date],
+		required: true,
+	},
+	locale: { type: String, default: undefined },
+	tag: { type: String, default: "span" },
+	short: { type: Boolean, default: false },
+});
+
+const settingsStore = useSettingsStore();
+const currentLocale = computed(
+	() =>
+		props.locale ||
+		settingsStore.currentLocale ||
+		settingsStore.defaultLocale ||
+		"en",
+);
+
+const getDate = (val: string | number | Date) =>
+	val instanceof Date ? val : new Date(val);
+
+const isoString = computed(() => {
+	try {
+		return getDate(props.date).toISOString();
+	} catch (e) {
+		return "";
+	}
+});
+
+const fullTitle = computed(() => {
+	try {
+		return new Intl.DateTimeFormat(currentLocale.value, {
+			dateStyle: "full",
+			timeStyle: "short",
+		}).format(getDate(props.date));
+	} catch (e) {
+		return "";
+	}
+});
+
+const displayTime = ref("");
+let timer: ReturnType<typeof setTimeout> | null = null;
+
+const update = () => {
+	if (timer) clearTimeout(timer);
+
+	const targetDate = getDate(props.date);
+	const diffSec = (targetDate.getTime() - Date.now()) / 1000;
+	const absDiffSec = Math.abs(diffSec);
+
+	const rtf = new Intl.RelativeTimeFormat(currentLocale.value, {
+		numeric: "auto",
+		style: props.short ? "short" : "long",
+	});
+
+	let text = "";
+	if (absDiffSec < 60) text = rtf.format(Math.round(diffSec), "second");
+	else if (absDiffSec < 3600)
+		text = rtf.format(Math.round(diffSec / 60), "minute");
+	else if (absDiffSec < 86400)
+		text = rtf.format(Math.round(diffSec / 3600), "hour");
+	else if (absDiffSec < 604800)
+		text = rtf.format(Math.round(diffSec / 86400), "day");
+	else if (absDiffSec < 2419200)
+		text = rtf.format(Math.round(diffSec / 604800), "week");
+	else if (absDiffSec < 29030400)
+		text = rtf.format(Math.round(diffSec / 2592000), "month");
+	else text = rtf.format(Math.round(diffSec / 31536000), "year");
+
+	displayTime.value = text;
+
+	const diffMin = absDiffSec / 60;
+	let delay = 60000;
+	if (diffMin < 1) delay = 10000;
+	else if (diffMin >= 60) delay = 3600000;
+	else if (diffMin >= 15) delay = 300000;
+
+	timer = setTimeout(update, delay);
+};
+
+watch(() => [props.date, currentLocale.value, props.short], update);
+onMounted(() => update());
+onUnmounted(() => {
+	if (timer) clearTimeout(timer);
+});
+</script>
+
+<template>
+	<ClientOnly>
+		<component
+			:is="tag"
+			:datetime="tag === 'time' ? isoString : undefined"
+			:title="fullTitle"
+			class="relative-time"
+			data-nosnippet
+		>
+			{{ displayTime }}
+		</component>
+
+		<template #fallback>
+			<span class="skeleton" data-nosnippet aria-hidden="true"></span>
+		</template>
+	</ClientOnly>
+</template>
+
+<style scoped>
+.relative-time {
+	white-space: nowrap;
+}
+
+.skeleton {
+	display: inline-block;
+	height: 0.9em;
+	width: 6ch;
+	background-color: rgba(0, 0, 0, 0.1);
+	border-radius: 4px;
+	vertical-align: middle;
+	animation: pulse 1.5s infinite ease-in-out;
+}
+
+.skeleton {
+	display: inline-block;
+	height: 1em;
+	width: 6ch;
+	background-color: transparent;
+}
+
+@keyframes pulse {
+	0% {
+		opacity: 0.6;
+	}
+	50% {
+		opacity: 0.3;
+	}
+	100% {
+		opacity: 0.6;
+	}
+}
+</style>

package/app/components/ui/ScheduledContent.vue

@@ -0,0 +1,150 @@
+<template>
+	<template v-if="status === 'active'">
+		<slot />
+	</template>
+
+	<template v-else-if="status === 'upcoming'">
+		<slot name="upcoming">
+			{{ preText }}
+		</slot>
+	</template>
+</template>
+
+<script setup lang="ts">
+type RepeatType = "daily" | "weekly" | "monthly" | "yearly";
+type ContentStatus = "active" | "upcoming" | "hidden";
+
+interface Props {
+	from?: string | Date;
+	to?: string | Date;
+	repeat?: RepeatType;
+	timezone?: string;
+	checkInterval?: number;
+	preText?: string;
+	previewHours?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	checkInterval: 1000,
+	previewHours: 0,
+});
+
+const componentId = useId();
+const isMounted = ref(false);
+const now = ref(new Date(0));
+let timer: ReturnType<typeof setInterval> | null = null;
+
+const parseDate = (dateInput: string | Date | undefined): Date | null => {
+	if (!dateInput) return null;
+	let date: Date;
+	if (dateInput instanceof Date) {
+		date = dateInput;
+	} else {
+		const match = dateInput.match(
+			/^(\d{2})[./-](\d{2})[./-](\d{4})(?:\s+(\d{2}):(\d{2}))?$/,
+		);
+		if (match) {
+			const [_, day, month, year, hour, minute] = match;
+			date = new Date(
+				Number(year),
+				Number(month) - 1,
+				Number(day),
+				hour ? Number(hour) : 0,
+				minute ? Number(minute) : 0,
+			);
+		} else {
+			date = new Date(dateInput);
+		}
+	}
+	if (isNaN(date.getTime())) return null;
+
+	if (props.timezone) {
+		const formatter = new Intl.DateTimeFormat("en-US", {
+			timeZone: props.timezone,
+			year: "numeric",
+			month: "numeric",
+			day: "numeric",
+			hour: "numeric",
+			minute: "numeric",
+			second: "numeric",
+			hour12: false,
+		});
+		const parts = formatter.formatToParts(date);
+		const getPart = (type: string) =>
+			parseInt(parts.find((p) => p.type === type)?.value || "0");
+		const tzDate = new Date(
+			Date.UTC(
+				getPart("year"),
+				getPart("month") - 1,
+				getPart("day"),
+				getPart("hour"),
+				getPart("minute"),
+				getPart("second"),
+			),
+		);
+		const diff = tzDate.getTime() - date.getTime();
+		return new Date(date.getTime() - diff);
+	}
+	return date;
+};
+
+const resolveStatus = (current: Date): ContentStatus => {
+	const startDate = parseDate(props.from);
+	const endDate = parseDate(props.to);
+
+	if (!startDate) return "active";
+
+	let vStart = new Date(startDate);
+	let vEnd = endDate ? new Date(endDate) : new Date("2099-01-01");
+
+	if (props.repeat === "yearly") {
+		vStart.setFullYear(current.getFullYear());
+		vEnd.setFullYear(current.getFullYear());
+		if (vEnd < vStart) vEnd.setFullYear(current.getFullYear() + 1);
+	} else if (props.repeat === "daily") {
+		vStart.setFullYear(
+			current.getFullYear(),
+			current.getMonth(),
+			current.getDate(),
+		);
+		const duration =
+			(endDate ? endDate.getTime() : 0) - startDate.getTime();
+		vEnd.setTime(vStart.getTime() + duration);
+	}
+
+	if (current >= vStart && current <= vEnd) return "active";
+
+	if (current < vStart) {
+		if (props.previewHours === 0) return "upcoming";
+
+		const previewMs = props.previewHours * 60 * 60 * 1000;
+		if (vStart.getTime() - current.getTime() <= previewMs) {
+			return "upcoming";
+		}
+	}
+
+	return "hidden";
+};
+
+const hydrationStatus = useState<ContentStatus>(
+	`scheduled-content:${componentId}`,
+	() => resolveStatus(new Date()),
+);
+
+const status = computed(() =>
+	isMounted.value ? resolveStatus(now.value) : hydrationStatus.value,
+);
+
+onMounted(() => {
+	now.value = new Date();
+	isMounted.value = true;
+
+	timer = setInterval(() => {
+		now.value = new Date();
+	}, props.checkInterval);
+});
+
+onBeforeUnmount(() => {
+	if (timer) clearInterval(timer);
+});
+</script>

package/app/components/ui/ScrollToTop.client.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+const { scrollToTop } = useSnapScroll();
+const scrollY = ref(0);
+
+const handleScroll = () => {
+	scrollY.value = window.scrollY;
+};
+
+const isVisible = computed(() => {
+	return scrollY.value > 600;
+});
+
+onMounted(() => {
+	window.addEventListener("scroll", handleScroll, { passive: true });
+	handleScroll();
+});
+
+onUnmounted(() => {
+	window.removeEventListener("scroll", handleScroll);
+});
+</script>
+
+<template>
+	<Teleport to="body">
+		<Transition name="fade-up">
+			<button
+				v-if="isVisible"
+				@click="scrollToTop"
+				type="button"
+				class="fixed bottom-8 right-8 z-100 p-4 rounded-full bg-white dark:bg-zinc-900 shadow-2xl border border-zinc-200 dark:border-zinc-800 transition-transform active:scale-90"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					width="24"
+					height="24"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2.5"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="m18 15-6-6-6 6" />
+				</svg>
+			</button>
+		</Transition>
+	</Teleport>
+</template>

package/app/components/ui/SegmentedControl.vue

@@ -0,0 +1,148 @@
+<script setup lang="ts">
+type Value = string | number;
+
+interface Option {
+	value: Value;
+	label: string;
+	icon?: string;
+}
+
+const props = withDefaults(
+	defineProps<{
+		modelValue?: Value | Value[] | null;
+		options: Option[];
+		multiple?: boolean;
+		vertical?: boolean;
+		full?: boolean;
+		color?: "primary" | "gray" | "info" | "success" | "warning" | "error";
+		variant?: "outline" | "soft";
+		size?: "xs" | "sm" | "md" | "lg";
+	}>(),
+	{
+		multiple: false,
+		vertical: false,
+		full: false,
+		color: "gray",
+		variant: "outline",
+		size: "md",
+	},
+);
+
+const emit = defineEmits<{
+	(e: "update:modelValue", value: Value | Value[] | null): void;
+}>();
+
+const value = computed<Value | Value[] | null>({
+	get: () => props.modelValue ?? null,
+	set: (v) => emit("update:modelValue", v),
+});
+
+const isActive = (v: Value) => {
+	if (props.multiple) {
+		return Array.isArray(value.value) && value.value.includes(v);
+	}
+	return value.value === v;
+};
+
+const toggle = (v: Value) => {
+	if (!props.multiple) {
+		value.value = v;
+		return;
+	}
+
+	const arr = Array.isArray(value.value) ? [...value.value] : [];
+	const i = arr.indexOf(v);
+
+	if (i === -1) arr.push(v);
+	else arr.splice(i, 1);
+
+	value.value = arr;
+};
+
+const sizes = {
+	xs: "text-xs px-2 py-1",
+	sm: "text-sm px-3 py-1.5",
+	md: "text-sm px-4 py-2",
+	lg: "text-base px-5 py-2.5",
+} as const;
+
+const colors = {
+	gray: {
+		border: "border-gray-400 dark:border-gray-700",
+		divider: "bg-gray-400/40 dark:bg-gray-600/40",
+		hover: "hover:bg-gray-200/60 dark:hover:bg-gray-600/40",
+		active: "bg-gray-200 text-gray-900 dark:bg-gray-700 dark:text-white",
+	},
+	primary: {
+		border: "border-primary-400 dark:border-primary-500",
+		divider: "bg-primary-400/40 dark:bg-primary-500/40",
+		hover: "hover:bg-primary-500/10",
+		active: "bg-primary-600 text-white",
+	},
+	success: {
+		border: "border-emerald-400 dark:border-emerald-500",
+		divider: "bg-emerald-400/40 dark:bg-emerald-500/40",
+		hover: "hover:bg-emerald-500/10",
+		active: "bg-emerald-600 text-white",
+	},
+	info: {
+		border: "border-blue-400 dark:border-blue-500",
+		divider: "bg-blue-400/40 dark:bg-blue-500/40",
+		hover: "hover:bg-blue-500/10",
+		active: "bg-blue-600 text-white",
+	},
+	warning: {
+		border: "border-amber-400 dark:border-amber-500",
+		divider: "bg-amber-400/40 dark:bg-amber-500/40",
+		hover: "hover:bg-amber-500/10",
+		active: "bg-amber-500 text-black",
+	},
+	error: {
+		border: "border-red-400 dark:border-red-500",
+		divider: "bg-red-400/40 dark:bg-red-500/40",
+		hover: "hover:bg-red-500/10",
+		active: "bg-red-600 text-white",
+	},
+} as const;
+
+const wrapperClasses = computed(() => [
+	"inline-flex rounded-md overflow-hidden border",
+	colors[props.color].border,
+	props.vertical ? "flex-col" : "flex-row",
+	props.full ? "w-full" : "w-fit",
+]);
+
+const itemClasses = (active: boolean) => [
+	"relative flex items-center justify-center gap-2 font-medium cursor-pointer select-none transition-colors",
+	sizes[props.size],
+	!active ? colors[props.color].hover : "",
+	active ? colors[props.color].active : "",
+	props.full && !props.vertical ? "flex-1" : "",
+];
+</script>
+
+<template>
+	<div :class="wrapperClasses" role="group">
+		<div
+			v-for="(opt, index) in options"
+			:key="opt.value"
+			:class="itemClasses(isActive(opt.value))"
+			:aria-pressed="isActive(opt.value) ? 'true' : 'false'"
+			@click="toggle(opt.value)"
+		>
+			<UiIcon v-if="opt.icon" :name="opt.icon" class="h-4 w-4" />
+			<span>{{ opt.label }}</span>
+
+			<span
+				v-if="!props.vertical && index < options.length - 1"
+				class="absolute right-0 top-1/2 -translate-y-1/2 w-px h-2/3 pointer-events-none"
+				:class="colors[props.color].divider"
+			/>
+			<span
+				v-if="props.vertical && index < options.length - 1"
+				class="absolute bottom-0 left-1/2 -translate-x-1/2 h-px w-2/3 pointer-events-none"
+				:class="colors[props.color].divider"
+			/>
+		</div>
+	</div>
+</template>