Merge pull request #273 from dotkernel/develop

Develop

Author: arhimede

public/css/app.css

@@ -240,6 +240,60 @@ $bp-tablet: 900px;
       font-size: inherit;
     }
   }
+
+  // Markdown tables render as bare <table> elements, so they are styled by tag.
+  // The template wraps each one in .table-wrap so a wide table scrolls sideways
+  // instead of overflowing the column.
+  .table-wrap {
+    margin: 0 0 24px;
+    overflow-x: auto;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    background: var(--surface);
+  }
+
+  table {
+    width: 100%;
+    margin: 0;
+    border-collapse: collapse;
+    font-size: 14.5px;
+
+    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 ----------

public/js/app.js

@@ -3103,7 +3103,7 @@
             {
                 "post_title": "AI-Native Coding Pods: The Promise, Risks, and How to Make Them Work",
                 "post_date": "2026-09-09 12:00:00",
-                "post_status": "draft",
+                "post_status": "published",
                 "author": {
                     "display_name": "Florin Bidirean",
                     "github": "bidi47"

…s/best-practice/ai-native-coding-pods.md …omise-risks-and-how-to-make-them-work.mdpublic/md-articles/best-practice/ai-native-coding-pods.md renamed to public/md-articles/headless-platform/ai-native-coding-pods-the-promise-risks-and-how-to-make-them-work.md public/md-articles/best-practice/ai-native-coding-pods.md renamed to public/md-articles/headless-platform/ai-native-coding-pods-the-promise-risks-and-how-to-make-them-work.md

@@ -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;
+    }
 }

…dotkernel-vs-lumen-slim-microservices.md …er-for-a-lightweight-api-microservice.mdpublic/md-articles/headless-platform/dotkernel-vs-lumen-slim-microservices.md renamed to public/md-articles/headless-platform/dotkernel-vs-lumen-vs-slim-which-is-better-for-a-lightweight-api-microservice.md public/md-articles/headless-platform/dotkernel-vs-lumen-slim-microservices.md renamed to public/md-articles/headless-platform/dotkernel-vs-lumen-vs-slim-which-is-better-for-a-lightweight-api-microservice.md

@@ -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/App/assets/scss/components/_blog.scss

@@ -1,17 +1,17 @@
 {% extends '@layout/blog-post.html.twig' %}
 
 {% block body %}
-{{ content|markdown_to_html }}
+{{ content|markdown_to_html|replace({'<table>': '<div class="table-wrap"><table>', '</table>': '</table></div>'})|raw }}
 
 {% if faq is not empty %}
 <h2 id="user-content-faq">Frequently Asked Questions</h2>
 
 <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 %}

src/App/src/Fixture/articles_cleaned.json

@@ -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.";