Skip to content

Render every FAQ through one Faq component - #5859

Open
Yndira-E wants to merge 12 commits into
mainfrom
feat/unify-faq
Open

Yndira-E wants to merge 12 commits into
mainfrom
feat/unify-faq

Conversation

@Yndira-E

@Yndira-E Yndira-E commented Sep 24, 2026 •

Copy link
Copy Markdown
Contributor

Description

Every FAQ on the site now renders through Faq (renamed from BlogFaq), including /pricing/ and /integrations/opcua/, which had their own markup and raw HTML answers.

  • Answers are parsed into nodes instead of HTML strings, so no FAQ renders with v-html. Output is unchanged for all existing answers.
  • Links to CTA destinations in FAQ answers and inline copy render through CtaLink, so they're tracked like other inline links (position: faq in FAQs). The link matching is shared with ProseA through ctaLink().
  • FAQ structured data (JSON-LD) gets the answer as plain text through faqAnswerText(), instead of the markdown source.
  • The pricing and OPC UA answers moved from raw HTML to the same markdown subset every other FAQ uses.
  • The industry Applications copy and the remote device management copy render through the same InlineMarkdown component.
  • Tests fail on a leftover <BlogFaq>, on HTML in a FAQ answer, and on a defineQuestion without faqAnswerText().

Visual change: the pricing FAQ now looks like every other FAQ instead of a Nuxt UI accordion, and the OPC UA FAQ gains 16px above and below.

Heads-up: #5811 and #5747 add <BlogFaq> usages. Whichever merges second needs to rename them to <Faq>; the new test will catch it.

Follow-up:

  • Generate the FAQ structured data inside Faq, so pages don't have to remember to add it (/integrations/opcua/ has none today).

Related Issue(s)

Checklist

  • I have read the contribution guidelines
  • I have considered the performance impact of these changes
  • Suitable unit/system level tests have been added and they pass
  • Documentation has been updated
  • For blog PRs, an Art Request has been created (instructions)

Note

Render all FAQ sections through shared Faq component

  • Renames BlogFaq to Faq and routes every FAQ section through this single component, including the custom accordions on the OPC UA and pricing pages.
  • Replaces v-html string injection with structured parsing in faq-answer.mjs and inline-markdown.mjs, rendering typed paragraph and list nodes through InlineMarkdown.vue.
  • Replaces v-html in non-FAQ copy with InlineMarkdown in Applications.vue and remote-device-management.vue.
  • Behavioral Change: FAQ answers and updated copy now render only the supported markdown subset (links, emphasis, lists). Literal HTML tags in answer content render as escaped text instead of HTML elements.

Macroscope summarized e6fa737.

@netlify

netlify Bot commented Sep 24, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for flowfuse-website ready!

Name Link
🔨 Latest commit e257a43
🔍 Latest deploy log https://app.netlify.com/projects/flowfuse-website/deploys/6ac38be345772e0008d82a18
😎 Deploy Preview https://deploy-preview-5859--flowfuse-website.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse
1 paths audited
Performance: 44 (🟢 up 12 from production)
Accessibility: 95 (no change from production)
Best Practices: 92 (no change from production)
SEO: 92 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify project configuration.

faq-answer.mjs now parses answers into nodes instead of HTML strings, and
InlineMarkdown renders them, so no answer needs v-html. Pricing and the
OPC UA page use BlogFaq instead of their own FAQ markup, with answers
moved from raw HTML to the markdown subset.
It renders every FAQ on the site, not just blog posts.
parseInline is shared by InlineMarkdown and FAQ answers, so it gets its own
module; faq-answer.mjs keeps only the paragraph and list handling.
InlineMarkdown renders links to CTA destinations through CtaLink, with a
position per caller (faq in Faq).
*a **b** c* rendered as three separate em spans, losing the bold. The
HTML-string renderer produced <em>a <strong>b</strong> c</em>.
Both repeated ctaDestinationKey + ctaQuery, and InlineMarkdown called
ctaDestinationKey twice per link on every render. InlineMarkdown now
resolves each link once.
Answers are markdown now, so defineQuestion was publishing
[Contact Us](/contact-us/) and blank lines in the JSON-LD. faqAnswerText()
keeps link labels and drops the markup, and every page passes it.
An unknown component renders nothing and the build still passes, so a
page still using the old name would ship an empty FAQ.
Faq renders an answer's text through Vue, so an answer written the old
way, with <a> or <br> tags, shows the tags as literal text.
The escaping happens in Vue's interpolation now, not in Faq.
- The HTML check skips content/docs and content/blueprints, which are
  synced from other repositories and not rendered by Faq.
- A frontmatter js-yaml can't parse fails with the file's path.
- The defineQuestion check reads each call's whole argument, so a call
  over several lines passes and faqAnswerText on the question fails.
- As in CommonMark, an asterisk with a space on its inner side is not
  emphasis, so "2 * 3 * 4" stays text.

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant