Blog Search

Purpose

• Enables users to search and view blogs filtered by tags, categories, or search keywords. Useful for tag-based navigation and full-text search.

Core Features

• Filter Sources
  • ?q= → free-text search
  • ?tag= → tag-based filter
  • ?category= → category-based filter
• Search Bar
  • Two-way bound to selectedQuery
  • Enter key or search icon triggers redirect to search URL
  • Clear icon (TsIcon) resets the input and navigates back to /blogs
• Pagination
  • 6 blogs per page.
  • Uses client-side slicing for paginated rendering

Logic Flow

• On load or query change:
  • Triggers fetchBlogs() using:
    • Regex for title if q
    • Tag match if tag
    • Category match if category
  • Updates the list from builderStore.blogs
  • Slices results to current page window

Component Used

Component	Description
TsInput	Search input field
TsAlert	Result count banner
TsBlogCard	Blog preview cards
TsPagination	Page navigation
TsGrid, TsRow	Grid-based responsive layout

---

Developer Notes

• Tips for Extending
  • Debounce Search Input: Add debounce on the input field to avoid multiple fetch calls.
  • Server-Side Search (Optional): For performance, search could be offloaded to a server or use ElasticSearch.
  • Read Time Calculation: Can be re-enabled and enhanced for better UX.
  • i18n Readiness: Strings use useTranslation()—ensure keys are fully mapped for new locales.

Performance & SEO

Feature	Implementation
Lazy Loading Components	defineAsyncComponent() used extensively
Metadata / SEO	useHead() with dynamic values
Schema Markup	generateSchemaList, generateContentSchema
Responsive layout	TsGrid, TsRow, and TsColumn
Client-side pagination	Fast navigation with minimal load

---

Data Management

• builderStore
• Central store that handles:
  • getBlogList(type, filters, sort) → Fetch blog list
  • getBlogItem(type, filter) → Fetch individual blog
  • Stores blogs and current blog in reactive state
  • Manages redirection helpers for filters and search