@xenterprises/nuxt-x-marketing 1.2.2 → 1.4.0

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>

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>