@myelophone/nuxt 0.18.2

package/app/components/grid/Row.vue

@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import type { LayoutSize } from "~/constants/layout";
+import { getYoutubeEmbed, getYoutubePoster } from "~/utils/ytVideo";
+
+import {
+	CONTAINER_MAX_WIDTH,
+	ROW_BASE,
+	FLEX_ALIGN,
+	FLEX_JUSTIFY,
+} from "~/constants/layout";
+
+interface Props {
+	size?: LayoutSize;
+	align?: keyof typeof FLEX_ALIGN;
+	justify?: keyof typeof FLEX_JUSTIFY;
+	equalHeight?: boolean;
+	py?: string;
+	my?: string;
+	mdPy?: string;
+	mdMy?: string;
+	class?: string;
+	id?: string;
+	hideOnMobile?: boolean;
+	hideOnDesktop?: boolean;
+	bgColor?: string;
+	bgImage?: string;
+	bgImageSm?: string;
+	bgGradient?: string;
+	bgGradientSm?: string;
+	bgSize?: string;
+	bgSizeSm?: string;
+	bgVideo?: string;
+	bgVideoSm?: string;
+	bgVideoPoster?: string;
+	bgVideoPosterSm?: string;
+	bgYoutube?: string;
+	bgYoutubeSm?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	align: "start",
+	justify: "start",
+	equalHeight: false,
+	hideOnMobile: false,
+	hideOnDesktop: false,
+	bgSize: "cover",
+});
+
+const hasVideo = computed(() => {
+	const hasYt =
+		(props.bgYoutube && props.bgYoutube !== "none") ||
+		(props.bgYoutubeSm && props.bgYoutubeSm !== "none");
+	if (hasYt) return true;
+
+	return (
+		(props.bgVideo && props.bgVideo !== "none") ||
+		(props.bgVideoSm && props.bgVideoSm !== "none")
+	);
+});
+
+const classes = computed(() => [
+	ROW_BASE,
+	{
+		"layout-row-root relative": bgStyles.value || hasVideo.value,
+	},
+	{ "has-gradient-overlay": props.bgGradient || props.bgGradientSm },
+	props.hideOnMobile ? "hidden md:flex" : "",
+	props.hideOnDesktop ? "flex md:hidden" : "",
+	!props.hideOnMobile && !props.hideOnDesktop ? "flex" : "",
+	props.size && ["mx-auto", CONTAINER_MAX_WIDTH[props.size]],
+	props.equalHeight
+		? ["md:items-stretch", "group/equal"]
+		: FLEX_ALIGN[props.align],
+	FLEX_JUSTIFY[props.justify],
+	props.py && `py-${props.py}`,
+	props.my && `my-${props.my}`,
+	props.mdPy && `md:py-${props.mdPy}`,
+	props.mdMy && `md:my-${props.mdMy}`,
+	props.class,
+]);
+
+const bgStyles = computed(() => {
+	const styles: Record<string, string> = {};
+
+	const hasBg =
+		props.bgColor ||
+		props.bgImage ||
+		props.bgImageSm ||
+		props.bgGradient ||
+		props.bgGradientSm ||
+		hasVideo.value;
+	if (!hasBg) return null;
+
+	if (props.bgColor) styles["--bg-color"] = props.bgColor;
+
+	let img = "";
+	if (props.bgImage) {
+		img = `url('${props.bgImage}')`;
+	} else if (props.bgYoutube && props.bgYoutube !== "none") {
+		img = getYoutubePoster(props.bgYoutube);
+	} else if (props.bgVideoPoster) {
+		img = `url('${props.bgVideoPoster}')`;
+	}
+	const grad = props.bgGradient || "";
+
+	styles["--bg-img-desktop"] = img;
+	styles["--bg-grad-desktop"] = grad;
+	styles["--bg-size-desktop"] = props.bgSize;
+
+	let imgSm = "";
+	if (props.bgImageSm === "none") {
+		imgSm = "";
+	} else if (props.bgImageSm) {
+		imgSm = `url('${props.bgImageSm}')`;
+	} else if (props.bgYoutubeSm && props.bgYoutubeSm !== "none") {
+		imgSm = getYoutubePoster(props.bgYoutubeSm);
+	} else if (props.bgVideoPosterSm) {
+		imgSm = `url('${props.bgVideoPosterSm}')`;
+	} else {
+		imgSm = img;
+	}
+	const gradSm = props.bgGradientSm || grad;
+
+	styles["--bg-img-mobile"] = imgSm;
+	styles["--bg-grad-mobile"] = gradSm;
+	styles["--bg-size-mobile"] = props.bgSizeSm || props.bgSize;
+
+	return Object.keys(styles).length > 0 ? styles : null;
+});
+
+const rootRef = ref<HTMLElement | null>(null);
+
+const refreshMyVideo = () => {
+	const iframe = rootRef.value?.querySelector("iframe");
+	if (iframe) {
+		const src = iframe.getAttribute("src");
+		if (src) iframe.setAttribute("src", src);
+	}
+};
+
+onMounted(() => {
+	window.addEventListener("focus", refreshMyVideo);
+});
+
+onUnmounted(() => {
+	window.removeEventListener("focus", refreshMyVideo);
+});
+</script>
+
+<template>
+	<div
+		ref="rootRef"
+		:id="id"
+		:class="classes"
+		v-bind="bgStyles ? { style: bgStyles } : {}"
+	>
+		<div
+			v-if="bgYoutube && bgYoutube !== 'none'"
+			class="video-background-container"
+			:class="[
+				bgYoutubeSm && bgYoutubeSm !== 'none'
+					? 'hidden md:block'
+					: 'block',
+			]"
+		>
+			<iframe
+				:src="getYoutubeEmbed(bgYoutube)!"
+				frameborder="0"
+				allow="autoplay; encrypted-media"
+				loading="lazy"
+			></iframe>
+		</div>
+
+		<div
+			v-if="bgYoutubeSm && bgYoutubeSm !== 'none'"
+			class="video-background-container md:hidden"
+		>
+			<iframe
+				:src="getYoutubeEmbed(bgYoutubeSm)!"
+				frameborder="0"
+				allow="autoplay; encrypted-media"
+				loading="lazy"
+			></iframe>
+		</div>
+
+		<video
+			v-if="
+				bgVideo &&
+				bgVideo !== 'none' &&
+				(!bgYoutube || bgYoutube === 'none')
+			"
+			autoplay
+			muted
+			loop
+			playsinline
+			:poster="bgVideoPoster"
+			class="absolute inset-0 z-0 h-full w-full object-cover pointer-events-none"
+			:class="[
+				(bgVideoSm && bgVideoSm !== 'none') ||
+				(bgYoutubeSm && bgYoutubeSm !== 'none')
+					? 'hidden md:block'
+					: 'block',
+			]"
+		>
+			<source :src="bgVideo" />
+		</video>
+
+		<video
+			v-if="
+				bgVideoSm &&
+				bgVideoSm !== 'none' &&
+				(!bgYoutubeSm || bgYoutubeSm === 'none')
+			"
+			autoplay
+			muted
+			loop
+			playsinline
+			:poster="bgVideoPosterSm || bgVideoPoster"
+			class="absolute inset-0 z-0 h-full w-full object-cover pointer-events-none md:hidden"
+		>
+			<source :src="bgVideoSm" />
+		</video>
+
+		<slot />
+	</div>
+</template>
+
+<style>
+.layout-row-root {
+	background-color: var(--bg-color, transparent);
+	background-image: var(--bg-img-mobile, none);
+	background-size: var(--bg-size-mobile, cover);
+}
+
+.layout-row-root.has-gradient-overlay::before {
+	background-image: var(--bg-grad-mobile, none);
+}
+
+@media (min-width: 768px) {
+	.layout-row-root {
+		background-image: var(--bg-img-desktop, none);
+		background-size: var(--bg-size-desktop, cover);
+	}
+	.layout-row-root.has-gradient-overlay::before {
+		background-image: var(--bg-grad-desktop, none);
+	}
+}
+</style>

package/app/components/grid/Stack.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+import { getYoutubeEmbed, getYoutubePoster } from "~/utils/ytVideo";
+
+interface Props {
+	as?: string;
+	id?: string;
+	class?: any;
+	hideOnMobile?: boolean;
+	hideOnDesktop?: boolean;
+	bgColor?: string;
+	bgImage?: string;
+	bgImageSm?: string;
+	bgGradient?: string;
+	bgGradientSm?: string;
+	bgSize?: string;
+	bgSizeSm?: string;
+	bgVideo?: string;
+	bgVideoSm?: string;
+	bgVideoPoster?: string;
+	bgVideoPosterSm?: string;
+	bgYoutube?: string;
+	bgYoutubeSm?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	as: "div",
+	id: undefined,
+	class: undefined,
+	hideOnMobile: false,
+	hideOnDesktop: false,
+	bgSize: "cover",
+});
+
+const hasHeightClass = computed(() => {
+	const classStr = String(props.class || "");
+	return (
+		/\bh-\d+/.test(classStr) ||
+		/\bh-\[/.test(classStr) ||
+		/\bh-screen/.test(classStr)
+	);
+});
+
+const hasVideo = computed(() => {
+	const hasYt =
+		(props.bgYoutube && props.bgYoutube !== "none") ||
+		(props.bgYoutubeSm && props.bgYoutubeSm !== "none");
+	if (hasYt) return true;
+
+	return (
+		(props.bgVideo && props.bgVideo !== "none") ||
+		(props.bgVideoSm && props.bgVideoSm !== "none")
+	);
+});
+
+const classes = computed(() => [
+	{
+		"layout-stack-root relative overflow-hidden":
+			bgStyles.value || hasVideo.value,
+	},
+	!props.hideOnMobile && !props.hideOnDesktop ? "flex" : "",
+	{ "h-full": !hasHeightClass.value },
+	"flex-col",
+	props.hideOnMobile ? "hidden md:flex" : "",
+	props.hideOnDesktop ? "flex md:hidden" : "",
+	props.class,
+]);
+
+const bgStyles = computed(() => {
+	const styles: Record<string, string> = {};
+
+	const hasBg =
+		props.bgColor ||
+		props.bgImage ||
+		props.bgImageSm ||
+		props.bgGradient ||
+		props.bgGradientSm ||
+		hasVideo.value;
+	if (!hasBg) return null;
+
+	if (props.bgColor) styles["--bg-color"] = props.bgColor;
+
+	let img = "";
+	if (props.bgImage) {
+		img = `url('${props.bgImage}')`;
+	} else if (props.bgYoutube && props.bgYoutube !== "none") {
+		img = getYoutubePoster(props.bgYoutube);
+	} else if (props.bgVideoPoster) {
+		img = `url('${props.bgVideoPoster}')`;
+	}
+	const grad = props.bgGradient || "";
+
+	styles["--bg-img-desktop"] = img;
+	styles["--bg-grad-desktop"] = grad;
+	styles["--bg-size-desktop"] = props.bgSize;
+
+	let imgSm = "";
+	if (props.bgImageSm === "none") {
+		imgSm = "";
+	} else if (props.bgImageSm) {
+		imgSm = `url('${props.bgImageSm}')`;
+	} else if (props.bgYoutubeSm && props.bgYoutubeSm !== "none") {
+		imgSm = getYoutubePoster(props.bgYoutubeSm);
+	} else if (props.bgVideoPosterSm) {
+		imgSm = `url('${props.bgVideoPosterSm}')`;
+	} else {
+		imgSm = img;
+	}
+
+	const gradSm = props.bgGradientSm || grad;
+	styles["--bg-img-mobile"] = imgSm;
+	styles["--bg-grad-mobile"] = gradSm;
+	styles["--bg-size-mobile"] = props.bgSizeSm || props.bgSize;
+
+	return Object.keys(styles).length > 0 ? styles : null;
+});
+
+const rootRef = ref<HTMLElement | null>(null);
+
+const refreshMyVideo = () => {
+	const iframe = rootRef.value?.querySelector("iframe");
+	if (iframe) {
+		const src = iframe.getAttribute("src");
+		if (src) iframe.setAttribute("src", src);
+	}
+};
+
+onMounted(() => {
+	window.addEventListener("focus", refreshMyVideo);
+});
+
+onUnmounted(() => {
+	window.removeEventListener("focus", refreshMyVideo);
+});
+</script>
+
+<template>
+	<div
+		ref="rootRef"
+		:is="as"
+		:id="id"
+		:class="[
+			classes,
+			{ 'has-gradient-overlay': props.bgGradient || props.bgGradientSm },
+		]"
+		v-bind="bgStyles ? { style: bgStyles } : {}"
+	>
+		<div
+			v-if="bgYoutube && bgYoutube !== 'none'"
+			class="video-background-container"
+			:class="[bgYoutubeSm ? 'hidden md:block' : 'block']"
+		>
+			<iframe
+				:src="getYoutubeEmbed(bgYoutube)!"
+				frameborder="0"
+				allow="autoplay; encrypted-media"
+				loading="lazy"
+			></iframe>
+		</div>
+
+		<div
+			v-if="bgYoutubeSm && bgYoutubeSm !== 'none'"
+			class="video-background-container md:hidden"
+		>
+			<iframe
+				:src="getYoutubeEmbed(bgYoutubeSm)!"
+				frameborder="0"
+				allow="autoplay; encrypted-media"
+				loading="lazy"
+			></iframe>
+		</div>
+
+		<video
+			v-if="
+				bgVideo &&
+				bgVideo !== 'none' &&
+				(!bgYoutube || bgYoutube === 'none')
+			"
+			autoplay
+			muted
+			loop
+			playsinline
+			:poster="bgVideoPoster"
+			class="absolute inset-0 z-0 h-full w-full object-cover pointer-events-none"
+			:class="[
+				bgVideoSm || (bgYoutubeSm && bgYoutubeSm !== 'none')
+					? 'hidden md:block'
+					: 'block',
+			]"
+		>
+			<source :src="bgVideo" />
+		</video>
+
+		<video
+			v-if="
+				bgVideoSm &&
+				bgVideoSm !== 'none' &&
+				(!bgYoutubeSm || bgYoutubeSm === 'none')
+			"
+			autoplay
+			muted
+			loop
+			playsinline
+			:poster="bgVideoPosterSm || bgVideoPoster"
+			class="absolute inset-0 z-0 h-full w-full object-cover pointer-events-none md:hidden"
+		>
+			<source :src="bgVideoSm" />
+		</video>
+
+		<slot />
+	</div>
+</template>
+
+<style>
+.layout-stack-root {
+	background-color: var(--bg-color, transparent);
+	background-image: var(--bg-img-mobile, none);
+	background-size: var(--bg-size-mobile, cover);
+}
+
+.layout-stack-root.has-gradient-overlay::before {
+	background-image: var(--bg-grad-mobile, none);
+}
+
+@media (min-width: 768px) {
+	.layout-stack-root {
+		background-image: var(--bg-img-desktop, none);
+		background-size: var(--bg-size-desktop, cover);
+	}
+	.layout-stack-root.has-gradient-overlay::before {
+		background-image: var(--bg-grad-desktop, none);
+	}
+}
+</style>

package/app/components/myelophone/Copyright.vue

@@ -0,0 +1,5 @@
+<template>
+	<a href="https://github.com/aleksivanou" target="_blank">
+		© 2025 Aliaksandr Ivanou. All rights reserved.
+	</a>
+</template>

package/app/components/myelophone/Welcome.vue

@@ -0,0 +1,107 @@
+<template>
+	<div
+		class="min-h-dvh flex flex-col items-center justify-center text-center"
+	>
+		<div class="flex items-center gap-3 mb-6">
+			<NuxtLink
+				to="/"
+				class="flex items-center gap-2 hover:opacity-90 transition-opacity"
+			>
+				<div class="flex items-center gap-3">
+					<SafeNuxtImg
+						src="/myelophone_eng.png"
+						width="221"
+						class="block dark:hidden"
+						alt="MyelophOne"
+					/>
+					<SafeNuxtImg
+						src="/myelophone_eng_white.png"
+						width="221"
+						class="hidden dark:block"
+						alt="MyelophOne"
+					/><svg
+						xmlns="http://www.w3.org/2000/svg"
+						fill="none"
+						aria-label="Nuxt"
+						class="h-8 sm:h-12"
+						viewBox="0 0 800 200"
+					>
+						<path
+							fill="#00dc82"
+							d="M168.303 200h111.522c3.543 0 7.022-.924 10.09-2.679A20.1 20.1 0 0 0 297.3 190a19.86 19.86 0 0 0 2.7-10.001 19.86 19.86 0 0 0-2.709-9.998L222.396 41.429a20.1 20.1 0 0 0-7.384-7.32 20.3 20.3 0 0 0-10.088-2.679c-3.541 0-7.02.925-10.087 2.68a20.1 20.1 0 0 0-7.384 7.32l-19.15 32.896L130.86 9.998a20.1 20.1 0 0 0-7.387-7.32A20.3 20.3 0 0 0 113.384 0c-3.542 0-7.022.924-10.09 2.679a20.1 20.1 0 0 0-7.387 7.319L2.709 170A19.85 19.85 0 0 0 0 179.999c-.002 3.511.93 6.96 2.7 10.001a20.1 20.1 0 0 0 7.385 7.321A20.3 20.3 0 0 0 20.175 200h70.004c27.737 0 48.192-12.075 62.266-35.633l34.171-58.652 18.303-31.389 54.93 94.285h-73.233zm-79.265-31.421-48.854-.011 73.232-125.706 36.541 62.853-24.466 42.01c-9.347 15.285-19.965 20.854-36.453 20.854"
+						></path>
+						<path
+							fill="currentColor"
+							d="M377 200a4 4 0 0 0 4-4v-93s5.244 8.286 15 25l38.707 66.961c1.789 3.119 5.084 5.039 8.649 5.039H470V50h-27a4 4 0 0 0-4 4v94l-17-30-36.588-62.98c-1.792-3.108-5.081-5.02-8.639-5.02H350v150zm299.203-56.143L710.551 92h-25.73a9.97 9.97 0 0 0-8.333 4.522L660.757 120.5l-15.731-23.978A9.97 9.97 0 0 0 636.693 92h-25.527l34.348 51.643L608.524 200h24.966a9.97 9.97 0 0 0 8.29-4.458l19.18-28.756 18.981 28.72a9.97 9.97 0 0 0 8.313 4.494h24.736zM724.598 92h19.714V60.071h28.251V92H800v24.857h-27.437V159.5c0 10.5 5.284 15.429 14.43 15.429H800V200h-16.869c-23.576 0-38.819-14.143-38.819-39.214v-43.929h-19.714zM590 92h-15c-3.489 0-6.218.145-8.5 2.523-2.282 2.246-2.5 3.63-2.5 7.066v52.486c0 8.058-.376 12.962-4 16.925-3.624 3.831-8.619 5-16 5-7.247 0-12.376-1.169-16-5-3.624-3.963-4-8.867-4-16.925v-52.486c0-3.435-.218-4.82-2.5-7.066C519.218 92.145 516.489 92 513 92h-15v62.422q0 21.006 11.676 33.292C517.594 195.905 529.103 200 544 200s26.204-4.095 34.123-12.286Q590 175.428 590 154.422z"
+						></path>
+					</svg>
+				</div>
+			</NuxtLink>
+		</div>
+		<p class="max-w-xl mb-6 dark:opacity-70">
+			{{ t("myelophone.welcome") }} <strong>MyelophOne Nuxt</strong>!
+			<br />
+			{{ t("myelophone.experiment") }}
+			<br />
+			<span class="italic"
+				>{{ t("myelophone.poweredBy") }}
+				<strong
+					><a href="https://github.com/MyelophOne" target="_blank"
+						>MyelophOne</a
+					></strong
+				>.</span
+			>
+			💚 <br /><br />
+			<span class="text-sm"
+				>{{ t("myelophone.templateVersion") }}
+				<span
+					class="bg-[#00DC42]/10 border border-[#00DC42]/50 font-mono font-semibold group-hover:bg-[#00DC42]/15 group-hover:border-[#00DC42] inline-block leading-none px-2 py-0.5 rounded sm:px-2.5 sm:py-1 sm:text-[14px] text-[#00DC82] text-[12px]"
+					>{{ version }}</span
+				>
+				<br />
+				{{ t("myelophone.nuxtVersion") }}
+				<span
+					class="bg-[#00DC42]/10 border border-[#00DC42]/50 font-mono font-semibold group-hover:bg-[#00DC42]/15 group-hover:border-[#00DC42] inline-block leading-none px-2 py-0.5 rounded sm:px-2.5 sm:py-1 sm:text-[14px] text-[#00DC82] text-[12px]"
+					>{{ nuxtVersion }}</span
+				></span
+			>
+		</p>
+		<p class="max-w-xl mb-6 font-semibold dark:opacity-70">
+			<button @click="settingsStore.toggleTheme" class="mb-2">
+				{{ t("myelophone.toggleTheme") }}
+				<span class="dark:hidden"
+					><UiIcon
+						name="solar:moon-stars-line-duotone"
+						class="theme-icon" /></span
+				><span class="hidden dark:inline"
+					><UiIcon name="solar:sun-broken" class="theme-icon"
+				/></span>
+			</button>
+		</p>
+		<p
+			class="text-sm max-w-xl mb-6 opacity-30 hover:opacity-100 transition-opacity duration-500 sticky top-[100vh]"
+		>
+			<MyelophoneCopyright />
+		</p>
+	</div>
+</template>
+
+<script setup lang="ts">
+const pinia = useNuxtApp().$pinia;
+const settingsStore = useSettingsStore(pinia);
+const nuxtVersion = useNuxtVersion();
+
+const config = useRuntimeConfig();
+
+const { t } = useMultiLang(["myelophone"]);
+
+const version = config.public?.version || "unknown";
+</script>
+
+<style scoped>
+.theme-icon {
+	width: 1.5rem;
+	height: 1.5rem;
+	vertical-align: middle;
+}
+</style>