@myelophone/nuxt 0.18.2

package/app/components/page/FullscreenPreloader.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+import type { CSSProperties } from "vue";
+
+interface Props {
+	transparent?: boolean;
+	background?: string;
+	backgroundDark?: string;
+	zIndex?: number | string;
+	ariaLabel?: string;
+	class?: string;
+	contentClass?: string;
+	minimumDuration?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	transparent: false,
+	background: "var(--ui-bg)",
+	zIndex: 9999,
+	ariaLabel: "Page loading",
+	class: "",
+	contentClass: "",
+	minimumDuration: 250,
+});
+
+const nuxtApp = useNuxtApp();
+const autoVisible = ref(true);
+let visibleSince = import.meta.client ? performance.now() : 0;
+let hideTimer: ReturnType<typeof setTimeout> | undefined;
+let waitingForWindowLoad = true;
+
+const showAutomatically = () => {
+	if (hideTimer) clearTimeout(hideTimer);
+	hideTimer = undefined;
+	visibleSince = import.meta.client ? performance.now() : 0;
+	autoVisible.value = true;
+};
+
+const hideAutomatically = () => {
+	if (!import.meta.client || waitingForWindowLoad) return;
+
+	const elapsed = performance.now() - visibleSince;
+	const minimumDuration = Number.isFinite(props.minimumDuration)
+		? Math.max(0, props.minimumDuration)
+		: 250;
+	const remaining = Math.max(0, minimumDuration - elapsed);
+
+	if (hideTimer) clearTimeout(hideTimer);
+	hideTimer = setTimeout(() => {
+		autoVisible.value = false;
+		hideTimer = undefined;
+	}, remaining);
+};
+
+const removePageStartHook = nuxtApp.hook("page:start", showAutomatically);
+const removePageFinishHook = nuxtApp.hook("page:finish", hideAutomatically);
+
+const handleWindowLoad = () => {
+	waitingForWindowLoad = false;
+	hideAutomatically();
+};
+
+onMounted(() => {
+	if (document.readyState === "complete") {
+		handleWindowLoad();
+	} else {
+		window.addEventListener("load", handleWindowLoad, { once: true });
+	}
+});
+
+onBeforeUnmount(() => {
+	if (hideTimer) clearTimeout(hideTimer);
+	window.removeEventListener("load", handleWindowLoad);
+	removePageStartHook();
+	removePageFinishHook();
+});
+
+type FullscreenPreloaderStyles = CSSProperties &
+	Record<`--page-fullscreen-preloader-${string}`, string>;
+
+const rootStyles = computed<FullscreenPreloaderStyles>(() => ({
+	"--page-fullscreen-preloader-background-light": props.transparent
+		? "transparent"
+		: props.background,
+	"--page-fullscreen-preloader-background-dark": props.transparent
+		? "transparent"
+		: props.backgroundDark || props.background,
+	"--page-fullscreen-preloader-z-index": String(props.zIndex),
+}));
+
+const rootClasses = computed(() =>
+	["page-fullscreen-preloader", props.class].filter(Boolean).join(" "),
+);
+
+const contentClasses = computed(() =>
+	["page-fullscreen-preloader__content", props.contentClass]
+		.filter(Boolean)
+		.join(" "),
+);
+</script>
+
+<template>
+	<Transition name="page-fullscreen-preloader">
+		<div
+			v-if="autoVisible"
+			:class="rootClasses"
+			:style="rootStyles"
+			role="status"
+			aria-live="polite"
+			aria-busy="true"
+			:aria-label="ariaLabel"
+			@wheel.prevent
+			@touchmove.prevent
+		>
+			<div :class="contentClasses">
+				<slot />
+			</div>
+		</div>
+	</Transition>
+</template>
+
+<style>
+.page-fullscreen-preloader {
+	position: fixed;
+	z-index: var(--page-fullscreen-preloader-z-index);
+	inset: 0;
+	display: none;
+	place-items: center;
+	width: 100%;
+	height: 100vh;
+	height: 100dvh;
+	overflow: hidden;
+	overscroll-behavior: contain;
+	background: var(--page-fullscreen-preloader-background-light);
+}
+
+html.js .page-fullscreen-preloader {
+	display: grid;
+}
+
+.page-fullscreen-preloader__content {
+	display: flex;
+	max-width: 100%;
+	max-height: 100%;
+	align-items: center;
+	justify-content: center;
+	padding: 1rem;
+}
+
+.page-fullscreen-preloader-leave-active {
+	pointer-events: none;
+	transition: opacity 160ms ease-out;
+}
+
+.page-fullscreen-preloader-leave-to {
+	opacity: 0;
+}
+
+@media (prefers-color-scheme: dark) {
+	.page-fullscreen-preloader {
+		background: var(--page-fullscreen-preloader-background-dark);
+	}
+}
+
+[data-theme="light"] .page-fullscreen-preloader {
+	background: var(--page-fullscreen-preloader-background-light);
+}
+
+[data-theme="dark"] .page-fullscreen-preloader {
+	background: var(--page-fullscreen-preloader-background-dark);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	.page-fullscreen-preloader-leave-active {
+		transition: none;
+	}
+}
+</style>

package/app/components/page/Preloader.vue

@@ -0,0 +1,18 @@
+<template>
+	<div v-show="isLoading" id="preloader" class="preloader" />
+</template>
+
+<script setup lang="ts">
+const pinia = useNuxtApp().$pinia;
+const settingsStore = useSettingsStore(pinia);
+const isLoading = computed(() => settingsStore.isLoading);
+</script>
+
+<style scoped>
+#preloader {
+	position: fixed;
+	top: 7px;
+	right: 10px;
+	margin: 0 auto;
+}
+</style>

package/app/components/page/ReadyLocalized.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts" generic="T">
+defineProps<{
+	contentByLocale: Record<string, T>;
+}>();
+
+defineSlots<{
+	default(props: { content: T; locale: string }): unknown;
+}>();
+</script>
+
+<template>
+	<UiLangVisible
+		v-for="(content, locale) in contentByLocale"
+		:key="locale"
+		:only="locale"
+	>
+		<slot :content="content" :locale="locale" />
+	</UiLangVisible>
+</template>

package/app/components/safe/Email.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/safe/ImgWithLoader.vue

@@ -0,0 +1,180 @@
+<template>
+	<div
+		ref="wrapper"
+		class="lazy-image-wrapper"
+		:style="{
+			maxWidth: width ? width : undefined,
+			height: height ? height : undefined,
+		}"
+	>
+		<ClientOnly>
+			<template v-if="isStatic">
+				<img
+					v-if="isVisible"
+					:src="currentSrc"
+					:alt="alt"
+					:width="width"
+					:height="height"
+					:sizes="sizes"
+					:class="[
+						'lazy-image',
+						imgClass,
+						{ 'image-visible': isLoaded },
+					]"
+					@load="onLoad"
+					@error="onError"
+					loading="lazy"
+					fit="cover"
+				/>
+			</template>
+
+			<template v-else>
+				<NuxtImg
+					v-if="isVisible"
+					:src="currentSrc"
+					:alt="alt"
+					:width="width"
+					:height="height"
+					:sizes="sizes"
+					:class="[
+						'lazy-image',
+						imgClass,
+						{ 'image-visible': isLoaded },
+					]"
+					@load="onLoad"
+					@error="onError"
+					loading="lazy"
+					fit="cover"
+					format="avif,webp"
+				/>
+			</template>
+		</ClientOnly>
+
+		<div v-if="!isLoaded" class="loaderparent imgpreloader">
+			<svg
+				width="26"
+				height="26"
+				viewBox="0 0 32 32"
+				xmlns="http://www.w3.org/2000/svg"
+				class="loadersvg"
+			>
+				<g fill="none" fill-rule="evenodd">
+					<g fill="var(--loader-fill-color, #333)">
+						<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>
+	</div>
+</template>
+
+<script setup lang="ts">
+const isStatic = useStatic();
+
+const props = defineProps<{
+	src: string;
+	alt?: string;
+	width?: number | string;
+	height?: number | string;
+	sizes?: string;
+	imgClass?: string;
+}>();
+
+const isLoaded = ref(false);
+const isVisible = ref(false);
+const currentSrc = ref("");
+const wrapper = ref<HTMLElement | null>(null);
+
+let observer: IntersectionObserver | null = null;
+
+function onLoad() {
+	isLoaded.value = true;
+}
+
+const img404 = "/img/image404.png";
+
+function onError() {
+	currentSrc.value = img404;
+}
+
+onMounted(() => {
+	if (!wrapper.value) return;
+
+	observer = new IntersectionObserver(
+		([entry]) => {
+			if (entry?.isIntersecting) {
+				isVisible.value = true;
+				currentSrc.value = props.src;
+				observer?.disconnect();
+			}
+		},
+		{
+			rootMargin: "100px",
+			threshold: 0.1,
+		},
+	);
+
+	observer.observe(wrapper.value);
+});
+
+onBeforeUnmount(() => {
+	observer?.disconnect();
+});
+</script>
+
+<style scoped>
+.lazy-image-wrapper {
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: block;
+	overflow: hidden;
+}
+
+.lazy-image {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+	opacity: 0;
+	transition: opacity 0.4s ease-in-out;
+	z-index: 2;
+}
+
+.image-visible {
+	opacity: 1;
+}
+
+.loaderparent {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 1;
+	background: transparent;
+}
+
+.loadersvg {
+	animation: rotate 0.8s linear infinite;
+}
+
+@keyframes rotate {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+</style>

package/app/components/safe/NuxtImg.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const props = defineProps<{
+	[key: string]: any;
+}>();
+
+const attrs = useAttrs();
+const hasOnError = computed(
+	() => "onerror" in attrs || "onError" in attrs || "@error" in attrs,
+);
+const finalOnError = computed(() => {
+	return hasOnError.value ? undefined : null;
+});
+
+const isStatic = useStatic();
+</script>
+
+<template>
+	<template v-if="isStatic">
+		<img v-bind="{ ...props, ...attrs }" :onerror="finalOnError" />
+	</template>
+
+	<template v-else>
+		<NuxtImg v-bind="{ ...props, ...attrs }" :onerror="finalOnError" />
+	</template>
+</template>

package/app/components/safe/NuxtPicture.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+const props = defineProps<{
+	[key: string]: any;
+}>();
+
+const attrs = useAttrs();
+
+const hasOnError = computed(() => {
+	return (
+		"onerror" in attrs ||
+		"onError" in attrs ||
+		"@error" in attrs ||
+		Object.keys(attrs).some(
+			(key) =>
+				key.toLowerCase().includes("error") && key.startsWith("on"),
+		)
+	);
+});
+
+const finalOnError = computed(() => {
+	return hasOnError.value ? undefined : null;
+});
+</script>
+
+<template>
+	<NuxtPicture v-bind="{ ...props, ...attrs }" :onerror="finalOnError">
+		<slot />
+	</NuxtPicture>
+</template>

package/app/components/seo/BrandInfo.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+interface Props {
+	enabled?: boolean;
+	context?: string;
+	type?: string | string[];
+	id?: string;
+	name?: string;
+	alternateName?: string | string[];
+	additionalType?: string | string[];
+	description?: string;
+	disambiguatingDescription?: string;
+	url?: string;
+	logo?: string | JsonLdNode;
+	image?: string | JsonLdNode | JsonLdValue[];
+	sameAs?: string[];
+	identifier?: string | JsonLdNode | JsonLdValue[];
+	slogan?: string;
+	owner?: JsonLdNode | JsonLdValue[];
+	aggregateRating?: JsonLdNode;
+	review?: JsonLdNode | JsonLdValue[];
+	mainEntityOfPage?: string | JsonLdNode;
+	potentialAction?: JsonLdNode | JsonLdValue[];
+	subjectOf?: JsonLdNode | JsonLdValue[];
+	graph?: JsonLdNode[];
+	data?: JsonLdNode;
+	scriptKey?: string;
+	scriptId?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	enabled: true,
+	context: "https://schema.org",
+	type: "Brand",
+	data: () => ({}),
+});
+
+const instanceId = useId();
+const schema = computed<JsonLdNode | null>(() => {
+	if (!props.enabled) return null;
+
+	const record: JsonLdNode = {
+		...props.data,
+		"@context": props.context,
+		"@type": props.type,
+		...compactJsonLd({
+			"@id": props.id,
+			name: props.name,
+			alternateName: props.alternateName,
+			additionalType: props.additionalType,
+			description: props.description,
+			disambiguatingDescription: props.disambiguatingDescription,
+			url: props.url,
+			logo: props.logo,
+			image: props.image,
+			sameAs: props.sameAs,
+			identifier: props.identifier,
+			slogan: props.slogan,
+			owner: props.owner,
+			aggregateRating: props.aggregateRating,
+			review: props.review,
+			mainEntityOfPage: props.mainEntityOfPage,
+			potentialAction: props.potentialAction,
+			subjectOf: props.subjectOf,
+		}),
+	};
+
+	return wrapJsonLdGraph(record, props.graph);
+});
+
+useJsonLd(schema, {
+	key: computed(() => props.scriptKey ?? `seo-brand-info-${instanceId}`),
+	id: computed(() => props.scriptId),
+});
+</script>
+
+<template />

package/app/components/seo/ContentNoIndex.vue

@@ -0,0 +1,35 @@
+<template>
+	<div data-nosnippet>
+		<ClientOnly>
+			<slot />
+			<template #placeholder>
+				<div
+					:style="{ height: fallbackHeight }"
+					:class="['no-index-placeholder', placeholderClass]"
+				>
+					<slot name="placeholder" />
+				</div>
+			</template>
+		</ClientOnly>
+	</div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+	fallbackHeight?: string;
+	placeholderClass?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+	fallbackHeight: "auto",
+	placeholderClass: "",
+});
+</script>
+
+<style scoped>
+.no-index-placeholder {
+	opacity: 0;
+	pointer-events: none;
+	user-select: none;
+}
+</style>

package/app/components/seo/NoIndex.vue

@@ -0,0 +1,22 @@
+<template>
+	<span v-if="false" aria-hidden="true" />
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+	statusCode?: number;
+}>();
+
+const is4xx = computed(
+	() =>
+		props.statusCode !== undefined &&
+		props.statusCode >= 400 &&
+		props.statusCode < 500,
+);
+
+if (is4xx.value) {
+	useSeoMeta({
+		robots: "noindex, nofollow",
+	});
+}
+</script>