@myelophone/nuxt 0.18.2

package/app/components/view/QuoteBig.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+type Alignment = "left" | "center" | "right";
+
+const props = withDefaults(
+	defineProps<{
+		text: string;
+		authorName?: string;
+		authorRole?: string;
+		avatarSrc?: string;
+		avatarChipColor?: string;
+		textSizeClass?: string;
+		quoteAlign?: Alignment;
+		footerAlign?: Alignment;
+	}>(),
+	{
+		textSizeClass: "text-xl sm:text-2xl md:text-3xl leading-relaxed",
+		quoteAlign: "center",
+		footerAlign: "center",
+	},
+);
+
+const quoteContainerClass = computed(() => {
+	switch (props.quoteAlign) {
+		case "left":
+			return "text-left";
+		case "right":
+			return "text-right";
+		default:
+			return "text-center";
+	}
+});
+
+const footerContainerClass = computed(() => {
+	switch (props.footerAlign) {
+		case "left":
+			return "justify-start text-left";
+		case "right":
+			return "justify-start text-right flex-row-reverse";
+		default:
+			return "justify-center text-center flex-col sm:flex-row";
+	}
+});
+
+const authorTextWrapperClass = computed(() => {
+	switch (props.footerAlign) {
+		case "left":
+			return "items-start";
+		case "right":
+			return "items-end";
+		default:
+			return "items-center";
+	}
+});
+</script>
+
+<template>
+	<figure class="flex flex-col max-w-4xl mx-auto px-4 py-8 sm:py-10">
+		<div
+			class="mb-4 sm:mb-6 self-start text-primary-500/30 dark:text-primary-400/30 select-none"
+			aria-hidden="true"
+		>
+			<UiIcon
+				name="ri:double-quotes-l"
+				class="w-16! h-16! sm:w-20! sm:h-20! mask-size-[100%_100%]"
+			/>
+		</div>
+
+		<blockquote
+			class="font-medium text-gray-900 dark:text-white relative z-10 w-full mb-8 sm:mb-10"
+			:class="quoteContainerClass"
+		>
+			<p :class="textSizeClass">
+				{{ text }}
+			</p>
+		</blockquote>
+
+		<figcaption
+			v-if="authorName || authorRole || avatarSrc"
+			class="flex items-center gap-4 w-full"
+			:class="footerContainerClass"
+		>
+			<div v-if="avatarSrc" class="shrink-0">
+				<AppAvatar
+					:src="avatarSrc"
+					:chip-color="avatarChipColor"
+					class="w-12 h-12 sm:w-14 sm:h-14 shadow-sm"
+				/>
+			</div>
+
+			<div
+				v-if="authorName || authorRole"
+				class="flex flex-col"
+				:class="authorTextWrapperClass"
+			>
+				<cite
+					v-if="authorName"
+					class="not-italic font-bold text-gray-900 dark:text-white text-base sm:text-lg"
+				>
+					{{ authorName }}
+				</cite>
+
+				<span
+					v-if="authorRole"
+					class="text-sm sm:text-base text-gray-500 dark:text-gray-400 mt-0.5"
+				>
+					{{ authorRole }}
+				</span>
+			</div>
+		</figcaption>
+	</figure>
+</template>

package/app/components/view/ResponsiveMenu.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+interface MenuItem {
+	label: string;
+	to: string;
+	[key: string]: any;
+}
+
+interface MenuClasses {
+	wrapper?: string;
+	link?: string;
+	linkActive?: string;
+	moreButton?: string;
+	dropdown?: string;
+	dropdownLink?: string;
+}
+
+const props = withDefaults(
+	defineProps<{
+		items: MenuItem[];
+		ui?: MenuClasses;
+	}>(),
+	{
+		ui: () => ({}),
+	},
+);
+
+const route = useRoute();
+
+const containerRef = ref<HTMLElement | null>(null);
+const dummyRef = ref<HTMLElement | null>(null);
+const moreContainerRef = ref<HTMLElement | null>(null);
+const isDropdownOpen = ref(false);
+const availableWidth = ref(0);
+const itemWidths = ref<number[]>([]);
+
+const GAP = 16;
+const MORE_BTN_WIDTH = 90;
+
+const isActive = (to: string) => {
+	if (!to) return false;
+	const currentPath = route.path.replace(/[?#].*$/, "").replace(/\/$/, "");
+	const targetPath = to.replace(/[?#].*$/, "").replace(/\/$/, "");
+	return currentPath === targetPath;
+};
+
+const visibleCount = computed(() => {
+	if (!availableWidth.value || itemWidths.value.length === 0)
+		return props.items.length;
+	let currentWidth = 0;
+	let count = 0;
+	for (let i = 0; i < props.items.length; i++) {
+		const itemW = itemWidths.value[i];
+		if (itemW === undefined) break;
+		const widthAfterAdding = currentWidth + itemW + (i > 0 ? GAP : 0);
+		const isLast = i === props.items.length - 1;
+		const requiredSpace = isLast
+			? widthAfterAdding
+			: widthAfterAdding + GAP + MORE_BTN_WIDTH;
+		if (requiredSpace <= availableWidth.value) {
+			currentWidth = widthAfterAdding;
+			count++;
+		} else {
+			break;
+		}
+	}
+	return count;
+});
+
+const visibleItems = computed(() => props.items.slice(0, visibleCount.value));
+const hiddenItems = computed(() => props.items.slice(visibleCount.value));
+
+const measure = () => {
+	if (!containerRef.value || !dummyRef.value) return;
+	availableWidth.value = containerRef.value.offsetWidth;
+	const children = Array.from(dummyRef.value.children) as HTMLElement[];
+	itemWidths.value = children.map((el) => el.getBoundingClientRect().width);
+};
+
+const handleClickOutside = (event: MouseEvent) => {
+	if (isDropdownOpen.value && moreContainerRef.value) {
+		if (!moreContainerRef.value.contains(event.target as Node)) {
+			isDropdownOpen.value = false;
+		}
+	}
+};
+
+let resizeObserver: ResizeObserver | null = null;
+onMounted(() => {
+	measure();
+	if (containerRef.value) {
+		resizeObserver = new ResizeObserver(() =>
+			requestAnimationFrame(measure),
+		);
+		resizeObserver.observe(containerRef.value);
+	}
+	document.addEventListener("click", handleClickOutside);
+});
+onUnmounted(() => {
+	if (resizeObserver) resizeObserver.disconnect();
+	document.removeEventListener("click", handleClickOutside);
+});
+watch(
+	() => props.items,
+	async () => {
+		await nextTick();
+		measure();
+	},
+	{ deep: true },
+);
+watch(
+	() => route.path,
+	() => {
+		isDropdownOpen.value = false;
+	},
+);
+
+const layoutClass =
+	"flex items-center whitespace-nowrap transition-colors duration-200";
+
+const defaultLink =
+	"h-10 px-3 rounded-md hover:bg-neutral-100 dark:hover:bg-white/10 text-neutral-600 dark:text-neutral-300 font-medium text-sm";
+const defaultActive = "bg-neutral-100 dark:bg-white/10 text-primary";
+const defaultMore =
+	"h-10 px-3 rounded-md gap-1.5 text-sm font-medium hover:bg-neutral-100 dark:hover:bg-white/10 text-neutral-600 dark:text-neutral-300";
+const defaultDropdown =
+	"absolute right-0 top-full mt-2 w-56 bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-lg shadow-xl py-1";
+</script>
+
+<template>
+	<div class="relative w-full" :class="ui.wrapper">
+		<nav
+			ref="containerRef"
+			class="flex items-center w-full gap-4 flex-nowrap"
+		>
+			<div class="flex items-center gap-4 overflow-hidden flex-1">
+				<NuxtLink
+					v-for="item in visibleItems"
+					:key="item.to"
+					:to="item.to"
+					:class="[
+						layoutClass,
+						ui.link || defaultLink,
+						isActive(item.to) ? ui.linkActive || defaultActive : '',
+					]"
+				>
+					{{ item.label }}
+				</NuxtLink>
+			</div>
+
+			<div
+				v-if="hiddenItems.length > 0"
+				ref="moreContainerRef"
+				class="relative shrink-0 ml-auto"
+			>
+				<button
+					@click="isDropdownOpen = !isDropdownOpen"
+					:class="[
+						layoutClass,
+						ui.moreButton || defaultMore,
+						isDropdownOpen && !ui.moreButton
+							? 'bg-neutral-100 dark:bg-white/10'
+							: '',
+					]"
+				>
+					Ещё
+					<svg
+						xmlns="http://www.w3.org/2000/svg"
+						viewBox="0 0 20 20"
+						fill="currentColor"
+						class="w-4 h-4 transition-transform duration-200"
+						:class="{ 'rotate-180': isDropdownOpen }"
+					>
+						<path
+							fill-rule="evenodd"
+							d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+							clip-rule="evenodd"
+						/>
+					</svg>
+				</button>
+
+				<div
+					v-if="isDropdownOpen"
+					class="z-50 overflow-hidden animate-in fade-in zoom-in-95 duration-100"
+					:class="ui.dropdown || defaultDropdown"
+				>
+					<NuxtLink
+						v-for="item in hiddenItems"
+						:key="item.to"
+						:to="item.to"
+						class="block px-4 py-2.5 text-sm text-left transition-colors"
+						:class="[
+							ui.dropdownLink ||
+								'hover:bg-neutral-50 dark:hover:bg-white/5 text-neutral-600 dark:text-neutral-300',
+							isActive(item.to)
+								? 'text-primary font-medium bg-neutral-50 dark:bg-white/5'
+								: '',
+						]"
+					>
+						{{ item.label }}
+					</NuxtLink>
+				</div>
+			</div>
+		</nav>
+
+		<div
+			ref="dummyRef"
+			class="absolute top-0 left-0 invisible -z-50 flex gap-4 pointer-events-none w-max"
+			aria-hidden="true"
+		>
+			<div
+				v-for="item in props.items"
+				:key="`dummy-${item.to}`"
+				:class="[layoutClass, ui.link || defaultLink]"
+			>
+				{{ item.label }}
+			</div>
+		</div>
+	</div>
+</template>

package/app/components/view/ReviewsSlider.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+interface Review {
+	text: string;
+	name?: string;
+	city?: string;
+	avatar?: string;
+	link?: string;
+}
+
+const props = defineProps<{ items: Review[] }>();
+
+const currentIndex = ref(0);
+const isPaused = ref(false);
+const isDragging = ref(false);
+const isMounted = ref(false);
+const startX = ref(0);
+const dragOffset = ref(0);
+const visibleCount = ref(4);
+const desktopVisible = 4;
+
+const maxIndex = computed(() =>
+	Math.max(0, props.items.length - visibleCount.value),
+);
+
+const updateVisibleCount = () => {
+	if (typeof window !== "undefined") {
+		visibleCount.value = window.innerWidth < 768 ? 1 : desktopVisible;
+
+		if (currentIndex.value > maxIndex.value)
+			currentIndex.value = maxIndex.value;
+	}
+};
+
+const moveNextAuto = () =>
+	currentIndex.value >= maxIndex.value
+		? (currentIndex.value = 0)
+		: currentIndex.value++;
+
+const moveNextManual = () => {
+	if (currentIndex.value < maxIndex.value) currentIndex.value++;
+};
+
+const movePrevManual = () => {
+	if (currentIndex.value > 0) currentIndex.value--;
+};
+
+const getClientX = (e: MouseEvent | TouchEvent): number => {
+	if ("touches" in e) {
+		return e.touches[0]?.clientX ?? 0;
+	}
+	return e.clientX;
+};
+
+const onStart = (e: MouseEvent | TouchEvent) => {
+	isPaused.value = true;
+	isDragging.value = true;
+	startX.value = getClientX(e);
+};
+
+const onMove = (e: MouseEvent | TouchEvent) => {
+	if (!isDragging.value) return;
+	const currentX = getClientX(e);
+	const diff = currentX - startX.value;
+	const isAtStart = currentIndex.value === 0 && diff > 0;
+	const isAtEnd = currentIndex.value >= maxIndex.value && diff < 0;
+	dragOffset.value = isAtStart || isAtEnd ? diff * 0.2 : diff;
+};
+
+const onEnd = () => {
+	if (!isDragging.value) return;
+	if (dragOffset.value < -50) moveNextManual();
+	else if (dragOffset.value > 50) movePrevManual();
+	isDragging.value = false;
+	dragOffset.value = 0;
+};
+
+let interval: any = null;
+
+const startAutoPlay = () => {
+	if (interval) clearInterval(interval);
+	interval = setInterval(() => {
+		if (!isPaused.value) moveNextAuto();
+	}, 4000);
+};
+
+onMounted(() => {
+	updateVisibleCount();
+	window.addEventListener("resize", updateVisibleCount);
+	startAutoPlay();
+	nextTick(() => (isMounted.value = true));
+});
+
+onUnmounted(() => {
+	if (interval) clearInterval(interval);
+	window.removeEventListener("resize", updateVisibleCount);
+});
+
+const { t } = useMultiLang(["interface"]);
+</script>
+
+<template>
+	<div class="slider-wrapper relative w-full overflow-hidden py-4">
+		<div
+			class="slider-track flex touch-pan-y transition-transform duration-500 ease-[cubic-bezier(0.25,1,0.5,1)]"
+			:class="{ 'transition-none': isDragging }"
+			:style="{
+				transform: `translateX(calc(-${currentIndex} * var(--slide-width) + ${dragOffset}px))`,
+			}"
+			@mousedown="onStart"
+			@mousemove="onMove"
+			@mouseup="onEnd"
+			@mouseleave="onEnd"
+			@touchstart="onStart"
+			@touchmove="onMove"
+			@touchend="onEnd"
+		>
+			<div
+				v-for="(item, index) in items"
+				:key="index"
+				class="slider-item shrink-0 px-1.5 flex select-none"
+			>
+				<div
+					class="card-inner w-full bg-white dark:bg-zinc-900 rounded-2xl p-5 md:p-6 shadow-sm border border-zinc-100 dark:border-zinc-800 flex flex-col pointer-events-none"
+				>
+					<div class="grow">
+						<p
+							class="text-zinc-700 dark:text-zinc-300 text-sm md:text-[15px] leading-snug"
+						>
+							{{ item.text }}
+						</p>
+					</div>
+
+					<div
+						v-if="item.name || item.link || item.avatar"
+						class="mt-4 pt-4 border-t border-zinc-50 dark:border-zinc-800/50 flex items-center justify-between"
+					>
+						<div class="flex items-center gap-3">
+							<div
+								v-if="item.avatar"
+								class="relative w-10 h-10 shrink-0 rounded-full overflow-hidden avatar-skeleton bg-zinc-100 dark:bg-zinc-800"
+							>
+								<ImgWithLoader
+									:src="item.avatar"
+									class="avatar-img w-full h-full object-cover"
+									alt="Reviewer"
+								/>
+							</div>
+
+							<div v-if="item.name || item.city">
+								<div
+									v-if="item.name"
+									class="font-bold text-zinc-900 dark:text-white text-sm leading-tight"
+								>
+									{{ item.name }}
+								</div>
+
+								<div
+									v-if="item.city"
+									class="text-zinc-400 text-xs mt-0.5"
+								>
+									{{ item.city }}
+								</div>
+							</div>
+						</div>
+
+						<a
+							v-if="item.link"
+							:href="item.link"
+							class="text-blue-500 dark:text-blue-400 text-xs font-medium hover:underline pointer-events-auto shrink-0 ml-4"
+							target="_blank"
+						>
+							{{ t("interface.goMore") }} →
+						</a>
+					</div>
+				</div>
+			</div>
+		</div>
+
+		<div
+			class="pagination-container flex justify-center gap-1.5 mt-6 transition-opacity duration-500 h-1"
+			:class="{ 'opacity-0': !isMounted, 'opacity-100': isMounted }"
+		>
+			<button
+				v-for="(_, i) in items.length - visibleCount + 1"
+				:key="i"
+				@click="
+					currentIndex = i;
+
+					isPaused = true;
+				"
+				class="h-full rounded-full transition-all duration-300"
+				:class="
+					currentIndex === i
+						? 'w-6 bg-zinc-800 dark:bg-zinc-200'
+						: 'w-1.5 bg-zinc-200 dark:bg-zinc-700'
+				"
+			></button>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.slider-wrapper {
+	--slide-width: 100%;
+}
+
+@media (min-width: 768px) {
+	.slider-wrapper {
+		--slide-width: 25%;
+	}
+}
+
+.slider-item {
+	width: var(--slide-width);
+}
+
+.slider-track {
+	align-items: stretch;
+	cursor: grab;
+}
+
+.slider-track:active {
+	cursor: grabbing;
+}
+
+.select-none {
+	user-select: none;
+	-webkit-user-drag: none;
+}
+</style>

package/app/components/view/SocialBar.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+interface SocialItem {
+	name: string;
+	to: string;
+	label: string;
+	color?: string;
+	target?: "_blank" | "_self";
+}
+
+type Variant = "simple" | "colored" | "circle" | "solid" | "glass";
+
+interface Props {
+	items: SocialItem[];
+	variant?: Variant;
+	size?: string | number;
+	gap?: string;
+	iconClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	variant: "simple",
+	size: 24,
+	gap: "gap-4",
+	iconClass: "",
+});
+
+const baseLinkClass =
+	"flex items-center justify-center transition-colors duration-200 social-link no-external-icon";
+
+const variantClasses: Record<Variant, string> = {
+	simple: "text-neutral-500 hover:text-neutral-900 dark:text-neutral-400 dark:hover:text-white p-1",
+	colored: "hover:opacity-80 p-1",
+	circle: `
+    w-10 h-10 rounded-full border
+    border-neutral-200 text-neutral-600
+    hover:border-black hover:bg-black hover:text-white
+    dark:border-neutral-700 dark:text-neutral-400
+    dark:hover:border-white dark:hover:bg-white dark:hover:text-black
+  `,
+	solid: `
+    w-10 h-10 rounded-full
+    bg-neutral-100 text-neutral-600
+    hover:bg-neutral-900 hover:text-white
+    dark:bg-neutral-800 dark:text-neutral-300
+    dark:hover:bg-neutral-100 dark:hover:text-black
+  `,
+	glass: `
+    w-10 h-10 rounded-xl border
+    bg-white/50 border-white/20 text-neutral-700 hover:bg-white/80
+    dark:bg-white/5 dark:border-white/10 dark:text-neutral-300 dark:hover:bg-white/10
+  `,
+};
+
+const getLinkClass = (item: SocialItem) => {
+	let cls = `${baseLinkClass} ${variantClasses[props.variant].replace(/\s+/g, " ")}`;
+	if (props.variant === "colored" || props.variant === "simple") {
+		if (item.color) cls += ` ${item.color}`;
+	}
+
+	return cls;
+};
+</script>
+
+<template>
+	<div class="flex flex-wrap items-center" :class="gap">
+		<NuxtLink
+			v-for="(item, index) in items"
+			:key="index"
+			:to="item.to"
+			:target="item.target || '_blank'"
+			:aria-label="item.label"
+			:class="getLinkClass(item)"
+			external
+		>
+			<UiIcon :name="item.name" :size="size" :class="`${iconClass}`" />
+		</NuxtLink>
+	</div>
+</template>