Move to Mintlify

README.md

@@ -1,41 +1,13 @@
-Docs for gptengineer.app
-========================
+# These docs are built with Mintlify
 
-Built with [MkDocs](https://www.mkdocs.org/) and [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/).
+To install Mintlify locally
 
-Configuration happens in `mkdocs.yml`. You can find an extensive example [here](https://github.com/squidfunk/mkdocs-material/blob/master/mkdocs.yml).
-
-Docs for the docs:
- - https://mkdocs.org
- - https://squidfunk.github.io/mkdocs-material/
-
-## Build
-
-```bash
-make install
-make build
-# or, to serve locally
-make dev
+```
+npm i -g mintlify
 ```
 
-## What do we need to document?
-
-We want to keep the documentation as simple as possible.
-
- - The documentation should **not** be necessary for users to understand how to use gptengineer.app. 
-   - If users need to read the documentation to understand how to use the app, then the app is not intuitive enough.
- - The documentation should serve as a complement to the app.
-   - Giving users clarity about what it can and cannot do.
- - The documentation could also contain content aimed at developers/power users.
-   - Which might confuse non-technical users if it were included in the app itself.
- - Something to link to when people have questions.
- - Explain status of upcoming/requested features, like backend etc.
-
-## Contributing
-
-We welcome community contributions to improve the documentation. If you would like to contribute, please refer to our [Contributing guide](./CONTRIBUTING.md) for instructions on how to get started.
-
-
-## Deploy
+To test your changes
 
-The documentation is automatically deployed to Netlify from GitHub Actions when changes to the `docs/` directory are made on the `main` branch. (this is due to Netlify not supporting Python 3.8+ in their build workers)
+```
+mintlify dev
+```

src/features/deploy.md → features/deploy.mdx

@@ -1,42 +1,58 @@
-# :globe_with_meridians: Deploy and share
+---
+title: 'Deploy and share'
+description: 'Learn how to deploy and share your web applications with Lovable'
+---
 
 Once your web app is ready, you can deploy it or share it with the world. You can also share your work-in-progress version to gather feedback. Lovable makes it simple to publish and share your apps with just a few clicks.
 
+<Tip>
+  Your published app will be accessible to anyone with the link. Make sure you're ready to share before publishing!
+</Tip>
+
 ---
 
 ## Publishing your app
 
 To publish your web app, in the top right corner of the editor view, click on the **Share** button. This button looks like a globe icon.
-<div align="center">
-  <img src="/assets/share-icon.png" alt="Share icon in Lovable">
-</div>
+
+<Frame>
+  <img src="/assets/share-icon.png" alt="Share icon in Lovable" />
+</Frame>
 
 After clicking the **Share** button, a dialog will appear with options to publish your application. Click the green **Publish** button to start the deployment process. During this time, the button will display **Publishing**.
 
-<div align="center">
-    <video autoplay loop src="/assets/videos/video-publish-republish.mp4" title="Publishing and republishing Lovable apps"></video>
-</div>
+<Frame>
+  <video autoPlay loop muted>
+    <source src="/assets/videos/video-publish-republish.mp4" type="video/mp4" />
+  </video>
+</Frame>
 
 Once the deployment is complete, the dialog will show the published address with a **Republish** button for future updates.
 
 Your application is now live, and you can access it at the provided link.
 
+<Note>
+  The publishing process typically takes less than a minute. You'll receive a notification once it's complete.
+</Note>
+
 ---
 
 ## Previewing your app
 
 Previewing your app allows you to preview and share your work-in-progress updates without fully deploying them.
 
-!!! tip "Use previewing for iterative development"
-    Previewing is very handy as it allows you and others to view the latest changes without affecting the live, published version of your application.
+<Info>
+  **Use previewing for iterative development**
+
+  Previewing is very handy as it allows you and others to view the latest changes without affecting the live, published version of your application.
 
-    We've noticed users using it for iterative development and getting real-time feedback, as well as for collaborative reviews and testing before final deployment.
+  We've noticed users using it for iterative development and getting real-time feedback, as well as for collaborative reviews and testing before final deployment.
+</Info>
 
 Within the same **Share** dialog described earlier, you'll see a **Preview** section with a link to view or share your work-in-progress updates.
 
 The preview link is generated instantly and can be shared with team members for feedback.
-<div align="center">
-  <img src="/assets/share-preview.png" alt="Sharing your work-in-progress">
-</div>
 
-</br></br>
+<Frame>
+  <img src="/assets/share-preview.png" alt="Sharing your work-in-progress" />
+</Frame>

src/features/index.md → features/introduction.mdx

@@ -1,4 +1,8 @@
-# :tools: Features
+---
+title: 'Introduction'
+description: 'Explore the key features and capabilities of Lovable'
+---
+
 
 Lovable comes with a sleeve of features available. While these Docs are work in progress, and not all of the features are described, we wanted to showcase some of the key and most commonly used features.
 
@@ -7,31 +11,21 @@ Lovable comes with a sleeve of features available. While these Docs are work in
 ## Overview
 Explore the sections below to get started quickly and learn more about some of the features offered by Lovable.
 
-<div class="grid cards" markdown>
-
--   :octicons-globe-24:{ .lg .middle } **Deploy and share**
-
-    ---
-
+<CardGroup cols={2}>
+  <Card
+    title="Deploy and share"
+    icon="globe"
+    href="/deploy"
+  >
     Learn how to publish and share your Lovable projects quickly and efficiently with the public.
+  </Card>
 
-    [:octicons-arrow-right-24: Deploy](deploy.md)
-
-
--   :simple-npm:{ .lg .middle } **Using npm packages**
-
-    ---
-
+  <Card
+    title="Using npm packages"
+    icon="npm"
+    href="/npm-packages"
+  >
     Extend Lovable's functionality by integrating npm packages into your projects.
+  </Card>
 
-    [:octicons-arrow-right-24: Using npm packages](npm-packages.md)
-
--   :octicons-stack-24:{ .lg .middle } **Tech stacks**
-
-    ---
-
-    You can select the tech stack Lovable starts from.
-
-    [:octicons-arrow-right-24: Tech stacks](techstacks.md)
-
-</div>
+</CardGroup>

src/features/npm-packages.md → features/npm-packages.mdx

@@ -1,40 +1,42 @@
-# :simple-npm:  Using npm packages
+---
+title: 'Using npm packages'
+description: 'Learn how to leverage npm packages to extend your Lovable applications with advanced features'
+---
 
 While Lovable is powerful on its own, enabling users to build sophisticated web applications, you can leverage npm packages for more advanced and extended features. These packages help you build even more complex and feature-rich applications with ease.
 
-!!! info "What is npm?"
-    npm (Node Package Manager) is a package manager for JavaScript that allows developers to share and reuse code. It hosts thousands of packages, which are pieces of reusable code, that you can easily integrate into your projects to extend functionality.
+<Info>
+  **What is npm?**
+
+  npm (Node Package Manager) is a package manager for JavaScript that allows developers to share and reuse code. It hosts thousands of packages, which are pieces of reusable code, that you can easily integrate into your projects to extend functionality.
 
-    You can access it <a href="https://www.npmjs.com/" target="_blank" rel="noopener noreferrer">at npmjs.com</a>.
-
----
+  You can access it [at npmjs.com](https://www.npmjs.com/).
+</Info>
 
 ## Using npm packages for advanced features
 
 Let's say you'd like to create a tool that enables you to arrange your tasks in different Kanban boards, similar to many popular project management tools. You can prompt Lovable to build this tool from scratch, but it might be slower and more challenging to achieve the desired functionality.
 
-Instead, you can use npm packages to simplify and speed up the process. For example, the <a href="https://www.npmjs.com/package/@hello-pangea/dnd" target="_blank" rel="noopener noreferrer">hello-pangea/dnd</a> package provides robust drag-and-drop functionality. By using this package, you can easily create a Kanban board where users can add new cards, move them within columns, and reorder them.
+Instead, you can use npm packages to simplify and speed up the process. For example, the [@hello-pangea/dnd](https://www.npmjs.com/package/@hello-pangea/dnd) package provides robust drag-and-drop functionality. By using this package, you can easily create a Kanban board where users can add new cards, move them within columns, and reorder them.
 
-!!! example "Integrating drag-and-drop npm package"
-    To incorporate the hello-pangea/dnd package into your Lovable project, you can use the following prompt:
-
-    ```
-    Use the hello-pangea/dnd npm package to add drag-and-drop functionality to my Kanban board app. 
-    Ensure users can add new cards, move them within columns, and reorder them.
-
-    ```
+<CodeGroup>
+  ```bash Example prompt
+  Use the hello-pangea/dnd npm package to add drag-and-drop functionality to my Kanban board app. 
+  Ensure users can add new cards, move them within columns, and reorder them.
+  ```
+</CodeGroup>
 
 This prompt directs Lovable to integrate the package into your project, making it easier to achieve the desired functionality. Depending on other requirements, your result might look somewhat like this.
 
-![Lovable implemented drag-and-drop Kanban functionality](/assets/npm-example-using-pangea-dnd.png)
-
----
+<Frame>
+  <img src="/assets/npm-example-using-pangea-dnd.png" alt="Lovable implemented drag-and-drop Kanban functionality" />
+</Frame>
 
 ## Quality and responsibility
 
-It’s important to note that while npm packages can significantly enhance your projects, Lovable cannot guarantee the quality or reliability of these third-party packages. 
+It's important to note that while npm packages can significantly enhance your projects, Lovable cannot guarantee the quality or reliability of these third-party packages. 
 
-The functionality and performance of npm packages are the responsibility of the end user, and it’s essential to thoroughly test and validate them within your application.
+The functionality and performance of npm packages are the responsibility of the end user, and it's essential to thoroughly test and validate them within your application.
 
 ### Increasing your chances of success
 
@@ -44,4 +46,4 @@ Here are a few strategies to help you evaluate the legitimacy and quality of npm
 
 - **Maintenance status and latest updates** - Look at the package's repository to see if it is actively maintained. Frequent commits, recent updates, and responsiveness to issues are good indicators of an actively maintained package. Ensure the package has recent updates. A package that is regularly updated is more likely to be compatible with the latest versions of dependencies and security practices.
 
-- **Reviews and community feedback** - A lot of npm packages are hosted on GitHub or similar code repositories. Read through reviews, discussions, and feedback from other developers on those locations, too. Additionally, specific developer forums can provide insights into the package's reliability and any potential issues.
+- **Reviews and community feedback** - A lot of npm packages are hosted on GitHub or similar code repositories. Read through reviews, discussions, and feedback from other developers on those locations, too. Additionally, specific developer forums can provide insights into the package's reliability and any potential issues.