@xenterprises/nuxt-x-marketing 1.0.1 → 1.0.2

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

@@ -1,187 +1,195 @@
 <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>
+	<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>
+				<!-- 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>
+			<!-- 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>
+		<!-- 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>
+				<!-- 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"
-        />
+				<!-- 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>
+				<!-- 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>
+			<!-- 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>
+					<!-- 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: () => [],
-  },
+	/** Blog post object { title, slug, img?, excerpt?, date?, category?, author?, body? } */
+	post: {
+		type: Object,
+		default: () => ({
+			title: "Blog Post Title",
+			slug: "#",
+			excerpt: "A short description of this blog post.",
+			date: new Date().toISOString(),
+			category: "General",
+			body: "",
+		}),
+	},
+	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",
-  });
+	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

@@ -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];
 });