docs: bugfix/formatting faq docs (#1027)

* fixed formatting of faq and enhanced styling

* save

* did further improvements and fixing the sidebar

---------

Co-authored-by: Anirban Kar <[email protected]>

app/components/chat/chatExportAndImport/ImportButtons.tsx

@@ -31,6 +31,7 @@ export function ImportButtons(importChat: ((description: string, messages: Messa
                   if (Array.isArray(data.messages)) {
                     await importChat(data.description || 'Imported Chat', data.messages);
                     toast.success('Chat imported successfully');
+
                     return;
                   }
 

app/components/settings/data/DataTab.tsx

@@ -233,7 +233,9 @@ export default function DataTab() {
     event.target.value = '';
   };
 
-  const processChatData = (data: any): Array<{
+  const processChatData = (
+    data: any,
+  ): Array<{
     id: string;
     messages: Message[];
     description: string;
@@ -242,23 +244,25 @@ export default function DataTab() {
     // Handle Bolt standard format (single chat)
     if (data.messages && Array.isArray(data.messages)) {
       const chatId = crypto.randomUUID();
-      return [{
-        id: chatId,
-        messages: data.messages,
-        description: data.description || 'Imported Chat',
-        urlId: chatId
-      }];
+      return [
+        {
+          id: chatId,
+          messages: data.messages,
+          description: data.description || 'Imported Chat',
+          urlId: chatId,
+        },
+      ];
     }
 
-      // Handle Bolt export format (multiple chats)
-      if (data.chats && Array.isArray(data.chats)) {
-        return data.chats.map((chat: { id?: string; messages: Message[]; description?: string; urlId?: string; }) => ({
-          id: chat.id || crypto.randomUUID(),
-          messages: chat.messages,
-          description: chat.description || 'Imported Chat',
-          urlId: chat.urlId,
-        }));
-      }
+    // Handle Bolt export format (multiple chats)
+    if (data.chats && Array.isArray(data.chats)) {
+      return data.chats.map((chat: { id?: string; messages: Message[]; description?: string; urlId?: string }) => ({
+        id: chat.id || crypto.randomUUID(),
+        messages: chat.messages,
+        description: chat.description || 'Imported Chat',
+        urlId: chat.urlId,
+      }));
+    }
 
     console.error('No matching format found for:', data);
     throw new Error('Unsupported chat format');
@@ -296,6 +300,7 @@ export default function DataTab() {
         } else {
           toast.error('Failed to import chats');
         }
+
         console.error(error);
       }
     };

docs/.gitignore

@@ -1,2 +1,3 @@
 .venv
-site/
+site/
+.python-version

docs/.python-version

@@ -0,0 +1 @@
+3.12.0

docs/docs/FAQ.md

@@ -1,77 +1,95 @@
 # Frequently Asked Questions (FAQ)
 
-## What are the best models for bolt.diy?
+## Models and Setup
 
-For the best experience with bolt.diy, we recommend using the following models:
+??? question "What are the best models for bolt.diy?"
+    For the best experience with bolt.diy, we recommend using the following models:
 
-- **Claude 3.5 Sonnet (old)**: Best overall coder, providing excellent results across all use cases
-- **Gemini 2.0 Flash**: Exceptional speed while maintaining good performance
-- **GPT-4o**: Strong alternative to Claude 3.5 Sonnet with comparable capabilities
-- **DeepSeekCoder V2 236b**: Best open source model (available through OpenRouter, DeepSeek API, or self-hosted)
-- **Qwen 2.5 Coder 32b**: Best model for self-hosting with reasonable hardware requirements
+    - **Claude 3.5 Sonnet (old)**: Best overall coder, providing excellent results across all use cases
+    - **Gemini 2.0 Flash**: Exceptional speed while maintaining good performance
+    - **GPT-4o**: Strong alternative to Claude 3.5 Sonnet with comparable capabilities
+    - **DeepSeekCoder V3**: Best open source model (available through OpenRouter, DeepSeek API, or self-hosted)
+    - **DeepSeekCoder V2 236b**: available through OpenRouter, DeepSeek API, or self-hosted
+    - **Qwen 2.5 Coder 32b**: Best model for self-hosting with reasonable hardware requirements
 
-**Note**: Models with less than 7b parameters typically lack the capability to properly interact with bolt!
+    !!! warning
+        Models with less than 7b parameters typically lack the capability to properly interact with bolt!
 
-## How do I get the best results with bolt.diy?
+## Best Practices
 
-- **Be specific about your stack**:  
-  Mention the frameworks or libraries you want to use (e.g., Astro, Tailwind, ShadCN) in your initial prompt. This ensures that bolt.diy scaffolds the project according to your preferences.
+??? question "How do I get the best results with bolt.diy?"
+    - **Be specific about your stack**:  
+      Mention the frameworks or libraries you want to use (e.g., Astro, Tailwind, ShadCN) in your initial prompt. This ensures that bolt.diy scaffolds the project according to your preferences.
 
-- **Use the enhance prompt icon**:  
-  Before sending your prompt, click the *enhance* icon to let the AI refine your prompt. You can edit the suggested improvements before submitting.
+    - **Use the enhance prompt icon**:  
+      Before sending your prompt, click the *enhance* icon to let the AI refine your prompt. You can edit the suggested improvements before submitting.
 
-- **Scaffold the basics first, then add features**:  
-  Ensure the foundational structure of your application is in place before introducing advanced functionality. This helps bolt.diy establish a solid base to build on.
+    - **Scaffold the basics first, then add features**:  
+      Ensure the foundational structure of your application is in place before introducing advanced functionality. This helps bolt.diy establish a solid base to build on.
 
-- **Batch simple instructions**:  
-  Combine simple tasks into a single prompt to save time and reduce API credit consumption. For example:  
-  *"Change the color scheme, add mobile responsiveness, and restart the dev server."*
+    - **Batch simple instructions**:  
+      Combine simple tasks into a single prompt to save time and reduce API credit consumption. For example:  
+      *"Change the color scheme, add mobile responsiveness, and restart the dev server."*
 
-## How do I contribute to bolt.diy?
+## Project Information
 
-Check out our [Contribution Guide](CONTRIBUTING.md) for more details on how to get involved!
+??? question "How do I contribute to bolt.diy?"
+    Check out our [Contribution Guide](CONTRIBUTING.md) for more details on how to get involved!
 
-## What are the future plans for bolt.diy?
+??? question "What are the future plans for bolt.diy?"
+    Visit our [Roadmap](https://roadmap.sh/r/ottodev-roadmap-2ovzo) for the latest updates.  
+    New features and improvements are on the way!
 
-Visit our [Roadmap](https://roadmap.sh/r/ottodev-roadmap-2ovzo) for the latest updates.  
-New features and improvements are on the way!
+??? question "Why are there so many open issues/pull requests?"
+    bolt.diy began as a small showcase project on @ColeMedin's YouTube channel to explore editing open-source projects with local LLMs. However, it quickly grew into a massive community effort!
 
-## Why are there so many open issues/pull requests?
+    We're forming a team of maintainers to manage demand and streamline issue resolution. The maintainers are rockstars, and we're also exploring partnerships to help the project thrive.
 
-bolt.diy began as a small showcase project on @ColeMedin's YouTube channel to explore editing open-source projects with local LLMs. However, it quickly grew into a massive community effort!  
+## Model Comparisons
 
-We're forming a team of maintainers to manage demand and streamline issue resolution. The maintainers are rockstars, and we're also exploring partnerships to help the project thrive.
+??? question "How do local LLMs compare to larger models like Claude 3.5 Sonnet for bolt.diy?"
+    While local LLMs are improving rapidly, larger models like GPT-4o, Claude 3.5 Sonnet, and DeepSeek Coder V2 236b still offer the best results for complex applications. Our ongoing focus is to improve prompts, agents, and the platform to better support smaller local LLMs.
 
-## How do local LLMs compare to larger models like Claude 3.5 Sonnet for bolt.diy?
+## Troubleshooting
 
-While local LLMs are improving rapidly, larger models like GPT-4o, Claude 3.5 Sonnet, and DeepSeek Coder V2 236b still offer the best results for complex applications. Our ongoing focus is to improve prompts, agents, and the platform to better support smaller local LLMs.
+??? error "There was an error processing this request"
+    This generic error message means something went wrong. Check both:
 
-## Common Errors and Troubleshooting
+    - The terminal (if you started the app with Docker or `pnpm`).
 
-### "There was an error processing this request"
-This generic error message means something went wrong. Check both:
-- The terminal (if you started the app with Docker or `pnpm`).
-- The developer console in your browser (press `F12` or right-click > *Inspect*, then go to the *Console* tab).
+    - The developer console in your browser (press `F12` or right-click > *Inspect*, then go to the *Console* tab).
 
-### "x-api-key header missing"
-This error is sometimes resolved by restarting the Docker container.  
-If that doesn't work, try switching from Docker to `pnpm` or vice versa. We're actively investigating this issue.
+??? error "x-api-key header missing"
+    This error is sometimes resolved by restarting the Docker container.  
+    If that doesn't work, try switching from Docker to `pnpm` or vice versa. We're actively investigating this issue.
 
-### Blank preview when running the app
-A blank preview often occurs due to hallucinated bad code or incorrect commands.  
-To troubleshoot:
-- Check the developer console for errors.
-- Remember, previews are core functionality, so the app isn't broken! We're working on making these errors more transparent.
+??? error "Blank preview when running the app"
+    A blank preview often occurs due to hallucinated bad code or incorrect commands.  
+    To troubleshoot:
 
-### "Everything works, but the results are bad"
-Local LLMs like Qwen-2.5-Coder are powerful for small applications but still experimental for larger projects. For better results, consider using larger models like GPT-4o, Claude 3.5 Sonnet, or DeepSeek Coder V2 236b.
+    - Check the developer console for errors.
 
-### "Received structured exception #0xc0000005: access violation"
-If you are getting this, you are probably on Windows. The fix is generally to update the [Visual C++ Redistributable](https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170)
+    - Remember, previews are core functionality, so the app isn't broken! We're working on making these errors more transparent.
 
-### "Miniflare or Wrangler errors in Windows"
-You will need to make sure you have the latest version of Visual Studio C++ installed (14.40.33816), more information here https://github.com/stackblitz-labs/bolt.diy/issues/19.
+??? error "Everything works, but the results are bad"
+    Local LLMs like Qwen-2.5-Coder are powerful for small applications but still experimental for larger projects. For better results, consider using larger models like 
+
+    - GPT-4o 
+    - Claude 3.5 Sonnet
+    - DeepSeek Coder V2 236b
+
+??? error "Received structured exception #0xc0000005: access violation"
+    If you are getting this, you are probably on Windows. The fix is generally to update the [Visual C++ Redistributable](https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170)
+
+??? error "Miniflare or Wrangler errors in Windows"
+    You will need to make sure you have the latest version of Visual Studio C++ installed (14.40.33816), more information here <a href="https://github.com/stackblitz-labs/bolt.diy/issues/19">Github Issues</a>
 
 ---
 
-Got more questions? Feel free to reach out or open an issue in our GitHub repo!
+## Get Help & Support
+
+!!! tip "Community Support"
+    [Join the bolt.diy Community](https://thinktank.ottomator.ai/c/bolt-diy/17){target=_blank} for discussions and help
+
+!!! bug "Report Issues"
+    [Open an Issue](https://github.com/stackblitz-labs/bolt.diy/issues/19){target=_blank} in our GitHub Repository

docs/mkdocs.yml

@@ -65,4 +65,12 @@ markdown_extensions:
   - pymdownx.details
   - pymdownx.superfences
   - pymdownx.mark
-  - attr_list
+  - attr_list
+  - md_in_html
+  - tables
+  - def_list
+  - admonition
+  - pymdownx.tasklist:
+      custom_checkbox: true
+  - toc:
+      permalink: true