@xenterprises/nuxt-x-marketing 1.0.0 → 1.0.2

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

@@ -1,50 +1,61 @@
 <template>
-	<article>
+	<article class="blog-detail">
 		<!-- Hero -->
-		<header class="mb-12">
-			<div class="max-w-3xl mx-auto text-center mb-8">
+		<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"
-					class="mb-4"
+					color="primary"
+					variant="subtle"
+					class="mb-6"
 				/>
-				<h1 class="xText-headline xText-balance text-neutral-900 dark:text-white">
+				<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-4 text-xl text-neutral-600 dark:text-neutral-400"
+					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-6 flex items-center justify-center gap-4 flex-wrap">
+				<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">
+					<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-8 h-8 rounded-full object-cover"
+							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-700">·</span>
-					<time class="text-neutral-500" :datetime="post.date">
+					<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-700">·</span>
-					<span class="text-neutral-500">{{ post.readingTime }} min read</span>
+					<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-[21/9] rounded-2xl overflow-hidden"
+				class="aspect-2/1 sm:aspect-21/9 rounded-2xl lg:rounded-3xl overflow-hidden shadow-xl"
 			>
 				<img
 					:src="post.img.src"
@@ -55,120 +66,75 @@
 		</header>
 
 		<!-- Content Grid -->
-		<div class="grid lg:grid-cols-[1fr_280px] gap-12">
+		<div class="grid lg:grid-cols-[1fr_300px] gap-12 lg:gap-16">
 			<!-- Main Content -->
-			<div class="max-w-3xl">
-				<!-- Prose -->
-				<div class="prose prose-lg dark:prose-invert prose-primary max-w-none">
+			<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-12 pt-8 border-t border-neutral-200 dark:border-neutral-800">
+				<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="outline"
+							variant="subtle"
+							color="neutral"
+							size="md"
 						/>
 					</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>
+				<XMarkBlogAuthor
+					v-if="post.author"
+					:author="post.author"
+					variant="full"
+					class="mt-12"
+				/>
 
 				<!-- Navigation -->
-				<nav
+				<XMarkBlogNavigation
 					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>
+					: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">
-						<h4 class="font-medium text-neutral-900 dark:text-white mb-4">On this page</h4>
-						<nav class="space-y-2">
+					<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 text-sm text-neutral-500 hover:text-primary-500 transition-colors"
-								:class="{ 'pl-4': item.depth > 2 }"
+								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>
@@ -179,8 +145,8 @@
 					<slot name="sidebar">
 						<XMarkNewsletterForm
 							variant="compact"
-							title="Subscribe"
-							description="Get notified about new posts."
+							title="Subscribe to our newsletter"
+							description="Get the latest posts and insights directly to your inbox."
 						/>
 					</slot>
 				</div>
@@ -191,22 +157,26 @@
 
 <script setup>
 const props = defineProps({
-	/** Blog post object with img: { src, alt? } */
+	/** Blog post object { title, slug, img?, excerpt?, date?, category?, author?, body? } */
 	post: {
 		type: Object,
-		required: true,
+		default: () => ({
+			title: "Blog Post Title",
+			slug: "#",
+			excerpt: "A short description of this blog post.",
+			date: new Date().toISOString(),
+			category: "General",
+			body: "",
+		}),
 	},
-	/** 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: () => [],
@@ -214,27 +184,12 @@ const props = defineProps({
 });
 
 const formattedDate = computed(() => {
-	if (!props.post.date) return '';
+	if (!props.post.date) return "";
 	const date = new Date(props.post.date);
-	return date.toLocaleDateString('en-US', {
-		year: 'numeric',
-		month: 'long',
-		day: 'numeric',
+	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

@@ -32,11 +32,11 @@
 		</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" />
+		<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>
 
@@ -53,10 +53,10 @@
 
 <script setup>
 const props = defineProps({
-	/** Array of blog posts with img: { src, alt? } */
+	/** Array of blog posts [{ title, slug, img?, excerpt?, date?, category?, author?, tags? }] */
 	posts: {
 		type: Array,
-		required: true,
+		default: () => [],
 	},
 	/** Grid columns */
 	columns: {
@@ -96,13 +96,13 @@ const props = defineProps({
 	},
 });
 
-const search = ref('');
-const selectedCategory = ref('');
+const search = ref("");
+const selectedCategory = ref("");
 const currentPage = ref(1);
 
 const categoryOptions = computed(() => {
 	return [
-		{ label: 'All Categories', value: '' },
+		{ label: "All Categories", value: "" },
 		...props.categories.map((cat) => ({
 			label: cat,
 			value: cat,
@@ -116,9 +116,10 @@ const filteredPosts = computed(() => {
 	// 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)
+		result = result.filter(
+			(post) =>
+				post.title.toLowerCase().includes(searchLower) ||
+				post.description?.toLowerCase().includes(searchLower)
 		);
 	}
 
@@ -142,9 +143,9 @@ const paginatedPosts = computed(() => {
 
 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',
+		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];
 });