updated markdown to html - tables, faq

Signed-off-by: bidi47 <bidi@apidemia.com>

Author: bidi47

src/App/assets/scss/components/_blog.scss

@@ -240,6 +240,57 @@ $bp-tablet: 900px;
       font-size: inherit;
     }
   }
+
+  // Markdown tables render as bare <table> elements, so they are styled by tag.
+  // display:block lets a wide table scroll sideways instead of overflowing the column.
+  table {
+    display: block;
+    width: 100%;
+    max-width: 100%;
+    margin: 0 0 24px;
+    overflow-x: auto;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    border-collapse: collapse;
+    font-size: 14.5px;
+    background: var(--surface);
+
+    th,
+    td {
+      padding: 12px 16px;
+      text-align: left;
+      vertical-align: top;
+      border-bottom: 1px solid var(--border);
+      color: var(--text);
+    }
+
+    thead th {
+      font-family: var(--mono);
+      font-size: 12px;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+      white-space: nowrap;
+      color: var(--text-dim);
+      background: var(--surface-2);
+    }
+
+    tbody tr:last-child td,
+    tbody tr:last-child th {
+      border-bottom: 0;
+    }
+
+    tbody th,
+    td:first-child {
+      font-weight: 500;
+      color: var(--text-muted);
+    }
+
+    p {
+      margin-bottom: 0;
+      font-size: inherit;
+      line-height: 1.6;
+    }
+  }
 }
 
 // ---------- Obsolete post warning ----------

src/App/src/Service/FaqExtractor.php

@@ -14,12 +14,16 @@
 /**
  * Pulls the trailing `## FAQ` section (a `**Q: ...**` / `A: ...` pair per question) out of a
  * Markdown article body, so it can be rendered as an accordion and fed into JSON-LD separately
- * from the rest of the body.
+ * from the rest of the body. `question` and `answer` keep their Markdown (for rendering);
+ * `questionText` and `answerText` are plain-text copies (for JSON-LD).
  */
 final class FaqExtractor
 {
     /**
-     * @return array{faq: list<array{question: string, answer: string}>, body: string}
+     * @return array{
+     *     faq: list<array{question: string, answer: string, questionText: string, answerText: string}>,
+     *     body: string
+     * }
      */
     public static function extract(string $body): array
     {
@@ -35,14 +39,24 @@ public static function extract(string $body): array
             PREG_SET_ORDER
         );
         foreach ($matches as $match) {
+            $question = trim($match[1]);
+            $answer   = trim(preg_replace('/\s+/', ' ', $match[2]) ?? '');
+
             $faq[] = [
-                'question' => trim($match[1]),
-                'answer'   => trim(preg_replace('/\s+/', ' ', $match[2]) ?? ''),
+                'question'     => $question,
+                'answer'       => $answer,
+                'questionText' => self::toPlainText($question),
+                'answerText'   => self::toPlainText($answer),
             ];
         }
 
         $body = trim((string) preg_replace('/^## FAQ\s*$.*\z/ms', '', $body));
 
         return ['faq' => $faq, 'body' => $body];
     }
+
+    private static function toPlainText(string $markdown): string
+    {
+        return preg_replace('/(`+)(.+?)\1/', '$2', $markdown) ?? $markdown;
+    }
 }

src/App/templates/layout/blog-post.html.twig

@@ -45,7 +45,7 @@
                 "@id": "{{ app.url ~ path('page::blog-resource', {categorySlug: article.category.slug, slug: article.slug}) }}#faq",
                 "mainEntity": [
                     {% for item in faq %}
-                    { "@type": "Question", "name": {{ item.question|json_encode|raw }}, "acceptedAnswer": { "@type": "Answer", "text": {{ item.answer|json_encode|raw }} } }{% if not loop.last %},{% endif %}
+                    { "@type": "Question", "name": {{ item.questionText|json_encode|raw }}, "acceptedAnswer": { "@type": "Answer", "text": {{ item.answerText|json_encode|raw }} } }{% if not loop.last %},{% endif %}
                     {% endfor %}
                 ]
             }{% endif %}

src/Blog/templates/page/markdown-article.html.twig

@@ -9,9 +9,9 @@
 <div class="faq-list">
     {% for item in faq %}
     <details class="acc"{% if loop.first %} open{% endif %}>
-        <summary>{{ item.question }} <span class="chev">+</span></summary>
+        <summary>{{ item.question|markdown_to_html|striptags('<code><strong><em><a>')|raw }} <span class="chev">+</span></summary>
         <div class="acc-body">
-            <p class="mb-0">{{ item.answer }}</p>
+            <p class="mb-0">{{ item.answer|markdown_to_html|striptags('<code><strong><em><a>')|raw }}</p>
         </div>
     </details>
     {% endfor %}

test/Unit/App/Service/FaqExtractorTest.php

@@ -20,13 +20,35 @@ public function testExtractPullsTheQuestionAnswerPairsOutOfTheFaqSection(): void
         $this->assertSame('Some intro text.', $result['body']);
         $this->assertSame(
             [
-                ['question' => 'What is it?', 'answer' => "It's an example."],
-                ['question' => 'Why does it matter?', 'answer' => 'Because tests need coverage.'],
+                [
+                    'question'     => 'What is it?',
+                    'answer'       => "It's an example.",
+                    'questionText' => 'What is it?',
+                    'answerText'   => "It's an example.",
+                ],
+                [
+                    'question'     => 'Why does it matter?',
+                    'answer'       => 'Because tests need coverage.',
+                    'questionText' => 'Why does it matter?',
+                    'answerText'   => 'Because tests need coverage.',
+                ],
             ],
             $result['faq']
         );
     }
 
+    public function testExtractKeepsMarkdownForRenderingAndStripsBackticksForPlainText(): void
+    {
+        $body = "## FAQ\n\n**Q: Is `dot-cache` needed?**\nA: Use `dot-cache` and ``dot-cli``.";
+
+        $result = FaqExtractor::extract($body);
+
+        $this->assertSame('Is `dot-cache` needed?', $result['faq'][0]['question']);
+        $this->assertSame('Use `dot-cache` and ``dot-cli``.', $result['faq'][0]['answer']);
+        $this->assertSame('Is dot-cache needed?', $result['faq'][0]['questionText']);
+        $this->assertSame('Use dot-cache and dot-cli.', $result['faq'][0]['answerText']);
+    }
+
     public function testExtractReturnsAnEmptyFaqWhenThereIsNoFaqSection(): void
     {
         $body = "Some intro text.\n\nMore content.";

vite.config.js

@@ -20,10 +20,10 @@ export default defineConfig({
         }),
         ViteMinifyPlugin({}),
     ],
-    emptyOutDir: true,
     root: path.resolve(__dirname, 'src'), // Set the root directory for Vite
     build: {
         outDir: '../public', // Output directory for compiled assets
+        emptyOutDir: false,
         rollupOptions: {
             input: {
                 main: '/App/assets/js/index.js', // Main JavaScript entry point