@xenterprises/nuxt-x-marketing 1.3.0 → 1.4.0

package/CHANGELOG.md

@@ -5,6 +5,36 @@ All notable changes to `@xenterprises/nuxt-x-marketing` are documented in this f
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.4.0] - 2026-08-02
+
+### Removed
+
+> **Released as a minor despite removing public components.** Semver would call
+> this a major. Sites on `^1.3.0` will therefore pick this up automatically —
+> if you import any `XMarkAffiliate*` component, pin to `1.3.0` or migrate to
+> the `XAF*` equivalents below before upgrading.
+
+- **Removed the `XMarkAffiliate*` component family** — `XMarkAffiliateDisclosure`,
+  `XMarkAffiliateProductCard`, `XMarkAffiliateProductGrid`, `XMarkAffiliateProductDetail`,
+  and `XMarkAffiliateComparisonTable` (1,462 lines).
+
+  They duplicated components `@xenterprises/nuxt-x-affiliate` already ships, without its
+  per-merchant tagging (`xAffiliateContent.merchants`), impression tracking, or
+  Product/Offer structured data — so a site using them shipped untagged outbound links
+  and no product schema.
+
+  Migrate to `<XAFDisclosure>`, `<XAFProductCard>`, `<XAFRelatedProducts>`,
+  `<XAFComparisonTable>`, and (for the detail page) `<XAFHero>` + `<XAFProsCons>` +
+  `<XAFVerdict>` + `<XAFSpecsTable>`. Affiliate sites should extend `nuxt-x-affiliate`
+  directly — it is now self-contained and ships the site chrome (header, hero, sections,
+  cards, footer) that previously required this layer alongside it.
+
+### Changed
+
+- **`app/pages/index.vue`** no longer showcases the removed affiliate components; the
+  section and its sample product data were dropped with them. Every other section of the
+  demo page is unchanged.
+
 ## [1.3.0] - 2026-07-24
 
 ### BREAKING

package/README.md

@@ -811,186 +811,14 @@ Chat widget trigger.
 
 ### Affiliate & Review Components
 
-For affiliate marketing, product review sites, and "best X" roundup posts.
-
-#### XMarkAffiliateDisclosure
-
-FTC/Amazon-required affiliate disclosure banner. Three variants for different placements.
-
-```vue
-<!-- Subtle bar (default) -->
-<XMarkAffiliateDisclosure />
-
-<!-- Full-width banner at top of page -->
-<XMarkAffiliateDisclosure variant="banner" :dismissible="true" />
-
-<!-- Inline inside blog post prose -->
-<XMarkAffiliateDisclosure variant="inline" />
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `text` | `String` | Amazon associate disclosure | Disclosure text |
-| `variant` | `String` | `'subtle'` | `subtle`, `banner`, `inline` |
-| `icon` | `String` | `'i-lucide-info'` | Icon name |
-| `dismissible` | `Boolean` | `false` | Show dismiss button |
-| `storageKey` | `String` | `'affiliate-disclosure-dismissed'` | localStorage key |
-
-#### XMarkAffiliateProductCard
-
-Product card with affiliate buy button, star rating, price, pros/cons. Three layout variants.
-
-```vue
-<XMarkAffiliateProductCard
-  :product="{
-    name: 'Sony WH-1000XM5',
-    image: '/products/sony-wh1000xm5.jpg',
-    price: '$279.99',
-    originalPrice: '$349.99',
-    rating: 4.8,
-    reviewCount: 12400,
-    pros: ['Best-in-class ANC', '30hr battery', 'Foldable design'],
-    cons: ['No IP rating', 'Expensive'],
-    affiliateUrl: 'https://amazon.com/dp/B09XS7JWHH',
-    affiliateTag: 'mysite-20',
-    badge: '#1 Pick',
-  }"
-  layout="card"
-  button-label="Check Price on Amazon"
-/>
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `product` | `Object` | sample product | Product data `{ name, image?, price?, originalPrice?, rating?, reviewCount?, pros?, cons?, affiliateUrl?, affiliateTag?, badge? }` |
-| `layout` | `String` | `'card'` | `card` (vertical), `row` (horizontal), `compact` (one-line) |
-| `showPros` | `Boolean` | `true` | Show pros list |
-| `showCons` | `Boolean` | `false` | Show cons list |
-| `showRating` | `Boolean` | `true` | Show star rating |
-| `showPrice` | `Boolean` | `true` | Show price |
-| `buttonLabel` | `String` | `'Check Price on Amazon'` | CTA button text |
-| `buttonIcon` | `String` | `'i-lucide-external-link'` | CTA button icon |
-| `disclosure` | `String` | `''` | Small disclosure text below button |
-
-#### XMarkAffiliateProductGrid
-
-Grid of product cards for "best X" roundup posts. Automatically injects rank badges.
-
-```vue
-<XMarkAffiliateProductGrid
-  :products="topHeadphones"
-  layout="grid"
-  :columns="3"
-  :show-ranking="true"
-  disclosure="This page contains affiliate links."
-  button-label="Check Price on Amazon"
-/>
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `products` | `Array` | `[]` | Array of product objects |
-| `layout` | `String` | `'grid'` | `grid` or `list` |
-| `columns` | `Number` | `3` | Grid columns: `2` or `3` |
-| `showRanking` | `Boolean` | `true` | Inject #1/#2/#3 badges on first 3 products |
-| `disclosure` | `String` | `''` | Disclosure shown once at top |
-| `buttonLabel` | `String` | `'Check Price on Amazon'` | CTA label for all cards |
-| `cardLayout` | `String` | `'card'` | Card layout variant |
-
-#### XMarkAffiliateProductDetail
-
-Full product review page layout — image gallery, editorial score, pros/cons table, specs, sticky buy box.
-
-```vue
-<XMarkAffiliateProductDetail
-  :product="{
-    name: 'Sony WH-1000XM5 Review',
-    images: ['/img/sony-1.jpg', '/img/sony-2.jpg'],
-    price: '$279.99',
-    originalPrice: '$349.99',
-    rating: 4.8,
-    reviewCount: 12400,
-    pros: ['Best-in-class ANC', '30hr battery'],
-    cons: ['No IP rating', 'Expensive'],
-    specs: { 'Driver Size': '30mm', 'Battery': '30 hours', 'Weight': '250g' },
-    description: 'The WH-1000XM5 sets the bar for noise-cancelling headphones.',
-    verdict: 'The best ANC headphones money can buy in 2024.',
-    affiliateUrl: 'https://amazon.com/dp/B09XS7JWHH',
-    affiliateTag: 'mysite-20',
-  }"
-  :score="9.2"
-  :has-buy-box="true"
-  :has-specs="true"
-  :has-pros-cons-table="true"
-  disclosure="This page contains affiliate links."
->
-  <template #after-verdict>
-    <!-- Additional content after verdict -->
-  </template>
-  <template #sidebar>
-    <!-- Additional sidebar widgets -->
-  </template>
-</XMarkAffiliateProductDetail>
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `product` | `Object` | sample product | Full product data including `images[]`, `specs{}`, `verdict` |
-| `score` | `Number` | `null` | Editorial score 0–10 (shown as circular badge) |
-| `hasBuyBox` | `Boolean` | `true` | Show sticky buy box sidebar |
-| `hasSpecs` | `Boolean` | `true` | Show specs table |
-| `hasProsConsTable` | `Boolean` | `true` | Show pros/cons two-column table |
-| `disclosure` | `String` | `''` | Affiliate disclosure text |
-
-**Slots:** `buy-box`, `after-verdict`, `sidebar`
-
-#### XMarkAffiliateComparisonTable
-
-Side-by-side product comparison table for "X vs Y" posts. Highlights best values per row.
-
-```vue
-<XMarkAffiliateComparisonTable
-  :products="[
-    {
-      name: 'Sony WH-1000XM5',
-      image: '/img/sony.jpg',
-      price: '$279.99',
-      affiliateUrl: 'https://amazon.com/dp/B09XS7JWHH',
-      affiliateTag: 'mysite-20',
-      specs: { price: '$279.99', rating: '4.8/5', battery: '30 hours', weight: '250g' },
-    },
-    {
-      name: 'Bose QC45',
-      image: '/img/bose.jpg',
-      price: '$249.99',
-      affiliateUrl: 'https://amazon.com/dp/B098FKXT8L',
-      affiliateTag: 'mysite-20',
-      specs: { price: '$249.99', rating: '4.6/5', battery: '24 hours', weight: '238g' },
-    },
-  ]"
-  :specs="[
-    { label: 'Price', key: 'price' },
-    { label: 'Rating', key: 'rating' },
-    { label: 'Battery Life', key: 'battery' },
-    { label: 'Weight', key: 'weight' },
-  ]"
-  :show-buy-buttons="true"
-  :highlight-best="true"
-  button-label="Buy on Amazon"
-  disclosure="This page contains affiliate links."
-/>
-```
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `products` | `Array` | 2 sample products | 2–4 products with `specs` object |
-| `specs` | `Array` | price/rating/battery | `[{ label, key }]` spec rows |
-| `showBuyButtons` | `Boolean` | `true` | Show buy buttons in last row |
-| `highlightBest` | `Boolean` | `true` | Highlight best value per row (lowest price, highest rating) |
-| `buttonLabel` | `String` | `'Buy on Amazon'` | Buy button label |
-| `disclosure` | `String` | `''` | Disclosure shown above table |
-
----
+Removed in favour of [`@xenterprises/nuxt-x-affiliate`](../nuxt-x-affiliate).
+
+`XMarkAffiliateDisclosure`, `XMarkAffiliateProductCard`, `XMarkAffiliateProductGrid`,
+`XMarkAffiliateProductDetail`, and `XMarkAffiliateComparisonTable` duplicated components
+the affiliate layer already ships — without its per-merchant tagging
+(`xAffiliateContent.merchants`), impression tracking, or Product/Offer structured data.
+Use `<XAFDisclosure>`, `<XAFProductCard>`, `<XAFRelatedProducts>`, `<XAFBuyButton>`,
+and `<XAFComparisonTable>` instead.
 
 ## Configuration
 

package/app/assets/css/x-marketing.css

@@ -1,3 +1,13 @@
+/* NOTE — the `x*` utilities and `--x-*` tokens in this file are duplicated in
+ * `nuxt-x-affiliate` (`app/assets/css/main.css`), which was ported from here.
+ * 32 class names overlap with identical values. A site extending BOTH layers
+ * loads both stylesheets and gets whichever is injected last — harmless while
+ * they match, a silent divergence if either is edited alone. Keep them in sync.
+ *
+ * Only `.xGlow-divider` / `.xGlow-divider-subtle` are unique to this file;
+ * the affiliate layer draws that rule with `<XAFDividerGlow>` instead.
+ */
+
 @import "tailwindcss";
 @import "@nuxt/ui";
 @plugin "@tailwindcss/typography";

package/app/components/X/Mark/CTA/index.vue

@@ -1,7 +1,8 @@
 <template>
 	<section
 		:class="[
-			'relative overflow-hidden rounded-2xl',
+			'relative overflow-hidden',
+			rounded ? 'rounded-2xl' : 'rounded-none',
 			paddingClasses,
 			bgColorClasses,
 		]"
@@ -127,6 +128,11 @@ const props = defineProps({
 		default: "md",
 		validator: (v) => ["sm", "md", "lg"].includes(v),
 	},
+	/** Card corners. Set false for full-bleed pre-footer CTAs. */
+	rounded: {
+		type: Boolean,
+		default: true,
+	},
 });
 
 // Default bg values
@@ -201,23 +207,30 @@ const containerClasses = computed(() => {
 });
 
 const iconContainerClasses = computed(() => {
+	// Keep the badge square: flex parents (inline/default column layout)
+	// default to stretch on the cross axis and can squash fixed width/height.
+	const centered = ["stacked", "centered"].includes(props.variant);
 	return [
-		"flex items-center justify-center rounded-xl",
-		props.size === "lg" ? "w-16 h-16" : "w-12 h-12",
+		"flex shrink-0 items-center justify-center rounded-xl aspect-square",
+		centered ? "self-center" : "self-start",
+		props.size === "lg"
+			? "size-16 min-w-16 min-h-16"
+			: "size-12 min-w-12 min-h-12",
 		isBoldBg.value ? "bg-white/20" : "bg-primary-100 dark:bg-primary-900/50",
 	];
 });
 
 const iconClasses = computed(() => {
 	return [
-		props.size === "lg" ? "w-8 h-8" : "w-6 h-6",
+		"shrink-0 block",
+		props.size === "lg" ? "size-8" : "size-6",
 		isBoldBg.value ? "text-white" : "text-primary-500",
 	];
 });
 
 const contentClasses = computed(() => {
-	if (props.variant === "default") {
-		return "flex-1";
+	if (props.variant === "default" || props.variant === "inline") {
+		return "flex-1 min-w-0";
 	}
 	return "";
 });

package/app/pages/index.vue

@@ -86,114 +86,6 @@
 			</div>
 		</XMarkSection>
 
-		<!-- ─── Affiliate Components Demo ─── -->
-
-		<!-- Affiliate Disclosure variants -->
-		<XMarkSection bg="subtle" padding="xl">
-			<header class="text-center max-w-3xl mx-auto mb-12">
-				<p class="xText-eyebrow text-primary-500 mb-4">Affiliate Components</p>
-				<h2
-					class="xText-headline text-neutral-900 dark:text-white xText-balance"
-				>
-					Affiliate &amp; Review Components
-				</h2>
-				<p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
-					FTC-compliant disclosures, product cards, grids, detail pages, and
-					comparison tables.
-				</p>
-			</header>
-
-			<!-- Disclosure variants -->
-			<div class="max-w-3xl mx-auto space-y-4 mb-16">
-				<h3
-					class="font-semibold text-neutral-700 dark:text-neutral-300 text-sm uppercase tracking-wider mb-4"
-				>
-					Disclosure Variants
-				</h3>
-				<XMarkAffiliateDisclosure variant="subtle" />
-				<XMarkAffiliateDisclosure variant="banner" />
-				<XMarkAffiliateDisclosure variant="inline" />
-			</div>
-
-			<!-- Product Cards — all 3 layouts -->
-			<div class="mb-16">
-				<h3
-					class="font-semibold text-neutral-700 dark:text-neutral-300 text-sm uppercase tracking-wider mb-6"
-				>
-					Product Card Layouts
-				</h3>
-				<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
-					<XMarkAffiliateProductCard
-						:product="sampleProducts[0]"
-						layout="card"
-						:show-pros="true"
-					/>
-					<XMarkAffiliateProductCard
-						:product="sampleProducts[1]"
-						layout="card"
-						:show-pros="true"
-						:show-cons="true"
-					/>
-					<XMarkAffiliateProductCard
-						:product="sampleProducts[2]"
-						layout="card"
-						:show-pros="true"
-					/>
-				</div>
-				<div class="space-y-4 mb-6">
-					<XMarkAffiliateProductCard
-						:product="sampleProducts[0]"
-						layout="row"
-						:show-pros="true"
-					/>
-					<XMarkAffiliateProductCard
-						:product="sampleProducts[1]"
-						layout="row"
-					/>
-				</div>
-				<div class="space-y-2">
-					<XMarkAffiliateProductCard
-						v-for="p in sampleProducts"
-						:key="p.name"
-						:product="p"
-						layout="compact"
-					/>
-				</div>
-			</div>
-
-			<!-- Product Grid -->
-			<div class="mb-16">
-				<h3
-					class="font-semibold text-neutral-700 dark:text-neutral-300 text-sm uppercase tracking-wider mb-6"
-				>
-					Product Grid (Roundup Post)
-				</h3>
-				<XMarkAffiliateProductGrid
-					:products="sampleProducts"
-					layout="grid"
-					:columns="3"
-					:show-ranking="true"
-					disclosure="This page contains affiliate links. As an Amazon Associate, we earn from qualifying purchases."
-				/>
-			</div>
-
-			<!-- Comparison Table -->
-			<div class="mb-16">
-				<h3
-					class="font-semibold text-neutral-700 dark:text-neutral-300 text-sm uppercase tracking-wider mb-6"
-				>
-					Comparison Table (X vs Y)
-				</h3>
-				<XMarkAffiliateComparisonTable
-					:products="comparisonProducts"
-					:specs="comparisonSpecs"
-					:show-buy-buttons="true"
-					:highlight-best="true"
-					button-label="Buy on Amazon"
-					disclosure="This page contains affiliate links."
-				/>
-			</div>
-		</XMarkSection>
 	</div>
 </template>
 
@@ -268,103 +160,6 @@ const testimonials = [
 	},
 ];
 
-// Affiliate sample products
-const sampleProducts = [
-	{
-		name: "Sony WH-1000XM5",
-		image:
-			"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&q=80",
-		price: "$279.99",
-		originalPrice: "$349.99",
-		rating: 4.8,
-		reviewCount: 12400,
-		pros: ["Best-in-class ANC", "30hr battery life", "Foldable design"],
-		cons: ["No IP rating", "Expensive"],
-		affiliateUrl: "https://amazon.com",
-		affiliateTag: "mysite-20",
-	},
-	{
-		name: "Bose QuietComfort 45",
-		image:
-			"https://images.unsplash.com/photo-1484704849700-f032a568e944?w=400&q=80",
-		price: "$249.99",
-		rating: 4.6,
-		reviewCount: 8900,
-		pros: ["Comfortable fit", "Great sound quality", "Easy controls"],
-		cons: ["No multipoint", "Older design"],
-		affiliateUrl: "https://amazon.com",
-		affiliateTag: "mysite-20",
-	},
-	{
-		name: "Apple AirPods Max",
-		image:
-			"https://images.unsplash.com/photo-1585386959984-a4155224a1ad?w=400&q=80",
-		price: "$449.00",
-		rating: 4.7,
-		reviewCount: 6200,
-		pros: ["Premium build quality", "Excellent ANC", "Spatial audio"],
-		cons: ["Very expensive", "Heavy", "No USB-C charging"],
-		affiliateUrl: "https://amazon.com",
-		affiliateTag: "mysite-20",
-	},
-];
-
-// Comparison table data
-const comparisonProducts = [
-	{
-		name: "Sony WH-1000XM5",
-		image:
-			"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=200&q=80",
-		price: "$279.99",
-		affiliateUrl: "https://amazon.com",
-		affiliateTag: "mysite-20",
-		specs: {
-			price: "$279.99",
-			rating: "4.8/5",
-			battery: "30 hours",
-			weight: "250g",
-			anc: "Yes",
-		},
-	},
-	{
-		name: "Bose QC45",
-		image:
-			"https://images.unsplash.com/photo-1484704849700-f032a568e944?w=200&q=80",
-		price: "$249.99",
-		affiliateUrl: "https://amazon.com",
-		affiliateTag: "mysite-20",
-		specs: {
-			price: "$249.99",
-			rating: "4.6/5",
-			battery: "24 hours",
-			weight: "238g",
-			anc: "Yes",
-		},
-	},
-	{
-		name: "AirPods Max",
-		image:
-			"https://images.unsplash.com/photo-1585386959984-a4155224a1ad?w=200&q=80",
-		price: "$449.00",
-		affiliateUrl: "https://amazon.com",
-		affiliateTag: "mysite-20",
-		specs: {
-			price: "$449.00",
-			rating: "4.7/5",
-			battery: "20 hours",
-			weight: "385g",
-			anc: "Yes",
-		},
-	},
-];
-
-const comparisonSpecs = [
-	{ label: "Price", key: "price" },
-	{ label: "Rating", key: "rating" },
-	{ label: "Battery Life", key: "battery" },
-	{ label: "Weight", key: "weight" },
-	{ label: "ANC", key: "anc" },
-];
 
 // Pricing plans data
 const pricingPlans = [

package/package.json

@@ -2,7 +2,7 @@
   "name": "@xenterprises/nuxt-x-marketing",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -23,7 +23,8 @@
     "test:e2e:headed": "playwright test --config test/playwright.smoke.config.js --headed",
     "test:e2e:full": "playwright test --config test/playwright.config.js",
     "test:visual": "playwright test --config test/playwright.config.js visual-regression",
-    "test:visual:update": "playwright test --config test/playwright.config.js visual-regression --update-snapshots"
+    "test:visual:update": "playwright test --config test/playwright.config.js visual-regression --update-snapshots",
+    "prepublishOnly": "npm run test:run && npm run typecheck && npm run lint"
   },
   "dependencies": {
     "@marker.io/browser": "^0.20.2",