@myelophone/nuxt 0.18.2

package/app/components/view/InfoBar.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+interface InfoItem {
+	icon: string;
+	label?: string | number;
+	iconClass?: string;
+	textClass?: string;
+	action?: () => void;
+}
+
+interface ActionItem {
+	icon: string;
+	label?: string;
+	iconClass?: string;
+	action?: () => void;
+}
+
+const props = withDefaults(
+	defineProps<{
+		items?: InfoItem[];
+		actions?: ActionItem[];
+		wrapperClass?: string;
+		iconSize?: string;
+	}>(),
+	{
+		items: () => [],
+		actions: () => [],
+		wrapperClass: "",
+	},
+);
+
+const iconFixBase = "[mask-size:100%_100%] bg-current";
+</script>
+
+<template>
+	<div
+		class="w-full flex flex-wrap items-center justify-between gap-y-2 gap-x-4 py-2"
+		:class="wrapperClass"
+	>
+		<div v-if="items.length" class="flex flex-wrap items-center gap-4">
+			<div
+				v-for="(item, index) in items"
+				:key="`info-${index}`"
+				class="flex items-center gap-1.5 group select-none transition-opacity"
+				:class="{ 'cursor-pointer hover:opacity-80': !!item.action }"
+				@click="item.action && item.action()"
+			>
+				<UiIcon
+					:name="item.icon"
+					class="transition-transform group-active:scale-90"
+					:size="`${iconSize}`"
+					:class="`${iconFixBase} ${item.iconClass || 'text-gray-900 dark:text-gray-100'}`"
+				/>
+
+				<span
+					v-if="item.label !== undefined"
+					class="font-medium leading-none"
+					:class="
+						item.textClass || 'text-gray-900 dark:text-gray-100'
+					"
+				>
+					{{ item.label }}
+				</span>
+			</div>
+		</div>
+
+		<div
+			v-if="actions.length"
+			class="flex items-center gap-3 ml-auto sm:ml-0"
+		>
+			<button
+				v-for="(act, index) in actions"
+				:key="`act-${index}`"
+				type="button"
+				class="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none"
+				@click="act.action && act.action()"
+				:title="act.label"
+			>
+				<UiIcon
+					:name="act.icon"
+					:size="`${iconSize}`"
+					:class="`${iconFixBase} ${act.iconClass || 'text-gray-900 dark:text-gray-100'}`"
+				/>
+			</button>
+		</div>
+	</div>
+</template>

package/app/components/view/LogoGrid.vue

@@ -0,0 +1,106 @@
+<template>
+	<section class="w-full py-12 md:py-24 overflow-hidden">
+		<div v-if="title" class="text-center mb-16 md:mb-24 px-4">
+			<p
+				class="text-xs font-bold uppercase tracking-[0.25em] text-(--ui-text) opacity-40"
+			>
+				{{ title }}
+			</p>
+		</div>
+
+		<div v-if="items && items.length > 0">
+			<div
+				class="flex flex-wrap justify-center items-center -mx-2 md:-mx-4 lg:-mx-6"
+			>
+				<component
+					:is="logo.link ? 'NuxtLink' : 'div'"
+					v-for="(logo, index) in items"
+					:key="index"
+					:to="logo.link"
+					:target="
+						logo.link && logo.link.startsWith('http')
+							? '_blank'
+							: undefined
+					"
+					class="relative flex items-center justify-center select-none group transition-transform duration-300"
+					:class="[
+						index >= safeMobileLimit ? 'hidden md:flex' : 'flex',
+						mobileLimit === 3 ? 'w-1/3 px-2' : 'w-1/2 px-2',
+						'sm:w-1/3 sm:px-4',
+						'md:w-1/4 md:px-4',
+						'lg:w-1/6 lg:px-6',
+						'xl:w-[14.28%] xl:px-6',
+						'2xl:w-[12.5%] 2xl:px-6',
+						'py-8 md:py-12',
+
+						logo.link ? 'cursor-pointer' : 'cursor-default',
+					]"
+				>
+					<img
+						:src="logo.src"
+						:alt="logo.alt || 'Logo'"
+						class="h-7 md:h-12 w-full object-contain transition-all duration-700 ease-in-out logoimg"
+						:class="[
+							getVariantClasses,
+							{ 'dark:invert': logo.dark },
+						]"
+						loading="lazy"
+					/>
+				</component>
+
+				<div
+					v-if="showMoreCount && items.length > safeMobileLimit"
+					class="md:hidden flex w-full items-center justify-center mt-8"
+				>
+					<div
+						class="h-8 flex items-center justify-center text-[10px] font-bold text-(--ui-text) opacity-40 border border-(--ui-text)/20 rounded-full px-4 whitespace-nowrap"
+					>
+						+{{ items.length - safeMobileLimit }}
+					</div>
+				</div>
+			</div>
+		</div>
+	</section>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+interface LogoItem {
+	src: string;
+	alt?: string;
+	link?: string;
+	dark?: boolean;
+}
+
+interface Props {
+	items?: LogoItem[];
+	title?: string;
+	variant?: "gray-hover" | "color" | "gray";
+	mobileLimit?: number;
+	showMoreCount?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	items: () => [],
+	title: "",
+	variant: "gray-hover",
+	mobileLimit: 6,
+	showMoreCount: false,
+});
+
+const safeMobileLimit = computed(() => Math.max(0, props.mobileLimit));
+
+const getVariantClasses = computed(() => {
+	switch (props.variant) {
+		case "gray-hover":
+			return "grayscale opacity-40 group-hover:grayscale-0 group-hover:opacity-100";
+		case "color":
+			return "grayscale-0 opacity-60 group-hover:opacity-100";
+		case "gray":
+			return "grayscale opacity-40 group-hover:opacity-80";
+		default:
+			return "";
+	}
+});
+</script>

package/app/components/view/LogoSlider.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+interface Logo {
+	src: string;
+	alt?: string;
+	href?: string;
+}
+
+interface Props {
+	logos: Logo[];
+	speed?: number;
+	grayscale?: boolean;
+	containerClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	speed: 30,
+	grayscale: true,
+	containerClass: "",
+});
+</script>
+
+<template>
+	<div
+		:class="[
+			'relative w-full overflow-hidden bg-(--ui-bg) py-2 sm:py-4',
+			containerClass,
+		]"
+	>
+		<div
+			class="pointer-events-none absolute inset-y-0 left-0 z-10 w-12 sm:w-20 bg-linear-to-r from-(--ui-bg) to-transparent"
+		></div>
+		<div
+			class="pointer-events-none absolute inset-y-0 right-0 z-10 w-12 sm:w-20 bg-linear-to-l from-(--ui-bg) to-transparent"
+		></div>
+
+		<div class="flex overflow-hidden select-none group">
+			<div
+				v-for="loop in 2"
+				:key="loop"
+				class="flex min-w-full shrink-0 items-center justify-around gap-6 sm:gap-10 animate-infinite-scroll group-hover:[animation-play-state:paused]"
+				:style="{ 'animation-duration': `${speed}s` }"
+				:aria-hidden="loop === 2"
+			>
+				<component
+					:is="logo.href ? 'a' : 'div'"
+					v-for="(logo, index) in logos"
+					:key="`${loop}-${index}`"
+					:href="logo.href"
+					:target="logo.href ? '_blank' : undefined"
+					:rel="logo.href ? 'noopener noreferrer' : undefined"
+					class="flex h-10 w-24 sm:h-14 sm:w-32 items-center justify-center p-1 transition-transform"
+					:class="{ 'cursor-pointer': logo.href }"
+				>
+					<SafeNuxtImg
+						:src="logo.src"
+						:alt="logo.alt ? logo.alt : ''"
+						class="max-h-full max-w-full object-contain transition-all duration-300"
+						:class="[
+							grayscale
+								? 'filter grayscale hover:grayscale-0 opacity-70 hover:opacity-100'
+								: 'opacity-90 hover:opacity-100',
+							'',
+						]"
+					/>
+				</component>
+			</div>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+@keyframes scroll {
+	from {
+		transform: translateX(0);
+	}
+	to {
+		transform: translateX(-100%);
+	}
+}
+.animate-infinite-scroll {
+	animation: scroll linear infinite;
+}
+</style>

package/app/components/view/NotFound.vue

@@ -0,0 +1,81 @@
+<template>
+	<div class="min-h-screen flex items-center justify-center px-4">
+		<div class="max-w-xl text-center">
+			<h1
+				class="text-7xl sm:text-9xl font-extrabold tracking-widest text-red-500 dark:text-red-400"
+			>
+				404
+			</h1>
+			<p class="text-2xl md:text-3xl mt-6 text-center">
+				{{ t("interface.pageNotFound") }}
+			</p>
+
+			<p
+				class="mt-4 text-gray-600 dark:text-gray-400 text-center max-w-md"
+			>
+				{{ t("interface.pageNotFoundText") }}
+			</p>
+
+			<NuxtLink
+				to="/"
+				class="mt-8 inline-block bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 pb-3 px-6 rounded-lg transition"
+			>
+				{{ t("interface.goHomeFull") }}
+			</NuxtLink>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+	defineProps<{
+		setResponseStatus?: boolean;
+	}>(),
+	{
+		setResponseStatus: true,
+	},
+);
+
+if (import.meta.server && props.setResponseStatus) {
+	const event = useRequestEvent();
+	if (event) {
+		setResponseStatus(event, 404, "Not Found");
+	}
+}
+
+const isNotFound = useState<boolean>("is_404", () => false);
+const activateNotFound = () => {
+	isNotFound.value = true;
+};
+const deactivateNotFound = () => {
+	isNotFound.value = false;
+};
+
+activateNotFound();
+onActivated(activateNotFound);
+onDeactivated(deactivateNotFound);
+onUnmounted(deactivateNotFound);
+
+const { t } = useMultiLang(["interface"]);
+
+useAppSeo({
+	title: () => `404 — ${t("interface.pageNotFound")}`,
+	description: () => `404 — ${t("interface.pageNotFoundDescription")}`,
+	noIndex: true,
+});
+</script>
+
+<style scoped>
+h1 {
+	animation: bounce 3s ease infinite;
+}
+@keyframes bounce {
+	0%,
+	100% {
+		transform: translateY(0);
+	}
+	50% {
+		transform: translateY(-15px);
+	}
+}
+</style>

package/app/components/view/PartialBackground.vue

@@ -0,0 +1,313 @@
+<script setup lang="ts">
+import type { CSSProperties } from "vue";
+
+import type { LayoutSize } from "~/constants/layout";
+
+interface Props {
+	as?: string;
+	containerSize?: LayoutSize;
+	backgroundHeightLeft?: string;
+	backgroundHeightRight?: string;
+	backgroundBeforeContent?: boolean;
+	backgroundBeforeContentHeight?: string;
+	backgroundAfterContent?: boolean;
+	backgroundAfterContentHeight?: string;
+	minHeight?: string;
+	contentAlign?: "top" | "center" | "bottom";
+	backgroundColor?: string;
+	backgroundColorDark?: string;
+	background?: string;
+	backgroundDark?: string;
+	backgroundSize?: string;
+	backgroundPosition?: string;
+	backgroundRepeat?: string;
+	mask?: string;
+	maskDark?: string;
+	maskSize?: string;
+	maskPosition?: string;
+	maskRepeat?: string;
+	layerClass?: string;
+	contentClass?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	as: "section",
+	containerSize: "content",
+	backgroundHeightLeft: "60dvh",
+	backgroundHeightRight: "60dvh",
+	backgroundBeforeContent: false,
+	backgroundBeforeContentHeight: "clamp(5rem, 12dvh, 10rem)",
+	backgroundAfterContent: false,
+	backgroundAfterContentHeight: "clamp(5rem, 12dvh, 10rem)",
+	contentAlign: "top",
+	backgroundColor: "transparent",
+	background: "transparent",
+	backgroundSize: "cover",
+	backgroundPosition: "center",
+	backgroundRepeat: "no-repeat",
+	mask: "none",
+	maskSize: "cover",
+	maskPosition: "center",
+	maskRepeat: "no-repeat",
+	layerClass: "",
+	contentClass: "",
+});
+
+type PartialBackgroundStyles = CSSProperties &
+	Record<`--partial-background-${string}`, string>;
+
+const rootStyles = computed<PartialBackgroundStyles>(() => ({
+	"--partial-background-left": props.backgroundHeightLeft,
+	"--partial-background-right": props.backgroundHeightRight,
+	"--partial-background-before-content-height":
+		props.backgroundBeforeContentHeight,
+	"--partial-background-after-content-height":
+		props.backgroundAfterContentHeight,
+	"--partial-background-min-height": props.minHeight || "auto",
+	"--partial-background-color-light": props.backgroundColor,
+	"--partial-background-color-dark":
+		props.backgroundColorDark || props.backgroundColor,
+	"--partial-background-light": props.background,
+	"--partial-background-dark": props.backgroundDark || props.background,
+	"--partial-background-size": props.backgroundSize,
+	"--partial-background-position": props.backgroundPosition,
+	"--partial-background-repeat": props.backgroundRepeat,
+	"--partial-background-mask-light": props.mask,
+	"--partial-background-mask-dark": props.maskDark || props.mask,
+	"--partial-background-mask-size": props.maskSize,
+	"--partial-background-mask-position": props.maskPosition,
+	"--partial-background-mask-repeat": props.maskRepeat,
+}));
+
+const contentAlignmentClass = computed(
+	() =>
+		({
+			top: "justify-start",
+			center: "justify-center",
+			bottom: "justify-end",
+		})[props.contentAlign],
+);
+
+const contentClasses = computed(() =>
+	[
+		"view-partial-background__content",
+		contentAlignmentClass.value,
+		props.contentClass,
+	]
+		.filter(Boolean)
+		.join(" "),
+);
+
+const rootClasses = computed(() =>
+	[
+		"view-partial-background h-[auto]",
+		props.backgroundBeforeContent &&
+			"view-partial-background--before-content",
+		props.backgroundAfterContent &&
+			"view-partial-background--after-content",
+	]
+		.filter(Boolean)
+		.join(" "),
+);
+</script>
+
+<template>
+	<GridStack :as="as" :class="rootClasses" :style="rootStyles">
+		<div
+			v-if="backgroundBeforeContent"
+			class="view-partial-background__layer view-partial-background__layer--before"
+			:class="layerClass"
+			aria-hidden="true"
+		>
+			<slot name="background-before">
+				<slot name="background" />
+			</slot>
+		</div>
+
+		<GridContainer :size="containerSize" :class="contentClasses">
+			<slot />
+		</GridContainer>
+
+		<div
+			v-if="backgroundAfterContent"
+			class="view-partial-background__layer view-partial-background__layer--after"
+			:class="layerClass"
+			aria-hidden="true"
+		>
+			<slot name="background-after">
+				<slot name="background" />
+			</slot>
+		</div>
+
+		<div
+			v-if="!backgroundBeforeContent && !backgroundAfterContent"
+			class="view-partial-background__layer view-partial-background__layer--behind"
+			:class="layerClass"
+			aria-hidden="true"
+		>
+			<slot name="background" />
+		</div>
+	</GridStack>
+</template>
+
+<style>
+.view-partial-background {
+	position: relative;
+	isolation: isolate;
+	width: 100%;
+	min-height: var(--partial-background-min-height);
+}
+
+.view-partial-background__layer {
+	position: absolute;
+	z-index: -1;
+	inset: 0;
+	overflow: hidden;
+	pointer-events: none;
+	background: var(--partial-background-light);
+	background-color: var(--partial-background-color-light);
+	background-position: var(--partial-background-position);
+	background-repeat: var(--partial-background-repeat);
+	background-size: var(--partial-background-size);
+	clip-path: polygon(
+		0 0,
+		100% 0,
+		100% var(--partial-background-right),
+		0 var(--partial-background-left)
+	);
+	-webkit-mask: var(--partial-background-mask-light);
+	mask: var(--partial-background-mask-light);
+	-webkit-mask-position: var(--partial-background-mask-position);
+	mask-position: var(--partial-background-mask-position);
+	-webkit-mask-repeat: var(--partial-background-mask-repeat);
+	mask-repeat: var(--partial-background-mask-repeat);
+	-webkit-mask-size: var(--partial-background-mask-size);
+	mask-size: var(--partial-background-mask-size);
+}
+
+.view-partial-background__content {
+	position: relative;
+	z-index: 1;
+	min-height: inherit;
+}
+
+.view-partial-background--before-content::before,
+.view-partial-background--after-content::before {
+	position: absolute;
+	z-index: -1;
+	right: 0;
+	left: 0;
+	content: "";
+	pointer-events: none;
+	background-color: var(--partial-background-color-light);
+}
+
+.view-partial-background--before-content::before {
+	top: var(--partial-background-before-content-height);
+	bottom: 0;
+}
+
+.view-partial-background--after-content::before {
+	top: 0;
+	bottom: var(--partial-background-after-content-height);
+}
+
+.view-partial-background--before-content.view-partial-background--after-content::before {
+	top: var(--partial-background-before-content-height);
+	bottom: var(--partial-background-after-content-height);
+}
+
+.view-partial-background__layer--before,
+.view-partial-background__layer--after {
+	position: relative;
+	z-index: 0;
+	inset: auto;
+	width: 100%;
+	flex: none;
+}
+
+.view-partial-background__layer--before {
+	height: var(--partial-background-before-content-height);
+	clip-path: polygon(
+		0 calc(100% - var(--partial-background-left)),
+		100% calc(100% - var(--partial-background-right)),
+		100% 100%,
+		0 100%
+	);
+}
+
+.view-partial-background__layer--after {
+	height: var(--partial-background-after-content-height);
+	clip-path: polygon(
+		0 0,
+		100% 0,
+		100% var(--partial-background-right),
+		0 var(--partial-background-left)
+	);
+}
+
+@media (prefers-color-scheme: dark) {
+	.view-partial-background__layer {
+		background: var(--partial-background-dark);
+		background-color: var(--partial-background-color-dark);
+		background-position: var(--partial-background-position);
+		background-repeat: var(--partial-background-repeat);
+		background-size: var(--partial-background-size);
+		-webkit-mask: var(--partial-background-mask-dark);
+		mask: var(--partial-background-mask-dark);
+		-webkit-mask-position: var(--partial-background-mask-position);
+		mask-position: var(--partial-background-mask-position);
+		-webkit-mask-repeat: var(--partial-background-mask-repeat);
+		mask-repeat: var(--partial-background-mask-repeat);
+		-webkit-mask-size: var(--partial-background-mask-size);
+		mask-size: var(--partial-background-mask-size);
+	}
+
+	.view-partial-background--before-content::before,
+	.view-partial-background--after-content::before {
+		background-color: var(--partial-background-color-dark);
+	}
+}
+
+[data-theme="light"] .view-partial-background__layer {
+	background: var(--partial-background-light);
+	background-color: var(--partial-background-color-light);
+	background-position: var(--partial-background-position);
+	background-repeat: var(--partial-background-repeat);
+	background-size: var(--partial-background-size);
+	-webkit-mask: var(--partial-background-mask-light);
+	mask: var(--partial-background-mask-light);
+	-webkit-mask-position: var(--partial-background-mask-position);
+	mask-position: var(--partial-background-mask-position);
+	-webkit-mask-repeat: var(--partial-background-mask-repeat);
+	mask-repeat: var(--partial-background-mask-repeat);
+	-webkit-mask-size: var(--partial-background-mask-size);
+	mask-size: var(--partial-background-mask-size);
+}
+
+[data-theme="light"] .view-partial-background--before-content::before,
+[data-theme="light"] .view-partial-background--after-content::before {
+	background-color: var(--partial-background-color-light);
+}
+
+[data-theme="dark"] .view-partial-background__layer {
+	background: var(--partial-background-dark);
+	background-color: var(--partial-background-color-dark);
+	background-position: var(--partial-background-position);
+	background-repeat: var(--partial-background-repeat);
+	background-size: var(--partial-background-size);
+	-webkit-mask: var(--partial-background-mask-dark);
+	mask: var(--partial-background-mask-dark);
+	-webkit-mask-position: var(--partial-background-mask-position);
+	mask-position: var(--partial-background-mask-position);
+	-webkit-mask-repeat: var(--partial-background-mask-repeat);
+	mask-repeat: var(--partial-background-mask-repeat);
+	-webkit-mask-size: var(--partial-background-mask-size);
+	mask-size: var(--partial-background-mask-size);
+}
+
+[data-theme="dark"] .view-partial-background--before-content::before,
+[data-theme="dark"] .view-partial-background--after-content::before {
+	background-color: var(--partial-background-color-dark);
+}
+</style>