@xenterprises/nuxt-x-marketing 1.2.1 → 1.3.0

package/app/pages/blog/[...slug].vue

@@ -1,75 +1,87 @@
 <template>
-	<div>
-		<main class="bg-white">
-			<header
-				class="w-full h-[460px] xl:h-[537px] bg-no-repeat bg-cover bg-center bg-blend-darken relative"
-				:style="`background-image: url('${content.headerImage}?format=webp')`"
-			>
-				<div
-					class="absolute top-0 left-0 w-full h-full bg-black bg-opacity-50"
-				></div>
-				<div
-					class="absolute top-20 left-1/2 px-4 mx-auto w-full max-w-screen-xl -translate-x-1/2 xl:top-1/2 xl:-translate-y-1/2 xl:px-0"
-				>
-					<h1
-						class="mb-4 max-w-6xl text-4xl font-extrabold leading-none text-white sm:text-5xl lg:text-7xl px-4"
-					>
-						{{ content.title }}
-					</h1>
-				</div>
-			</header>
-			<div
-				class="flex flex-col relative z-20 justify-between p-8 -mt-36 mx-4 max-w-screen-xl bg-white rounded-xl xl:-mt-32 xl:p-9 xl:mx-auto pb-24 shadow-sm"
-			>
-				<div class="absolute right-0 top-0 p-3">
-					<UButton to="/blog" label="Back to Blog List" variant="ghost" />
-				</div>
-				<div>
-					<div class="text-4xl text-black font-bold pb-6 pt-4">
-						{{ content.title }}
-					</div>
-					<article
-						class="xl:w-[828px] w-full max-w-none format format-sm sm:format-base lg:format-lg format-blue pb-24"
-					>
-						<section
-							class="prose md:prose-xl lg:prose-xl prose-stone"
-							v-html="content.body"
-						></section>
-					</article>
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
+    <div class="mb-6">
+      <UButton
+        to="/blog"
+        variant="ghost"
+        color="neutral"
+        icon="i-lucide-arrow-left"
+        label="Back to Blog"
+        size="sm"
+      />
+    </div>
 
-					<aside class="hidden xl:block" aria-labelledby="sidebar-label">
-						<div class="xl:w-[336px] sticky top-6">
-							<h3 id="sidebar-label" class="sr-only">Sidebar</h3>
-						</div>
-					</aside>
-				</div>
-			</div>
-		</main>
-	</div>
+    <XMarkBlogDetail
+      v-if="displayPost"
+      :post="displayPost"
+      :previous-post="surround?.previous ?? undefined"
+      :next-post="surround?.next ?? undefined"
+      :toc="tocLinks"
+    >
+      <ContentRenderer
+        v-if="rawPost"
+        :value="rawPost"
+      />
+    </XMarkBlogDetail>
+  </div>
 </template>
 
-<script setup>
-const route = useRoute();
-const config = useRuntimeConfig();
-const builder = await $fetch(`https://cdn.builder.io/api/v3/content/posts/`, {
-	query: {
-		apiKey: config?.public?.BUILDERIO_KEY,
-		limit: 1,
-		"query.data.slug": route.params.slug[0],
-	},
-});
-const content = computed(() => {
-	return builder.results[0].data;
-});
-const title = builder.results[0].data.title;
-const description = builder.results[0].data.description;
+<script setup lang="ts">
+const route = useRoute()
+const { getSurround, normalizeBlogPost } = useXBlog()
+
+// Opt-out: xMarketing.blog.active === false disables the shipped blog pages.
+if (useAppConfig()?.xMarketing?.blog?.active === false) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found' })
+}
+
+const path = computed(() => {
+  const slug = route.params.slug
+  const parts = Array.isArray(slug) ? slug : [slug]
+  return `/blog/${parts.filter(Boolean).join('/')}`
+})
+
+const { data: rawPost } = await useAsyncData(
+  () => `marketing-blog-post-${path.value}`,
+  () => queryCollection('blog').path(path.value).first(),
+)
+
+if (!rawPost.value) {
+  throw createError({
+    statusCode: 404,
+    statusMessage: 'Post not found',
+  })
+}
+
+const displayPost = computed(() =>
+  rawPost.value ? normalizeBlogPost(rawPost.value as unknown as Record<string, unknown>) : null,
+)
+
+const { data: surround } = await useAsyncData(
+  () => `marketing-blog-surround-${path.value}`,
+  () => getSurround(path.value),
+)
+
+type TocLink = { id: string; text: string; depth: number }
+
+const tocLinks = computed((): TocLink[] => {
+  const body = (rawPost.value as { body?: { toc?: { links?: TocLink[] } } } | null)?.body
+  return body?.toc?.links ?? []
+})
+
+const title = computed(() => displayPost.value?.title)
+const description = computed(() =>
+  typeof displayPost.value?.description === 'string'
+    ? displayPost.value.description
+    : undefined,
+)
+const ogImage = computed(() => displayPost.value?.img?.src ?? displayPost.value?.image)
+
 useSeoMeta({
-	title,
-	ogTitle: title,
-	description,
-	ogDescription: description,
-});
+  title,
+  ogTitle: title,
+  description,
+  ogDescription: description,
+  ogImage,
+})
 </script>
-
-<style lang="scss" scoped>
-</style>

package/app/pages/blog/index.vue

@@ -1,64 +1,60 @@
 <template>
-  <div class="pb-8 max-w-screen-2xl px-8 mx-auto">
-    <UPageHero :title="blog?.title" :description="blog?.description" />
+  <div class="pb-8 max-w-screen-2xl px-4 sm:px-6 lg:px-8 mx-auto">
+    <UPageHero
+      :title="blog?.title"
+      :description="blog?.description"
+    />
 
     <UPageBody>
-      <UBlogPosts>
-        <UBlogPost
-          v-for="(post, index) in blogPosts?.results"
-          :key="index"
-          :to="`/blog/${post?.data?.slug}`"
-          :title="post?.name"
-          :description="post?.data?.summary"
-          :image="{ src: post?.data?.thumbnail, alt: post?.name }"
-          :orientation="index === 0 ? 'horizontal' : 'vertical'"
-          :class="[index === 0 && 'col-span-full']"
-          :ui="{
-            description: 'line-clamp-3',
-          }"
-        >
-          <div class="mt-4">
-            <UButton
-              :to="`/blog/${post?.data?.slug}`"
-              variant="outline"
-              color="gray"
-              label="Read More"
-            />
-          </div>
-        </UBlogPost>
-      </UBlogPosts>
+      <XMarkBlogList
+        v-if="posts?.length"
+        :posts="posts"
+        :columns="3"
+        :has-filters="true"
+        :has-categories="hasCategories"
+        :has-authors="hasAuthors"
+      />
+      <div
+        v-else
+        class="text-center py-16 text-neutral-600 dark:text-neutral-400"
+      >
+        <UIcon
+          name="i-lucide-file-text"
+          class="w-12 h-12 text-neutral-300 dark:text-neutral-700 mx-auto mb-4"
+        />
+        <p>No posts yet. Add markdown under <code>content/blog/</code>.</p>
+      </div>
     </UPageBody>
   </div>
 </template>
 
-<script setup>
-const appConfig = useAppConfig()?.xMarketing;
-const blog = appConfig?.blog;
-const route = useRoute();
-const config = useRuntimeConfig();
+<script setup lang="ts">
+const appConfig = useAppConfig()?.xMarketing
+const blog = appConfig?.blog
+
+// Opt-out: xMarketing.blog.active === false disables the shipped blog pages.
+if (blog?.active === false) {
+  throw createError({ statusCode: 404, statusMessage: 'Page not found' })
+}
+
+const { getPosts } = useXBlog()
+
+const { data: posts } = await useAsyncData('marketing-blog-posts', () => getPosts())
+
+const hasCategories = computed(() =>
+  (posts.value ?? []).some(p => Boolean(p.category)),
+)
+const hasAuthors = computed(() =>
+  (posts.value ?? []).some(p => Boolean(p.author)),
+)
+
+const title = blog?.meta?.title ?? blog?.title ?? 'Blog'
+const description = blog?.meta?.description ?? blog?.description ?? ''
 
-const blogPosts = await $fetch("https://cdn.builder.io/api/v3/content/posts", {
-  query: {
-    apiKey: config?.public?.BUILDERIO_KEY,
-    offset: 0,
-    fields: "id,name,data.slug,data.summary,data.thumbnail",
-  },
-});
-const title = blog?.meta?.title;
-const description = blog?.meta?.description;
 useSeoMeta({
   title,
   ogTitle: title,
   description,
   ogDescription: description,
-});
-
-// useHead({
-// 	link: [
-// 		{
-// 			rel: "canonical",
-// 			href: appConfig?.url + "/blog",
-// 		},
-// 	],
-// });
+})
 </script>

package/app/pages/index.vue

@@ -46,7 +46,7 @@
 				</h2>
 			</header>
 
-			<XMarkTestimonials :testimonials="testimonials" layout="grid" />
+			<XMarkSocialProofTestimonials :testimonials="testimonials" layout="grid" />
 		</XMarkSection>
 
 		<!-- Pricing Section -->
@@ -63,7 +63,7 @@
 				</p>
 			</header>
 
-			<XMarkPricing :plans="pricingPlans" />
+			<XMarkPricingPlans :plans="pricingPlans" />
 		</XMarkSection>
 
 		<!-- CTA Section -->
@@ -80,8 +80,8 @@
 					</UButton>
 				</div>
 				<div class="mt-6 flex flex-wrap justify-center gap-4">
-					<XMarkBadge preset="no-credit-card" variant="subtle" />
-					<XMarkBadge preset="cancel-anytime" variant="subtle" />
+					<XMarkSocialProofBadge preset="no-credit-card" variant="subtle" />
+					<XMarkSocialProofBadge preset="cancel-anytime" variant="subtle" />
 				</div>
 			</div>
 		</XMarkSection>
@@ -198,10 +198,13 @@
 </template>
 
 <script setup>
+const appConfig = useAppConfig();
+
 useSeoMeta({
 	title: "Modern Platform for Teams",
 	description:
 		"Build, launch, and grow your product with our powerful platform.",
+	ogUrl: appConfig.xMarketing?.url,
 });
 
 // Features data

package/app/types/config.ts

@@ -0,0 +1,134 @@
+/**
+ * Config types for the `xMarketing` app.config.ts namespace.
+ *
+ * Exported so consumers and sibling layers can reference the shape
+ * (config-typing convention, plan 21 §3). This is the *input* contract —
+ * every field is optional so site overrides can set any subset.
+ */
+
+export interface XMarketingNavLink {
+  label: string;
+  to?: string;
+  target?: string;
+  children?: XMarketingNavLink[];
+}
+
+export interface XMarketingTrackingScript {
+  /** Stable ID — used to dedupe re-injection. */
+  id: string;
+  /** External script URL (e.g. "https://www.googletagmanager.com/gtag/js?id=G-XXX"). */
+  src?: string;
+  /** Inline script body (no `src` required). */
+  inline?: string;
+  /** Consent category gate. "necessary" fires immediately; "analytics" / "marketing" gated. */
+  category?: "necessary" | "analytics" | "marketing";
+  /** Extra attributes applied to the injected <script>. */
+  attrs?: Record<string, string>;
+}
+
+/**
+ * Tracking entry — use the convenience IDs for the common tools
+ * (GTM, GA4, Clarity) or `scripts[]` for everything else. Scripts
+ * are injected only after the visitor grants consent for the
+ * matching `category` (default: "analytics").
+ */
+export interface XMarketingTracking {
+  /** Google Tag Manager container ID, e.g. "GTM-XXXXXXX". */
+  gtmId?: string;
+  /** Google Analytics 4 measurement ID, e.g. "G-XXXXXXXX". */
+  ga4Id?: string;
+  /** Microsoft Clarity project ID, e.g. "abc123def4". */
+  clarityId?: string;
+  /**
+   * Arbitrary scripts (Meta Pixel, Hotjar, Segment, LinkedIn Insight,
+   * Pinterest, TikTok, etc.). Each fires once the matching consent
+   * category is granted. Use `inline` for hand-written snippets like
+   * `gtag('js', new Date())`.
+   */
+  scripts?: XMarketingTrackingScript[];
+  /** Auto-inject configured scripts on consent. Default: true. */
+  autoInject?: boolean;
+}
+
+export interface XMarketingConfig {
+  /** Project name */
+  name?: string;
+  /** Project URL */
+  url?: string;
+  config?: {
+    markerProjectId?: string;
+    emailMarketingNewsletters?: {
+      organizationId?: string;
+    };
+  };
+  header?: {
+    /** Set false to opt out of the default navbar in the shipped shell. */
+    active?: boolean;
+    logo?: {
+      src?: string;
+      srcDark?: string;
+      alt?: string;
+    };
+    nav?: {
+      buttons?: {
+        label: string;
+        to: string;
+        icon?: string;
+        target?: string;
+        variant?: string;
+        square?: boolean;
+        color?: string;
+      }[];
+      links?: XMarketingNavLink[];
+    };
+  };
+  footer?: {
+    /** Set false to opt out of the default footer in the shipped shell. */
+    active?: boolean;
+    body?: string;
+    bg?: {
+      color?: string;
+      img?: {
+        src?: string;
+        alt?: string;
+      };
+    };
+    logo?: {
+      src?: string;
+      alt?: string;
+    };
+    socials?: {
+      name: string;
+      url: string;
+      icon: string;
+    }[];
+    columns?: {
+      headerLabel: string;
+      links: {
+        label: string;
+        to: string;
+        target?: string;
+      }[];
+    }[];
+  };
+  /** Cookie-consent banner in the shipped shell; gates tracking injection. */
+  consent?: {
+    active?: boolean;
+  };
+  /** Blog defaults; `active: false` disables the shipped /blog pages (404). */
+  blog?: {
+    active?: boolean;
+    title?: string;
+    description?: string;
+    meta?: {
+      title?: string;
+      description?: string;
+    };
+  };
+  /**
+   * Tracking + analytics config. Read by
+   * `<XMarkPrivacyCookieConsent>` and `useConsentTracking()`.
+   * Only fires after the matching consent category is granted.
+   */
+  tracking?: XMarketingTracking;
+}

package/content.config.ts

@@ -0,0 +1,35 @@
+import { defineContentConfig, defineCollection } from '@nuxt/content'
+import { z } from 'zod'
+
+/**
+ * Default `blog` collection for marketing sites.
+ * Consumers can extend/override this config; markdown lives in the
+ * consumer (or playground) under `content/blog/*.md`.
+ */
+export default defineContentConfig({
+  collections: {
+    blog: defineCollection({
+      type: 'page',
+      source: 'blog/**/*.md',
+      schema: z.object({
+        title: z.string(),
+        description: z.string().optional(),
+        date: z.date().optional(),
+        author: z.union([
+          z.string(),
+          z.object({
+            name: z.string(),
+            avatar: z.string().optional(),
+            title: z.string().optional(),
+            bio: z.string().optional(),
+          }),
+        ]).optional(),
+        image: z.string().optional(),
+        category: z.string().optional(),
+        tags: z.array(z.string()).optional(),
+        published: z.boolean().default(true),
+        readingTime: z.number().optional(),
+      }),
+    }),
+  },
+})

package/nuxt.config.ts

@@ -5,10 +5,23 @@ export default defineNuxtConfig({
   ssr: true,
   devtools: { enabled: process.env.NODE_ENV === "development" },
   runtimeConfig: {
-    public: {
-
-    },
+    public: {},
   },
-  modules: ["@nuxt/ui"],
+  // Blog pages use Nuxt Content (`queryCollection('blog')`). Consumers must
+  // install `@nuxt/content` (peer) and provide `content/blog/**/*.md`.
+  // Builder.io is no longer used.
+  modules: ["@nuxt/ui", "@nuxt/content"],
   css: [resolve(__dirname, "app/assets/css/x-marketing.css")],
-});
+  content: {
+    build: {
+      markdown: {
+        highlight: {
+          theme: {
+            default: "github-light",
+            dark: "github-dark",
+          },
+        },
+      },
+    },
+  },
+});

package/package.json

@@ -2,7 +2,7 @@
   "name": "@xenterprises/nuxt-x-marketing",
   "license": "SEE LICENSE IN LICENSE",
   "type": "module",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -10,13 +10,18 @@
     "build": "nuxt build .playground",
     "generate": "nuxt generate .playground",
     "preview": "nuxt preview .playground",
+    "typecheck": "nuxt typecheck .playground",
+    "lint": "eslint .",
     "test": "npm run test:unit && npm run test:e2e",
     "test:unit": "vitest run --config test/vitest.config.js",
     "test:unit:watch": "vitest --config test/vitest.config.js",
     "test:unit:coverage": "vitest run --config test/vitest.config.js --coverage",
-    "test:e2e": "playwright test --config test/playwright.config.js",
-    "test:e2e:ui": "playwright test --config test/playwright.config.js --ui",
-    "test:e2e:headed": "playwright test --config test/playwright.config.js --headed",
+    "test:run": "vitest run --config test/vitest.config.js",
+    "test:coverage": "vitest run --config test/vitest.config.js --coverage",
+    "test:e2e": "playwright test --config test/playwright.smoke.config.js",
+    "test:e2e:ui": "playwright test --config test/playwright.smoke.config.js --ui",
+    "test:e2e:headed": "playwright test --config test/playwright.smoke.config.js --headed",
+    "test:e2e:full": "playwright test --config test/playwright.config.js",
     "test:visual": "playwright test --config test/playwright.config.js visual-regression",
     "test:visual:update": "playwright test --config test/playwright.config.js visual-regression --update-snapshots"
   },
@@ -25,27 +30,43 @@
     "zod": "^3.23.8"
   },
   "peerDependencies": {
-    "@iconify-json/lucide": ">=1.2.82",
-    "@nuxt/ui": ">=4.6.1",
-    "@tailwindcss/typography": ">=0.5.0",
-    "nuxt": ">=4.0.0",
-    "vue": ">=3.0.0"
+    "@iconify-json/lucide": "^1.2.82",
+    "@nuxt/content": "^3.0.0",
+    "@nuxt/ui": "^4.6.1",
+    "@tailwindcss/typography": "^0.5.0",
+    "better-sqlite3": "^11.0.0 || ^12.0.0",
+    "nuxt": "^4.0.0",
+    "vue": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@nuxt/content": {
+      "optional": false
+    },
+    "better-sqlite3": {
+      "optional": false
+    }
   },
   "devDependencies": {
     "@axe-core/playwright": "^4.8.4",
     "@iconify-json/lucide": "^1.2.82",
+    "@nuxt/content": "^3.8.2",
+    "@nuxt/eslint": "^1.15.2",
     "@nuxt/ui": "^4.6.1",
     "@playwright/test": "^1.41.1",
     "@tailwindcss/typography": "^0.5.19",
+    "@types/node": "^22.14.1",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vitest/coverage-v8": "^2.1.8",
     "@vue/test-utils": "^2.4.4",
+    "better-sqlite3": "^12.5.0",
+    "eslint": "^9.39.0",
     "happy-dom": "^13.3.8",
     "nuxt": "^4.4.2",
     "nuxt-shiki": "^0.3.2",
     "typescript": "^5.6.3",
     "vitest": "^2.1.8",
-    "vue": "latest"
+    "vue": "^3.5.39",
+    "vue-tsc": "^2.2.8"
   },
   "publishConfig": {
     "access": "public"