@mundogamernetwork/shared-ui 1.1.30 → 1.1.33

package/components/ui/MgCampaignBannerCarousel.vue

@@ -132,11 +132,13 @@ onUnmounted(() => {
 .mg-campaign-banner-indicators {
 	position: absolute;
 	bottom: 8px;
-	left: 50%;
-	transform: translateX(-50%);
+	left: 0;
+	right: 0;
 	display: flex;
+	justify-content: center;
 	gap: 6px;
 	align-items: center;
+	pointer-events: none;
 
 	button {
 		width: 8px;
@@ -145,6 +147,7 @@ onUnmounted(() => {
 		border: 0;
 		background: rgba(255, 255, 255, 0.5);
 		cursor: pointer;
+		pointer-events: all;
 		transition: background 0.2s;
 
 		&.active {

package/package.json

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

package/pages/presskit/[slug].vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { fetchPublicPressKit, trackPressKitEvent } from '~/services/pressKitService'
 
-definePageMeta({ ssr: false })
+definePageMeta({ ssr: false, layout: 'blank' })
 
 const route = useRoute()
 const { t } = useI18n()
@@ -51,6 +51,14 @@ const hasEcosystem = computed(() =>
 	kit.value?.community_url
 )
 
+// Sanitize community URL: legacy data may store /games/[slug] (old route).
+// The canonical community game route is /game/[slug].
+const communityUrl = computed(() =>
+	kit.value?.community_url
+		? kit.value.community_url.replace(/\/games\//, '/game/')
+		: null
+)
+
 onMounted(async () => {
 	try {
 		const { data } = await fetchPublicPressKit(slug)
@@ -66,19 +74,64 @@ onMounted(async () => {
 	}
 })
 
+const canonicalUrl = computed(() =>
+	typeof window !== 'undefined' ? window.location.href : ''
+)
+const ogDescription = computed(() =>
+	kit.value?.tagline ?? kit.value?.description?.substring(0, 160) ?? ''
+)
+const ogImage = computed(() =>
+	kit.value?.cover_image_url ?? kit.value?.hero_image_url ?? ''
+)
+
 useHead(() => ({
-	title: kit.value?.name ?? t('press_kit.loading'),
+	title: kit.value?.name
+		? `${kit.value.name} — Press Kit`
+		: t('press_kit.loading'),
 	meta: [
-		{ name: 'description', content: kit.value?.tagline ?? kit.value?.description?.substring(0, 160) ?? '' },
+		// Standard
+		{ name: 'description', content: ogDescription.value },
+		{ name: 'robots', content: 'index, follow' },
+		// Open Graph
+		{ property: 'og:type', content: 'website' },
+		{ property: 'og:site_name', content: 'Mundo Gamer Agency' },
 		{ property: 'og:title', content: kit.value?.name ?? '' },
-		{ property: 'og:description', content: kit.value?.tagline ?? '' },
-		{ property: 'og:image', content: kit.value?.cover_image_url ?? kit.value?.hero_image_url ?? '' },
+		{ property: 'og:description', content: ogDescription.value },
+		{ property: 'og:image', content: ogImage.value },
+		{ property: 'og:image:width', content: '1200' },
+		{ property: 'og:image:height', content: '630' },
+		{ property: 'og:url', content: canonicalUrl.value },
+		// Twitter / X Card
+		{ name: 'twitter:card', content: 'summary_large_image' },
+		{ name: 'twitter:title', content: kit.value?.name ?? '' },
+		{ name: 'twitter:description', content: ogDescription.value },
+		{ name: 'twitter:image', content: ogImage.value },
 	],
+	link: [
+		{ rel: 'canonical', href: canonicalUrl.value },
+	],
+	script: kit.value ? [
+		{
+			type: 'application/ld+json',
+			innerHTML: JSON.stringify({
+				'@context': 'https://schema.org',
+				'@type': 'VideoGame',
+				name: kit.value.name,
+				description: ogDescription.value,
+				image: ogImage.value,
+				...(kit.value.developer ? { author: { '@type': 'Organization', name: kit.value.developer } } : {}),
+				...(kit.value.publisher ? { publisher: { '@type': 'Organization', name: kit.value.publisher } } : {}),
+				...(kit.value.release_date ? { datePublished: kit.value.release_date } : {}),
+				...(kit.value.steam_url ? { sameAs: [kit.value.steam_url] } : {}),
+				...(kit.value.website_url ? { url: kit.value.website_url } : {}),
+			}),
+		},
+	] : [],
 }))
 </script>
 
 <template>
-	<div class="pk-page">
+	<div class="pk-page" :data-theme="kit?.theme || 'default'">
 
 		<!-- Loading -->
 		<div v-if="loading" class="pk-loading">
@@ -189,7 +242,7 @@ useHead(() => ({
 						</div>
 
 						<!-- Links -->
-						<div class="pk-card" v-if="kit.website_url || kit.steam_url || kit.epic_url || kit.ventures_url || kit.community_url">
+						<div class="pk-card" v-if="kit.website_url || kit.steam_url || kit.epic_url || kit.ventures_url || communityUrl">
 							<h2 class="pk-card__title">{{ $t('press_kit.available_on') }}</h2>
 							<div class="pk-links">
 								<a v-if="kit.website_url" :href="kit.website_url" target="_blank" rel="noopener" class="pk-link" @click="trackPressKitEvent(slug, { event_type: 'click', metadata: { target: 'website' } })">
@@ -204,7 +257,7 @@ useHead(() => ({
 								<a v-if="kit.ventures_url" :href="kit.ventures_url" target="_blank" rel="noopener" class="pk-link">
 									Ventures
 								</a>
-								<a v-if="kit.community_url" :href="kit.community_url" target="_blank" rel="noopener" class="pk-link" @click="trackPressKitEvent(slug, { event_type: 'click', metadata: { target: 'community' } })">
+								<a v-if="communityUrl" :href="communityUrl" target="_blank" rel="noopener" class="pk-link" @click="trackPressKitEvent(slug, { event_type: 'click', metadata: { target: 'community' } })">
 									{{ $t('press_kit.follow_community') }}
 								</a>
 							</div>
@@ -460,10 +513,10 @@ useHead(() => ({
 								</a>
 
 								<!-- Community follow -->
-								<div v-if="kit.community_url" class="pk-eco-card">
+								<div v-if="communityUrl" class="pk-eco-card">
 									<p class="pk-eco-card__text">{{ $t('press_kit.follow_community_desc', { name: kit.name }) }}</p>
 									<a
-										:href="kit.community_url"
+										:href="communityUrl"
 										target="_blank"
 										rel="noopener"
 										class="pk-btn pk-btn--sm"
@@ -495,7 +548,7 @@ useHead(() => ({
 			<!-- ═══ Brand footer ════════════════════════════════════════════ -->
 			<p class="pk-brand-footer">
 				{{ $t('press_kit.made_with') }} {{ $t('press_kit.brand_sub') }} —
-				<a href="https://agency.mundogamer.network/dashboard/press-kit" target="_blank" rel="noopener">{{ $t('press_kit.create_yours_cta') }}</a>
+				<a href="https://agency.mundogamer.network/press" target="_blank" rel="noopener">{{ $t('press_kit.create_yours_cta') }}</a>
 			</p>
 
 		</template>
@@ -522,10 +575,83 @@ useHead(() => ({
 </template>
 
 <style lang="scss" scoped>
+// ── Self-contained theme system ────────────────────────────────────
+// All tokens are declared directly on .pk-page so the press kit is
+// always correctly styled regardless of the host platform's
+// light/dark mode. Studios choose a theme in the editor; the value
+// is stored in kit.theme and applied via data-theme attribute.
+//
+// Available themes:
+//   default · light · blade · aurora · ember · nova
+// ──────────────────────────────────────────────────────────────────
 .pk-page {
+	// ── default (dark gold) ──────────────────────────────────────
+	--background:        #0e1015;
+	--card-background:   #191b20;
+	--divider:           #2a2d35;
+	--text-primary:      #ffffff;
+	--text-secondary:    #8a8f9e;
+	--primary:           #fcb216;
+	--primary-contrast:  #13161c;
+
 	min-height: 100vh;
-	background: var(--background, #0e1015);
-	color: var(--text-primary, #fff);
+	background: var(--background);
+	color: var(--text-primary);
+
+	// ── light (white + slate) ────────────────────────────────────
+	&[data-theme="light"] {
+		--background:        #f5f6f8;
+		--card-background:   #ffffff;
+		--divider:           #e2e5ea;
+		--text-primary:      #111318;
+		--text-secondary:    #5a6070;
+		--primary:           #fcb216;
+		--primary-contrast:  #ffffff;
+	}
+
+	// ── blade (dark navy + electric blue) ───────────────────────
+	&[data-theme="blade"] {
+		--background:        #0d1b2a;
+		--card-background:   #112236;
+		--divider:           #1e3a52;
+		--text-primary:      #e0f0ff;
+		--text-secondary:    #7aabce;
+		--primary:           #3a86ff;
+		--primary-contrast:  #ffffff;
+	}
+
+	// ── aurora (deep purple + neon green) ───────────────────────
+	&[data-theme="aurora"] {
+		--background:        #0f0c1a;
+		--card-background:   #1a1428;
+		--divider:           #2d2040;
+		--text-primary:      #f0ecff;
+		--text-secondary:    #9d87c4;
+		--primary:           #a855f7;
+		--primary-contrast:  #ffffff;
+	}
+
+	// ── ember (deep brown + fire orange) ────────────────────────
+	&[data-theme="ember"] {
+		--background:        #1a0900;
+		--card-background:   #251100;
+		--divider:           #3d1f00;
+		--text-primary:      #ffedd5;
+		--text-secondary:    #c4875a;
+		--primary:           #f97316;
+		--primary-contrast:  #ffffff;
+	}
+
+	// ── nova (true black + gold) ─────────────────────────────────
+	&[data-theme="nova"] {
+		--background:        #0d0d0d;
+		--card-background:   #161616;
+		--divider:           #2a2a2a;
+		--text-primary:      #fff8dc;
+		--text-secondary:    #a89060;
+		--primary:           #ffd700;
+		--primary-contrast:  #0d0d0d;
+	}
 }
 
 // ── Loading ───────────────────────────────────────────────────────