@xenterprises/nuxt-x-marketing 1.0.2 → 1.1.0

package/.playground/pages/blog/detail.vue

@@ -1,471 +0,0 @@
-<template>
-  <div class="min-h-screen">
-    <!-- Page Header -->
-    <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 Detail
-      </h1>
-      <p class="mt-2 text-neutral-600 dark:text-neutral-400">
-        Full blog post view with sidebar, rich content, and navigation.
-      </p>
-    </div>
-
-    <!-- Demo: Full Layout -->
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
-      <XMarkBlogDetail
-        :post="post"
-        :previous-post="previousPost"
-        :next-post="nextPost"
-        :toc="tableOfContents"
-      >
-        <template #default>
-          <article class="prose dark:prose-invert max-w-none">
-            <p class="lead">
-              Building a marketing website has never been easier. With modern
-              tools like Nuxt, Vue, and Tailwind CSS, developers can create
-              stunning, performant sites in record time. This guide walks you
-              through the essential patterns and best practices for crafting
-              marketing sites that convert.
-            </p>
-
-            <h2 id="getting-started">Getting Started</h2>
-            <p>
-              Before diving into the code, it's important to understand the core
-              principles that make marketing websites effective. These include
-              clear messaging, compelling visuals, and optimized performance.
-            </p>
-            <p>
-              The nuxt-x-marketing layer provides 33 production-ready components
-              specifically designed for marketing sites. From hero sections to
-              testimonials, each component is crafted with conversion in mind.
-            </p>
-
-            <h2 id="project-setup">Project Setup</h2>
-            <p>
-              Start by creating a new Nuxt project and adding the marketing
-              layer:
-            </p>
-
-            <XMarkCodeBlock :code="bashCode" language="bash" show-copy />
-
-            <p>Then configure your <code>nuxt.config.ts</code>:</p>
-
-            <XMarkCodeBlock
-              :code="nuxtConfigCode"
-              language="typescript"
-              show-copy
-            />
-
-            <h2 id="hero-sections">Creating Hero Sections</h2>
-            <p>
-              The hero section is the first thing visitors see. It needs to
-              capture attention immediately and communicate your value
-              proposition clearly.
-            </p>
-
-            <figure>
-              <img
-                src="https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=400&fit=crop"
-                alt="Dashboard design"
-              />
-              <figcaption>
-                A well-designed hero section can increase conversions by up to
-                35%.
-              </figcaption>
-            </figure>
-
-            <p>Key elements of an effective hero section:</p>
-            <ul>
-              <li>
-                <strong>Clear headline</strong> — Communicate your main value
-                proposition in under 10 words
-              </li>
-              <li>
-                <strong>Supporting text</strong> — Expand on the headline with
-                1-2 sentences
-              </li>
-              <li>
-                <strong>Strong CTA</strong> — Use action-oriented button text
-              </li>
-              <li>
-                <strong>Visual element</strong> — High-quality image or video
-                that reinforces the message
-              </li>
-            </ul>
-
-            <h2 id="social-proof">Adding Social Proof</h2>
-            <p>
-              Social proof is one of the most powerful conversion tools.
-              Testimonials, logos, and trust badges help establish credibility.
-            </p>
-
-            <blockquote>
-              "These components saved us weeks of development time. The quality
-              and attention to detail is outstanding."
-              <cite>— Sarah Chen, CTO at TechCorp</cite>
-            </blockquote>
-
-            <p>
-              Use the testimonials component to showcase customer feedback. The
-              grid layout works well for displaying multiple testimonials, while
-              the featured layout highlights a single powerful quote.
-            </p>
-
-            <h2 id="pricing-tables">Pricing Tables</h2>
-            <p>
-              Your pricing page is where conversions happen. Make it easy for
-              visitors to understand their options and choose the right plan.
-            </p>
-
-            <h3>Best Practices</h3>
-            <ol>
-              <li>Limit to 3-4 pricing tiers to avoid decision paralysis</li>
-              <li>Highlight the most popular or recommended plan</li>
-              <li>Use clear feature comparisons</li>
-              <li>Include trust badges near the pricing</li>
-              <li>Offer a money-back guarantee to reduce friction</li>
-            </ol>
-
-            <h2 id="performance">Performance Optimization</h2>
-            <p>
-              Performance directly impacts conversions. Studies show that a
-              <mark>1-second delay</mark> in page load time can result in a
-              <strong>7% reduction</strong> in conversions.
-            </p>
-
-            <p>The marketing layer includes built-in optimizations:</p>
-
-            <div class="not-prose">
-              <UTable
-                :data="performanceData"
-                :columns="performanceColumns"
-                class="flex-1"
-              />
-            </div>
-
-            <hr />
-
-            <h2 id="conclusion">Conclusion</h2>
-            <p>
-              Building effective marketing websites requires the right
-              combination of design, performance, and conversion optimization.
-              With nuxt-x-marketing, you get battle-tested components that
-              handle the heavy lifting, letting you focus on your content and
-              messaging.
-            </p>
-            <p>
-              Ready to get started? Check out the
-              <a href="/content/features">features documentation</a> or browse
-              the <a href="/">component library</a> to see what's available.
-            </p>
-          </article>
-        </template>
-
-        <!-- Custom Sidebar Content -->
-        <template #sidebar>
-          <XMarkBlogSidebar
-            :categories="categories"
-            :tags="tags"
-            :recent-posts="recentPosts"
-            :has-search="true"
-            :has-cta="true"
-          />
-        </template>
-      </XMarkBlogDetail>
-    </div>
-
-    <!-- Props Documentation -->
-    <div class="border-t border-neutral-200 dark:border-neutral-800">
-      <div class="max-w-4xl mx-auto px-8 py-12">
-        <h2 class="text-lg font-semibold mb-6">Blog Detail Props</h2>
-        <div class="not-prose">
-          <UTable :data="propsData" :columns="propsColumns" class="flex-1" />
-        </div>
-
-        <h2 class="text-lg font-semibold mt-12 mb-6">Slots</h2>
-        <div class="not-prose">
-          <UTable :data="slotsData" :columns="slotsColumns" class="flex-1" />
-        </div>
-
-        <h2 class="text-lg font-semibold mt-12 mb-6">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",
-  excerpt: "Brief description...",
-  img: { src: "https://...", alt: "Image description" },
-  date: "2024-01-15",
-  readingTime: "5 min read",
-  category: "Tutorial",
-  author: {
-    name: "Author Name",
-    avatar: "https://...",
-    bio: "Author bio...",
-    twitter: "@handle"
-  }
-}</pre
-          >
-        </div>
-
-        <h2 class="text-lg font-semibold mt-12 mb-4">Code Example</h2>
-        <CodeExample title="Blog Detail Usage" :code="codeExample" />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { h, resolveComponent } from "vue";
-
-// Code examples for Shiki highlighting
-const bashCode = `# Create new project
-npx nuxi init my-marketing-site
-cd my-marketing-site
-
-# Install dependencies
-npm install
-
-# Add the marketing layer
-npm install @xenterprises/nuxt-x-marketing`;
-
-const nuxtConfigCode = `export default defineNuxtConfig({
-  extends: ['@xenterprises/nuxt-x-marketing'],
-
-  modules: ['@nuxt/ui'],
-
-  app: {
-    head: {
-      title: 'My Marketing Site'
-    }
-  }
-})`;
-
-const codeExample = `<!-- With Nuxt Content v3 -->
-<script setup>
-const route = useRoute()
-
-// Fetch post
-const { data: post } = await useAsyncData('post', () =>
-  queryCollection('blog')
-    .where('slug', '=', route.params.slug)
-    .findOne()
-)
-
-// Fetch navigation
-const { data: surround } = await useAsyncData('surround', () =>
-  queryCollectionItemSurroundings('blog', route.path)
-)
-<\/script>
-
-<template>
-  <XMarkBlogDetail
-    :post="post"
-    :previous-post="surround?.[0]"
-    :next-post="surround?.[1]"
-    :toc="post?.body?.toc?.links || []"
-  >
-    <ContentRenderer :value="post" />
-
-    <template #sidebar>
-      <XMarkBlogSidebar
-        :categories="categories"
-        :recent-posts="recentPosts"
-      />
-    </template>
-  </XMarkBlogDetail>
-</template>`;
-
-// Performance table data
-const performanceData = ref([
-  { feature: "Lazy loading", benefit: "Images load only when visible" },
-  { feature: "CSS purging", benefit: "Only used styles are shipped" },
-  { feature: "Component splitting", benefit: "Components load on demand" },
-  { feature: "Font optimization", benefit: "Fonts preloaded and subset" },
-]);
-
-const performanceColumns = [
-  {
-    accessorKey: "feature",
-    header: "Feature",
-    cell: ({ row }) => row.getValue("feature"),
-  },
-  {
-    accessorKey: "benefit",
-    header: "Benefit",
-    cell: ({ row }) => row.getValue("benefit"),
-  },
-];
-
-// Props documentation table data
-const propsData = ref([
-  {
-    prop: "post",
-    type: "Object",
-    default: "required",
-    description:
-      "Post object with title, img: { src, alt? }, date, author, etc.",
-  },
-  {
-    prop: "previousPost",
-    type: "Object",
-    default: "null",
-    description: "Previous post for navigation",
-  },
-  {
-    prop: "nextPost",
-    type: "Object",
-    default: "null",
-    description: "Next post for navigation",
-  },
-  {
-    prop: "toc",
-    type: "Array",
-    default: "[]",
-    description: "Table of contents [{ id, text, depth }]",
-  },
-]);
-
-const propsColumns = [
-  {
-    accessorKey: "prop",
-    header: "Prop",
-    cell: ({ row }) =>
-      h("code", { class: "text-xs font-mono" }, row.getValue("prop")),
-  },
-  {
-    accessorKey: "type",
-    header: "Type",
-    cell: ({ row }) => row.getValue("type"),
-  },
-  {
-    accessorKey: "default",
-    header: "Default",
-    cell: ({ row }) => row.getValue("default"),
-  },
-  {
-    accessorKey: "description",
-    header: "Description",
-    cell: ({ row }) => row.getValue("description"),
-  },
-];
-
-// Slots table data
-const slotsData = ref([
-  { slot: "default", description: "Main article content (prose)" },
-  {
-    slot: "sidebar",
-    description: "Custom sidebar content (overrides default)",
-  },
-]);
-
-const slotsColumns = [
-  {
-    accessorKey: "slot",
-    header: "Slot",
-    cell: ({ row }) =>
-      h("code", { class: "text-xs font-mono" }, row.getValue("slot")),
-  },
-  {
-    accessorKey: "description",
-    header: "Description",
-    cell: ({ row }) => row.getValue("description"),
-  },
-];
-
-// Main post
-const post = {
-  title: "Building Modern Marketing Sites with Nuxt",
-  excerpt:
-    "A comprehensive guide to creating beautiful, performant marketing websites using Vue, Nuxt, and modern web technologies.",
-  img: {
-    src: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?w=1200&h=600&fit=crop",
-    alt: "Team working on laptops",
-  },
-  date: "2024-01-15",
-  readingTime: "8 min read",
-  category: "Tutorial",
-  author: {
-    name: "Sarah Chen",
-    avatar:
-      "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop",
-    bio: "Sarah is a frontend developer specializing in Vue and Nuxt. She writes about web development and design systems.",
-    twitter: "@sarahchen",
-  },
-};
-
-// Navigation posts
-const previousPost = {
-  title: "Introduction to Vue 3 Composition API",
-  slug: "vue-composition-api",
-};
-
-const nextPost = {
-  title: "Optimizing Nuxt for Production",
-  slug: "nuxt-production-optimization",
-};
-
-// Table of contents
-const tableOfContents = [
-  { id: "getting-started", text: "Getting Started", depth: 2 },
-  { id: "project-setup", text: "Project Setup", depth: 2 },
-  { id: "hero-sections", text: "Creating Hero Sections", depth: 2 },
-  { id: "social-proof", text: "Adding Social Proof", depth: 2 },
-  { id: "pricing-tables", text: "Pricing Tables", depth: 2 },
-  { id: "performance", text: "Performance Optimization", depth: 2 },
-  { id: "conclusion", text: "Conclusion", depth: 2 },
-];
-
-// Sidebar data
-const categories = [
-  { name: "Tutorial", slug: "tutorial", count: 12 },
-  { name: "Guide", slug: "guide", count: 8 },
-  { name: "Design", slug: "design", count: 6 },
-  { name: "Performance", slug: "performance", count: 4 },
-  { name: "News", slug: "news", count: 3 },
-];
-
-const tags = [
-  { name: "Nuxt", slug: "nuxt" },
-  { name: "Vue", slug: "vue" },
-  { name: "Tailwind CSS", slug: "tailwind" },
-  { name: "Components", slug: "components" },
-  { name: "Marketing", slug: "marketing" },
-  { name: "SEO", slug: "seo" },
-  { name: "Performance", slug: "performance" },
-  { name: "Design", slug: "design" },
-];
-
-const recentPosts = [
-  {
-    title: "Dark Mode Best Practices",
-    slug: "dark-mode",
-    img: {
-      src: "https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=200&h=200&fit=crop",
-      alt: "Dark mode",
-    },
-    date: "2024-01-10",
-  },
-  {
-    title: "Building a Landing Page in 10 Minutes",
-    slug: "landing-page-tutorial",
-    img: {
-      src: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=200&h=200&fit=crop",
-      alt: "Landing page",
-    },
-    date: "2024-01-05",
-  },
-  {
-    title: "CSS Grid vs Flexbox: When to Use Each",
-    slug: "css-grid-flexbox",
-    img: {
-      src: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=200&h=200&fit=crop",
-      alt: "CSS layout",
-    },
-    date: "2024-01-02",
-  },
-];
-</script>