diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml deleted file mode 100644 index 98df2e4..0000000 --- a/.github/workflows/docs.yml +++ /dev/null @@ -1,44 +0,0 @@ -name: Docs - -on: - push: - branches: [main] - paths: - - '**' - - '.github/workflows/docs.yml' - pull_request: - branches: ["*"] - paths: - - '**' - - '.github/workflows/docs.yml' - workflow_dispatch: # Add this line to enable manual triggering - -jobs: - build: - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v3 - - run: pipx install poetry - - uses: actions/setup-python@v4 - with: - python-version: "3.12" - cache: "poetry" - cache-dependency-path: poetry.lock - - name: Install deps - run: make install - - name: Build - run: make build - - # We deploy from GitHub Actions instead of via Netlify builders, - # because Netlify builders don't support Python 3.8+ - - name: Deploy to Netlify - if: github.ref == 'refs/heads/main' - uses: jsmrcaga/action-netlify-deploy@v2.1.0 - with: - NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_TOKEN }} - NETLIFY_SITE_ID: ddab54c7-7320-45c9-9103-8509b232bfae - NETLIFY_DEPLOY_MESSAGE: "Deployed from GitHub Action: ${{ github.event.head_commit.message }}" - NETLIFY_DEPLOY_TO_PROD: true - build_directory: site - install_command: "echo Skipping installing the dependencies" - build_command: "echo Skipping building the web files" diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 100644 index 7ee4a9d..0000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1,32 +0,0 @@ -# Contributing to GPT Engineer Docs - -Thank you for considering contributing to the GPT Engineer documentation! We appreciate your effort in improving the docs for everyone. Here’s a quick guide to help you get started. - -## How to contribute - -### 1. Find an area to improve -- Visit our docs at [https://docs.gptengineer.app/](https://docs.gptengineer.app/). -- Browse through the pages and if you find something that can be improved — from fixing typos to adding more content — go ahead and contribute. -- We are very interested in tutorials, tips and tricks, and ideas covering the real-world usage of GPT Engineer. - -### 2. Edit the page -- On each page, you will see a **"Edit this page"** button. Click on it and you will be redirected to the respective page in this repository. -- This opens the file directly in GitHub, and you can make the necessary changes. - -#### Video tutorial - -We also have a tutorial video to help guide you through the process of editing the docs. You can watch it directly below: - -https://github.com/user-attachments/assets/fa3e2929-d029-4c0e-bd02-224038147dca - -## Guidelines - -- Keep the language simple and clear. We aim for concise and straightforward documentation. -- Make sure your markdown syntax is correct, and use proper formatting for headings, code blocks, links, etc. -- Check that your contribution aligns with the structure and tone of the existing documentation. -- For larger contributions (e.g., new sections or topics), consider opening an issue first to discuss your ideas. - -## Need help? - -If you have any questions or need help, feel free to open an issue or reach out to our [Discord community](https://discord.gg/jstGvUnFnm). - diff --git a/Makefile b/Makefile deleted file mode 100644 index 7f73d26..0000000 --- a/Makefile +++ /dev/null @@ -1,8 +0,0 @@ -build: - poetry run mkdocs build --strict - -dev: - poetry run mkdocs serve -a localhost:8888 - -install: - poetry install --no-root diff --git a/README.md b/README.md index a926168..d9123e5 100644 --- a/README.md +++ b/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 +``` \ No newline at end of file diff --git a/src/assets/connect-to-github.mp4 b/assets/connect-to-github.mp4 similarity index 100% rename from src/assets/connect-to-github.mp4 rename to assets/connect-to-github.mp4 diff --git a/src/assets/css/styles.css b/assets/css/styles.css similarity index 100% rename from src/assets/css/styles.css rename to assets/css/styles.css diff --git a/src/assets/favicon-32x32.png b/assets/favicon-32x32.png similarity index 100% rename from src/assets/favicon-32x32.png rename to assets/favicon-32x32.png diff --git a/src/assets/gpt-engineer-welcome-screen.png b/assets/gpt-engineer-welcome-screen.png similarity index 100% rename from src/assets/gpt-engineer-welcome-screen.png rename to assets/gpt-engineer-welcome-screen.png diff --git a/src/assets/improve.mp4 b/assets/improve.mp4 similarity index 100% rename from src/assets/improve.mp4 rename to assets/improve.mp4 diff --git a/src/assets/lovable-2x-logo.png b/assets/lovable-2x-logo.png similarity index 100% rename from src/assets/lovable-2x-logo.png rename to assets/lovable-2x-logo.png diff --git a/src/assets/npm-example-using-pangea-dnd.png b/assets/npm-example-using-pangea-dnd.png similarity index 100% rename from src/assets/npm-example-using-pangea-dnd.png rename to assets/npm-example-using-pangea-dnd.png diff --git a/src/assets/revert.mp4 b/assets/revert.mp4 similarity index 100% rename from src/assets/revert.mp4 rename to assets/revert.mp4 diff --git a/src/assets/share-icon.png b/assets/share-icon.png similarity index 100% rename from src/assets/share-icon.png rename to assets/share-icon.png diff --git a/src/assets/share-preview.png b/assets/share-preview.png similarity index 100% rename from src/assets/share-preview.png rename to assets/share-preview.png diff --git a/src/assets/supabase.png b/assets/supabase.png similarity index 100% rename from src/assets/supabase.png rename to assets/supabase.png diff --git a/src/assets/sync-commits.mp4 b/assets/sync-commits.mp4 similarity index 100% rename from src/assets/sync-commits.mp4 rename to assets/sync-commits.mp4 diff --git a/src/assets/tech-stacks-updates.mp4 b/assets/tech-stacks-updates.mp4 similarity index 100% rename from src/assets/tech-stacks-updates.mp4 rename to assets/tech-stacks-updates.mp4 diff --git a/src/assets/using-custom-fonts-example.png b/assets/using-custom-fonts-example.png similarity index 100% rename from src/assets/using-custom-fonts-example.png rename to assets/using-custom-fonts-example.png diff --git a/src/assets/using-images-github-commiting.png b/assets/using-images-github-commiting.png similarity index 100% rename from src/assets/using-images-github-commiting.png rename to assets/using-images-github-commiting.png diff --git a/src/assets/using-images-github-selecting.png b/assets/using-images-github-selecting.png similarity index 100% rename from src/assets/using-images-github-selecting.png rename to assets/using-images-github-selecting.png diff --git a/src/assets/using-images-github-upload.png b/assets/using-images-github-upload.png similarity index 100% rename from src/assets/using-images-github-upload.png rename to assets/using-images-github-upload.png diff --git a/src/assets/using-videos-github-commiting.png b/assets/using-videos-github-commiting.png similarity index 100% rename from src/assets/using-videos-github-commiting.png rename to assets/using-videos-github-commiting.png diff --git a/src/assets/using-videos-github-selecting.png b/assets/using-videos-github-selecting.png similarity index 100% rename from src/assets/using-videos-github-selecting.png rename to assets/using-videos-github-selecting.png diff --git a/src/assets/videos/video-publish-republish.mp4 b/assets/videos/video-publish-republish.mp4 similarity index 100% rename from src/assets/videos/video-publish-republish.mp4 rename to assets/videos/video-publish-republish.mp4 diff --git a/favicon-32x32.png b/favicon-32x32.png new file mode 100644 index 0000000..b6e19d6 Binary files /dev/null and b/favicon-32x32.png differ diff --git a/favicon.svg b/favicon.svg new file mode 100644 index 0000000..7d9228f --- /dev/null +++ b/favicon.svg @@ -0,0 +1,66 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/features/deploy.md b/features/deploy.mdx similarity index 54% rename from src/features/deploy.md rename to features/deploy.mdx index f55d37f..85e9432 100644 --- a/src/features/deploy.md +++ b/features/deploy.mdx @@ -1,42 +1,60 @@ -# :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. +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. ---- + + + + Your published app will be accessible to anyone with the link. Make sure you're ready to share before publishing! + + +*** ## 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. -
- Share icon in Lovable -
+ + + Share icon in Lovable + 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**. -
- -
+ + + 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. ---- + + The publishing process typically takes less than a minute. You'll receive a notification once it's complete. + + +*** ## 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. + + **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. + 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. -
- Sharing your work-in-progress -
-

+ + Sharing your work-in-progress + \ No newline at end of file diff --git a/src/features/index.md b/features/introduction.mdx similarity index 51% rename from src/features/index.md rename to features/introduction.mdx index 6c016bb..3971eee 100644 --- a/src/features/index.md +++ b/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. -
- -- :octicons-globe-24:{ .lg .middle } **Deploy and share** - - --- - + + Learn how to publish and share your Lovable projects quickly and efficiently with the public. + - [:octicons-arrow-right-24: Deploy](deploy.md) - - -- :simple-npm:{ .lg .middle } **Using npm packages** - - --- - + Extend Lovable's functionality by integrating npm packages into your projects. + - [: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) - -
+ \ No newline at end of file diff --git a/src/features/npm-packages.md b/features/npm-packages.mdx similarity index 58% rename from src/features/npm-packages.md rename to features/npm-packages.mdx index 1667c2b..98dce53 100644 --- a/src/features/npm-packages.md +++ b/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. + + **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 at npmjs.com. - ---- + You can access it [at npmjs.com](https://www.npmjs.com/). + ## 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 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. +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. - - ``` + + ```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. + ``` + 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) - ---- + + Lovable implemented drag-and-drop Kanban functionality + ## 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. \ No newline at end of file diff --git a/integrations/git-integration.mdx b/integrations/git-integration.mdx new file mode 100644 index 0000000..c8386ed --- /dev/null +++ b/integrations/git-integration.mdx @@ -0,0 +1,47 @@ +--- +title: 'GitHub Integration' +description: 'Learn how to connect and sync your projects with GitHub repositories' +icon: 'github' +--- + +To make it easier for developers to work together with the AI on projects, Lovable backs all projects with a git repository and lets you push commits directly to the repository. + +In order to push commits to GitHub, your project and Lovable will automatically pull them in and update the project. This allows you to make changes yourself, without asking the AI. + +## Connecting a project to your GitHub account + +Before pushing your first commit, you will need to connect your GitHub account to the project. You can do this by navigating to **GitHub → Connect to GitHub**. You will then be redirected to GitHub to authorize the connection. + +You can choose to either grant access to: +1. All repositories +2. Specific repositories + +Both options will let Lovable create repositories in your GitHub account or organization. + + + You can only connect one GitHub login to your Lovable account, but you can create repositories in any of the organizations you choose to install the Lovable app in. + + + + + + + + You will need admin access if you are trying to create a repository in an organization. + + +## Making changes to a project through commits + +Once you have connected your GitHub account to your project, you can view the source code by navigating to **GitHub → View on GitHub**. + +Any change you make and push to the repository will be automatically reflected in Lovable. + +You can commit changes directly in GitHub Codespaces or clone the repo to use your preferred IDE. + + + + \ No newline at end of file diff --git a/integrations/introduction.mdx b/integrations/introduction.mdx new file mode 100644 index 0000000..96fcf68 --- /dev/null +++ b/integrations/introduction.mdx @@ -0,0 +1,27 @@ +--- +title: 'Integrations' +description: 'Extend Lovable functionality with official integrations' +--- +Lovable supports several integrations enabling you to extend its functionality. + +## Overview + +Explore the sections below to get started quickly and learn more about GitHub and Supabase integrations currently offered by Lovable. + + + + Understand how to integrate Lovable with GitHub for seamless version control and collaboration. + + + + Add support for authentication and persistent data storage with Supabase + + \ No newline at end of file diff --git a/src/integrations/supabase.md b/integrations/supabase.mdx similarity index 81% rename from src/integrations/supabase.md rename to integrations/supabase.mdx index 6a624fc..87af74b 100644 --- a/src/integrations/supabase.md +++ b/integrations/supabase.mdx @@ -1,13 +1,20 @@ -# :simple-supabase:{ .supabase} Supabase Integration +--- +title: 'Supabase Integration' +description: 'Learn how to integrate Supabase with your Lovable application' +icon: 'database' +--- -!!! warning "Supabase integration is in beta" - Contact us if you run into any issues. Known issues: Requests to Supabase sporadically result in 502 – we have contacted Supabase about it. + + Supabase integration is in beta. Contact us if you run into any issues. Known issues: Requests to Supabase sporadically result in 502 – we have contacted Supabase about it. + ## Overview [Supabase](https://supabase.com/) is an open-source alternative to Firebase, offering real-time databases, authentication services, and file storage. It is built atop [PostgreSQL](https://www.postgresql.org/), providing robust SQL querying capabilities and seamless integration with existing tools and frameworks. Supabase also features an intuitive web interface for effortless management of users and data. -![Supabase](../assets/supabase.png) + + Supabase + Discover more about Supabase [here](https://supabase.com/docs). @@ -85,16 +92,14 @@ Lovable will write and deploy Edge Functions to your Supabase project when imple When troublehsooting, you can visit the the logs for your Edge Function in Supabase -> Functions -> Logs. -## Best Practices - -!!! warning "Enable RLS policies before going to production" - Important Note: Before you deploy your app to production or use any real data, you will need to review and set up the appropriate RLS policies. Lovable can help with that. - -## Onboarding video - -Here is an onboarding video that walks you through the process of using Lovable together with Supabase to build a full stack app: - -
- -
- + + Important Note: Before you deploy your app to production or use any real data, you will need to review and set up the appropriate RLS policies. Lovable can help with that. + + +