feat(home): add FAQ accordion component with JSON-LD schema

[PierreBrisorgueil]

Summary

• Add HomeFaqComponent — an accordion FAQ section using Vuetify v-expansion-panels with flat/elevation-0 cards, v-fade-transition toggle icons, and homeContentComponent for markdown answers
• JSON-LD FAQPage schema injected via useHead for SEO; prefers-reduced-motion handling via dynamic <style> tag; 1 or 2-column layout driven by setup.columns
• Register and conditionally render in home.view.vue consistent with all other home sections
• Add config example with full documentation in home.development.config.js
• Add "CSS last resort" ordering rule to /ui skill

Closes #3819

Scope

• Modules impacted: home
• Cross-module impact: none
• Risk level: low

Validation

• npm run lint
• npm run test:unit
• npm run build
• Manual checks done (if applicable)

Guardrails check

• No secrets or credentials introduced (.env*, secrets/**, keys, tokens)
• No risky rename/move of core stack paths
• Changes remain merge-friendly for downstream projects
• Tests added or updated when behavior changed

Notes for reviewers

• E2E tests skipped (Vue dev server not running locally) — all 744 unit tests pass, build clean
• Component follows exact same pattern as home.statistics.component.vue and other home sections
• prefers-reduced-motion CSS injection is guarded by window.matchMedia check for SSR safety

Summary by CodeRabbit

• New Features

  • Added a configurable home-page FAQ section with accordion layout, optional one- or two-column mode, subtitle support, variant/background options, alignment/overlap controls, reduced‑motion accessibility handling, and automatic FAQ structured-data injection for search visibility. Component renders conditionally via site config.

• Documentation

  • Updated UI design-system guidance with a “CSS last resort” styling priority and an anti‑pattern discouraging custom CSS when framework props/classes/transitions suffice.

[coderabbitai]

Warning

Rate limit exceeded

@PierreBrisorgueil has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 12 minutes and 18 seconds before requesting another review.

Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 12 minutes and 18 seconds.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 324ad63d-0725-41bb-a9d0-c6b986f05a9d

📥 Commits

Reviewing files that changed from the base of the PR and between c14dbb0 and 5c4a37a.

📒 Files selected for processing (1)

• src/modules/home/components/home.faq.component.vue

Walkthrough

Adds a config-driven FAQ accordion component to the home page, registers it in the home view, injects JSON-LD FAQ schema, supports markdown answers, responsive 1–2 column layout, dark/light theming, reduced-motion handling, and updates UI guidance to prefer Vuetify props/classes/transitions before custom CSS.

Changes

Cohort / File(s)	Summary
FAQ Component Implementation src/modules/home/components/home.faq.component.vue	New Vue SFC HomeFaqComponent: renders a v-expansion-panels accordion, supports responsive 1–2 column layout, renders markdown answers, applies theme-aware inline styles, injects JSON-LD FAQPage via useHead, and toggles reduced-motion behavior by injecting/removing a client-side style element.
FAQ Configuration src/modules/home/config/home.development.config.js	Added faq section config with icon, title, subtitle, alignment, variant, columns, overlap, placeholder style.section/style.card, and content array of { question, answer }.
View Registration src/modules/home/views/home.view.vue	Registered and conditionally renders <homeFaqComponent :setup="config.home.faq" /> when config.home.faq exists.
Design System Guidance .claude/skills/ui/SKILL.md	Added “CSS last resort” rule to Key rules and matching Anti-pattern: prefer Vuetify component props, then Vuetify utility classes, then Vuetify transitions, and only fall back to scoped/custom CSS when no Vuetify alternative exists.

Sequence Diagram

sequenceDiagram
    participant User as User
    participant Component as HomeFaqComponent
    participant PrefAPI as PrefersReducedMotion (matchMedia)
    participant HeadAPI as useHead
    participant Document as Document
    participant Vuetify as v-expansion-panels

    User->>Component: mount
    Component->>PrefAPI: query prefers-reduced-motion
    PrefAPI-->>Component: returns preference
    alt reduced motion
        Component->>Document: inject zero-duration CSS style (client-only)
    end
    Component->>HeadAPI: provide FAQPage JSON-LD
    HeadAPI->>Document: insert head schema
    Component->>Vuetify: render accordion items from setup.content
    User->>Vuetify: click question
    Vuetify-->>User: expand panel and render markdown answer

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: adding a FAQ accordion component with JSON-LD schema support for SEO.
Description check	✅ Passed	The description comprehensively covers all required sections: Summary, Scope, Validation checklist (completed), Guardrails check (completed), and helpful notes for reviewers.
Linked Issues check	✅ Passed	The PR fully addresses all requirements from issue #3819: accordion FAQ component, JSON-LD FAQPage schema, markdown support, responsive design, prefers-reduced-motion handling, and proper registration in home.view.vue.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the FAQ feature: new component, config example, view registration, and documentation update to UI skill. No unrelated modifications detected.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/home-faq-component

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.23%. Comparing base (0f06402) to head (5c4a37a).
⚠️ Report is 3 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #3821   +/-   ##
=======================================
  Coverage   99.23%   99.23%           
=======================================
  Files          28       28           
  Lines         910      910           
  Branches      243      243           
=======================================
  Hits          903      903           
  Misses          7        7           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[Copilot]

Pull request overview

Adds a new Home FAQ accordion section to the Home module, including runtime JSON-LD FAQPage schema injection for SEO and a documented config example.

Changes:

• Adds HomeFaqComponent (Vuetify expansion panels) with markdown answers and theme-aware styling.
• Registers and conditionally renders the FAQ section in home.view.vue when config.home.faq is present.
• Documents the new home.faq config block in home.development.config.js and updates the UI skill guidelines.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 7 comments.

File	Description
src/modules/home/views/home.view.vue	Imports/registers/renders the new FAQ section based on config.
src/modules/home/config/home.development.config.js	Adds a documented example home.faq config block.
src/modules/home/components/home.faq.component.vue	Implements the FAQ accordion UI + JSON-LD injection + reduced-motion handling.
.claude/skills/ui/SKILL.md	Adds a “CSS last resort” ordering rule for UI work.

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/modules/home/components/home.faq.component.vue`:
- Around line 138-143: The injected <style> element created when
prefersReducedMotion is true is never removed, causing duplicate tags on
repeated mounts; modify the component to store a reference to the created
element (the one with attribute 'data-faq-reduced-motion') and remove it in the
beforeUnmount lifecycle hook (e.g., call element.remove() or
document.head.removeChild(element)) so the style is cleaned up when the
component is destroyed; ensure this logic is tied to the same creation branch
that sets style.setAttribute('data-faq-reduced-motion', '') so you reliably
locate and remove the exact element.
- Around line 145-163: Move the useHead call out of the created lifecycle and
into the component's setup() function: remove the useHead invocation from
created() and invoke useHead(...) inside setup(), replacing any this.*
references (e.g., this.setup.content) with reactive/computed sources accessible
in setup (create a computed that maps setup.content to the JSON-LD mainEntity if
needed) so the head configuration is initialized in the proper setup context per
`@unhead/vue`.

In `@src/modules/home/config/home.development.config.js`:
- Around line 663-666: Update the inline comment so it correctly documents that
"columns" is a section-level property, not a per-item property: change the
"Content items" list (which currently includes question, answer, columns) to
only list per-item props (question, answer) and add "columns (Number): 1 | 2" to
the section-level props alongside existing section keys like variant and
alignment; reference the existing symbols "columns", "question", "answer",
"variant", and "alignment" to locate and update the comment near the FAQ/section
config.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 11b34c28-21a3-4d98-9f9b-128707017594

📥 Commits

Reviewing files that changed from the base of the PR and between 5a94d6c and af5ba74.

📒 Files selected for processing (4)

• .claude/skills/ui/SKILL.md
• src/modules/home/components/home.faq.component.vue
• src/modules/home/config/home.development.config.js
• src/modules/home/views/home.view.vue

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/modules/home/components/home.faq.component.vue`:
- Around line 140-147: The sectionStyle computed property currently sets
background: bgColor after spreading style('section', this.setup), which always
overrides any custom background from style('section'); change the order so the
theme-derived bgColor is applied as a fallback by placing it before spreading
the custom style (i.e., build an object that includes background: bgColor and
colorModeStyle first, then spread ...style('section', this.setup) so a
user-defined style.section.background wins), keeping references to sectionStyle,
style('section', this.setup), colorModeStyle, this.variant, and
this.theme.current.colors.* to locate the code.
- Around line 172-178: The cardStyle computed method currently spreads
style('card', this.setup) then unconditionally sets background: cardColor which
overrides any custom background from the style; update cardStyle to merge the
objects so that an existing background returned by style('card', this.setup)
takes precedence—i.e., fetch the base styles via style('card', this.setup),
check if base.background is set, and only apply background: cardColor when
base.background is undefined or falsy, then return the merged style object so
custom backgrounds are preserved.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: a5989252-88f6-4f1d-ad49-60932738179b

📥 Commits

Reviewing files that changed from the base of the PR and between af5ba74 and 57cc9c3.

📒 Files selected for processing (2)

• src/modules/home/components/home.faq.component.vue
• src/modules/home/config/home.development.config.js

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/modules/home/components/home.faq.component.vue`:
- Around line 195-197: The methods block currently exposes the imported helper
"style" (methods: { style }) even though "style" is used directly inside
computed properties and not invoked from the template; remove the "style" entry
from the methods object (or remove the entire methods object if it's empty) so
that "style" is only imported/used where needed and no unused methods are
exported from the component.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 1d04c6f9-c0bd-42d3-9126-dc1efc878672

📥 Commits

Reviewing files that changed from the base of the PR and between 57cc9c3 and 8878e42.

📒 Files selected for processing (1)

• src/modules/home/components/home.faq.component.vue

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/modules/home/components/home.faq.component.vue`:
- Around line 37-42: The v-for on v-expansion-panel uses :key="item.question",
which will break if duplicate questions exist; update the key to a more robust
unique value (e.g., combine the loop index with the question or use a dedicated
id) by changing the v-for/key usage where v-expansion-panel iterates over column
(the item variable) — replace :key="item.question" with a composite key like
:key="`faq-${index}-${item.question}`" or use item.id if available to ensure
stable keys during re-renders.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: a97c4a99-df10-4e52-8692-0360b69302ed

📥 Commits

Reviewing files that changed from the base of the PR and between 8878e42 and 57eb4c6.

📒 Files selected for processing (1)

• src/modules/home/components/home.faq.component.vue

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/modules/home/components/home.faq.component.vue`:
- Around line 96-103: mainEntity currently maps props.setup.content into
Questions without validating fields, which can produce invalid JSON-LD when
items lack item.question or item.answer; update the generation to first filter
props.setup.content for entries where both question and answer are non-empty
(e.g., drop items with falsy item.question or item.answer) and then map the
filtered list to the Question/Answer shape so only complete FAQ items are
emitted; ensure the code references the same symbols (mainEntity and
props.setup.content) so the change is localized.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: a78078eb-8333-44e7-9f91-319f55c5a0dc

📥 Commits

Reviewing files that changed from the base of the PR and between 57eb4c6 and d2bdb25.

📒 Files selected for processing (1)

• src/modules/home/components/home.faq.component.vue

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/modules/home/components/home.faq.component.vue`:
- Around line 154-161: The columns() computed property currently builds columns
directly from this.setup.content and can include items missing question/answer;
update columns() to first filter this.setup.content using the same validation
used for JSON-LD (exclude items without both question and answer) before
splitting into halves or returning a single column so the UI panels match the
schema output; locate the columns() function and apply the filter to
this.setup.content (or the local content variable) prior to calculating half,
cols, and the final returned array.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: 701dac00-2a8d-40dd-9d02-81138675dfad

📥 Commits

Reviewing files that changed from the base of the PR and between d2bdb25 and c14dbb0.

📒 Files selected for processing (1)

• src/modules/home/components/home.faq.component.vue