- typed client and useFaq/useFaqApi (SSR, faq:<slug>:<locale> key, server and public bases, x-forwarded-for forwarded also on cached renders) - FaqBlock, FaqList and FaqItem: native details, exclusive and openFirst, server-sanitized description and answers, nothing or #fallback on 404, error or no items - FAQ tokens and base CSS with the .faq-html rules, README - node client tests and a playground SSR smoke against a fixture API
20 lines
746 B
TypeScript
20 lines
746 B
TypeScript
// A FAQ by slug, fetched during SSR through useAsyncData with the key
|
|
// faq:<slug>:<locale>. data is null for a missing (404) FAQ; error is set
|
|
// when the API failed.
|
|
|
|
import type { MaybeRefOrGetter } from 'vue'
|
|
import type { Faq } from '../utils/types.ts'
|
|
|
|
export interface UseFaqOptions {
|
|
/** ?locale= for the API; the API's default locale when empty. */
|
|
locale?: MaybeRefOrGetter<string | undefined>
|
|
}
|
|
|
|
export function useFaq(slug: MaybeRefOrGetter<string>, opts: UseFaqOptions = {}) {
|
|
const api = useFaqApi()
|
|
const key = computed(() => `faq:${toValue(slug)}:${toValue(opts.locale) ?? ''}`)
|
|
return useAsyncData<Faq | null>(key, () => api.getFaq(toValue(slug), toValue(opts.locale) || undefined), {
|
|
default: () => null,
|
|
})
|
|
}
|