@mundogamernetwork/shared-ui 1.8.19 → 1.8.22

package/assets/kit/kit-base.css

@@ -342,6 +342,7 @@ body:has(.kit-press) {
 }
 .kit-shot {
 	display: block;
+	position: relative;
 	aspect-ratio: 16 / 9;
 	overflow: hidden;
 	background: var(--kit-surface, #14171d);
@@ -358,6 +359,63 @@ body:has(.kit-press) {
 }
 .kit-shot:hover img { transform: scale(1.03); }
 
+/* Animated GIFs take the whole row at their natural height — the 16/9 crop of
+   the thumbnail grid turns a gameplay loop into an unreadable sliver. Spanning
+   `1 / -1` (not `span 2`) keeps it safe at any column count, including the
+   single-column mobile grid. */
+.kit-shot--wide {
+	grid-column: 1 / -1;
+	aspect-ratio: auto;
+}
+.kit-shot--wide img {
+	height: auto;
+	max-height: 520px;
+	object-fit: contain;
+}
+.kit-shot--wide:hover img { transform: none; }
+.kit-shot__tag {
+	position: absolute;
+	top: 8px;
+	left: 8px;
+	padding: 2px 7px;
+	background: var(--kit-accent, #FDB215);
+	color: var(--kit-accent-ink, #13161C);
+	font-size: 0.6rem;
+	font-weight: 700;
+	letter-spacing: 1px;
+	line-height: 1.6;
+	pointer-events: none;
+}
+
+/* Steam store widget — Steam's embed has a fixed internal layout that stops
+   reflowing below ~466px, so it can't just be given a narrower box. */
+.kit-steam {
+	max-width: 646px;
+	overflow-x: auto;
+	-webkit-overflow-scrolling: touch;
+}
+.kit-steam__frame {
+	display: block;
+	width: 100%;
+	min-width: 466px;
+	height: 190px;
+	border: 1px solid var(--kit-line, #252a34);
+	background: var(--kit-surface, #14171d);
+}
+/* Phone widths: scale the whole embed down instead of clipping it. The wrapper
+   height is the scaled height, otherwise the transform leaves a gap under it. */
+@media (max-width: 500px) {
+	.kit-steam {
+		overflow: hidden;
+		height: 130px;
+	}
+	.kit-steam__frame {
+		width: 466px;
+		transform: scale(0.68);
+		transform-origin: 0 0;
+	}
+}
+
 /* Brand / logo assets */
 .kit-logos {
 	display: flex;

package/components/keys/KeyCampaignDashboardCard.vue

@@ -10,6 +10,8 @@ const props = defineProps<{
 		cover_focal_x?: number | null;
 		cover_focal_y?: number | null;
 		game_cover?: string | null;
+		game?: { url_cover_src?: string | null; genres?: Array<{ id?: number; name?: string }> } | null;
+		game_genres?: string[];
 		available_count: number;
 		is_exclusive?: boolean;
 		is_tier_locked?: boolean;
@@ -28,6 +30,17 @@ const props = defineProps<{
 	baseRoute?: string;
 }>();
 
+// Accepts either the normalised game_genres (campaignService) or the raw
+// game.genres straight off the API payload.
+const cardGenres = computed(() => {
+	const c = props.card as { game_genres?: string[]; game?: { genres?: Array<{ name?: string }> } | null };
+	const names = c.game_genres?.length
+		? c.game_genres
+		: (c.game?.genres || []).map((g) => g.name);
+
+	return names.filter(Boolean).slice(0, 2).join(" • ");
+});
+
 const { $i18n } = useNuxtApp();
 const locale = $i18n.locale;
 
@@ -195,6 +208,7 @@ const detailRoute = computed(() =>
 				</span>
 			</div>
 			<p class="kc-card__name">{{ card.name }}</p>
+			<p v-if="cardGenres" class="kc-card__genres">{{ cardGenres }}</p>
 
 			<div class="kc-card__buttons">
 				<!-- Not accessible -->
@@ -404,6 +418,15 @@ const detailRoute = computed(() =>
 		line-height: 1.3;
 	}
 
+	&__genres {
+		font-size: 11px;
+		color: var(--secondary-info-fg, #9a9a9a);
+		margin: 2px 0 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
 	&__buttons {
 		display: flex;
 		flex-wrap: wrap;

package/components/keys/KeyCampaignsCarousel.vue

@@ -15,6 +15,14 @@ const locale = useNuxtApp().$i18n.locale
 const items = ref<any[]>([])
 const loading = ref(true)
 
+// Up to two genres, matching the campaign listing card.
+const genresOf = (item: any) =>
+	(item.game?.genres || [])
+		.map((g: any) => g.name)
+		.filter(Boolean)
+		.slice(0, 2)
+		.join(" • ")
+
 const detailRoute = (item: any) =>
 	props.publicMode
 		? `/${locale.value}/${props.baseRoute ?? 'key-campaigns'}/${item.slug}`
@@ -73,6 +81,7 @@ onMounted(async () => {
 				</div>
 				<div class="kc-carousel__info">
 					<div class="kc-carousel__name">{{ item.name }}</div>
+					<div v-if="genresOf(item)" class="kc-carousel__genres">{{ genresOf(item) }}</div>
 					<div class="kc-carousel__avail">
 						{{ item.available_count ?? 0 }}/{{ item.total_count ?? item.quantity ?? "?" }}
 						{{ $t("keys.campaigns.available") }}
@@ -185,6 +194,14 @@ onMounted(async () => {
 		white-space: nowrap;
 	}
 
+	&__genres {
+		font-size: 11px;
+		color: var(--secondary-info-fg);
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
 	&__avail {
 		font-size: 11px;
 		color: var(--secondary-info-fg);

package/locales/de.json

@@ -240,7 +240,7 @@
       "link": "Content link",
       "description": "Description (optional)",
       "date": "Publication date",
-      "type": "Content type",
+      "type": "Inhaltstyp (einer pro Link)",
       "type_stream": "Live stream",
       "type_video": "Video",
       "type_article": "Article / Review",

package/locales/en.json

@@ -240,7 +240,7 @@
       "link": "Content link",
       "description": "Description (optional)",
       "date": "Publication date",
-      "type": "Content type",
+      "type": "Content type (one per link)",
       "type_stream": "Live stream",
       "type_video": "Video",
       "type_article": "Article / Review",

package/locales/es.json

@@ -240,7 +240,7 @@
       "link": "Enlace de acceso",
       "description": "Descripción",
       "date": "Fecha",
-      "type": "Tipo",
+      "type": "Tipo de contenido (uno por enlace)",
       "type_stream": "Stream",
       "type_video": "Vídeo",
       "type_article": "Artículo",

package/locales/pt-BR.json

@@ -240,7 +240,7 @@
       "link": "Content link",
       "description": "Description (optional)",
       "date": "Publication date",
-      "type": "Content type",
+      "type": "Tipo de conteúdo (um por link)",
       "type_stream": "Live stream",
       "type_video": "Video",
       "type_article": "Article / Review",

package/locales/ro.json

@@ -240,7 +240,7 @@
       "link": "Content link",
       "description": "Description (optional)",
       "date": "Publication date",
-      "type": "Content type",
+      "type": "Tipul conținutului (unul per link)",
       "type_stream": "Live stream",
       "type_video": "Video",
       "type_article": "Article / Review",

package/package.json

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

package/pages/key-campaigns/[slug].vue

@@ -691,6 +691,12 @@ onMounted(async () => {
 			<div v-else class="content-key">
 				<div class="content-key-header">
 					<h4>{{ campaign?.name }}</h4>
+					<!-- Genres come with the campaign payload; the tag list further
+					     down needs the separate game-details request, which only
+					     runs when the campaign is linked to a game slug. -->
+					<div v-if="campaign?.game_genres?.length" class="campaign-genres">
+						{{ campaign.game_genres.slice(0, 3).join(" • ") }}
+					</div>
 
 					<div class="restriction-badges" v-if="restrictionBadges.length">
 						<div class="restriction-badge" v-for="(b, i) in restrictionBadges" :key="i">
@@ -1200,6 +1206,14 @@ onMounted(async () => {
 
 			h4 { color: var(--card-article-title); font-size: 24px; font-weight: 700; }
 
+			.campaign-genres {
+				// The header's 18px gap is meant to separate blocks; this line
+				// belongs to the title above it.
+				margin-top: -12px;
+				font-size: 13px;
+				color: var(--secondary-info-fg);
+			}
+
 			.restriction-badges {
 				display: flex;
 				flex-wrap: wrap;

package/pages/key-campaigns/index.vue

@@ -204,6 +204,7 @@
 
 									<div class="text">
 										<div class="card-name">{{ card.gameName || card.text }}</div>
+										<div v-if="card.genres.length" class="card-genre-row">{{ card.genres.join(" • ") }}</div>
 										<div v-if="card.studioName || card.regions.length" class="card-studio-row">
 											<span v-if="card.studioName" class="card-studio-name">{{ card.studioName }}</span>
 											<span v-if="card.studioName && card.regions.length" class="card-studio-sep">·</span>
@@ -647,6 +648,7 @@ async function loadCampaigns(page = 1) {
 				max_keys_for_user: item.max_keys_for_user || 1,
 				platforms: (item.platforms || []).map((p: any) => p.name),
 				gameName: item.game?.name || null,
+				genres: (item.game?.genres || []).map((g: any) => g.name).filter(Boolean).slice(0, 2),
 				studioName: item.company?.name || null,
 				regions: (item.regions || []).map((r: any) => r.name).filter(Boolean),
 				userRequestSlug: null,
@@ -1286,6 +1288,15 @@ onUnmounted(() => {
 							color: var(--title-fg);
 						}
 
+						.card-genre-row {
+							font-size: 12px;
+							color: var(--secondary-info-fg);
+							font-weight: 400;
+							overflow: hidden;
+							text-overflow: ellipsis;
+							white-space: nowrap;
+						}
+
 						.card-studio-row {
 							font-size: 12px;
 							color: var(--secondary-info-fg);

package/pages/key-campaigns/key-materials.vue

@@ -288,10 +288,12 @@ async function loadDeadline() {
 	} catch { /* deadline is informational only, ignore failures */ }
 }
 
+// One type per submission: each form is a single piece of content, so picking
+// another type replaces the current one instead of stacking. Clicking the
+// selected one clears it.
 function toggleType(formIndex: number, type: ContentType) {
-	const currentTypes = forms.value[formIndex].content_types
-	const idx = currentTypes.indexOf(type)
-	if (idx === -1) { currentTypes.push(type) } else { currentTypes.splice(idx, 1) }
+	const form = forms.value[formIndex]
+	form.content_types = form.content_types.includes(type) ? [] : [type]
 }
 
 function toggleBox(boxNumber: number) {

package/pages/key-campaigns/redeem-key-approved.vue

@@ -161,6 +161,17 @@ function formatEmbargo(dateString: string | null | undefined): string {
 // visit to this page. Creators routinely request a key days before release, so
 // the acknowledgment they gave once is not enough — the deadline has to be
 // where they come back to fetch the code.
+const guidelineIsLink = computed(() => {
+	const v = (requestData.value?.key?.review_guideline || "").trim()
+	return v.startsWith("http://") || v.startsWith("https://")
+})
+
+const prContact = computed(() =>
+	[requestData.value?.key?.pr_contact_name, requestData.value?.key?.pr_contact_email]
+		.filter(Boolean)
+		.join(" · "),
+)
+
 const embargoDate = computed<string | null>(() => requestData.value?.key?.embargo_date ?? null)
 const embargoIsActive = computed(() => isEmbargoActive(embargoDate.value))
 const embargoMoment = computed(() => formatEmbargo(embargoDate.value))
@@ -330,7 +341,7 @@ function goBack() {
 							</div>
 						</div>
 
-						<div class="resources" v-if="requestData?.key?.press_kit_link || requestData?.key?.review_guideline">
+						<div class="resources" v-if="requestData?.key?.press_kit_link || requestData?.key?.review_guideline || prContact">
 							<div class="resources-title">{{ $t("keys.campaigns.resources_title") }}</div>
 
 							<a
@@ -346,7 +357,29 @@ function goBack() {
 
 							<div v-if="requestData?.key?.review_guideline" class="resource-item">
 								<div class="resource-label">{{ $t("keys.campaigns.review_guideline") }}</div>
-								<div class="resource-text">{{ requestData.key.review_guideline }}</div>
+								<!-- The admin field accepts free text or a link to a
+								     document; render a link as a link rather than as a
+								     URL the reader has to copy by hand. -->
+								<div class="resource-text">
+									<a
+										v-if="guidelineIsLink"
+										:href="requestData.key.review_guideline"
+										target="_blank"
+										rel="noopener"
+									>{{ requestData.key.review_guideline }}</a>
+									<template v-else>{{ requestData.key.review_guideline }}</template>
+								</div>
+							</div>
+
+							<!-- Who to ask when something is wrong with the key or the
+							     coverage terms. The data was already on the campaign;
+							     this screen just never showed it. -->
+							<div v-if="prContact" class="resource-item">
+								<div class="resource-label">{{ $t("keys.campaigns.pr_contact") }}</div>
+								<div class="resource-text">
+									<a v-if="requestData?.key?.pr_contact_email" :href="`mailto:${requestData.key.pr_contact_email}`">{{ prContact }}</a>
+									<template v-else>{{ prContact }}</template>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -595,8 +628,36 @@ function goBack() {
 			gap: 8px;
 			font-size: 13px;
 			cursor: pointer;
+			// Inherited nothing usable and rendered near-black on the dark
+			// background — the one thing the user has to read before agreeing
+			// to it. Same token the warning above uses, which is legible in
+			// both themes.
+			color: var(--text-secondary, #ccc);
 
-			input { margin-top: 2px; }
+			input {
+				margin-top: 2px;
+				flex-shrink: 0;
+				accent-color: var(--danger, #e53935);
+			}
+		}
+
+		// .btn carries no local styling here (only .code-box button does), so
+		// the confirm button came out unstyled and unreadable.
+		.btn {
+			align-self: flex-start;
+			padding: 10px 18px;
+			border: none;
+			cursor: pointer;
+			font-size: 14px;
+			font-weight: 600;
+			background-color: var(--key-accent, var(--primary, #D297FF));
+			color: var(--key-accent-ink, #13161C);
+
+			&.disabled,
+			&:disabled {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
 		}
 	}
 

package/pages/key-campaigns/redeem-key.vue

@@ -532,6 +532,16 @@ onUnmounted(() => {
 			font-size: 13px;
 			line-height: 1.4;
 			cursor: pointer;
+			// Same omission as the reveal screen: no colour meant the text the
+			// user has to agree to inherited whatever the surrounding card left
+			// behind, and came out unreadable on dark.
+			color: var(--text-secondary, #ccc);
+
+			input {
+				flex-shrink: 0;
+				margin-top: 2px;
+				accent-color: var(--key-accent, var(--primary, #D297FF));
+			}
 		}
 	}
 

package/pages/presskit/game/[slug].vue

@@ -83,6 +83,29 @@ const hasEcosystem = computed(() => showcases.value.length || kit.value?.venture
 const screenshots = computed(() => assets.value.filter((a: any) => ['screenshot', 'artwork', 'gif'].includes(a.type)));
 const brandAssets = computed(() => assets.value.filter((a: any) => ['logo', 'document'].includes(a.type)));
 
+// Animated assets get the full gallery row at their natural height — cropping a
+// gameplay loop into the 16/9 thumbnail grid makes it unreadable. The type is
+// what the uploader sets; the extension check catches assets imported before
+// the `gif` type existed.
+const isAnimatedAsset = (a: any) => a?.type === 'gif' || /\.gif(\?|#|$)/i.test(a?.url || '');
+// Never fall back to thumbnail_url for an animated asset: the thumbnail is a
+// still frame, so the GIF would silently stop animating.
+const shotSrc = (a: any) => (isAnimatedAsset(a) ? a.url : (a.thumbnail_url || a.url));
+
+// ── Steam store widget ──────────────────────────────────────────────────────
+// Derived from the steam_url the studio already filled in, so every published
+// kit with a Steam link gets the widget with no extra field to configure. The
+// iframe src is built from the parsed app id — never from raw user input.
+const steamAppId = computed(() => {
+	const explicit = kit.value?.steam_app_id;
+	if (explicit && /^\d+$/.test(String(explicit))) return String(explicit);
+	const match = String(kit.value?.steam_url || '').match(/\/app\/(\d+)/);
+	return match ? match[1] : '';
+});
+const steamWidgetUrl = computed(() => (steamAppId.value
+	? `https://store.steampowered.com/widget/${steamAppId.value}/`
+	: ''));
+
 const tpl = computed(() => kit.value?.theme || null);
 const layout = computed(() => kit.value?.layout || 'classic');
 const allowDownload = computed(() => kit.value?.allow_asset_download !== false);
@@ -213,6 +236,7 @@ const navSections = computed(() => {
 	const s: { id: string; label: string }[] = [];
 	s.push({ id: 'overview', label: 'kit.press.about' });
 	s.push({ id: 'factsheet', label: 'kit.press.fact_sheet' });
+	if (steamAppId.value) s.push({ id: 'steam', label: 'kit.press.steam_widget' });
 	if (screenshots.value.length || brandAssets.value.length) s.push({ id: 'media', label: 'kit.press.screenshots' });
 	if (videos.value.length) s.push({ id: 'trailers', label: 'kit.press.videos' });
 	if (articles.value.length) s.push({ id: 'articles', label: 'kit.press.articles' });
@@ -405,6 +429,22 @@ useHead(() => ({
 							<div class="kit-lead" v-html="kit.description" />
 						</section>
 
+						<section v-if="steamWidgetUrl" id="steam" class="kit-block">
+							<h2>{{ $t('kit.press.steam_widget') }}</h2>
+							<div class="kit-steam">
+								<iframe
+									class="kit-steam__frame"
+									:src="steamWidgetUrl"
+									:title="`Steam — ${kit.name}`"
+									frameborder="0"
+									scrolling="no"
+									loading="lazy"
+									referrerpolicy="no-referrer-when-downgrade"
+									sandbox="allow-scripts allow-popups allow-popups-to-escape-sandbox allow-same-origin"
+								/>
+							</div>
+						</section>
+
 						<section v-if="features.length" class="kit-block">
 							<h2>{{ $t('kit.press.features') }}</h2>
 							<div class="kit-features">
@@ -421,7 +461,18 @@ useHead(() => ({
 							<div v-if="screenshots.length">
 								<div class="kit-shead"><h2>{{ $t('kit.press.screenshots') }}</h2><a v-if="canDownload" class="kit-dl" @click="track('download')">{{ $t('kit.press.download_all') }}</a></div>
 								<div class="kit-gallery">
-									<a v-for="(s, i) in screenshots" :key="i" class="kit-shot" :href="s.url" target="_blank" rel="noopener"><img :src="s.thumbnail_url || s.url" :alt="s.title || ''" /></a>
+									<a
+										v-for="(s, i) in screenshots"
+										:key="i"
+										class="kit-shot"
+										:class="{ 'kit-shot--wide': isAnimatedAsset(s) }"
+										:href="s.url"
+										target="_blank"
+										rel="noopener"
+									>
+										<img :src="shotSrc(s)" :alt="s.title || ''" loading="lazy" />
+										<span v-if="isAnimatedAsset(s)" class="kit-shot__tag">GIF</span>
+									</a>
 								</div>
 							</div>
 							<div v-if="brandAssets.length" :class="{ 'kit-block-inner': screenshots.length }">

package/services/campaignService.ts

@@ -376,6 +376,9 @@ export const fetchCampaignBySlug = async (slug: string) => {
 		cover_focal_y: k.cover_focal_y ?? 0.5,
 		game_cover: k.game?.url_cover_src,
 		game_slug: k.game?.slug,
+		game_genres: ((k.game?.genres || []) as Array<{ name?: string }>)
+			.map((g) => g.name)
+			.filter(Boolean) as string[],
 		time_to_expire: k.time_to_expire,
 		request_status: k.request_user_status,
 		end: k.end_date,

package/plugins/seo-tag-priority.ts

@@ -1,67 +0,0 @@
-// Hoists the social/SEO tags to the top of <head> on every front that extends
-// this layer.
-//
-// Why this exists (measured in production 2026-08-02): unhead 2.x applies Capo
-// sorting by default, and its weight table (unhead/dist/shared/*.mjs) gives
-// sync <style> a weight of 60 while a generic <meta> gets the default 100 —
-// so *every* inline stylesheet is emitted before any og:*/twitter:* tag. With
-// Nuxt's `features.inlineStyles` on (its default) that meant ~545KB of inlined
-// CSS ahead of the OG tags, pushing them to byte 384.000-553.000 across all six
-// fronts. Link-preview scrapers (WhatsApp, Facebook, X, LinkedIn, Telegram)
-// truncate the HTML they fetch well before that and stop at </head>, so none of
-// them ever saw an og:image — only Discord, which reads the full document, did.
-//
-// `features.inlineStyles: false` in each app's nuxt.config.ts is the primary
-// fix; this plugin is the belt-and-braces so the problem cannot silently come
-// back if some future component or config re-introduces a large inline <style>.
-// Doing it here rather than per-page also covers the 100+ pages across the six
-// fronts that set their own og tags, plus every page added from now on.
-//
-// -5 sits above <style> (60), <link rel=stylesheet> (60) and <title> (10), but
-// still below <meta charset> (-20), <meta name=viewport> (-15) and the CSP meta
-// (-30), so charset stays inside the first 1024 bytes as the spec requires.
-const SEO_TAG_PRIORITY = -5;
-
-function isSeoTag(tag: { tag: string; props?: Record<string, any> }): boolean {
-	const props = tag.props || {};
-
-	if (tag.tag === "meta") {
-		const key = props.property ?? props.name;
-		return (
-			typeof key === "string"
-			&& (key.startsWith("og:") || key.startsWith("twitter:") || key === "description")
-		);
-	}
-
-	// The canonical rides along: it is cheap and some scrapers resolve the
-	// preview against it rather than against the requested URL.
-	return tag.tag === "link" && props.rel === "canonical";
-}
-
-export default defineNuxtPlugin({
-	name: "shared-ui-seo-tag-priority",
-	// Must run before any page's useHead/useSeoMeta entry is normalized.
-	enforce: "pre",
-	setup(nuxtApp) {
-		const head = injectHead(nuxtApp as any);
-		if (!head) return;
-
-		head.use({
-			key: "shared-ui-seo-tag-priority",
-			hooks: {
-				// `entries:normalize` is the correct seam: unhead computes each
-				// tag's weight (`t._w = tagWeight(head, t)`) immediately *after*
-				// this hook returns, and `tagWeight` short-circuits on a numeric
-				// `tagPriority`. Mutating in `tags:resolve` instead would be too
-				// late — the sort has already run by then.
-				"entries:normalize": ({ tags }: { tags: any[] }) => {
-					for (const tag of tags) {
-						// Never override an explicit priority set by a page.
-						if (tag.tagPriority !== undefined) continue;
-						if (isSeoTag(tag)) tag.tagPriority = SEO_TAG_PRIORITY;
-					}
-				},
-			},
-		});
-	},
-});