@xenterprises/nuxt-x-marketing 1.2.2 → 1.3.0

package/app/app.vue

@@ -1,17 +1,9 @@
 <template>
   <div class="min-h-screen flex flex-col">
-    <!-- Navbar -->
-    <XMarkNavbar
-      :links="navLinks"
-      :logo-light="logoLight"
-      :logo-dark="logoDark"
-      logo-alt="Company"
-    >
-      <template #actions>
-        <UButton variant="ghost" color="neutral">Sign In</UButton>
-        <UButton color="primary">Get Started</UButton>
-      </template>
-    </XMarkNavbar>
+    <!-- Default navbar — reads appConfig.xMarketing.header (logo, nav.links,
+         nav.buttons). Opt out with xMarketing.header.active: false or by
+         shipping your own app/app.vue. -->
+    <XHeaderNav v-if="headerActive" />
 
     <!-- Main Content -->
     <main class="flex-grow">
@@ -23,30 +15,20 @@
       </UApp>
     </main>
 
-    <!-- Newsletter Section -->
-    <XMarkSection bg="subtle" padding="lg">
-      <XMarkNewsletter
-        title="Stay in the loop"
-        description="Get the latest updates, tips, and insights delivered to your inbox."
-        variant="default"
-        @submit="handleNewsletterSubmit"
-      />
-    </XMarkSection>
-
-    <!-- Footer -->
-    <XMarkFooter
-      :logo="logoDark"
-      logo-alt="Company"
-      description="Building the future of modern software."
-      :social="socialLinks"
-      :columns="footerColumns"
-      :legal-links="legalLinks"
-    />
+    <!-- Default footer — reads appConfig.xMarketing.footer (logo, body,
+         socials, columns, bg). Shows the newsletter form when
+         xMarketing.config.emailMarketingNewsletters.organizationId is set.
+         Opt out with xMarketing.footer.active: false. -->
+    <XFooter v-if="footerActive" />
 
     <!-- Cookie consent banner — auto-shows on first visit and fires
          any tracking scripts configured in app.config.xMarketing.tracking
-         once the visitor accepts. -->
-    <XMarkPrivacyCookieConsent policy-url="/cookies" privacy-url="/privacy" />
+         once the visitor accepts. Opt out with xMarketing.consent.active: false. -->
+    <XMarkPrivacyCookieConsent
+      v-if="consentActive"
+      policy-url="/cookies"
+      privacy-url="/privacy"
+    />
   </div>
 </template>
 <script setup>
@@ -54,79 +36,28 @@ import { onMounted } from "vue";
 import markerSDK from "@marker.io/browser";
 
 const appConfig = useAppConfig();
+const xMarketing = appConfig?.xMarketing;
 
-useSeoMeta({
-  titleTemplate: `%s`,
-});
-
-// Logo configuration (replace with actual logos)
-const logoLight = "/logo-white.svg";
-const logoDark = "/logo-dark.svg";
+const headerActive = computed(() => xMarketing?.header?.active !== false);
+const footerActive = computed(() => xMarketing?.footer?.active !== false);
+const consentActive = computed(() => xMarketing?.consent?.active !== false);
 
-// Navigation links
-const navLinks = [
-  { label: "Features", to: "/#features" },
-  { label: "Pricing", to: "/pricing" },
-  { label: "Blog", to: "/blog" },
-  { label: "About", to: "/about" },
-];
+// xMarketing.name/url feed the default SEO wiring: when `name` is set the
+// title template becomes "<page> | <name>" and og:site_name is emitted;
+// the shipped home page also reads `url` for og:url.
+const siteName = computed(() => xMarketing?.name);
 
-// Social links
-const socialLinks = [
-  { name: "Twitter", href: "https://twitter.com", icon: "i-lucide-twitter" },
-  { name: "GitHub", href: "https://github.com", icon: "i-lucide-github" },
-  { name: "LinkedIn", href: "https://linkedin.com", icon: "i-lucide-linkedin" },
-];
-
-// Footer columns
-const footerColumns = [
-  {
-    title: "Product",
-    links: [
-      { label: "Features", to: "/#features" },
-      { label: "Pricing", to: "/pricing" },
-      { label: "Integrations", to: "/integrations" },
-      { label: "Changelog", to: "/changelog" },
-    ],
-  },
-  {
-    title: "Company",
-    links: [
-      { label: "About", to: "/about" },
-      { label: "Blog", to: "/blog" },
-      { label: "Careers", to: "/careers" },
-      { label: "Contact", to: "/contact" },
-    ],
-  },
-  {
-    title: "Resources",
-    links: [
-      { label: "Documentation", to: "/docs" },
-      { label: "Help Center", to: "/help" },
-      { label: "Community", to: "/community" },
-      { label: "Status", to: "/status" },
-    ],
-  },
-];
-
-// Legal links
-const legalLinks = [
-  { label: "Privacy Policy", to: "/privacy" },
-  { label: "Terms of Service", to: "/terms" },
-  { label: "Cookie Policy", to: "/cookies" },
-];
-
-// Newsletter submit handler
-const handleNewsletterSubmit = (email) => {
-  console.log("Newsletter signup:", email);
-  // Implement your newsletter signup logic here
-};
+useSeoMeta({
+  titleTemplate: (title) =>
+    title ? (siteName.value ? `${title} | ${siteName.value}` : title) : (siteName.value ?? ""),
+  ogSiteName: siteName,
+});
 
-// Marker.io widget
-if (appConfig && appConfig?.xMarketing?.config?.markerProjectId) {
+// Marker.io widget — only loads when a project ID is configured.
+if (xMarketing?.config?.markerProjectId) {
   onMounted(() => {
     markerSDK.loadWidget({
-      project: appConfig?.xMarketing?.config?.markerProjectId,
+      project: xMarketing?.config?.markerProjectId,
     });
   });
 }

package/app/components/X/Footer/index.vue

@@ -32,7 +32,7 @@
 						class="flex flex-col lg:flex-row lg:justify-between gap-8 lg:gap-12"
 					>
 						<div class="shrink-0 lg:max-w-xl">
-							<a class="mb-8 inline-block" href="/">
+							<a v-if="footer?.logo?.src" class="mb-8 inline-block" href="/">
 								<img
 									:src="footer?.logo?.src"
 									:alt="footer?.logo?.alt"

package/app/components/X/Mark/Button/BackToTop.vue

@@ -85,14 +85,14 @@ const handleScroll = () => {
 };
 
 onMounted(() => {
-  if (process.client) {
+  if (import.meta.client) {
     window.addEventListener('scroll', handleScroll, { passive: true });
     handleScroll();
   }
 });
 
 onUnmounted(() => {
-  if (process.client) {
+  if (import.meta.client) {
     window.removeEventListener('scroll', handleScroll);
   }
 });

package/app/components/X/Mark/Privacy/CookieConsent.vue

@@ -93,10 +93,10 @@
                     {{ category.description }}
                   </p>
                 </div>
-                <UToggle
+                <USwitch
                   :model-value="selections[category.id]"
                   :disabled="category.required"
-                  @update:model-value="(val) => (selections[category.id] = val)"
+                  @update:model-value="(val: boolean) => (selections[category.id] = val)"
                 />
               </div>
             </div>
@@ -149,6 +149,13 @@
 <script setup lang="ts">
 type CategoryId = "necessary" | "analytics" | "marketing" | "preferences";
 
+const DEFAULT_SELECTIONS: Record<CategoryId, boolean> = {
+  necessary: false,
+  analytics: false,
+  marketing: false,
+  preferences: false,
+};
+
 interface Category {
   id: CategoryId;
   label: string;
@@ -251,17 +258,12 @@ const tracking = useConsentTracking();
 //  - The visitor hasn't made a decision yet (no localStorage key).
 const bannerVisible = ref(false);
 const prefsOpen = ref(false);
-const selections = ref<Record<CategoryId, boolean>>({});
+const selections = ref<Record<CategoryId, boolean>>({ ...DEFAULT_SELECTIONS });
 
 const effectiveCategories = computed(() => props.categories);
 
 function buildStateFromSelections(): Record<CategoryId, boolean> {
-  const out: Record<CategoryId, boolean> = {
-    necessary: true,
-    analytics: false,
-    marketing: false,
-    preferences: false,
-  };
+  const out: Record<CategoryId, boolean> = { ...DEFAULT_SELECTIONS };
   for (const c of props.categories) {
     out[c.id] = c.required ? true : Boolean(selections.value[c.id]);
   }
@@ -269,12 +271,7 @@ function buildStateFromSelections(): Record<CategoryId, boolean> {
 }
 
 function buildStateAll(value: boolean): Record<CategoryId, boolean> {
-  const out: Record<CategoryId, boolean> = {
-    necessary: true,
-    analytics: false,
-    marketing: false,
-    preferences: false,
-  };
+  const out: Record<CategoryId, boolean> = { ...DEFAULT_SELECTIONS };
   for (const c of props.categories) {
     out[c.id] = c.required ? true : value;
   }
@@ -282,11 +279,13 @@ function buildStateAll(value: boolean): Record<CategoryId, boolean> {
 }
 
 function initSelections() {
+  const next: Record<CategoryId, boolean> = { ...DEFAULT_SELECTIONS };
   for (const c of props.categories) {
-    selections.value[c.id] = c.required
+    next[c.id] = c.required
       ? true
       : Boolean(c.enabledByDefault ?? false);
   }
+  selections.value = next;
 }
 
 function syncFromStored() {

package/app/components/X/Mark/Privacy/GDPR.vue

@@ -47,7 +47,7 @@
 									{{ category.description }}
 								</p>
 							</div>
-							<UToggle
+							<USwitch
 								v-model="selections[category.id]"
 								:disabled="category.required"
 							/>

package/app/composables/useXBlog.js

@@ -1,11 +1,171 @@
+/**
+ * Nuxt Content helpers for marketing blog pages.
+ *
+ * Expects a `blog` collection (see root `content.config.ts`) and
+ * markdown under content/blog/. Replaces the former Builder.io
+ * CDN fetches and the unused `apiURL` stub.
+ */
+
+/**
+ * @typedef {object} XMarkBlogPost
+ * @property {string} title
+ * @property {string} [slug]
+ * @property {string} [path]
+ * @property {string} [_path]
+ * @property {string} [description]
+ * @property {string} [date]
+ * @property {string} [category]
+ * @property {string[]} [tags]
+ * @property {{ src: string, alt?: string }} [img]
+ * @property {string} [image]
+ * @property {{ name: string, avatar?: string, title?: string, bio?: string } | string} [author]
+ * @property {string|number} [readingTime]
+ * @property {boolean} [published]
+ * @property {unknown} [body]
+ */
+
+/**
+ * Normalize a Content collection entry into the shape used by
+ * `XMarkBlogCard` / `XMarkBlogList` / `XMarkBlogDetail`.
+ * @param {Record<string, unknown>} doc
+ * @returns {XMarkBlogPost}
+ */
+export function normalizeBlogPost(doc) {
+  if (!doc || typeof doc !== 'object') {
+    return { title: '' }
+  }
+
+  const path = typeof doc.path === 'string'
+    ? doc.path
+    : typeof doc._path === 'string'
+      ? doc._path
+      : ''
+
+  const slugFromPath = path
+    ? path.replace(/^\/+/, '').split('/').filter(Boolean).pop()
+    : ''
+
+  const slug = typeof doc.slug === 'string' && doc.slug
+    ? doc.slug
+    : (typeof doc.stem === 'string' && doc.stem
+        ? doc.stem.split('/').pop()
+        : slugFromPath)
+
+  const image = typeof doc.image === 'string'
+    ? doc.image
+    : (doc.img && typeof doc.img === 'object' && typeof doc.img.src === 'string'
+        ? doc.img.src
+        : '')
+
+  let author = doc.author
+  if (typeof author === 'string' && author) {
+    author = { name: author }
+  }
+
+  let readingTime = doc.readingTime
+  if (typeof readingTime === 'number') {
+    readingTime = `${readingTime} min read`
+  }
+
+  let date = doc.date
+  if (date instanceof Date) {
+    date = date.toISOString()
+  } else if (typeof date === 'string') {
+    // keep as-is
+  } else if (date != null) {
+    date = String(date)
+  }
+
+  return {
+    ...doc,
+    title: typeof doc.title === 'string' ? doc.title : '',
+    slug: slug || '',
+    path: path || undefined,
+    _path: path || undefined,
+    description: typeof doc.description === 'string' ? doc.description : doc.excerpt,
+    date,
+    category: doc.category,
+    tags: Array.isArray(doc.tags) ? doc.tags : [],
+    image: image || undefined,
+    img: image
+      ? { src: image, alt: typeof doc.title === 'string' ? doc.title : '' }
+      : (doc.img && typeof doc.img === 'object' ? doc.img : undefined),
+    author,
+    readingTime,
+    published: doc.published !== false,
+  }
+}
+
 export function useXBlog() {
-  const config = useRuntimeConfig();
-  const endpoint = config.public.apiURL + "/general";
-  const get = async () => {
-    const general = await $fetch(endpoint);
-    return general;
-  };
+  const appConfig = useAppConfig()
+  const blogConfig = computed(() => appConfig.xMarketing?.blog ?? {})
+
+  /**
+   * List published posts, newest first.
+   * @param {{ limit?: number, tag?: string, category?: string }} [options]
+   * @returns {Promise<XMarkBlogPost[]>}
+   */
+  async function getPosts(options = {}) {
+    const { limit, tag, category } = options
+
+    let query = queryCollection('blog')
+      .where('published', '<>', false)
+      .order('date', 'DESC')
+
+    const all = await query.all()
+    let posts = (all ?? []).map(normalizeBlogPost)
+
+    if (tag) {
+      posts = posts.filter(p => p.tags?.includes(tag))
+    }
+    if (category) {
+      posts = posts.filter(p => p.category === category)
+    }
+    if (typeof limit === 'number' && limit > 0) {
+      posts = posts.slice(0, limit)
+    }
+
+    return posts
+  }
+
+  /**
+   * Fetch a single post by Content path (e.g. `/blog/my-post`).
+   * @param {string} path
+   * @returns {Promise<XMarkBlogPost | null>}
+   */
+  async function getPostByPath(path) {
+    try {
+      const doc = await queryCollection('blog').path(path).first()
+      if (!doc) return null
+      return normalizeBlogPost(doc)
+    } catch {
+      return null
+    }
+  }
+
+  /**
+   * Previous / next posts around a path (Content surroundings).
+   * @param {string} path
+   * @returns {Promise<{ previous: XMarkBlogPost | null, next: XMarkBlogPost | null }>}
+   */
+  async function getSurround(path) {
+    try {
+      const surround = await queryCollectionItemSurroundings('blog', path, {
+        fields: ['title', 'description', 'image', 'date', 'path', 'stem'],
+      })
+      const previous = surround?.[0] ? normalizeBlogPost(surround[0]) : null
+      const next = surround?.[1] ? normalizeBlogPost(surround[1]) : null
+      return { previous, next }
+    } catch {
+      return { previous: null, next: null }
+    }
+  }
+
   return {
-    get,
-  };
+    blogConfig,
+    normalizeBlogPost,
+    getPosts,
+    getPostByPath,
+    getSurround,
+  }
 }

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>