diff --git a/contact-support.mdx b/contact-support.mdx index 642feb584..76fb12791 100644 --- a/contact-support.mdx +++ b/contact-support.mdx @@ -3,24 +3,26 @@ title: "Contact support" description: "We're here to help you get the most out of Mintlify." --- -## Ask our docs +## Get help -Select Command + I to start a chat with our AI assistant trained on our documentation. + + + Press Command + I to chat with our AI trained on our documentation. + -## Watch video tutorials + + Select **Support** in your [dashboard](https://dashboard.mintlify.com/) sidebar to send us a message. + -Visit our [YouTube](https://www.youtube.com/@GetMintlify/videos) channel for tutorials and guides on using Mintlify. - -## Message support - -Send us a message from your [dashboard](https://dashboard.mintlify.com/) by selecting **Support** in the sidebar. - -![GIF showing how to access support from the dashboard by selecting the Support button, then selecting an option and typing a question in the support modal that pops up.](https://mintlify.s3.us-west-1.amazonaws.com/mintlify/images/support-flow.gif) + + Can't access your dashboard? Email support@mintlify.com + + -We aim to respond to all requests within 24 hours, but delays may occur during busy times. +We aim to respond within 24 hours. -## Email support +## More resources -If you can't access your dashboard, please email us at support@mintlify.com. +- [YouTube tutorials](https://www.youtube.com/@GetMintlify/videos) diff --git a/editor.mdx b/editor.mdx index bae5ff72d..b83b70e19 100644 --- a/editor.mdx +++ b/editor.mdx @@ -112,6 +112,51 @@ Use the sidebar file explorer to browse your documentation files. Click on any f Press Command + P on macOS or Ctrl + P on Windows to search for files by name. +### Manage images and media + +The visual editor includes an Images and Media view for browsing, previewing, and managing your image and video assets. Access it by selecting **Images and Media** from the sidebar. + + + Images and Media view in the visual editor + + Images and Media view in the visual editor + + +#### View modes + +Switch between two view modes to browse your assets: + +- **Tree view**: Navigate assets organized by folder structure. Expand and collapse folders to find specific files. +- **Gallery view**: Browse assets as thumbnails grouped by folder. Scroll horizontally through each folder's assets. + +Use the view toggle button in the toolbar to switch between tree and gallery views. + +#### Preview assets + +Select any image or video to preview it in the main panel. The preview shows: + +- Full-size image or video player +- File metadata including size and dimensions +- File path for easy reference + +#### Configure assets + +Right-click on any file or folder to access configuration options: + +- **File options**: View and edit file name, path, size, type, and dimensions +- **Folder options**: View and edit folder name, path, and file count +- **Copy path**: Copy the file or folder path to your clipboard for use in your documentation + +The configure sheet displays all metadata for the selected asset, making it easy to reference file details when writing documentation. + ### Create new pages Select the **Create a new file** icon in the file explorer sidebar. diff --git a/guides/media.mdx b/guides/media.mdx index 9641c5317..41e2ac2aa 100644 --- a/guides/media.mdx +++ b/guides/media.mdx @@ -23,3 +23,14 @@ Key guidelines: * **Videos** for abstract concepts and long workflows. Use media sparingly and intentionally to avoid unnecessary documentation debt. When done right, it enhances comprehension without adding maintenance burdens or accessibility barriers. + +## Managing media assets + +The visual editor includes an Images and Media view for managing your image and video assets. Access it from the sidebar to: + +- Browse assets in tree or gallery view +- Preview images and videos +- View file metadata (size, dimensions, path) +- Copy file paths for use in your documentation + +See [Visual editor](/editor#manage-images-and-media) for more information on using the Images and Media view. diff --git a/quickstart.mdx b/quickstart.mdx index 6dc61ae8d..a07b51b0b 100644 --- a/quickstart.mdx +++ b/quickstart.mdx @@ -4,15 +4,13 @@ description: "Deploy your documentation site and make your first changes." keywords: ["quickstart","deploy","get started","first steps"] --- -After completing this guide, you will have a live documentation site ready to customize and expand. - - **Prerequisites**: Before you begin, [create an account](https://mintlify.com/start) and complete onboarding. + **Prerequisites**: [Create an account](https://mintlify.com/start) and complete onboarding. -## Getting started +## Your site is live -After you complete the onboarding process, your documentation site automatically deploys to a unique URL with this format: +After onboarding, your documentation site is automatically deployed to: ``` https://.mintlify.app @@ -20,248 +18,57 @@ https://.mintlify.app Find your URL on the Overview page of your [dashboard](https://dashboard.mintlify.com/). - - Mintlify Domain - - Mintlify Domain - - -Your site's URL is available immediately. Use this URL for testing and sharing with your team while you are setting up your docs site. - -### Install the GitHub App - -Mintlify provides a GitHub App that automates deployment when you push changes to your repository. - -Install the GitHub App by following the instructions from the onboarding checklist or your dashboard. - -1. Navigate to **Settings** in your Mintlify dashboard. -2. Select **GitHub App** from the sidebar. -3. Select **Install GitHub App**. This opens a new tab to the GitHub App installation page. -4. Select the organization or user account where you want to install the app. -5. Select the repositories that you want to connect. - - - GitHub App Installation - - GitHub App Installation - - - - Update the GitHub App permissions if you move your documentation to a different repository. - - -### Authorize your GitHub account - -1. Navigate to **Settings** in your Mintlify dashboard. -2. Select **My Profile** from the sidebar. -3. Select **Authorize GitHub account**. This opens a new tab to the GitHub authorization page. - - - An admin for your GitHub organization may need to authorize your account depending on your organization settings. - - -## Editing workflows - -Mintlify offers two workflows for creating and maintaining your documentation: - - - For users who prefer working with existing tools in their local environment. Click to jump to this section. - +## Make your first edit - - For users who prefer a visual interface in their web browser. Click to jump to this section. - +Choose your preferred workflow: -## Code-based workflow + + + 1. Open the [editor](https://dashboard.mintlify.com/editor) in your dashboard + 2. Select `index.mdx` from the file explorer + 3. Update the title field to "Hello World" + 4. Select **Publish** to deploy your changes -The code-based workflow integrates with your existing development environment and Git repositories. This workflow is best for technical teams who want to manage documentation alongside code. + + Type / in the editor to access formatting tools and components. + -### Install the CLI + See the [editor documentation](/editor) for more details. + - - **Prerequisite**: The CLI requires [Node.js](https://nodejs.org/en) v20.17.0 or higher through v24. LTS versions are preferred. - - -To work locally with your documentation, install the Command Line Interface (CLI), called [mint](https://www.npmjs.com/package/mint), by running this command in your terminal: - - - -```bash npm -npm i -g mint -``` - - -```bash pnpm -pnpm add -g mint -``` - - + + + **Prerequisite**: [Node.js](https://nodejs.org/en) v20.17.0 or higher + -### Create a new project + Install the CLI: -Run `mint new` to create a new documentation project. See the [CLI installation guide](/installation#create-a-new-project) for details on the command and flags. + + ```bash npm + npm i -g mint + ``` -### Edit the documentation + ```bash pnpm + pnpm add -g mint + ``` + -After setting up your project, you can start editing your documentation files. For example, update the title of the introduction page: + Edit your documentation: -1. Navigate to your documentation repository. -2. Open `index.mdx` and locate the top of the file: + 1. Run `mint new` to create a new project + 2. Open `index.mdx` and update the title to "Hello World" + 3. Run `mint dev` to preview at `localhost:3000` + 4. Push changes to your repository to deploy -```mdx index.mdx ---- -title: "Introduction" -description: "This is the introduction to the documentation" ---- -``` - -3. Update the `title` field to `"Hello World"`. - -```mdx index.mdx {2} ---- -title: "Hello World" -description: "This is the introduction to the documentation" ---- -``` + See the [CLI installation guide](/installation) for more details. + + -### Preview the changes +## Add a custom domain (optional) -To preview the changes locally, run the following command: - -```bash -mint dev -``` +Navigate to [Domain Setup](https://dashboard.mintlify.com/settings/deployment/custom-domain) in your dashboard and enter your domain (for example, `docs.yourcompany.com`). -Your preview is available at `localhost:3000`. - - - Mintlify Dev - - Mintlify Dev - - -### Push the changes - -When you are ready to publish your changes, push them to your repository. - -Mintlify automatically detects the changes, builds your documentation, and deploys the updates to your site. Monitor the deployment status in your GitHub repository commit history or the [dashboard](https://dashboard.mintlify.com). - -After the deployment completes, your latest update will be available at `.mintlify.app`. - - - Optionally, skip the web editor workflow and jump to adding a custom domain. - - -## Web editor workflow - -The web editor workflow provides a what-you-see-is-what-you-get (WYSIWYG) interface for creating and editing documentation. This workflow is best for people who want to work in their web browser without additional local development tools. - -### Access the web editor - -1. Log in to your [dashboard](https://dashboard.mintlify.com). -2. Select **Editor** on the left sidebar. - - - If you have not installed the GitHub App, you will be prompted to install the app when you open the web editor. - - - - The Mintlify web editor in the visual editor mode - - The Mintlify web editor in the visual editor mode - - -### Edit the documentation - -In the web editor, you can navigate through your documentation files in the sidebar. Let's update the introduction page: - -Find and select `index.mdx` in the file explorer. - -Then, in the editor, update the title field to "Hello World". - - - Editing in Web Editor - - Editing in Web Editor - - - - The editor provides a rich set of formatting tools and components. Type / - - in the editor to open the command menu and access these tools. - - -### Publish your changes - -When you're satisfied with your edits, select the **Publish** button in the top-right corner. Your changes are immediately deployed to your documentation site. - - - Use branches to preview and review changes through pull requests before deploying to your live site. - - -For more details about using the web editor, including using branches and pull requests to collaborate and preview changes, see our [web editor documentation](/editor). - -## Adding a custom domain - -While your `.mintlify.app` subdomain works well for testing and development, most teams prefer using a custom domain for production documentation. - -To add a custom domain, navigate to the [Domain Setup](https://dashboard.mintlify.com/settings/deployment/custom-domain) page in your dashboard. - - - Custom Domain - - Custom Domain - - -Enter your domain (for example, `docs.yourcompany.com`) and follow the provided instructions to configure DNS settings with your domain provider. +Add this DNS record with your domain provider: | Record Type | Name | Value | TTL | @@ -270,45 +77,25 @@ Enter your domain (for example, `docs.yourcompany.com`) and follow the provided
- DNS changes can take up to 48 hours to propagate, though changes often complete much sooner. + DNS changes can take up to 48 hours to propagate. ## Next steps -Congratulations! You have successfully deployed your documentation site with Mintlify. Here are suggested next steps to enhance your documentation: - - - Configure site-wide styling, navigation, integrations, and more with the `docs.json` file. - - - - Learn how to customize colors, fonts, and the overall appearance of your documentation site. - - - - Structure your documentation with intuitive navigation to help users find what they need. - - - - Enhance your documentation with interactive components like accordions, tabs, and code samples. - - - - Create interactive API references with OpenAPI and AsyncAPI specifications. - + + + Customize styling, navigation, and integrations + -## Troubleshooting + + Update colors, fonts, and appearance + -If you encounter issues during the setup process, check these common troubleshooting solutions: + + Structure your documentation + - - - Make sure you have Node.js v20.17.0 or higher installed and that you run the `mint dev` command from the directory containing your `docs.json` file. - - - Deployment can take up to a few minutes. Check your GitHub Actions (for code-based workflow) or deployment logs in the Mintlify dashboard to ensure there are no build errors. - - - Verify that your DNS records are set up correctly and allow sufficient time for DNS propagation (up to 48 hours). You can use tools like [DNSChecker](https://dnschecker.org) to verify your CNAME record. - - \ No newline at end of file + + Use interactive elements + + \ No newline at end of file