FAQ Page
Relevant source files
The following files were used as context for generating this wiki page:The FAQ (Frequently Asked Questions) feature provides a structured and reusable way to display question-and-answer content to users. It is implemented as a collapsible accordion component, allowing for a compact and user-friendly presentation. While a dedicated faq.html page exists, the FAQ component is also embedded within other pages, such as about.html and contact.html, demonstrating its modular design.
The content for the FAQs is managed through a structured data model defined in the Stackbit configuration, which populates the static HTML pages during the site generation process. This separation of content and presentation allows for easy updates to FAQ items without altering the underlying HTML code.
Data Model and Content Management
The structure for all FAQ content is centrally defined within the Stackbit configuration file. The Page model includes an optional field named faqs, which is designed to hold a list of question-and-answer pairs.
Sources: stackbit.config.ts:13-14, stackbit.config.ts:71-81
FAQ Data Structure
The faqs field is an array of objects, where each object represents a single FAQ item. This structure is consistent across the entire site wherever FAQs are used.
The diagram below illustrates the relationship between a Page and its associated FAQ items.
This ER diagram shows that a 'Page' entity can contain zero or more 'FAQ' entities.
Sources: stackbit.config.ts:71-81
The fields for each FAQ item are defined as follows:
| Field | Type | Description | Required |
|---|---|---|---|
question | string | The question text for the FAQ item. | Yes |
answer | text | The answer content for the FAQ item. | Yes |
Sources: stackbit.config.ts:77-80
Data Model Definition
The TypeScript definition within the Stackbit configuration specifies the faqs model. This ensures that any content created for FAQs adheres to the required structure.
// stackbit.config.ts:71-81
{
// FAQs
name: 'faqs',
type: 'list',
items: {
type: 'object',
fields: [
{ name: 'question', type: 'string' },
{ name: 'answer', type: 'text' }
]
},
required: false
},
Sources: stackbit.config.ts:71-81
UI Implementation and Rendering
The FAQ data is rendered into the front end using the standard Bootstrap 5 accordion component. This provides a clean, interactive, and mobile-responsive user interface where users can click on a question to reveal the answer.
Sources: about.html:200-243, contact.html:317-466
Accordion HTML Structure
The HTML files show a consistent structure for the accordion, with nested div elements for the accordion itself, individual items, headers, and collapsible bodies. The content (question and answer) is dynamically placed into this structure from the JSON data source during site generation.
Below is a sample of the HTML implementation from the about.html page.
<!-- about.html:200-217 -->
<div class="accordion accent mt-3 d-flex flex-column gap-4" id="faqAccordion1">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1" aria-expanded="true" aria-controls="faq1" data-i18n="what_makes_you_different_from_other_agencies">
Kas padara jūs atšķirīgu no citām aģentūrām?
</button>
</h2>
<div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion1">
<div class="accordion-body" data-i18n="a_wide_adaptable_service_set_from_sales_and_rentals_to_renovation_design_legal_support_and_branding_delivered_with_careful_attention_to_detail">
Plašs, pielāgojams pakalpojumu komplekts - sākot no pārdošanas un īres līdz atjaunošanai, dizainam, juridiskam atbalstam un zīmolam -, kas rūpīgi pievērš uzmanību detaļām.
</div>
</div>
</div>
...
</div>
Sources: about.html:200-217
Data-to-UI Flow
The overall process involves the static site generator reading the structured JSON content and injecting it into the HTML templates to produce the final, viewable pages.
This diagram shows the conceptual flow from content creation to the user interface.
Sources: stackbit.config.ts, about.html, contact.html
The interactivity of the accordion (expanding and collapsing) is handled by Bootstrap's JavaScript library, which is included in the footer of every page.
Sources: about.html:482, contact.html:472
Feature Integration and Reusability
The FAQ component is not confined to a single page. It is a reusable module integrated into various parts of the website to provide contextual information.
Component Usage
The following diagram illustrates where the FAQ feature is used or linked to throughout the site.
This graph shows that the FAQ component is embedded in the About and Contact pages, and that a dedicated FAQ page is linked from the Contact and 404 pages.
Sources: about.html:200-243, contact.html:317-466, contact.html:310-313, 404.html:86-89
- About Page: A small, three-item FAQ section is present on the
about.htmlpage to answer common questions related to the agency.
Sources: about.html:200-243 - Contact Page: The
contact.htmlpage features a more extensive, two-column FAQ section under the heading "Client support questions" to proactively address user queries. It also includes a button linking to the mainfaq.htmlpage.
Sources: contact.html:305-466 - 404 Page: The footer navigation on the
404.htmlpage includes a direct link tofaq.html, ensuring users can find help even from an error page.
Sources: 404.html:86-89