Faq

1---
2// FAQ page — data fetched SERVER-SIDE (SEO: every question and answer is in the HTML, collapsed) and
3// handed to the islands as DTO props. Keep this frontmatter (the fetch, the JSON-LD, the category
4// pre-selection); swap the island imports to YOUR components. The three islands share one module-scope
5// store, so they can stay separate or be merged into one — your call.
6import SiteLayout from "../layouts/SiteLayout.astro";
7import FaqSearch from "../components/faq/FaqSearch";
8import FaqCategoryNav from "../components/faq/FaqCategoryNav";
9import FaqAccordion from "../components/faq/FaqAccordion";
10import { fetchFaq } from "../wix/faq/faq";
11import { faqJsonLd, parseDeepLink } from "../wix/faq/faq-core";
12import type { FaqData } from "../wix/faq/types";
13
14let data: FaqData = { categories: [], questions: [], truncated: false };
15try {
16  data = await fetchFaq();
17} catch {
18  // An unguarded SSR throw truncates the response mid-stream; the islands render the empty state instead.
19}
20
21// Behind Wix's proxy the request URL is internal — the public page URL arrives on x-wix-forwarded-url.
22const forwarded = Astro.request.headers.get("x-wix-forwarded-url");
23const pageUrl =
24  forwarded && URL.canParse(forwarded) && /^https?:$/.test(new URL(forwarded).protocol) ? forwarded : Astro.url.href;
25// `?category=` is server-visible (pre-select the nav so SSR and the first paint agree); `#q-…` is not — the store applies it in the browser.
26const { categoryId } = parseDeepLink(Astro.url.search, "");
27const initialCategoryId = categoryId && data.categories.some((c) => c.id === categoryId) ? categoryId : null;
28// The whole FAQ, not the filtered view: every marked-up answer is on the page (collapsed panels are still in the DOM).
29const jsonLd = JSON.stringify(faqJsonLd(data.questions, pageUrl.split("#")[0].split("?")[0])).replace(/</g, "\\u003c");
30const description = data.questions.slice(0, 3).map((q) => q.question).join(" · ");
31---
32
33<SiteLayout title="FAQ" description={description}>
34  <script type="application/ld+json" is:inline slot="seo-tags" set:html={jsonLd} />
35  <h1 class="mb-8 text-3xl font-semibold tracking-tight">Frequently asked questions</h1>
36  <FaqSearch client:load initialData={data} initialCategoryId={initialCategoryId} />
37  <FaqCategoryNav client:load initialData={data} initialCategoryId={initialCategoryId} />
38  <FaqAccordion client:load initialData={data} initialCategoryId={initialCategoryId} />
39</SiteLayout>