wagtail/docs/_templates/layout.html

{% extends "!layout.html" %}

{% set docsearch_version = '2' %}
{% set docsearch_base = 'https://cdn.jsdelivr.net/npm/docsearch.js@' ~ docsearch_version ~ '/dist/cdn/' %}

{% block extrahead %}
<link rel="stylesheet" href="{{ docsearch_base ~ 'docsearch.min.css' }}"/>
<link rel="stylesheet" href="{{ pathto('_static/css/docsearch.overrides.css', 1) }}" />
{% endblock %}

{% block search %}
<script async defer data-domain="docs.wagtail.io" src="https://plausible.io/js/plausible.js"></script>
<script src="{{ docsearch_base }}docsearch.min.js"></script>
<script>
  /**
   * Get version of the currently served docs.
   *
   * PR builds have their version set to the PR ID (e.g. "6753").
   * If the docs are built for a PR, use the "latest" search index.
   * Otherwise, use the search index for the current version.
   */
  function getReadTheDocsVersion() {
    const rtd_version = (window.READTHEDOCS_DATA || {}).version || 'latest'
    const version = rtd_version.match(/^\d+$/) ? 'latest' : rtd_version
    return version
  }

  function getVersionFacetFilter() {
    return `version:${getReadTheDocsVersion()}`;
  }

  /**
   * Return true (debug: on) for local builds or Read the Docs PR previews.
   *
   * The debug mode allows inspection of the dropodown.
   */
  function getSearchDebugMode() {
    let debug = false
    if (window.READTHEDOCS_DATA === undefined) {
      // When developing locally, the `window.READTHEDOCS_DATA` object does not exist.
      debug = true
    } else {
      // When PR preview on Readthedocs, then the version can be converted into
      // a number. This does not work for the production version identifiers
      // like 'stable', 'latest', 'v2.12', etc. In that case `Number()` is `NaN`.
      const versionNumber = Number(window.READTHEDOCS_DATA.version)
      debug = !isNaN(versionNumber)
    }
    return debug
  }

  function docSearchReady() {
    /**
    * Configure Algolia DocSearch.
    * See https://github.com/algolia/docsearch-configs/blob/master/configs/wagtail.json for index configuration.
    */
    const search = docsearch({
      apiKey: '8325c57d16798633e29d211c26c7b6f9',
      indexName: 'wagtail',
      inputSelector: '#searchbox [name="q"]',
      algoliaOptions: {
        facetFilters: [getVersionFacetFilter()],
      },
      autocompleteOptions: {
        // Do NOT automatically select the first suggestion in the dropdown.
        // https://github.com/algolia/autocomplete/blob/45fa32d008620cf52bf4a90530be338543dfba7f/README.md#global-options
        autoSelect: false
      },
      debug: getSearchDebugMode(),
    })

    // Change page styles when the dropdown is open, to lock scrolling.
    search.autocomplete.on('autocomplete:updated', function (event) {
      const isOpen = event.target.value.trim() !== '';
      document.body.classList.toggle('body--autocomplete-open', isOpen);
    });
    search.autocomplete.on('autocomplete:closed', function (event) {
      document.body.classList.toggle('body--autocomplete-open', false);
    });
    return search
  }

  docSearchReady();
</script>
{% endblock %}