Blog Listing

Purpose

• It shows a paginated list of blog entries and allows filtering via:
  • Category Dropdown
  • Sort By Date (ascending or descending)

Layout Used

Core Functionalities

• Data Fetching
  • Uses builderStore.getBlogList('blogs') to retrieve blog data.
  • Blogs are paginated on the client side using slice(offset, offset + limit).
• Filtering
  • filterItems(categorySlug): Filters by category and updates the query param (?q=).
  • filterDate(dateOrder): Filters blogs by creation date and updates the query param (?date=).
  • Category and date are persisted in URL and localStorage for user continuity.
• Pagination
  • limit = 8 per page.
  • Controlled via TsPagination.
  • changeActivePage() updates internal currentPage and re-fetches blogs.

SEO Integeration

• Title: "Blogs | Toolstation"
• Meta description: "This is the blog listing page of Toolstation."
• Structured data generated via:

generateSchemaList(blogListing, "ItemList", "BlogPosting", {
  imageField: "blogImage",
});

Component Used

Lifecycle Summary

onMounted:
  - fetchBlogs()
  - fetchCategories()

watch:
  - selectedDate → triggers filterDate
  - currentPage → triggers fetchBlogs
  - route.query → updates filters