* *docs/.vuepress/config.ts* : support Badge and deprecated HTML elements as custom elements in VuePress

    * Added `isCustomElement` configuration to recognize the `<Badge>` component.
    * Included support for deprecated HTML tags as custom elements:
    * `<center>`, `<font>`, `<big>`, `<small>`, `<strike>`, `<tt>`, `<marquee>`, `<blink>`, `<applet>`, `<frameset>`, `<frame>`, `<dir>`
    * Prevented Vue compiler warnings by treating these tags and the `<Badge>` component as custom elements.
    * Improved compatibility with legacy HTML content and custom components in markdown.

* *docs/features/README.md* : Correct <table> structure to adhere to HTML standards
    * Wrapped <tr> elements in <thead> and <tbody> tags.
    * Resolved Vite warning about improper child elements of <table>.
    * Ensured compatibility and prevented potential hydration errors.

Author: Yassine El Haddad

docs/.vuepress/config.ts

@@ -1,15 +1,15 @@
-import { defineUserConfig, viteBundler } from "vuepress";
-import theme from "./theme";
-import plugins from "./config-user/plugins";
-import headFunctions from "./headFunctions";
+import { defineUserConfig, viteBundler } from 'vuepress';
+import theme from './theme';
+import plugins from './config-user/plugins';
+import headFunctions from './headFunctions';
 
 export default defineUserConfig({
   theme,
   markdown: {
     headers: {
       level: [2, 3, 4, 5],
     },
-  anchor: {
+    anchor: {
       permalink: true,
       permalinkBefore: true,
       permalinkSymbol: '#',
@@ -19,19 +19,34 @@ export default defineUserConfig({
   bundler: viteBundler({
     viteOptions: {
       ssr: {
-        noExternal: ["vue-select", "vue-multiselect"],
+        noExternal: ['vue-select', 'vue-multiselect'],
+      },
+    },
+    vuePluginOptions: {
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => {
+            // List of deprecated HTML tags to treat as custom elements
+            // Add any other custom elements to this list 
+            const customElements = [
+              'Badge', 'center', 'font', 'big', 'small', 'strike', 'tt', 
+              'marquee', 'blink', 'applet', 'frameset', 'frame', 'dir',
+            ];
+            return customElements.includes(tag);
+          },
+        },
       },
     },
   }),
   head: headFunctions,
-   scrollBehavior(to, from, savedPosition) {
+  scrollBehavior(to, from, savedPosition) {
     if (to.hash) {
       return {
         el: to.hash,
         behavior: 'smooth',
         top: 80, // Adjust based on your header height
-      }
+      };
     }
-    return savedPosition || { top: 0 }
+    return savedPosition || { top: 0 };
   },
 });

docs/features/README.md

@@ -236,33 +236,43 @@ Since the module is fresh, it is in experimental mode – disabled by default fo
 Now two options can be used to control how brute force protection works for Dovecot:
 
 <table>
-	<tr>
-	    <th colspan="2">Condition</th>
-	    <th rowspan="2">Behavior</th>
-	</tr >
-	<tr >
-	    <td>PAM.exim_dovecot_protection</td>
-	    <td>PAM.exim_dovecot_native</td>
-	</tr>
-  	<tr >
-	    <td><center>false</center></td>
-	    <td><center>any</center></td>
+  <thead>
+    <tr>
+      <th colspan="2">Condition</th>
+      <th rowspan="2">Behavior</th>
+    </tr>
+    <tr>
+      <td>PAM.exim_dovecot_protection</td>
+      <td>PAM.exim_dovecot_native</td>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><center>false</center></td>
+      <td><center>any</center></td>
       <td>Dovecot protection <b>disabled</b></td>
-	</tr>
-    <tr >
-	    <td><center>true</center></td>
-	    <td><center>false</center></td>
-      <td>Dovecot protection <b>enabled</b> (default)
-      <ul><li>PAM-based module</li></ul>
+    </tr>
+    <tr>
+      <td><center>true</center></td>
+      <td><center>false</center></td>
+      <td>
+        Dovecot protection <b>enabled</b> (default)
+        <ul>
+          <li>PAM-based module</li>
+        </ul>
       </td>
-	</tr>
-      <tr>
-	    <td><center>true</center></td>
-	    <td><center>true</center></td>
-      <td>Dovecot protection <b>enabled</b>
-      <ul><li>Native module ON</li></ul>
+    </tr>
+    <tr>
+      <td><center>true</center></td>
+      <td><center>true</center></td>
+      <td>
+        Dovecot protection <b>enabled</b>
+        <ul>
+          <li>Native module ON</li>
+        </ul>
       </td>
-	</tr>
+    </tr>
+  </tbody>
 </table>
 
 The following commands can be used to control the Dovecot native module: