FEAT: Refactored tab-autocomplete to MDX

Added screenshots and pro tips

docs/tab-autocomplete.md → docs/tab-autocomplete.mdx

@@ -56,3 +56,33 @@ PearAI supports tab autocomplete, which predicts and suggests what you would typ
       "model": "qwen2.5-coder:1.5b"
     }
   ```
+
+<div class="row" style={{ border: '1px solid var(--ifm-color-emphasis-300)', borderRadius: '8px', margin: '20px 0' }}>
+  <div class="col col--4" style={{ padding: '20px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+    <div style={{ fontSize: '1.2em', marginBottom: '15px' }}>
+    <div style={{ 
+      fontSize: '1.2em', 
+      marginBottom: '15px',
+      color: 'var(--ifm-color-primary)',
+      fontWeight: '500'
+    }}>
+      🌟 Pro Tip
+    </div>
+    </div>
+    <div style={{ lineHeight: '1.6' }}>
+      You can customize the autocomplete behavior in PearAI's settings. Experiment with different options to find the setup that works best for your coding style!
+    </div>
+  </div>
+  <div class="col col--8" style={{
+    padding: '20px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '20px',
+    background: 'var(--ifm-color-emphasis-100)',
+    borderRadius: '0 8px 8px 0'
+  }}>
+    <img src="/img/config-button.png" style={{ maxHeight: '200px', width: 'auto', objectFit: 'contain' }} />
+    <img src="/img/open-pearai-config.png" style={{ maxHeight: '250px', width: 'auto', objectFit: 'contain' }} />
+  </div>
+</div>

docusaurus.config.js

@@ -2,7 +2,7 @@
 // Note: type annotations allow type checking and IDEs autocompletion
 
 const { themes } = require("prism-react-renderer");
-require('dotenv').config();
+require("dotenv").config();
 
 const lightCodeTheme = themes.github;
 const darkCodeTheme = themes.dracula;
@@ -18,7 +18,7 @@ const config = {
   url: "https://trypear.ai",
   // Set the /<baseUrl>/ pathname under which your site is served
   // For GitHub pages deployment, it is often '/<projectName>/'
-  baseUrl: process.env.BASE_URL || '/',
+  baseUrl: process.env.BASE_URL || "/",
 
   // GitHub pages deployment config.
   // If you aren't using GitHub pages, you don't need these.
@@ -47,6 +47,9 @@ const config = {
           routeBasePath: "/",
           sidebarPath: require.resolve("./sidebars.js"),
           editUrl: "https://github.com/trypear/pearai-documentation/blob/main/",
+          remarkPlugins: [], // Add this
+          rehypePlugins: [], // Add this
+          mdxPageComponent: "@theme/MDXPage",
         },
         theme: {
           customCss: require.resolve("./src/css/custom.css"),
@@ -57,7 +60,6 @@ const config = {
       }),
     ],
   ],
-
   themeConfig:
     /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
     ({