@xenterprises/nuxt-x-marketing 0.0.24 → 1.0.1

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,187 @@
+<template>
+  <article class="blog-detail">
+    <!-- Hero -->
+    <header class="mb-16 lg:mb-20">
+      <div class="max-w-3xl mx-auto text-center mb-10">
+        <UBadge
+          v-if="post.category"
+          :label="post.category"
+          color="primary"
+          variant="subtle"
+          class="mb-6"
+        />
+        <h1
+          class="text-3xl sm:text-4xl lg:text-5xl font-bold leading-tight tracking-tight text-neutral-900 dark:text-white"
+        >
+          {{ post.title }}
+        </h1>
+        <p
+          v-if="post.description"
+          class="mt-6 text-lg sm:text-xl text-neutral-600 dark:text-neutral-400 leading-relaxed max-w-2xl mx-auto"
+        >
+          {{ post.description }}
+        </p>
+
+        <!-- Meta -->
+        <div
+          class="mt-8 flex items-center justify-center gap-3 sm:gap-4 flex-wrap text-sm"
+        >
+          <!-- Author -->
+          <div v-if="post.author" class="flex items-center gap-2.5">
+            <img
+              v-if="post.author.avatar"
+              :src="post.author.avatar"
+              :alt="post.author.name"
+              class="w-10 h-10 rounded-full object-cover ring-2 ring-white dark:ring-neutral-800"
+            />
+            <span class="font-medium text-neutral-900 dark:text-white">
+              {{ post.author.name }}
+            </span>
+          </div>
+          <span class="text-neutral-300 dark:text-neutral-600">•</span>
+          <time
+            class="text-neutral-500 dark:text-neutral-400"
+            :datetime="post.date"
+          >
+            {{ formattedDate }}
+          </time>
+          <span class="text-neutral-300 dark:text-neutral-600">•</span>
+          <span class="text-neutral-500 dark:text-neutral-400">{{
+            post.readingTime
+          }}</span>
+        </div>
+      </div>
+
+      <!-- Featured Image -->
+      <figure
+        v-if="post.img?.src"
+        class="aspect-2/1 sm:aspect-21/9 rounded-2xl lg:rounded-3xl overflow-hidden shadow-xl"
+      >
+        <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_300px] gap-12 lg:gap-16">
+      <!-- Main Content -->
+      <div class="min-w-0">
+        <!-- Prose Content -->
+        <div
+          class="prose prose-lg prose-neutral dark:prose-invert max-w-none prose-headings:scroll-mt-20 prose-a:text-primary-600 dark:prose-a:text-primary-400 prose-a:no-underline hover:prose-a:underline prose-pre:bg-neutral-900 dark:prose-pre:bg-neutral-950 prose-pre:border prose-pre:border-neutral-800 prose-img:rounded-xl"
+        >
+          <slot />
+        </div>
+
+        <!-- Tags -->
+        <div
+          v-if="post.tags?.length"
+          class="mt-16 pt-10 border-t border-neutral-200 dark:border-neutral-800"
+        >
+          <h4
+            class="text-xs font-semibold uppercase tracking-wider text-neutral-500 mb-4"
+          >
+            Tags
+          </h4>
+          <div class="flex flex-wrap gap-2">
+            <UBadge
+              v-for="tag in post.tags"
+              :key="tag"
+              :label="tag"
+              variant="subtle"
+              color="neutral"
+              size="md"
+            />
+          </div>
+        </div>
+
+        <!-- Author Bio -->
+        <XMarkBlogAuthor
+          v-if="post.author"
+          :author="post.author"
+          variant="full"
+          class="mt-12"
+        />
+
+        <!-- Navigation -->
+        <XMarkBlogNavigation
+          v-if="previousPost || nextPost"
+          :previous="previousPost"
+          :next="nextPost"
+          class="mt-12"
+        />
+      </div>
+
+      <!-- Sidebar -->
+      <aside class="hidden lg:block">
+        <div class="sticky top-24 space-y-8">
+          <!-- Table of Contents -->
+          <div
+            v-if="toc?.length"
+            class="p-5 rounded-xl bg-neutral-50 dark:bg-neutral-900/50 border border-neutral-200/60 dark:border-neutral-800"
+          >
+            <h4
+              class="font-semibold text-neutral-900 dark:text-white mb-4 text-sm"
+            >
+              On this page
+            </h4>
+            <nav class="space-y-1">
+              <a
+                v-for="item in toc"
+                :key="item.id"
+                :href="`#${item.id}`"
+                class="block py-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors leading-snug"
+                :class="{ 'pl-4 text-[13px]': item.depth > 2 }"
+              >
+                {{ item.text }}
+              </a>
+            </nav>
+          </div>
+
+          <!-- Newsletter CTA -->
+          <slot name="sidebar">
+            <XMarkNewsletterForm
+              variant="compact"
+              title="Subscribe to our newsletter"
+              description="Get the latest posts and insights directly to your inbox."
+            />
+          </slot>
+        </div>
+      </aside>
+    </div>
+  </article>
+</template>
+
+<script setup>
+const props = defineProps({
+  post: {
+    type: Object,
+    required: true,
+  },
+  previousPost: {
+    type: Object,
+    default: null,
+  },
+  nextPost: {
+    type: Object,
+    default: null,
+  },
+  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",
+  });
+});
+</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>