index.vue

<template>
  <SearchContainer
    :title="documentFAQ.title"
    :results="results"
    :search-placeholder="$t('faq.searchPlaceholder')"
    :search-function="searchFunction"
  >
    <template #noResult="{ query }">
      <ul class="list-disc list-inside mt-3">
        <li>
          <nuxt-link :to="`/recherche?q=${query}`" class="hover:underline">
            {{ $t('noResult.searchWholeSite', { query }) }}
          </nuxt-link>
        </li>
        <li>
          <a
            :href="`https://forum.monnaie-libre.fr/search?q=${query}`"
            class="hover:underline"
            target="_blank"
            rel="noopener noreferrer"
          >
            {{ $t('noResult.searchOnForum', { query }) }}
          </a>
        </li>
        <li>
          <span
            class="cursor-pointer hover:underline"
            @click="$modal.show('FaqAskQuestionTModal')"
          >
            {{ $t('faq.submitQuestion') }}
          </span>
        </li>
      </ul>
    </template>

    <FaqAskQuestionModal slot="sidebar" class="w-max" />

    <template #footer>
      <div class="border-t my-8 pt-8">
        <nuxt-content
          :document="documentFAQ"
          class="prose dark:prose-dark max-w-full"
        />
      </div>

      <PageBottom :document="documentFAQ" class="border-t my-8 pt-8" />
    </template>
  </SearchContainer>
</template>

<script>
const fields = ['title', 'description', 'path']

export default {
  name: 'FaqPage',
  async asyncData({ $content }) {
    const results = await $content('/faq').only(fields).fetch()

    const documentFAQ = await $content('/ui/faq').fetch()

    return {
      results,
      documentFAQ,
    }
  },
  methods: {
    async searchFunction(query) {
      return await this.$content('faq').search(query).only(fields).fetch()
    },
  },
}
</script>