How does the laravel documentation website work with Algolia?

I’m trying to understand how Laravel’s own implementation of Algolia works on their documentation website. I made a fork of the open source website and got curious about Algolia.

I’m trying to figure out;

1. * How is the index structured?
2. * What is the configuration?

If there is any public knowledge on how the indexes are being updated i’d love to know that too. The biggest hurdle at this point is the hierarchy field on each hit (lvl0 to 6).

The bits of code i can provide are the search function itself and a response example. Any help would be greatly appreciated!

The search function itself is pretty basic as far as i can tell:

export default function () {
return {
    search: '',
    searchIsOpen: false,
    hits: [],
    init() {
        const searchClient = algoliasearch(algolia_app_id, algolia_search_key);

        const index = searchClient.initIndex('laravel');

        this.$watch('search', (query) => {
            if (! query) {
                return this.hits = [];
            }

            index.search(query, {
                hitsPerPage: 5,
                facetFilters: ['version:' + window.version],
                highlightPreTag: '<em class="not-italic bg-red-600 bg-opacity-25">',
                highlightPostTag: '</em>'
            }).then(({ hits }) => {
                this.hits = hits;
            });
        });
    },
    clear() {
        this.searchIsOpen = false;
        this.search = '';
        this.hits = [];
    },
    focusPreviousResult(index = -1) {
        if (index <= 0) {
            index = this.hits.length;
        }

        const previous = document.querySelector('#search-result-' + (index - 1));
        if (previous) {
            return previous.focus();
        }
    },
    focusNextResult(index = -1) {
        if (index >= this.hits.length - 1) {
            index = -1;
        }

        const next = document.querySelector('#search-result-' + (index + 1));
        if (next) {
            return next.focus();
        }
    },
    handleSlashKey(event) {
        if (event.key === '/') {
            event.preventDefault();
            this.searchIsOpen = true;
            this.$refs.searchInput.focus()
        }
    }
}

}

When searching for “installation” this is a sample of a single hit within response;

{
"hits": [		
		{
		"anchor": "installation",
		"content": null,
		"hierarchy": {
			"lvl0": "Packages",
			"lvl1": "Scout",
			"lvl2": "Installation",
			"lvl3": null,
			"lvl4": null,
			"lvl5": null,
			"lvl6": null
		},
		"url": "https://laravel.com/docs/8.x/scout#installation",
		"objectID": "42ea398139a0d71ae5a7619c801e25a892d67897",
		"_highlightResult": {
			"hierarchy": {
				"lvl0": {
					"value": "Packages",
					"matchLevel": "none",
					"matchedWords": []
				},
				"lvl1": {
					"value": "Scout",
					"matchLevel": "none",
					"matchedWords": []
				},
				"lvl2": {
					"value": "<em class=\"not-italic bg-red-600 bg-opacity-25\">Installation</em>",
					"matchLevel": "full",
					"fullyHighlighted": true,
					"matchedWords": [
						"installation"
					]
				}
			},
			"hierarchy_camel": [
				{
					"lvl0": {
						"value": "Packages",
						"matchLevel": "none",
						"matchedWords": []
					},
					"lvl1": {
						"value": "Scout",
						"matchLevel": "none",
						"matchedWords": []
					},
					"lvl2": {
						"value": "<em class=\"not-italic bg-red-600 bg-opacity-25\">Installation</em>",
						"matchLevel": "full",
						"fullyHighlighted": true,
						"matchedWords": [
							"installation"
						]
					}
				}
			]
		}
	}
],
"nbHits": 23,
"page": 0,
"nbPages": 5,
"hitsPerPage": 5,
"exhaustiveNbHits": true,
"query": "installation",
"params": "query=installation&hitsPerPage=5&facetFilters=%5B%22version%3A8.x%22%5D&highlightPreTag=%3Cem+class%3D%22not-italic+bg-red-600+bg-opacity-25%22%3E&highlightPostTag=%3C%2Fem%3E",
"processingTimeMS": 1

}

1 Like

Hi,

The Laravel documentation is powered by DocSearch: https://docsearch.algolia.com/
It’s a free to use project powered by Algolia.

Everything is open sourced: GitHub - algolia/docsearch: The easiest way to add search to your documentation.

I hope this helps!

Thanks so much. I will try to give that a go :).