@mundogamernetwork/shared-ui 1.1.20 → 1.1.22

package/components/ui/MgAppInstallBanner.vue

@@ -1,10 +1,23 @@
 <script setup lang="ts">
+// Optional props — allow the consuming layout to pass config directly
+// instead of relying on the store guessing the right runtimeConfig key.
+const props = withDefaults(defineProps<{
+	apiBaseUrl?: string;
+	platformId?: number | string;
+}>(), {
+	apiBaseUrl: undefined,
+	platformId: undefined,
+});
+
 const colorMode = useColorMode();
 const store = useAppInstallBannerStore();
 const locale = useNuxtApp().$i18n.locale;
 
 onMounted(async () => {
-	await store.fetchBanner();
+	await store.fetchBanner(
+		props.apiBaseUrl,
+		props.platformId !== undefined ? Number(props.platformId) : undefined,
+	);
 });
 
 const banner = computed(() => store.banner);

package/components/ui/MgCampaignBannerCarousel.vue

@@ -15,10 +15,10 @@ const isMobile = ref(false);
 const currentIndex = ref(0);
 let timer: ReturnType<typeof setInterval> | null = null;
 
-const { data: banners } = await useAsyncData(
+const { data: banners, pending } = await useAsyncData(
 	`mg-campaign-banners-${props.platform}-${props.page}-${locale.value}`,
 	() => fetchCampaignBanners(props.platform, props.page, locale.value),
-	{ default: () => [], lazy: true, server: false },
+	{ default: () => [], lazy: true },
 );
 
 const hasBanners = computed(() => (banners.value?.length ?? 0) > 0);
@@ -67,7 +67,9 @@ onUnmounted(() => {
 </script>
 
 <template>
-	<div v-if="hasBanners" class="mg-campaign-banner-carousel mb-4">
+	<div v-if="pending" class="mg-campaign-banner-skeleton mb-4" aria-hidden="true" />
+
+	<div v-else-if="hasBanners" class="mg-campaign-banner-carousel mb-4">
 		<div
 			class="mg-campaign-banner-slide"
 			role="button"
@@ -96,6 +98,18 @@ onUnmounted(() => {
 </template>
 
 <style lang="scss" scoped>
+@keyframes mg-skeleton-loading {
+	0%   { background-color: rgba(255, 255, 255, 0.06); }
+	100% { background-color: rgba(221, 221, 221, 0.18); }
+}
+
+.mg-campaign-banner-skeleton {
+	width: 100%;
+	aspect-ratio: 4 / 1;
+	min-height: 120px;
+	animation: mg-skeleton-loading 0.8s linear infinite alternate;
+}
+
 .mg-campaign-banner-carousel {
 	position: relative;
 	width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.1.20",
+  "version": "1.1.22",
   "description": "Mundo Gamer Network - Shared UI Layer (Nuxt 3)",
   "type": "module",
   "main": "./nuxt.config.ts",

package/pages/presskit/[slug].vue

@@ -92,14 +92,25 @@ useHead(() => ({
 
 		<template v-else>
 			<!-- CAPA / COVER -->
-			<header class="kit-cover">
-				<img v-if="kit.hero_image_url" class="kit-cover-art" :src="kit.hero_image_url" :alt="kit.name" />
+			<header class="kit-cover" :style="kit.hero_image_url ? { backgroundImage: `url(${kit.hero_image_url})` } : {}">
 				<div class="kit-cover-inner">
-					<img v-if="kit.cover_image_url" class="kit-cover-poster" :src="kit.cover_image_url" :alt="kit.name" />
+					<img
+						v-if="kit.cover_image_url"
+						class="kit-cover-poster"
+						:src="kit.cover_image_url"
+						:alt="kit.name"
+						@error="(e: any) => e.target.style.display = 'none'"
+					/>
 					<div class="kit-cover-text">
 						<span v-if="kit.release_status" class="kit-eyebrow">{{ String(kit.release_status).replace(/_/g, ' ') }}</span>
-						<img v-if="kit.logo_url" class="kit-cover-logo-img" :src="kit.logo_url" :alt="kit.name" />
-						<h1 v-else>{{ kit.name }}</h1>
+						<img
+							v-if="kit.logo_url"
+							class="kit-cover-logo-img"
+							:src="kit.logo_url"
+							:alt="kit.name"
+							@error="(e: any) => { e.target.style.display = 'none'; e.target.nextElementSibling.style.display = 'block'; }"
+						/>
+						<h1 :style="kit.logo_url ? { display: 'none' } : {}">{{ kit.name }}</h1>
 						<p v-if="kit.tagline" class="kit-tagline">{{ kit.tagline }}</p>
 						<p v-if="kit.developer" class="kit-kicker">{{ kit.developer }}</p>
 						<div class="kit-actions">
@@ -256,14 +267,13 @@ useHead(() => ({
 .kit-state { display: flex; align-items: center; justify-content: center; min-height: 60vh; color: var(--kit-muted); flex-direction: column; gap: 8px; }
 .kit-wrap { max-width: var(--kit-maxw); margin: 0 auto; padding: 0 24px; }
 
-.kit-cover { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; border-bottom: 1px solid var(--kit-line); background: linear-gradient(135deg, #161b2a, #0f1320 55%, #1d1530); }
-.kit-cover-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .5; }
+.kit-cover { position: relative; min-height: 480px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; border-bottom: 1px solid var(--kit-line); background: linear-gradient(135deg, #161b2a, #0f1320 55%, #1d1530) center/cover; }
 .kit-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, transparent, var(--kit-bg) 95%); }
 .kit-cover-inner { position: relative; z-index: 2; padding: 60px 24px; display: flex; align-items: center; justify-content: center; gap: 44px; width: 100%; max-width: var(--kit-maxw); }
 .kit-cover-poster { width: 240px; flex-shrink: 0; aspect-ratio: 2/3; object-fit: cover; border: 1px solid rgba(255,255,255,.15); box-shadow: 0 24px 70px rgba(0,0,0,.65); background: var(--kit-surface-2); }
 .kit-cover-text { text-align: left; max-width: 560px; }
 .kit-cover-text h1 { font-family: 'Rajdhani', sans-serif; font-size: 72px; font-weight: 700; line-height: .95; }
-.kit-cover-logo-img { max-height: 150px; }
+.kit-cover-logo-img { display: block; max-height: 150px; margin-bottom: 12px; }
 .kit-eyebrow { display: inline-block; background: var(--kit-accent); color: var(--kit-accent-ink); font-family: 'Rajdhani'; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; padding: 5px 14px; margin-bottom: 18px; }
 .kit-tagline { font-size: 20px; color: #dce0e8; margin-top: 14px; }
 .kit-kicker { margin-top: 8px; font-family: 'Rajdhani'; letter-spacing: 4px; text-transform: uppercase; font-size: 13px; color: var(--kit-accent); font-weight: 600; }

package/stores/appInstallBanner.ts

@@ -72,26 +72,28 @@ export const useAppInstallBannerStore = defineStore("app-install-banner-store",
 	}),
 
 	actions: {
-		async fetchBanner() {
+		async fetchBanner(overrideBaseUrl?: string, overridePlatformId?: number) {
 			if (this.loaded) return;
 
 			const runtimeConfig = useRuntimeConfig();
 			const cfg = runtimeConfig.public;
-			// Support both shared-ui namespace (mgSharedUi.networkBaseUrl / mgSharedUi.systemId)
-			// and the per-front flat keys used by fronts that don't go through the full mgSharedUi config
-			// (networkBaseURL / platformId).
+			// Priority: explicit props from layout > shared-ui namespace > flat runtimeConfig keys > build-time env vars
 			const networkBaseUrl =
+				overrideBaseUrl ||
 				cfg.mgSharedUi?.networkBaseUrl ||
 				cfg.networkBaseURL ||
 				cfg.networkBaseUrl ||
 				cfg.apiBaseURL ||
-				import.meta.env.VITE_BASE_URL_NETWORK;
-			const platformId = Number(
-				cfg.mgSharedUi?.systemId ||
-				cfg.platformId ||
-				cfg.systemId ||
-				import.meta.env.VITE_SYSTEM_ID,
-			);
+				(import.meta.env.VITE_BASE_URL_NETWORK as string) ||
+				(import.meta.env.VITE_API_BASE_URL as string);
+			const platformId =
+				overridePlatformId ||
+				Number(
+					cfg.mgSharedUi?.systemId ||
+					cfg.platformId ||
+					cfg.systemId ||
+					import.meta.env.VITE_SYSTEM_ID,
+				);
 
 			if (!networkBaseUrl || !platformId) {
 				this.loaded = true;