Developer Docs

Universal Search — Integration Guide

The Mallnline platform features a powerful, unified search engine that enables discovery for products and services across all Malets.

Key Features

  • Global Search (Cmd+K): Quick access discovery modal from any page.
  • Typo Tolerance: Handled by the Meilisearch backend.
  • Real-time Suggestions: Autocomplete as you type in any search bar.
  • Faceted Selection: Filter results by Item Type, Price Range, Category, and Malet.
  • Persistent State: Recent searches are saved locally.

State Management (Frontend)

`searchStore.ts`

The core state management for discovery. Located in src/stores/searchStore.ts.

  • State: query, results, facets, totalCount, isSearching, error, recentSearches.
  • Actions:
    • search(query, filters): Executes the full search with filtering.
    • getSuggestions(query): Fetches autocomplete suggestions.
    • clearRecentSearches(): Wipes local history.

Search Queries (Search Subgraph)

Standardized GraphQL queries for the Search subgraph.

  • SEARCH_ITEMS: The primary query for the results page.
  • GET_SEARCH_SUGGESTIONS: Used by the Global Search Modal for autocomplete.
  • SEARCH_DOCS: Unified documentation search across all portals — queries the mallnline_docs Meilisearch index.
  • SEARCH_SUPPORT_ARTICLES (deprecated): Legacy query for the old support_articles index. Use SEARCH_DOCS with source: "support" instead.

Components

GlobalSearchModal (`src/lib/components/search/GlobalSearchModal.svelte`)

  • Listens for Cmd+K / Ctrl+K.
  • Provides a blurred overlay with a search input.
  • Displays top 5 suggestions and recent history.

SearchResults & SearchFilters (`src/routes/search/`)

  • SearchResults.svelte: Handles grid/list view toggles and rendering SearchResultCard components.
  • SearchFilters.svelte: Provides the sidebar facets derived from the backend response.

Integration Guide

To add search capability to any new component:

  1. Import the store:
    import { searchStore } from '$stores/searchStore';
  2. Display results:
    <ul>
    {#each $searchStore.results as item}
        <li>{item.name}</li>
    {/each}
</ul>

Performance & UX

  • SSR Handling: Components use typeof document !== 'undefined' checks to ensure stable rendering on the server.
  • Debouncing: Suggestions are debounced by 300ms to reduce API load.
  • Skeleton States: Grid view displays loading skeletons while data is being fetched.

The platform features a unified mallnline_docs Meilisearch index that combines documentation from all portals into a single searchable index with source-level filtering.

Architecture

Documents are indexed automatically via an Astro post-build integration (src/integrations/meilisearch-indexer.ts) that runs after astro build in each portal:

  • Support Center: 59 pages → 757 section-level documents (source: support)
  • Developer Portal: 118 pages → 2,064 section-level documents (source: developer)
  • Total: ~2,800 documents with deep-link anchors

Each article is split into section-level documents (one per heading), enabling search results that deep-link directly to the matching heading.

Query

query SearchDocs($query: String!, $source: String, $limit: Int, $offset: Int) {
  searchDocs(query: $query, source: $source, limit: $limit, offset: $offset) {
    results {
      id
      url
      title
      heading
      content
      source
      category
      slug
      level
    }
    totalCount
    query
  }
}

Visibility Control

  • No source filter: Returns all public docs (support + developer), excludes internal
  • source: "support": Only Help Center articles
  • source: "developer": Only Developer Portal docs
  • source: "internal": Only internal docs (requires explicit filter)

Frontend Module

  • Query + types: src/lib/queries/supportSearch.ts — exports searchDocs() and types
  • Island (Cmd+K): A parallel searchDocs() call surfaces top 3 docs in a "Documentation" section with source badges (Help Center / Developer Docs)
  • /search page: The Help tab renders docs cards with source badges, heading context, and deep-link URLs
  • URL routing: Results link directly to {portalUrl}/{slug}#{anchor} for section-level deep linking

Ingestion Pipeline

The mallnline_docs index is populated by the Astro post-build integration in each portal:

  • Trigger: Runs automatically on pnpm build when MEILISEARCH_API_KEY is set
  • Skip guard: Silently skips when no API key (local dev without Meilisearch)
  • Filter delete: Each build deletes only its own source documents before re-indexing
  • Index settings: searchableAttributes, filterableAttributes, sortableAttributes configured idempotently
  • CI/CD: Set MEILISEARCH_HOST and MEILISEARCH_API_KEY env vars in deployment pipeline