@xenterprises/nuxt-x-marketing 1.0.2 → 1.1.0

package/.playground/pages/blog/sidebar.vue

@@ -1,279 +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 Sidebar</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">Sidebar with search, categories, tags, recent posts, and newsletter CTA.</p>
-    </div>
-
-    <div class="space-y-0">
-      <!-- Full Sidebar Demo -->
-      <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">Full Sidebar</span>
-          <h2 class="xText-headline">Complete Sidebar Layout</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">With search, categories, tags, recent posts, and newsletter CTA</p>
-        </div>
-        <div class="grid lg:grid-cols-3 gap-8">
-          <div class="lg:col-span-2 bg-neutral-50 dark:bg-neutral-800/50 rounded-lg p-8 min-h-[400px]">
-            <p class="text-neutral-500">Main content area - blog post or list would go here</p>
-          </div>
-          <div>
-            <XMarkBlogSidebar
-              :categories="categories"
-              :tags="tags"
-              :recent-posts="recentPosts"
-              :has-search="true"
-              :has-cta="true"
-              @search="handleSearch"
-            />
-          </div>
-        </div>
-      </XMarkSection>
-
-      <!-- Minimal Sidebar -->
-      <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 Sidebar</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Only search and categories, no CTA</p>
-        </div>
-        <div class="max-w-sm mx-auto">
-          <XMarkBlogSidebar
-            :categories="categories"
-            :has-search="true"
-            :has-cta="false"
-            @search="handleSearch"
-          />
-        </div>
-      </XMarkSection>
-
-      <!-- Without Search -->
-      <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">No Search</span>
-          <h2 class="xText-headline">Without Search Input</h2>
-          <p class="mt-4 text-neutral-600 dark:text-neutral-400">Focus on navigation elements only</p>
-        </div>
-        <div class="max-w-sm mx-auto">
-          <XMarkBlogSidebar
-            :categories="categories"
-            :tags="tags"
-            :recent-posts="recentPosts.slice(0, 2)"
-            :has-search="false"
-            :has-cta="true"
-          />
-        </div>
-      </XMarkSection>
-
-      <!-- Events -->
-      <XMarkSection bg="subtle">
-        <h2 class="text-lg font-semibold mb-6">Events</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">Event</th>
-                <th class="text-left py-3 px-4 font-medium">Payload</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">@search</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Emitted when user presses Enter in search input</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </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">hasSearch</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 search input at the top</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">Categories [{ name, slug, count }]</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">tags</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">Tags [{ name, slug }]</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">recentPosts</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">Recent posts [{ title, slug, img?: { src, alt? }, date? }]</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">categoryBasePath</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'/blog/category'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Base path for category links</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">tagBasePath</td>
-                <td class="py-3 px-4">String</td>
-                <td class="py-3 px-4">'/blog/tag'</td>
-                <td class="py-3 px-4 text-neutral-600 dark:text-neutral-400">Base path for tag links</td>
-              </tr>
-              <tr>
-                <td class="py-3 px-4 font-mono text-xs">hasCta</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 newsletter CTA section</td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      </XMarkSection>
-
-      <!-- Data Structure -->
-      <XMarkSection bg="subtle">
-        <h2 class="text-lg font-semibold mb-4">Data Structures</h2>
-        <div class="grid md:grid-cols-3 gap-6">
-          <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-4">
-            <h3 class="font-medium mb-2">Category Object</h3>
-            <pre class="text-xs font-mono overflow-x-auto">{
-  name: "Tutorial",
-  slug: "/blog/category/tutorial",
-  count: 12
-}</pre>
-          </div>
-          <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-4">
-            <h3 class="font-medium mb-2">Tag Object</h3>
-            <pre class="text-xs font-mono overflow-x-auto">{
-  name: "Vue",
-  slug: "/blog/tag/vue"
-}</pre>
-          </div>
-          <div class="bg-neutral-100 dark:bg-neutral-800 rounded-lg p-4">
-            <h3 class="font-medium mb-2">Recent Post Object</h3>
-            <pre class="text-xs font-mono overflow-x-auto">{
-  title: "Getting Started",
-  slug: "/blog/getting-started",
-  img: { src: "...", alt: "..." },
-  date: "2024-01-15"
-}</pre>
-          </div>
-        </div>
-      </XMarkSection>
-
-      <!-- Code Example -->
-      <XMarkSection bg="default">
-        <h2 class="text-lg font-semibold mb-4">Code Example</h2>
-        <CodeExample title="Blog Sidebar Usage" :code="codeExample" />
-      </XMarkSection>
-    </div>
-  </div>
-</template>
-
-<script setup>
-// Initialize scroll reveal animations
-useScrollReveal()
-
-const handleSearch = (query) => {
-  console.log('Search:', query)
-  // In a real app: navigateTo(`/blog?search=${query}`)
-}
-
-const codeExample = `<!-- Full sidebar with blog layout -->
-<div class="grid lg:grid-cols-3 gap-8">
-  <!-- Main content -->
-  <div class="lg:col-span-2">
-    <XMarkBlogList :posts="posts" />
-  </div>
-
-  <!-- Sidebar -->
-  <div>
-    <XMarkBlogSidebar
-      :categories="categories"
-      :tags="tags"
-      :recent-posts="recentPosts"
-      :has-search="true"
-      :has-cta="true"
-      @search="handleSearch"
-    />
-  </div>
-</div>
-
-<!-- Handle search event -->
-const handleSearch = (query) => {
-  navigateTo(\`/blog?search=\${query}\`)
-}
-
-<!-- Minimal sidebar (no CTA) -->
-<XMarkBlogSidebar
-  :categories="categories"
-  :has-search="true"
-  :has-cta="false"
-  @search="handleSearch"
-/>
-
-<!-- Without search -->
-<XMarkBlogSidebar
-  :categories="categories"
-  :tags="tags"
-  :recent-posts="recentPosts"
-  :has-search="false"
-  :has-cta="true"
-/>`
-
-const categories = [
-  { name: 'Tutorial', slug: '/blog/category/tutorial', count: 12 },
-  { name: 'Development', slug: '/blog/category/development', count: 8 },
-  { name: 'Design', slug: '/blog/category/design', count: 6 },
-  { name: 'Performance', slug: '/blog/category/performance', count: 4 }
-]
-
-const tags = [
-  { name: 'Vue', slug: '/blog/tag/vue' },
-  { name: 'Nuxt', slug: '/blog/tag/nuxt' },
-  { name: 'TypeScript', slug: '/blog/tag/typescript' },
-  { name: 'Tailwind', slug: '/blog/tag/tailwind' },
-  { name: 'CSS', slug: '/blog/tag/css' },
-  { name: 'JavaScript', slug: '/blog/tag/javascript' }
-]
-
-const recentPosts = [
-  {
-    title: 'Getting Started with Nuxt 3',
-    slug: '/blog/getting-started',
-    img: { src: 'https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=100&h=100&fit=crop', alt: 'Code' },
-    date: '2024-01-15'
-  },
-  {
-    title: 'Vue 3 Composition API',
-    slug: '/blog/composition-api',
-    img: { src: 'https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=100&h=100&fit=crop', alt: 'Code' },
-    date: '2024-01-10'
-  },
-  {
-    title: 'Building Design Systems',
-    slug: '/blog/design-systems',
-    img: { src: 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=100&h=100&fit=crop', alt: 'Design' },
-    date: '2024-01-05'
-  }
-]
-</script>

package/.playground/pages/config.vue

@@ -1,289 +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">App Configuration</h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
-        Full kitchen sink example of app.config.ts for nuxt-x-marketing layer.
-      </p>
-    </div>
-
-    <div class="p-8 space-y-8">
-      <!-- Copy Button -->
-      <div class="flex items-center justify-between">
-        <h2 class="text-lg font-semibold">app.config.ts</h2>
-        <UButton
-          :icon="copied ? 'i-lucide-check' : 'i-lucide-copy'"
-          :label="copied ? 'Copied!' : 'Copy to Clipboard'"
-          :color="copied ? 'success' : 'neutral'"
-          variant="soft"
-          @click="copyToClipboard"
-        />
-      </div>
-
-      <!-- Code Block -->
-      <div class="relative">
-        <pre
-          class="bg-neutral-900 text-neutral-100 rounded-xl p-6 overflow-x-auto text-sm leading-relaxed"
-        ><code>{{ configCode }}</code></pre>
-      </div>
-
-      <!-- Section Breakdown -->
-      <div class="space-y-6">
-        <h2 class="text-lg font-semibold">Configuration Sections</h2>
-
-        <div class="grid md:grid-cols-2 gap-6">
-          <!-- UI Config -->
-          <article class="bg-neutral-100 dark:bg-neutral-800 rounded-xl p-6">
-            <h3 class="font-semibold mb-2 flex items-center gap-2">
-              <UIcon name="i-lucide-palette" class="w-5 h-5 text-primary-500" />
-              ui
-            </h3>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400">
-              Nuxt UI theme configuration including colors, button variants, and component slots.
-            </p>
-          </article>
-
-          <!-- xMarketing Config -->
-          <article class="bg-neutral-100 dark:bg-neutral-800 rounded-xl p-6">
-            <h3 class="font-semibold mb-2 flex items-center gap-2">
-              <UIcon name="i-lucide-settings" class="w-5 h-5 text-primary-500" />
-              xMarketing.config
-            </h3>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400">
-              Integration settings for Marker.io feedback and email marketing services.
-            </p>
-          </article>
-
-          <!-- Header Config -->
-          <article class="bg-neutral-100 dark:bg-neutral-800 rounded-xl p-6">
-            <h3 class="font-semibold mb-2 flex items-center gap-2">
-              <UIcon name="i-lucide-panel-top" class="w-5 h-5 text-primary-500" />
-              xMarketing.header
-            </h3>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400">
-              Logo, navigation links, and header buttons. Supports nested dropdown menus.
-            </p>
-          </article>
-
-          <!-- Footer Config -->
-          <article class="bg-neutral-100 dark:bg-neutral-800 rounded-xl p-6">
-            <h3 class="font-semibold mb-2 flex items-center gap-2">
-              <UIcon name="i-lucide-panel-bottom" class="w-5 h-5 text-primary-500" />
-              xMarketing.footer
-            </h3>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400">
-              Footer with logo, description, social links, and multi-column link sections.
-            </p>
-          </article>
-
-          <!-- Blog Config -->
-          <article class="bg-neutral-100 dark:bg-neutral-800 rounded-xl p-6">
-            <h3 class="font-semibold mb-2 flex items-center gap-2">
-              <UIcon name="i-lucide-file-text" class="w-5 h-5 text-primary-500" />
-              xMarketing.blog
-            </h3>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400">
-              Blog section configuration including title, description, and meta tags.
-            </p>
-          </article>
-
-          <!-- Legal Config -->
-          <article class="bg-neutral-100 dark:bg-neutral-800 rounded-xl p-6">
-            <h3 class="font-semibold mb-2 flex items-center gap-2">
-              <UIcon name="i-lucide-scale" class="w-5 h-5 text-primary-500" />
-              xMarketing.legal
-            </h3>
-            <p class="text-sm text-neutral-600 dark:text-neutral-400">
-              Company legal information for privacy policy, terms, and compliance pages.
-            </p>
-          </article>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-const copied = ref(false)
-
-const configCode = `export default defineAppConfig({
-  // Nuxt UI Theme Configuration
-  ui: {
-    primary: "brand",
-    colors: {
-      primary: "brand",
-      secondary: "deep",
-      neutral: "zinc",
-    },
-    header: {
-      container: "max-w-screen-2xl container mx-auto",
-    },
-    button: {
-      slots: {
-        base: "font-medium tracking-wide",
-      },
-      variants: {
-        size: {
-          lg: "px-8 py-4 text-base",
-          xl: "px-10 py-5 text-lg",
-        },
-      },
-    },
-    card: {
-      slots: {
-        root: "overflow-hidden",
-        body: "p-0",
-      },
-    },
-  },
-
-  // X Marketing Layer Configuration
-  xMarketing: {
-    // Project Identity
-    name: "My SaaS Product",
-    url: "https://mysaas.com",
-
-    // Third-party Integrations
-    config: {
-      markerProjectId: "your-marker-project-id",
-      emailMarketingNewsletters: {
-        organizationId: "your-org-id",
-      },
-    },
-
-    // Header / Navigation
-    header: {
-      logo: {
-        src: "/images/logo.svg",
-        srcDark: "/images/logo-dark.svg",
-        alt: "My SaaS Logo",
-      },
-      nav: {
-        links: [
-          { label: "Features", to: "#features" },
-          { label: "Pricing", to: "#pricing" },
-          {
-            label: "Resources",
-            children: [
-              { label: "Documentation", to: "/docs" },
-              { label: "Blog", to: "/blog" },
-              { label: "Changelog", to: "/changelog" },
-            ],
-          },
-          { label: "About", to: "/about" },
-        ],
-        buttons: [
-          {
-            label: "Sign In",
-            to: "/login",
-            variant: "ghost",
-          },
-          {
-            label: "Get Started",
-            to: "/signup",
-            color: "primary",
-          },
-        ],
-      },
-    },
-
-    // Footer
-    footer: {
-      logo: {
-        src: "/images/logo.svg",
-        alt: "My SaaS Logo",
-      },
-      bg: {
-        color: "bg-neutral-900",
-        img: {
-          src: "/images/footer-pattern.svg",
-          alt: "",
-        },
-      },
-      body: "Build faster with our comprehensive toolkit. Trusted by thousands of developers worldwide.",
-      socials: [
-        { name: "GitHub", url: "https://github.com/mycompany", icon: "i-lucide-github" },
-        { name: "Twitter", url: "https://twitter.com/mycompany", icon: "i-lucide-twitter" },
-        { name: "LinkedIn", url: "https://linkedin.com/company/mycompany", icon: "i-lucide-linkedin" },
-        { name: "Discord", url: "https://discord.gg/mycompany", icon: "i-lucide-message-circle" },
-      ],
-      columns: [
-        {
-          headerLabel: "Product",
-          links: [
-            { label: "Features", to: "#features" },
-            { label: "Pricing", to: "#pricing" },
-            { label: "Changelog", to: "/changelog" },
-            { label: "Roadmap", to: "/roadmap" },
-            { label: "Integrations", to: "/integrations" },
-          ],
-        },
-        {
-          headerLabel: "Company",
-          links: [
-            { label: "About", to: "/about" },
-            { label: "Blog", to: "/blog" },
-            { label: "Careers", to: "/careers" },
-            { label: "Press Kit", to: "/press" },
-            { label: "Contact", to: "/contact" },
-          ],
-        },
-        {
-          headerLabel: "Resources",
-          links: [
-            { label: "Documentation", to: "/docs" },
-            { label: "API Reference", to: "/api" },
-            { label: "Guides", to: "/guides" },
-            { label: "Help Center", to: "/help" },
-            { label: "Community", to: "/community" },
-          ],
-        },
-        {
-          headerLabel: "Legal",
-          links: [
-            { label: "Privacy Policy", to: "/privacy" },
-            { label: "Terms of Service", to: "/terms" },
-            { label: "Cookie Policy", to: "/cookies" },
-            { label: "GDPR", to: "/gdpr" },
-          ],
-        },
-      ],
-    },
-
-    // Blog Configuration
-    blog: {
-      active: true,
-      title: "Blog",
-      description: "Insights, tutorials, and updates from our team.",
-      meta: {
-        title: "Blog | My SaaS",
-        description: "Read the latest insights, tutorials, and product updates from the My SaaS team.",
-      },
-    },
-
-    // Legal / Company Information
-    legal: {
-      companyName: "My SaaS Inc.",
-      companyAddress: "123 Innovation Drive, San Francisco, CA 94107",
-      companyEmail: "legal@mysaas.com",
-      companyPhone: "+1 (555) 123-4567",
-      registrationNumber: "12345678",
-      vatNumber: "US123456789",
-      jurisdiction: "State of Delaware, USA",
-      lastUpdated: "2024-01-01",
-    },
-  },
-});`
-
-async function copyToClipboard() {
-  try {
-    await navigator.clipboard.writeText(configCode)
-    copied.value = true
-    setTimeout(() => {
-      copied.value = false
-    }, 2000)
-  } catch (err) {
-    console.error('Failed to copy:', err)
-  }
-}
-</script>