@xenterprises/nuxt-x-marketing 0.0.23 → 1.0.0

package/app/components/X/Mark/Blog/CTANewsletter.vue

@@ -0,0 +1,197 @@
+<template>
+	<div
+		:class="[
+			'rounded-2xl p-6',
+			bgClasses
+		]"
+	>
+		<!-- Icon -->
+		<div v-if="icon && variant !== 'compact'" class="mb-4">
+			<UIcon :name="icon" class="w-8 h-8 text-primary-500" />
+		</div>
+
+		<!-- Title -->
+		<h4 :class="titleClasses">{{ title }}</h4>
+
+		<!-- Description -->
+		<p
+			v-if="description"
+			:class="[
+				'mt-2 text-neutral-600 dark:text-neutral-400',
+				variant === 'compact' ? 'text-sm' : 'text-base'
+			]"
+		>
+			{{ description }}
+		</p>
+
+		<!-- Form -->
+		<form @submit.prevent="handleSubmit" class="mt-4">
+			<div
+				:class="[
+					variant === 'inline' ? 'flex gap-2' : 'space-y-3'
+				]"
+			>
+				<UInput
+					v-model="email"
+					type="email"
+					:placeholder="placeholder"
+					:size="variant === 'compact' ? 'sm' : 'md'"
+					:disabled="loading"
+					required
+					:class="variant === 'inline' ? 'flex-1' : 'w-full'"
+				/>
+				<UButton
+					type="submit"
+					:loading="loading"
+					:size="variant === 'compact' ? 'sm' : 'md'"
+					:block="variant !== 'inline'"
+					:color="button?.color || 'primary'"
+				>
+					{{ button?.label || 'Subscribe' }}
+				</UButton>
+			</div>
+		</form>
+
+		<!-- Success Message -->
+		<Transition
+			enter-active-class="transition-all duration-200"
+			enter-from-class="opacity-0 -translate-y-2"
+			leave-active-class="transition-all duration-200"
+			leave-to-class="opacity-0"
+		>
+			<p
+				v-if="success"
+				class="mt-3 text-sm text-green-600 dark:text-green-400 flex items-center gap-2"
+			>
+				<UIcon name="i-lucide-check-circle" class="w-4 h-4" />
+				{{ successMessage }}
+			</p>
+		</Transition>
+
+		<!-- Error Message -->
+		<Transition
+			enter-active-class="transition-all duration-200"
+			enter-from-class="opacity-0 -translate-y-2"
+			leave-active-class="transition-all duration-200"
+			leave-to-class="opacity-0"
+		>
+			<p
+				v-if="error"
+				class="mt-3 text-sm text-red-600 dark:text-red-400 flex items-center gap-2"
+			>
+				<UIcon name="i-lucide-alert-circle" class="w-4 h-4" />
+				{{ error }}
+			</p>
+		</Transition>
+
+		<!-- Privacy Note -->
+		<p
+			v-if="hasPrivacy"
+			class="mt-3 text-xs text-neutral-500"
+		>
+			{{ privacyText }}
+		</p>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** CTA title */
+	title: {
+		type: String,
+		default: 'Subscribe to our newsletter',
+	},
+	/** CTA description */
+	description: {
+		type: String,
+		default: 'Get the latest posts delivered right to your inbox.',
+	},
+	/** Button config { label: string, color?: string } */
+	button: {
+		type: Object,
+		default: () => ({ label: 'Subscribe' }),
+	},
+	/** Input placeholder */
+	placeholder: {
+		type: String,
+		default: 'Enter your email',
+	},
+	/** Style variant */
+	variant: {
+		type: String,
+		default: 'default',
+		validator: (v) => ['default', 'featured', 'inline', 'compact'].includes(v),
+	},
+	/** Optional icon */
+	icon: {
+		type: String,
+		default: 'i-lucide-mail',
+	},
+	/** Has privacy note */
+	hasPrivacy: {
+		type: Boolean,
+		default: true,
+	},
+	/** Privacy note text */
+	privacyText: {
+		type: String,
+		default: 'No spam. Unsubscribe anytime.',
+	},
+	/** Success message */
+	successMessage: {
+		type: String,
+		default: 'Thanks for subscribing!',
+	},
+});
+
+const emit = defineEmits(['submit']);
+
+const email = ref('');
+const loading = ref(false);
+const success = ref(false);
+const error = ref('');
+
+const bgClasses = computed(() => {
+	const variants = {
+		default: 'bg-neutral-100 dark:bg-neutral-900',
+		featured: 'bg-primary-50 dark:bg-primary-950',
+		inline: 'bg-neutral-100 dark:bg-neutral-900',
+		compact: 'bg-neutral-100 dark:bg-neutral-900',
+	};
+	return variants[props.variant];
+});
+
+const titleClasses = computed(() => {
+	const base = 'font-semibold text-neutral-900 dark:text-white';
+	const sizes = {
+		default: 'text-lg',
+		featured: 'text-xl',
+		inline: 'text-lg',
+		compact: 'text-base',
+	};
+	return `${base} ${sizes[props.variant]}`;
+});
+
+const handleSubmit = async () => {
+	if (!email.value) return;
+
+	loading.value = true;
+	error.value = '';
+	success.value = false;
+
+	try {
+		emit('submit', email.value);
+		success.value = true;
+		email.value = '';
+
+		// Auto-hide success message
+		setTimeout(() => {
+			success.value = false;
+		}, 5000);
+	} catch (e) {
+		error.value = e.message || 'Something went wrong. Please try again.';
+	} finally {
+		loading.value = false;
+	}
+};
+</script>

package/app/components/X/Mark/Blog/Card.vue

@@ -0,0 +1,117 @@
+<template>
+	<article class="group">
+		<NuxtLink :to="`/blog/${post.slug}`" class="block">
+			<!-- Image -->
+			<figure v-if="post.img?.src" class="aspect-[16/9] rounded-xl overflow-hidden mb-4 xHover-zoom shadow-md transition-shadow duration-300 group-hover:shadow-xl">
+				<img
+					:src="post.img.src"
+					:alt="post.img.alt || post.title"
+					class="w-full h-full object-cover"
+				/>
+			</figure>
+
+			<!-- Meta -->
+			<div class="flex items-center gap-3 mb-3">
+				<UBadge
+					v-if="hasCategory && post.category"
+					:label="post.category"
+					variant="subtle"
+				/>
+				<time
+					:datetime="post.date"
+					class="text-sm text-neutral-500"
+				>
+					{{ formattedDate }}
+				</time>
+				<span class="text-sm text-neutral-400">·</span>
+				<span class="text-sm text-neutral-500">{{ post.readingTime }} min read</span>
+			</div>
+
+			<!-- Title -->
+			<h3 class="xText-title text-neutral-900 dark:text-white group-hover:text-primary-500 transition-colors">
+				{{ post.title }}
+			</h3>
+
+			<!-- Excerpt -->
+			<p
+				v-if="hasExcerpt && post.description"
+				class="mt-2 text-neutral-600 dark:text-neutral-400 line-clamp-2"
+			>
+				{{ post.description }}
+			</p>
+
+			<!-- Author -->
+			<div v-if="hasAuthor && post.author" class="mt-4 flex items-center gap-3">
+				<img
+					v-if="post.author.avatar"
+					:src="post.author.avatar"
+					:alt="post.author.name"
+					class="w-8 h-8 rounded-full object-cover"
+				/>
+				<div
+					v-else
+					class="w-8 h-8 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center"
+				>
+					<span class="text-primary-600 dark:text-primary-400 font-medium text-sm">
+						{{ post.author.name.charAt(0) }}
+					</span>
+				</div>
+				<span class="text-sm font-medium text-neutral-900 dark:text-white">
+					{{ post.author.name }}
+				</span>
+			</div>
+		</NuxtLink>
+
+		<!-- Full Width Button -->
+		<UButton
+			v-if="button?.label"
+			:to="`/blog/${post.slug}`"
+			:label="button.label"
+			:color="button.color || 'neutral'"
+			:variant="button.variant || 'outline'"
+			:icon="button.icon"
+			block
+			class="mt-4 justify-center"
+		/>
+	</article>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Blog post object with img: { src, alt? } */
+	post: {
+		type: Object,
+		required: true,
+	},
+	/** Has category badge */
+	hasCategory: {
+		type: Boolean,
+		default: true,
+	},
+	/** Has author info */
+	hasAuthor: {
+		type: Boolean,
+		default: true,
+	},
+	/** Has description */
+	hasExcerpt: {
+		type: Boolean,
+		default: true,
+	},
+	/** Optional full-width button { label, color?, variant?, icon? } */
+	button: {
+		type: Object,
+		default: null,
+	},
+});
+
+const formattedDate = computed(() => {
+	if (!props.post.date) return '';
+	const date = new Date(props.post.date);
+	return date.toLocaleDateString('en-US', {
+		year: 'numeric',
+		month: 'short',
+		day: 'numeric',
+	});
+});
+</script>

package/app/components/X/Mark/Blog/Detail.vue

@@ -0,0 +1,240 @@
+<template>
+	<article>
+		<!-- Hero -->
+		<header class="mb-12">
+			<div class="max-w-3xl mx-auto text-center mb-8">
+				<UBadge
+					v-if="post.category"
+					:label="post.category"
+					class="mb-4"
+				/>
+				<h1 class="xText-headline xText-balance text-neutral-900 dark:text-white">
+					{{ post.title }}
+				</h1>
+				<p
+					v-if="post.description"
+					class="mt-4 text-xl text-neutral-600 dark:text-neutral-400"
+				>
+					{{ post.description }}
+				</p>
+
+				<!-- Meta -->
+				<div class="mt-6 flex items-center justify-center gap-4 flex-wrap">
+					<!-- Author -->
+					<div v-if="post.author" class="flex items-center gap-2">
+						<img
+							v-if="post.author.avatar"
+							:src="post.author.avatar"
+							:alt="post.author.name"
+							class="w-8 h-8 rounded-full object-cover"
+						/>
+						<span class="font-medium text-neutral-900 dark:text-white">
+							{{ post.author.name }}
+						</span>
+					</div>
+					<span class="text-neutral-300 dark:text-neutral-700">·</span>
+					<time class="text-neutral-500" :datetime="post.date">
+						{{ formattedDate }}
+					</time>
+					<span class="text-neutral-300 dark:text-neutral-700">·</span>
+					<span class="text-neutral-500">{{ post.readingTime }} min read</span>
+				</div>
+			</div>
+
+			<!-- Featured Image -->
+			<figure
+				v-if="post.img?.src"
+				class="aspect-[21/9] rounded-2xl overflow-hidden"
+			>
+				<img
+					:src="post.img.src"
+					:alt="post.img.alt || post.title"
+					class="w-full h-full object-cover"
+				/>
+			</figure>
+		</header>
+
+		<!-- Content Grid -->
+		<div class="grid lg:grid-cols-[1fr_280px] gap-12">
+			<!-- Main Content -->
+			<div class="max-w-3xl">
+				<!-- Prose -->
+				<div class="prose prose-lg dark:prose-invert prose-primary max-w-none">
+					<slot />
+				</div>
+
+				<!-- Tags -->
+				<div v-if="post.tags?.length" class="mt-12 pt-8 border-t border-neutral-200 dark:border-neutral-800">
+					<div class="flex flex-wrap gap-2">
+						<UBadge
+							v-for="tag in post.tags"
+							:key="tag"
+							:label="tag"
+							variant="outline"
+						/>
+					</div>
+				</div>
+
+				<!-- Author Bio -->
+				<div
+					v-if="post.author?.bio"
+					class="mt-12 flex gap-6 p-6 rounded-2xl bg-neutral-100 dark:bg-neutral-900"
+				>
+					<img
+						v-if="post.author.avatar"
+						:src="post.author.avatar"
+						:alt="post.author.name"
+						class="w-20 h-20 rounded-full object-cover flex-shrink-0"
+					/>
+					<div>
+						<p class="font-semibold text-lg text-neutral-900 dark:text-white">
+							{{ post.author.name }}
+						</p>
+						<p v-if="post.author.title" class="text-sm text-neutral-500 mb-3">
+							{{ post.author.title }}
+						</p>
+						<p class="text-neutral-600 dark:text-neutral-400">
+							{{ post.author.bio }}
+						</p>
+						<div v-if="post.author.social" class="flex gap-2 mt-4">
+							<UButton
+								v-for="(url, platform) in post.author.social"
+								:key="platform"
+								:to="url"
+								:icon="getSocialIcon(platform)"
+								variant="ghost"
+								color="neutral"
+								size="sm"
+								target="_blank"
+								:aria-label="platform"
+							/>
+						</div>
+					</div>
+				</div>
+
+				<!-- Navigation -->
+				<nav
+					v-if="previousPost || nextPost"
+					class="mt-12 pt-8 border-t border-neutral-200 dark:border-neutral-800 grid sm:grid-cols-2 gap-4"
+				>
+					<!-- Previous -->
+					<NuxtLink
+						v-if="previousPost"
+						:to="`/blog/${previousPost.slug}`"
+						class="group flex items-center gap-4 p-4 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-900 transition-colors"
+					>
+						<UIcon
+							name="i-lucide-arrow-left"
+							class="w-5 h-5 text-neutral-400 group-hover:text-primary-500 transition-colors"
+						/>
+						<div>
+							<span class="text-xs text-neutral-500 uppercase tracking-wide">Previous</span>
+							<p class="font-medium text-neutral-900 dark:text-white group-hover:text-primary-500 transition-colors line-clamp-1">
+								{{ previousPost.title }}
+							</p>
+						</div>
+					</NuxtLink>
+					<div v-else />
+
+					<!-- Next -->
+					<NuxtLink
+						v-if="nextPost"
+						:to="`/blog/${nextPost.slug}`"
+						class="group flex items-center justify-end gap-4 p-4 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-900 transition-colors text-right"
+					>
+						<div>
+							<span class="text-xs text-neutral-500 uppercase tracking-wide">Next</span>
+							<p class="font-medium text-neutral-900 dark:text-white group-hover:text-primary-500 transition-colors line-clamp-1">
+								{{ nextPost.title }}
+							</p>
+						</div>
+						<UIcon
+							name="i-lucide-arrow-right"
+							class="w-5 h-5 text-neutral-400 group-hover:text-primary-500 transition-colors"
+						/>
+					</NuxtLink>
+				</nav>
+			</div>
+
+			<!-- Sidebar -->
+			<aside class="hidden lg:block">
+				<div class="sticky top-24 space-y-8">
+					<!-- Table of Contents -->
+					<div v-if="toc?.length">
+						<h4 class="font-medium text-neutral-900 dark:text-white mb-4">On this page</h4>
+						<nav class="space-y-2">
+							<a
+								v-for="item in toc"
+								:key="item.id"
+								:href="`#${item.id}`"
+								class="block text-sm text-neutral-500 hover:text-primary-500 transition-colors"
+								:class="{ 'pl-4': item.depth > 2 }"
+							>
+								{{ item.text }}
+							</a>
+						</nav>
+					</div>
+
+					<!-- Newsletter CTA -->
+					<slot name="sidebar">
+						<XMarkNewsletterForm
+							variant="compact"
+							title="Subscribe"
+							description="Get notified about new posts."
+						/>
+					</slot>
+				</div>
+			</aside>
+		</div>
+	</article>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Blog post object with img: { src, alt? } */
+	post: {
+		type: Object,
+		required: true,
+	},
+	/** Previous post for navigation */
+	previousPost: {
+		type: Object,
+		default: null,
+	},
+	/** Next post for navigation */
+	nextPost: {
+		type: Object,
+		default: null,
+	},
+	/** Table of contents items */
+	toc: {
+		type: Array,
+		default: () => [],
+	},
+});
+
+const formattedDate = computed(() => {
+	if (!props.post.date) return '';
+	const date = new Date(props.post.date);
+	return date.toLocaleDateString('en-US', {
+		year: 'numeric',
+		month: 'long',
+		day: 'numeric',
+	});
+});
+
+const getSocialIcon = (platform) => {
+	const icons = {
+		twitter: 'i-lucide-twitter',
+		x: 'i-lucide-twitter',
+		linkedin: 'i-lucide-linkedin',
+		github: 'i-lucide-github',
+		website: 'i-lucide-globe',
+		instagram: 'i-lucide-instagram',
+		facebook: 'i-lucide-facebook',
+		youtube: 'i-lucide-youtube',
+		email: 'i-lucide-mail',
+	};
+	return icons[platform.toLowerCase()] || 'i-lucide-link';
+};
+</script>

package/app/components/X/Mark/Blog/List.vue

@@ -0,0 +1,156 @@
+<template>
+	<div>
+		<!-- Filter/Search -->
+		<div v-if="hasFilters" class="flex flex-wrap gap-4 mb-8">
+			<UInput
+				v-model="search"
+				placeholder="Search posts..."
+				icon="i-lucide-search"
+				class="w-full sm:w-64"
+			/>
+			<USelectMenu
+				v-if="categories.length"
+				v-model="selectedCategory"
+				:options="categoryOptions"
+				placeholder="All Categories"
+				class="w-40"
+			/>
+		</div>
+
+		<!-- Grid -->
+		<div :class="gridClasses">
+			<XMarkBlogCard
+				v-for="(post, index) in paginatedPosts"
+				:key="post.slug"
+				:post="post"
+				:has-category="hasCategories"
+				:has-author="hasAuthors"
+				:button="cardButton"
+				class="xFadeUp"
+				:style="{ transitionDelay: `${index * 50}ms` }"
+			/>
+		</div>
+
+		<!-- Empty State -->
+		<div
+			v-if="!paginatedPosts.length"
+			class="text-center py-16"
+		>
+			<UIcon name="i-lucide-file-text" class="w-12 h-12 text-neutral-300 dark:text-neutral-700 mx-auto mb-4" />
+			<p class="text-neutral-600 dark:text-neutral-400">No posts found</p>
+		</div>
+
+		<!-- Pagination -->
+		<div v-if="totalPages > 1" class="mt-12 flex justify-center">
+			<UPagination
+				v-model="currentPage"
+				:total="filteredPosts.length"
+				:page-count="perPage"
+			/>
+		</div>
+	</div>
+</template>
+
+<script setup>
+const props = defineProps({
+	/** Array of blog posts with img: { src, alt? } */
+	posts: {
+		type: Array,
+		required: true,
+	},
+	/** Grid columns */
+	columns: {
+		type: Number,
+		default: 3,
+		validator: (v) => [1, 2, 3].includes(v),
+	},
+	/** Posts per page */
+	perPage: {
+		type: Number,
+		default: 9,
+	},
+	/** Has search/filter */
+	hasFilters: {
+		type: Boolean,
+		default: false,
+	},
+	/** Has category badges */
+	hasCategories: {
+		type: Boolean,
+		default: true,
+	},
+	/** Has author info */
+	hasAuthors: {
+		type: Boolean,
+		default: true,
+	},
+	/** Available categories */
+	categories: {
+		type: Array,
+		default: () => [],
+	},
+	/** Optional button for all cards { label, color?, variant?, icon? } */
+	cardButton: {
+		type: Object,
+		default: null,
+	},
+});
+
+const search = ref('');
+const selectedCategory = ref('');
+const currentPage = ref(1);
+
+const categoryOptions = computed(() => {
+	return [
+		{ label: 'All Categories', value: '' },
+		...props.categories.map((cat) => ({
+			label: cat,
+			value: cat,
+		})),
+	];
+});
+
+const filteredPosts = computed(() => {
+	let result = props.posts;
+
+	// Filter by search
+	if (search.value) {
+		const searchLower = search.value.toLowerCase();
+		result = result.filter((post) =>
+			post.title.toLowerCase().includes(searchLower) ||
+			post.description?.toLowerCase().includes(searchLower)
+		);
+	}
+
+	// Filter by category
+	if (selectedCategory.value) {
+		result = result.filter((post) => post.category === selectedCategory.value);
+	}
+
+	return result;
+});
+
+const totalPages = computed(() => {
+	return Math.ceil(filteredPosts.value.length / props.perPage);
+});
+
+const paginatedPosts = computed(() => {
+	const start = (currentPage.value - 1) * props.perPage;
+	const end = start + props.perPage;
+	return filteredPosts.value.slice(start, end);
+});
+
+const gridClasses = computed(() => {
+	const cols = {
+		1: 'grid gap-8',
+		2: 'grid md:grid-cols-2 gap-8',
+		3: 'grid md:grid-cols-2 lg:grid-cols-3 gap-8',
+	};
+	return cols[props.columns];
+});
+
+// Reset pagination when filters change
+watch([search, selectedCategory], () => {
+	currentPage.value = 1;
+});
+</script>