@xenterprises/nuxt-x-marketing 1.0.2 → 1.1.0

package/.playground/pages/blog/list.vue

@@ -1,261 +0,0 @@
-<template>
-  <div class="min-h-screen">
-    <div class="bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 px-8 py-6">
-      <h1 class="text-2xl font-bold text-neutral-900 dark:text-white">Blog List</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Blog listing with grid layout, filtering, and pagination.</p>
-    </div>
-
-    <div class="space-y-0">
-      <!-- 3 Column Grid (Default) -->
-      <XMarkSection bg="default">
-        <div class="text-center mb-8">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium mb-4">columns="3"</span>
-          <h2 class="xText-headline">3 Column Grid (Default)</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Standard blog listing with 3 columns on desktop</p>
-        </div>
-        <XMarkBlogList
-          :posts="posts"
-          :columns="3"
-        />
-      </XMarkSection>
-
-      <!-- 2 Column Grid -->
-      <XMarkSection bg="subtle">
-        <div class="text-center mb-8">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium mb-4">columns="2"</span>
-          <h2 class="xText-headline">2 Column Grid</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Wider cards for featured content</p>
-        </div>
-        <XMarkBlogList
-          :posts="posts.slice(0, 4)"
-          :columns="2"
-        />
-      </XMarkSection>
-
-      <!-- With Filters -->
-      <XMarkSection bg="default">
-        <div class="text-center mb-8">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium mb-4">hasFilters="true"</span>
-          <h2 class="xText-headline">With Search & Category Filters</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Interactive filtering for larger blog sections</p>
-        </div>
-        <XMarkBlogList
-          :posts="posts"
-          :columns="3"
-          :has-filters="true"
-          :categories="categories"
-        />
-      </XMarkSection>
-
-      <!-- Minimal (No Categories/Authors) -->
-      <XMarkSection bg="subtle">
-        <div class="text-center mb-8">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium mb-4">Minimal</span>
-          <h2 class="xText-headline">Minimal Style</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Without category badges and author info</p>
-        </div>
-        <XMarkBlogList
-          :posts="posts.slice(0, 3)"
-          :columns="3"
-          :has-categories="false"
-          :has-authors="false"
-        />
-      </XMarkSection>
-
-      <!-- Props Documentation -->
-      <XMarkSection bg="default">
-        <h2 class="text-lg font-semibold mb-6">Props</h2>
-        <div class="overflow-x-auto">
-          <table class="w-full text-sm">
-            <thead>
-              <tr class="border-b border-neutral-200 dark:border-neutral-700">
-                <th class="text-left py-3 px-4 font-medium">Prop</th>
-                <th class="text-left py-3 px-4 font-medium">Type</th>
-                <th class="text-left py-3 px-4 font-medium">Default</th>
-                <th class="text-left py-3 px-4 font-medium">Description</th>
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">posts</td>
-                <td class="py-3 px-4">Array</td>
-                <td class="py-3 px-4">required</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Array of post objects with img: { src, alt? }</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">columns</td>
-                <td class="py-3 px-4">Number</td>
-                <td class="py-3 px-4">3</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">1, 2, or 3 columns</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">perPage</td>
-                <td class="py-3 px-4">Number</td>
-                <td class="py-3 px-4">9</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Posts per page for pagination</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">hasFilters</td>
-                <td class="py-3 px-4">Boolean</td>
-                <td class="py-3 px-4">false</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Show search input and category filter</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">hasCategories</td>
-                <td class="py-3 px-4">Boolean</td>
-                <td class="py-3 px-4">true</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Show category badges on cards</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">hasAuthors</td>
-                <td class="py-3 px-4">Boolean</td>
-                <td class="py-3 px-4">true</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Show author avatar and name on cards</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">categories</td>
-                <td class="py-3 px-4">Array</td>
-                <td class="py-3 px-4">[]</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Available categories for filter dropdown</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">cardButton</td>
-                <td class="py-3 px-4">Object</td>
-                <td class="py-3 px-4">null</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Button config for all cards { label, color?, variant?, icon? }</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </XMarkSection>
-
-      <!-- Post Object Structure -->
-      <XMarkSection bg="subtle">
-        <h2 class="text-lg font-semibold mb-4">Post Object Structure</h2>
-        <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-4 text-sm font-mono overflow-x-auto">
-          <pre>{
-  title: "Post Title",
-  description: "Brief description...",
-  img: { src: "https://...", alt: "Image description" },
-  slug: "post-slug",
-  date: "2024-01-15",
-  readingTime: 5,
-  author: { name: "Author Name", avatar: "https://..." },
-  category: "Tutorial"
-}</pre>
-        </div>
-      </XMarkSection>
-
-      <!-- Code Example -->
-      <XMarkSection bg="default">
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Blog List Usage" :code="codeExample" />
-      </XMarkSection>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// Initialize scroll reveal animations
-useScrollReveal()
-
-const codeExample = `<!-- 3 column grid (default) -->
-<XMarkBlogList :posts="posts" />
-
-<!-- 2 column grid for featured posts -->
-<XMarkBlogList :posts="posts" :columns="2" />
-
-<!-- With search and category filters -->
-<XMarkBlogList
-  :posts="posts"
-  :columns="3"
-  :has-filters="true"
-  :categories="['Tutorial', 'Design', 'Performance']"
-/>
-
-<!-- Minimal style without author/category -->
-<XMarkBlogList
-  :posts="posts"
-  :has-categories="false"
-  :has-authors="false"
-/>
-
-<!-- With Nuxt Content v3 -->
-<script setup>
-const { data: posts } = await useAsyncData('posts', () =>
-  queryCollection('blog')
-    .where('published', '=', true)
-    .order('date', 'desc')
-    .find()
-)
-<\/script>
-
-<template>
-  <XMarkBlogList :posts="posts" :columns="3" />
-</template>`
-
-const categories = ['Tutorial', 'Dev', 'Design', 'Performance', 'Testing', 'DevOps']
-
-const posts = [
-  {
-    title: 'Getting Started with Nuxt',
-    description: 'Learn the basics of building modern web applications with Nuxt 3.',
-    img: { src: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=400&h=300&fit=crop', alt: 'Code on laptop' },
-    slug: 'getting-started',
-    date: '2024-01-15',
-    readingTime: 5,
-    author: { name: 'Sarah Chen', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=50&h=50&fit=crop' },
-    category: 'Tutorial'
-  },
-  {
-    title: 'Advanced Composition Patterns',
-    description: 'Deep dive into Vue 3 composition API patterns and best practices.',
-    img: { src: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=400&h=300&fit=crop', alt: 'Programming code' },
-    slug: 'composition-patterns',
-    date: '2024-01-10',
-    readingTime: 8,
-    author: { name: 'Michael Torres', avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=50&h=50&fit=crop' },
-    category: 'Dev'
-  },
-  {
-    title: 'Design System Fundamentals',
-    description: 'Create beautiful, consistent design systems for your projects.',
-    img: { src: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=400&h=300&fit=crop', alt: 'Design dashboard' },
-    slug: 'design-systems',
-    date: '2024-01-05',
-    readingTime: 6,
-    author: { name: 'Emma Williams', avatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=50&h=50&fit=crop' },
-    category: 'Design'
-  },
-  {
-    title: 'Performance Optimization',
-    description: 'Optimize your Nuxt application for maximum performance.',
-    img: { src: 'https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=400&h=300&fit=crop', alt: 'Analytics' },
-    slug: 'performance',
-    date: '2024-01-01',
-    readingTime: 7,
-    author: { name: 'Alex Johnson', avatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=50&h=50&fit=crop' },
-    category: 'Performance'
-  },
-  {
-    title: 'Testing Best Practices',
-    description: 'Write better tests for your Vue and Nuxt applications.',
-    img: { src: 'https://images.unsplash.com/photo-1504639725590-34d0984388bd?w=400&h=300&fit=crop', alt: 'Testing' },
-    slug: 'testing-guide',
-    date: '2023-12-28',
-    readingTime: 4,
-    author: { name: 'Lisa Park', avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=50&h=50&fit=crop' },
-    category: 'Testing'
-  },
-  {
-    title: 'Deployment Strategies',
-    description: 'Deploy your Nuxt app with confidence using modern CI/CD.',
-    img: { src: 'https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=400&h=300&fit=crop', alt: 'Server room' },
-    slug: 'deployment',
-    date: '2023-12-25',
-    readingTime: 5,
-    author: { name: 'James Wilson', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=50&h=50&fit=crop' },
-    category: 'DevOps'
-  }
-]
-</script>

package/.playground/pages/blog/navigation.vue

@@ -1,228 +0,0 @@
-<template>
-  <div class="min-h-screen">
-    <div class="bg-white dark:bg-neutral-900 border-b border-neutral-200 dark:border-neutral-800 px-8 py-6">
-      <h1 class="text-2xl font-bold text-neutral-900 dark:text-white">Blog Navigation</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
-        Previous/next post navigation using Nuxt UI buttons.
-      </p>
-    </div>
-
-    <div class="space-y-0">
-      <!-- With Both Links -->
-      <XMarkSection bg="default">
-        <div class="text-center mb-8">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium mb-4">Both Links</span>
-          <h2 class="xText-headline">Previous & Next</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Full navigation with both previous and next post links</p>
-        </div>
-
-        <div class="max-w-3xl mx-auto">
-          <XMarkBlogNavigation
-            :previous="previousPost"
-            :next="nextPost"
-          />
-        </div>
-      </XMarkSection>
-
-      <!-- Previous Only -->
-      <XMarkSection bg="subtle">
-        <div class="text-center mb-8">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium mb-4">Single Link</span>
-          <h2 class="xText-headline">Previous Only</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">When there's no next post (e.g., newest article)</p>
-        </div>
-
-        <div class="max-w-3xl mx-auto">
-          <XMarkBlogNavigation
-            :previous="previousPost"
-          />
-        </div>
-      </XMarkSection>
-
-      <!-- Next Only -->
-      <XMarkSection bg="default">
-        <div class="text-center mb-8">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium mb-4">Single Link</span>
-          <h2 class="xText-headline">Next Only</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">When there's no previous post (e.g., oldest article)</p>
-        </div>
-
-        <div class="max-w-3xl mx-auto">
-          <XMarkBlogNavigation
-            :next="nextPost"
-          />
-        </div>
-      </XMarkSection>
-
-      <!-- Custom Labels -->
-      <XMarkSection bg="subtle">
-        <div class="text-center mb-8">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium mb-4">Custom Labels</span>
-          <h2 class="xText-headline">With Custom Labels</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Override the default "Previous" and "Next" labels</p>
-        </div>
-
-        <div class="max-w-3xl mx-auto">
-          <XMarkBlogNavigation
-            :previous="previousPost"
-            :next="nextPost"
-            previous-label="Older Post"
-            next-label="Newer Post"
-          />
-        </div>
-      </XMarkSection>
-
-      <!-- With Nuxt Content _path -->
-      <XMarkSection bg="default">
-        <div class="text-center mb-8">
-          <span class="inline-block px-3 py-1 rounded-full bg-primary-100 dark:bg-primary-900/30 text-primary-600 dark:text-primary-400 text-xs font-medium mb-4">Nuxt Content</span>
-          <h2 class="xText-headline">With Nuxt Content _path</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Supports both slug and _path from Nuxt Content</p>
-        </div>
-
-        <div class="max-w-3xl mx-auto">
-          <XMarkBlogNavigation
-            :previous="contentPreviousPost"
-            :next="contentNextPost"
-          />
-        </div>
-      </XMarkSection>
-
-      <!-- Props Documentation -->
-      <XMarkSection bg="subtle">
-        <h2 class="text-lg font-semibold mb-6">Props</h2>
-        <div class="overflow-x-auto">
-          <table class="w-full text-sm">
-            <thead>
-              <tr class="border-b border-neutral-200 dark:border-neutral-700">
-                <th class="text-left py-3 px-4 font-medium">Prop</th>
-                <th class="text-left py-3 px-4 font-medium">Type</th>
-                <th class="text-left py-3 px-4 font-medium">Default</th>
-                <th class="text-left py-3 px-4 font-medium">Description</th>
-              </tr>
-            </thead>
-            <tbody class="divide-y divide-neutral-200 dark:divide-neutral-700">
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">previous</td>
-                <td class="py-3 px-4">Object</td>
-                <td class="py-3 px-4">null</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Previous post { title, slug } or { title, _path }</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">next</td>
-                <td class="py-3 px-4">Object</td>
-                <td class="py-3 px-4">null</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Next post { title, slug } or { title, _path }</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">basePath</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'/blog'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Base path for blog posts (used with slug)</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">previousLabel</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'Previous'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Label for previous link</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">nextLabel</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'Next'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Label for next link</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </XMarkSection>
-
-      <!-- Post Object Structure -->
-      <XMarkSection bg="default">
-        <h2 class="text-lg font-semibold mb-4">Post Object Structure</h2>
-        <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-4 text-sm font-mono overflow-x-auto">
-          <pre>// Using slug (combined with basePath)
-{
-  title: "Getting Started with Vue 3",
-  slug: "vue-3-getting-started"
-}
-// Result: /blog/vue-3-getting-started
-
-// Using _path (from Nuxt Content)
-{
-  title: "Getting Started with Vue 3",
-  _path: "/articles/vue-3-getting-started"
-}
-// Result: /articles/vue-3-getting-started</pre>
-        </div>
-      </XMarkSection>
-
-      <!-- Code Example -->
-      <XMarkSection bg="subtle">
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Blog Navigation Usage" :code="codeExample" />
-      </XMarkSection>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// Initialize scroll reveal animations
-useScrollReveal()
-
-const codeExample = `<!-- Both previous and next -->
-<XMarkBlogNavigation
-  :previous="{ title: 'Vue 3 Getting Started', slug: 'vue-3-getting-started' }"
-  :next="{ title: 'Advanced Patterns', slug: 'advanced-patterns' }"
-/>
-
-<!-- Custom labels -->
-<XMarkBlogNavigation
-  :previous="previousPost"
-  :next="nextPost"
-  previous-label="Older Post"
-  next-label="Newer Post"
-/>
-
-<!-- With Nuxt Content _path -->
-<XMarkBlogNavigation
-  :previous="{ title: 'Previous', _path: '/articles/previous' }"
-  :next="{ title: 'Next', _path: '/articles/next' }"
-/>
-
-<!-- With Nuxt Content surround -->
-<script setup>
-const { data: surround } = await useAsyncData('surround', () =>
-  queryCollectionItemSurroundings('blog', route.path)
-)
-<\/script>
-
-<template>
-  <XMarkBlogNavigation
-    :previous="surround?.[0]"
-    :next="surround?.[1]"
-  />
-</template>`
-
-// Using slug format (will be combined with basePath)
-const previousPost = {
-  title: 'Getting Started with Vue 3',
-  slug: 'vue-3-getting-started'
-}
-
-const nextPost = {
-  title: 'Advanced Composition API Patterns',
-  slug: 'composition-api-patterns'
-}
-
-// Using Nuxt Content _path format
-const contentPreviousPost = {
-  title: 'Understanding Reactive State',
-  _path: '/articles/reactive-state'
-}
-
-const contentNextPost = {
-  title: 'Building Custom Composables',
-  _path: '/articles/custom-composables'
-}
-</script>