@mundogamernetwork/shared-ui 1.1.30 → 1.1.32

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mundogamernetwork/shared-ui",
-  "version": "1.1.30",
+  "version": "1.1.32",
   "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()
@@ -66,19 +66,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">
@@ -522,10 +567,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 ───────────────────────────────────────────────────────