Create dedicated FAQ page

[michaeldistel]

Problem

FAQ schema exists but no actual FAQ page:

• Users can't find common answers
• FAQ data only in JSON-LD (invisible to users)
• Missing helpful content

Current State

FAQSchema defined in src/lib/schemas/FAQSchema.ts but not rendered visually

Solution

Create /faq page using existing schema data:

<!-- src/routes/faq/+page.svelte -->
<script>
  import FAQSchema from '$lib/schemas/FAQSchema';
  import CanonicalLink from '$lib/components/CanonicalLink.svelte';
</script>

<CanonicalLink path="/faq" />

<svelte:head>
  <title>Frequently Asked Questions | ControlForge</title>
  <meta name="description" content="Common questions about ControlForge VS Code extension for Structured Text (IEC 61131-3) programming">
  {@html FAQSchema}
</svelte:head>

<div class="faq-page">
  <h1>Frequently Asked Questions</h1>
  
  {#each faqItems as { question, answer }}
    <details class="faq-item">
      <summary>
        <h2>{question}</h2>
      </summary>
      <div class="answer">
        {@html answer}
      </div>
    </details>
  {/each}
</div>

<style>
  details {
    border-bottom: 1px solid var(--border);
    padding: 1rem 0;
  }
  
  summary {
    cursor: pointer;
    font-weight: 600;
  }
  
  summary:hover {
    color: var(--brand-blue);
  }
  
  .answer {
    margin-top: 0.5rem;
    padding-left: 1rem;
  }
</style>

FAQ Topics to Cover

1. What is ControlForge?
2. Which PLC brands are supported?
3. Is it free?
4. How do I install the extension?
5. Does it work with TwinCAT/Codesys/etc?
6. What features are included?
7. How do I report bugs?
8. Can I contribute?
9. What is IEC 61131-3?
10. Offline documentation available?

Features

• Collapsible
  Details

  elements
• Schema.org markup (already exists)
• Search-friendly
• Anchor links to specific questions
• "Was this helpful?" on each answer

Success Criteria

• /faq page accessible from footer
• All FAQSchema questions rendered
• Collapsible answers
• Mobile responsive
• Linked from footer + navigation