Enhance Markdown rendering with responsive table class and list item styling; update Posts page title for clarity

abdessamadbettal · abdessamadbettal · commit 0ed7eff3bbde · 2024-12-13T21:48:16.000Z
diff --git a/app/Helpers/MarkdownHelper.php b/app/Helpers/MarkdownHelper.php
@@ -11,6 +11,7 @@
 use League\CommonMark\Extension\CommonMark\Node\Inline\Link;
 use League\CommonMark\Extension\CommonMark\Node\Block\Heading;
 use League\CommonMark\Extension\CommonMark\Node\Inline\Strong;
+use League\CommonMark\Extension\CommonMark\Node\Block\ListItem;
 use League\CommonMark\Extension\CommonMark\Node\Block\BlockQuote;
 use League\CommonMark\Extension\CommonMark\CommonMarkCoreExtension;
 use League\CommonMark\Extension\DefaultAttributes\DefaultAttributesExtension;
@@ -31,7 +32,7 @@ public static function convertToHtml(string $markdown): string
                     },
                 ],
                 Table::class => [
-                    'class' => 'table',
+                    'class' => ['table', 'table-responsive'],
                 ],
                 Paragraph::class => [
                     'class' => [''],
@@ -49,6 +50,9 @@ public static function convertToHtml(string $markdown): string
                 Code::class => [
                     'class' => 'block bg-gray-800 text-gray-300 rounded-lg p-4 shadow-lg text-sm font-mono overflow-x-auto',
                 ],
+                ListItem::class => [
+                    'class' => 'list-disc list-inside',
+                ],
             ],
         ];
         // Configure the Environment with all the CommonMark parsers/renderers
diff --git a/resources/js/Pages/Post/Posts.vue b/resources/js/Pages/Post/Posts.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <Head title="Posts" />
+    <Head title="All Posts" />
     <section class="relative md:py-24 py-16">
         <div class="container relative">
             <div class="grid lg:grid-cols-3 md:grid-cols-2 grid-cols-1 gap-6">
@@ -33,7 +33,8 @@ export default {
     name: 'Posts',
     components: {
         BlogCard,
-        Pagination
+        Pagination,
+        Head,
     },
     props: {
         posts: {
