@xenterprises/nuxt-x-marketing 0.0.14 → 0.0.16

package/.playground/app.config.ts

@@ -21,6 +21,10 @@ export default defineAppConfig({
             label: "Home",
             to: "/",
           },
+          {
+            label: "Blog",
+            to: "/blog",
+          },
         ],
       },
     },

package/.playground/pages/index.vue

@@ -1,9 +1,5 @@
 <template>
-	<div>
-		<XMarketingSectionsEmailSubscription
-			organizationId="cm3hpgixe0000rdttg65jl5ds"
-		/>
-	</div>
+	<div></div>
 </template>
 <script setup>
 </script>

package/app.config.ts

@@ -7,8 +7,12 @@ export default defineAppConfig({
   },
   xMarketing: {
     name: "X Enterprises",
+    url: "https://x-enterprises.com",
     config: {
       markerProjectId: "",
+      emailMarketingNewsletters: {
+        organizationId: "",
+      },
     },
     header: {
       logo: {
@@ -37,6 +41,17 @@ export default defineAppConfig({
       socials: [],
       columns: [],
     },
+    blog: {
+      active: true,
+      title: "Blog",
+      description:
+        "Welcome to our blog. Here you can find the latest news, updates, and articles.",
+      meta: {
+        title: "Blog",
+        description:
+          "Welcome to our blog. Here you can find the latest news, updates, and articles.",
+      },
+    },
   },
 });
 
@@ -47,6 +62,9 @@ declare module "@nuxt/schema" {
       name?: string;
       config?: {
         markerProjectId?: string;
+        emailMarketingNewsletters?: {
+          organizationId?: string;
+        };
       };
       header?: {
         logo?: {
@@ -98,6 +116,15 @@ declare module "@nuxt/schema" {
           }[];
         }[];
       };
+      blog?: {
+        active?: boolean;
+        title?: string;
+        description?: string;
+        meta?: {
+          title?: string;
+          description?: string;
+        };
+      };
     };
   }
 }

package/components/X/Footer/index.vue

@@ -1,5 +1,13 @@
 <template>
 	<div>
+		<XMarketingSectionsEmailSubscription
+			:organizationId="
+				appConfig?.xMarketing?.config?.emailMarketingNewsletters?.organizationId
+			"
+			v-if="
+				appConfig?.xMarketing?.config?.emailMarketingNewsletters?.organizationId
+			"
+		/>
 		<section
 			class="relative pt-24 overflow-hidden"
 			:class="footer?.bg?.color ? footer?.bg?.color : 'bg-gray-900'"

package/nuxt.config.ts

@@ -1,9 +1,15 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   compatibilityDate: "2024-04-03",
+  ssr: true,
   devtools: { enabled: process.env.NODE_ENV === "development" },
+  runtimeConfig: {
+    public: {
+      BUILDERIO_KEY: "",
+    },
+  },
   extends: ["@nuxt/ui-pro"],
-  modules: ["@nuxt/ui", "@nuxtjs/seo"],
+  modules: ["@nuxt/ui", "@nuxtjs/seo", "@nuxt/image"],
   ui: {
     icons: ["heroicons", "simple-icons"],
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xenterprises/nuxt-x-marketing",
   "type": "module",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "main": "./nuxt.config.ts",
   "scripts": {
     "dev": "nuxi dev .playground",
@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@marker.io/browser": "^0.19.0",
+    "@nuxt/image": "^1.8.1",
     "@nuxt/ui": "^2.18.7",
     "@nuxt/ui-pro": "^1.4.4",
     "@nuxtjs/seo": "^2.0.0-rc.23",

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

@@ -0,0 +1,83 @@
+<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">
+						{{ 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"
+					>
+						<div
+							class="flex flex-col lg:flex-row justify-between lg:items-center"
+						>
+							<div
+								class="flex items-center space-x-3 text-gray-500 text-base mb-2 lg:mb-0"
+							>
+								<section
+									class="prose md:prose-xl lg:prose-xl prose-stone"
+									v-html="content.body"
+								></section>
+							</div>
+						</div>
+					</article>
+
+					<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>
+</template>
+
+<script setup>
+const route = useRoute();
+const config = useRuntimeConfig();
+const builder = await $fetch(`https://cdn.builder.io/api/v2/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;
+useSeoMeta({
+	title,
+	ogTitle: title,
+	description,
+	ogDescription: description,
+});
+</script>
+
+<style lang="scss" scoped>
+</style>

package/pages/blog/index.vue

@@ -1,10 +1,63 @@
 <template>
-	<div class="max-w-screen-2xl mx-auto px-4 md:px-8">
-		<UPageHero
-			title="Blog"
-			description="Read the latest articles from our blog."
-		/>
+	<div class="pb-8 max-w-screen-2xl px-8 mx-auto">
+		<UPageHero :title="blog?.title" :description="blog?.description" />
+
+		<UPageBody>
+			<UBlogList>
+				<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"
+							label="Read More"
+						/>
+					</div>
+				</UBlogPost>
+			</UBlogList>
+		</UPageBody>
 	</div>
 </template>
+
 <script setup>
-</script>
+const appConfig = useAppConfig()?.xMarketing;
+const blog = appConfig?.blog;
+const route = useRoute();
+const config = useRuntimeConfig();
+
+const blogPosts = await $fetch("https://cdn.builder.io/api/v2/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>