Blog Detail

Purpose

• This dynamic page renders the full content of a single blog article based on the slug extracted from the URL.

Core Features

• Blog Fetching
  • Slug is accessed via route.params.slug
  • Blog fetched via:

builderStore.getBlogItem("blogs", { urlPath: "/blogs/" + route.params.slug });

• Dynamic Meta Data
  • useHead() is used to set:
    • Title: blog title
    • Description: SEO description
• Share Functionality
  • Uses Web Share API to allow users to share the blog:

if (navigator?.canShare(shareData)) await navigator.share(shareData);

UI Layout

• Header Banner: Title, publish date, reading time, featured image
• Blog Content: Rendered using TsContentStatic
• Suggestions: Carousel of similar blogs (TsCarouselV2)
• Tags: Used for cross-navigation to filtered blog search
• Customer Support: Embedded static symbol content

Lifecycle Summary

• Skeleton loaders are displayed during blog data fetch
• Breadcrumbs update dynamically based on the loaded blog
• Includes tag-to-search redirect using:

builderStore.redirectToBlogsWithTags(e.id);

Component Used

SEO Integration

generateContentSchema(builderStore.blog, "BlogPosting", {
  titleField: "title",
  descriptionField: "seoDescription",
  imageField: "blogImage",
  tagsField: "tags",
  categoryField: "categories",
});