@xenterprises/nuxt-x-marketing 1.2.2 → 1.4.0

package/app/app.config.ts

@@ -1,3 +1,5 @@
+import type { XMarketingConfig } from "./types/config";
+
 export default defineAppConfig({
   ui: {
     primary: "brand",
@@ -25,19 +27,24 @@ export default defineAppConfig({
     },
   },
   xMarketing: {
-    name: "X Enterprises",
-    url: "https://x-enterprises.com",
+    /** Site name — used by the shipped shell for the SEO title template
+     *  ("%s | name") and og:site_name. Leave undefined to keep bare titles. */
+    name: undefined,
+    /** Canonical site URL — used as og:url on the shipped home page. */
+    url: undefined,
     config: {
-      markerProjectId: "",
+      markerProjectId: undefined,
       emailMarketingNewsletters: {
-        organizationId: "",
+        organizationId: undefined,
       },
     },
     header: {
+      /** Set false to opt out of the default navbar in the shipped shell. */
+      active: true as boolean,
       logo: {
-        src: "",
-        srcDark: "",
-        alt: "",
+        src: undefined,
+        srcDark: undefined,
+        alt: undefined,
       },
       nav: {
         buttons: [],
@@ -45,23 +52,29 @@ export default defineAppConfig({
       },
     },
     footer: {
+      /** Set false to opt out of the default footer in the shipped shell. */
+      active: true as boolean,
       logo: {
-        src: "",
-        alt: "",
+        src: undefined,
+        alt: undefined,
       },
       bg: {
-        color: "",
+        color: undefined,
         img: {
-          src: "",
-          alt: "",
+          src: undefined,
+          alt: undefined,
         },
       },
-      body: "",
+      body: undefined,
       socials: [],
       columns: [],
     },
+    /** Cookie-consent banner in the shipped shell; gates tracking injection. */
+    consent: {
+      active: true as boolean,
+    },
     blog: {
-      active: true,
+      active: true as boolean,
       title: "Blog",
       description:
         "Welcome to our blog. Here you can find the latest news, updates, and articles.",
@@ -94,121 +107,14 @@ export default defineAppConfig({
       scripts: [],
       // ---- Behavior ----
       /** Auto-inject configured scripts on consent. Default: true. */
-      autoInject: true,
+      autoInject: true as boolean,
     },
   },
 });
 
 declare module "@nuxt/schema" {
   interface AppConfigInput {
-    xMarketing?: {
-      /** Project name */
-      name?: string;
-      /** Project URL */
-      url?: string;
-      config?: {
-        markerProjectId?: string;
-        emailMarketingNewsletters?: {
-          organizationId?: string;
-        };
-      };
-      header?: {
-        logo?: {
-          src?: string;
-          srcDark?: string;
-          alt?: string;
-        };
-        nav?: {
-          buttons?: {
-            label: string;
-            to: string;
-            icon?: string;
-            target?: string;
-            variant?: string;
-            square?: boolean;
-            color?: string;
-          }[];
-          links?: NavLink[];
-        };
-      };
-      footer?: {
-        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;
-        }[];
-      }[];
-      /**
-       * Tracking + analytics config. Read by
-       * `<XMarkPrivacyCookieConsent>` and `useConsentTracking()`.
-       * Only fires after the matching consent category is granted.
-       */
-      tracking?: XMarketingTracking;
-    };
+    xMarketing?: XMarketingConfig;
   }
 }
 
-/**
- * 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").
- */
-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;
-}
-
-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>;
-}
-}
-
-interface NavLink {
-  label: string;
-  to?: string;
-  target?: string;
-  children?: NavLink[];
-}
-

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/assets/css/x-marketing.css

@@ -1,3 +1,13 @@
+/* NOTE — the `x*` utilities and `--x-*` tokens in this file are duplicated in
+ * `nuxt-x-affiliate` (`app/assets/css/main.css`), which was ported from here.
+ * 32 class names overlap with identical values. A site extending BOTH layers
+ * loads both stylesheets and gets whichever is injected last — harmless while
+ * they match, a silent divergence if either is edited alone. Keep them in sync.
+ *
+ * Only `.xGlow-divider` / `.xGlow-divider-subtle` are unique to this file;
+ * the affiliate layer draws that rule with `<XAFDividerGlow>` instead.
+ */
+
 @import "tailwindcss";
 @import "@nuxt/ui";
 @plugin "@tailwindcss/typography";

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/CTA/index.vue

@@ -1,7 +1,8 @@
 <template>
 	<section
 		:class="[
-			'relative overflow-hidden rounded-2xl',
+			'relative overflow-hidden',
+			rounded ? 'rounded-2xl' : 'rounded-none',
 			paddingClasses,
 			bgColorClasses,
 		]"
@@ -127,6 +128,11 @@ const props = defineProps({
 		default: "md",
 		validator: (v) => ["sm", "md", "lg"].includes(v),
 	},
+	/** Card corners. Set false for full-bleed pre-footer CTAs. */
+	rounded: {
+		type: Boolean,
+		default: true,
+	},
 });
 
 // Default bg values
@@ -201,23 +207,30 @@ const containerClasses = computed(() => {
 });
 
 const iconContainerClasses = computed(() => {
+	// Keep the badge square: flex parents (inline/default column layout)
+	// default to stretch on the cross axis and can squash fixed width/height.
+	const centered = ["stacked", "centered"].includes(props.variant);
 	return [
-		"flex items-center justify-center rounded-xl",
-		props.size === "lg" ? "w-16 h-16" : "w-12 h-12",
+		"flex shrink-0 items-center justify-center rounded-xl aspect-square",
+		centered ? "self-center" : "self-start",
+		props.size === "lg"
+			? "size-16 min-w-16 min-h-16"
+			: "size-12 min-w-12 min-h-12",
 		isBoldBg.value ? "bg-white/20" : "bg-primary-100 dark:bg-primary-900/50",
 	];
 });
 
 const iconClasses = computed(() => {
 	return [
-		props.size === "lg" ? "w-8 h-8" : "w-6 h-6",
+		"shrink-0 block",
+		props.size === "lg" ? "size-8" : "size-6",
 		isBoldBg.value ? "text-white" : "text-primary-500",
 	];
 });
 
 const contentClasses = computed(() => {
-	if (props.variant === "default") {
-		return "flex-1";
+	if (props.variant === "default" || props.variant === "inline") {
+		return "flex-1 min-w-0";
 	}
 	return "";
 });

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"
 							/>