Skip to content

Commit

Permalink
Documentation edits made through Mintlify web editor
Browse files Browse the repository at this point in the history
  • Loading branch information
mintlify[bot] authored Nov 26, 2024
1 parent d8103b9 commit 569c671
Show file tree
Hide file tree
Showing 57 changed files with 768 additions and 3,070 deletions.
25 changes: 13 additions & 12 deletions advanced/custom/css.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ description: 'Fully customize your documentation with custom CSS'
Custom CSS is available as an add-on to the [pro plan](https://mintlify.com/pricing).
</Check>

Add any number of CSS files to your repository and the defined class names will be applied and available across all of your MDX files.
Add CSS files to your repository to apply custom styling across your MDX files.

## Adding style.css
## Example Usage

For example, you can add the following `style.css` file to customize the styling of the navbar and footer.
Add a `style.css` file to customize UI elements:

```css
#navbar {
Expand All @@ -24,18 +24,19 @@ footer {
}
```

## Using Identifiers
## Common Identifiers

Mintlify has a set of common identifiers to help you tag important elements of the UI. Some, but not all are listed in the following:

`#topbar-cta-button` `#navbar` `#sidebar` `#content-area` `#table-of-contents`
Key UI elements you can style:
- `#topbar-cta-button`
- `#navbar`
- `#sidebar`
- `#content-area`
- `#table-of-contents`

<Tip>
Use inspect element to find references to elements you're looking to
customize.
Use inspect element to find additional element references.
</Tip>

<Warning>
References and the styling of common elements are subject to change as the
platform evolves. Please use custom styling with caution.
</Warning>
UI elements and styling may change as the platform evolves. Use custom styling with caution.
</Warning>
8 changes: 4 additions & 4 deletions advanced/custom/js.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ description: 'Add JavaScript functionality globally'
Custom JS is available as an add-on to the [pro plan](https://mintlify.com/pricing).
</Check>

Custom JS allows you to add custom executable code globally. It is the equivalent of adding a `<script>` tag with JS code into every page.
Custom JS allows you to add executable code that runs on every page of your documentation, similar to adding a global `<script>` tag.

## Adding Custom JavaScript
## Implementation

Any `.js` file inside the content directory of your docs will be included in every documentation page. For example, you can add the following `ga.js` file to enable [Google Analytics](https://marketingplatform.google.com/about/analytics) across the entire documentation.
Place any `.js` file in your content directory to include it globally. Example `ga.js` for Google Analytics:

```js
window.dataLayer = window.dataLayer || [];
Expand All @@ -25,4 +25,4 @@ gtag('config', 'TAG_ID');

<Warning>
Please use with caution to not introduce security vulnerabilities.
</Warning>
</Warning>
57 changes: 14 additions & 43 deletions advanced/subpath/cloudflare.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,46 +7,20 @@ import SubpathGatingSnippet from "/snippets/custom-subpath-gating.mdx";

<SubpathGatingSnippet platform="Cloudflare" />

## Create Cloudflare Worker
## Quick Setup Guide

Navigate to the `Workers & Pages > Create application > Create worker`. You
should be able to presented with the following screen where you can create a new
Cloudlfare worker.
1. Create a new Cloudflare Worker at `Workers & Pages > Create application > Create worker`

<Frame>
<img alt="Create a Cloudflare worker" src="/images/cloudflare/worker.png" />
</Frame>
2. Configure custom domain:
- Go to `Settings > Triggers`
- Click `Add Custom Domain`
- Add your domain (with and without `www.`)

### Add custom domain

Once the worker is created, click `Configure worker`. Navigate to the worker
`Settings > Triggers`. Click on `Add Custom Domain` to add your desired domain
into the list - we recommend you add both the version with and without `www.`
prepended to the domain.

<Frame>
<img
alt="Cloudflare worker custom domain"
src="/images/cloudflare/custom-domain.png"
/>
</Frame>

If you have trouble setting up a custom subdirectory,
[contact our support team](mailto:[email protected]) and we'll walk you through
upgrading your hosting with us.

### Edit Worker Script

Click on `Edit Code` and add the following script into the worker's code.

<Frame>
<img alt="Cloudflare edit code" src="/images/cloudflare/edit-code.png" />
</Frame>

<Tip>
Edit `DOCS_URL` by replacing `[SUBDOMAIN]` with your unique subdomain and
`CUSTOM_URL` with your website's base URL.
</Tip>
3. Add the worker script:
- Click `Edit Code`
- Copy the script below
- Replace `[SUBDOMAIN]` and `[YOUR_DOMAIN]` with your values
- Click `Deploy`

```javascript
addEventListener("fetch", (event) => {
Expand All @@ -56,29 +30,26 @@ addEventListener("fetch", (event) => {
async function handleRequest(request) {
try {
const urlObject = new URL(request.url);
// If the request is to the docs subdirectory
if (/^\/docs/.test(urlObject.pathname)) {
// Then Proxy to Mintlify
const DOCS_URL = "[SUBDOMAIN].mintlify.dev";
const CUSTOM_URL = "[YOUR_DOMAIN]";

let url = new URL(request.url);
url.hostname = DOCS_URL;

let proxyRequest = new Request(url, request);

proxyRequest.headers.set("Host", DOCS_URL);
proxyRequest.headers.set("X-Forwarded-Host", CUSTOM_URL);
proxyRequest.headers.set("X-Forwarded-Proto", "https");

return await fetch(proxyRequest);
}
} catch (error) {
// if no action found, play the regular request
return await fetch(request);
}
}
```

Click on `Deploy` and wait for the changes to propagate (it can take up to a few
hours).
<Note>
Changes may take a few hours to propagate. For setup assistance, [contact our support team](mailto:[email protected]).
</Note>
151 changes: 29 additions & 122 deletions advanced/subpath/route53-cloudfront.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,139 +7,46 @@ import SubpathGatingSnippet from "/snippets/custom-subpath-gating.mdx";

<SubpathGatingSnippet platform="AWS Services" />

## Create Cloudfront Distribution
## Setup Steps

Navigate to [Cloudfront](https://aws.amazon.com/cloudfront) inside the AWS console and click on `Create distribution`
### 1. Create Cloudfront Distribution
1. Go to [Cloudfront](https://aws.amazon.com/cloudfront) and click `Create distribution`
2. Set Origin domain to `[SUBDOMAIN].mintlify.dev`
3. Select `Caching Optimized` for Cache key and origin requests
4. Enable security protections in WAF
5. Create the distribution

<Frame>
![Cloudfront Create Distribution](/images/cloudfront/create-distribution.png)
</Frame>

For the Origin domain, input `[SUBDOMAIN].mintlify.dev` where `[SUBDOMAIN]` is the project's unique subdomain. Click on `Use: [SUBDOMAIN].mintlify.dev`

<Frame>![Cloudfront Origin name](/images/cloudfront/origin-name.png)</Frame>

For **Cache key and origin requests**, select `Caching Optimized`.

<Frame>
![Cloudfront Caching policy](/images/cloudfront/caching-policy.png)
</Frame>

And for **Web Application Firewall (WAF)**, enable security protections

<Frame>
![Cloudfront Caching
policy](/images/cloudfront/enable-security-protections.png)
</Frame>

The remaining settings should be default. Click `Create distribution`.

## Add Default Origin

After creating the distribution, navigate to the `Origins` tab.

<Frame>![Cloudfront Origins](/images/cloudfront/origins.png)</Frame>

We want to find a staging URL that mirrors where the main domain (example.com). This is highly variant depending on how your landing page is hosted.

<Info>
For instance, if your landing page is hosted on Webflow, you can use the
Webflow's staging URL. It would look like `.webflow.io`.

If you use Vercel, you use the `.vercel.app` domain available for every project.

</Info>
<Note>

If you're unsure on how to get a staging URL for your landing page, [contact
support](mailto:[email protected]) and we'd be happy to help

</Note>

Once you have the staging URL, ours for instance is [mintlify-landing-page.vercel.app](https://mintlify-landing-page.vercel.app), create a new Origin and add it as the **Origin domain**.

<Frame>
![Cloudfront Default Origins](/images/cloudfront/default-origin.png)
</Frame>

By this point, you should have two Origins - one with `[SUBDOMAIN].mintlify.app` and another with with staging URL.

## Set Behaviors

Behaviors in Cloudfront enables control over the subpath logic. At a high level, we're looking to create the following logic.

- **If a user lands on /docs**, go to `[SUBDOMAIN].mintlify.dev`
- **If a user lands on any other page**, go the current landing page

We're going to create three behaviors by clicking on the `Create behavior` button.

### `/docs/*`

The first behavior should have a **Path pattern** of `/docs/*` with **Origin and origin groups** pointing to the `.mintlify.dev` URL (in our case `acme.mintlify.dev`)

<Frame>![Cloudfront Behavior 1](/images/cloudfront/behavior-1.png)</Frame>

For **Cache policy**, select `CachingOptimized` and create behavior.

### `/docs`

The second behavior should be the same as the first one but with a **Path pattern** of `/docs` and **Origin and origin groups** pointing to the same `.mintlify.dev` URL.

<Frame>![Cloudfront Behavior 2](/images/cloudfront/behavior-2.png)</Frame>

### `Default (*)`

Lastly, we're going to edit the `Default (*)` behavior.

<Frame>
![Cloudfront Behavior Default 1](/images/cloudfront/default-behavior-1.png)
</Frame>

We're going to change the default behavior's **Origin and origin groups** to the staging URL (in our case `mintlify-landing-page.vercel.app`).

<Frame>
![Cloudfront Behavior Default 2](/images/cloudfront/default-behavior-2.png)
</Frame>

Click on `Save changes`.

## Preview Distribution

You can now test if your distribution is set up properly by going to the `General` tab and visiting the **Distribution domain name** URL.

<Frame>
![Cloudfront Preview
distribution](/images/cloudfront/preview-distribution.png)
</Frame>

All pages should be directing to your main landing page, but if you append `/docs` to the URL, you should see it going to the Mintlify documentation instance.

## Connecting it with Route53

Now, we're going to bring the functionality of the Cloudfront distribution into your primary domain.
### 2. Configure Origins
1. Navigate to `Origins` tab
2. Add a second origin with your landing page staging URL (e.g., `.webflow.io` or `.vercel.app` domain)

<Note>
For this section, you can also refer to AWS's official guide on [Configuring
Amazon Route 53 to route traffic to a CloudFront
distribution](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/routing-to-cloudfront-distribution.html#routing-to-cloudfront-distribution-config)
Need help finding your staging URL? [Contact support](mailto:[email protected])
</Note>

Navigate to [Route53](https://aws.amazon.com/route53) inside the AWS console, and click into the `Hosted zone` for your primary domain. Click on `Create record`
### 3. Set Behaviors
Create three behaviors to control routing:

<Frame>
![Route 53 create record](/images/cloudfront/route53-create-record.png)
</Frame>
1. **`/docs/*` behavior**
- Origin: `[SUBDOMAIN].mintlify.dev`
- Cache policy: CachingOptimized

Toggle `Alias` and then **Route traffic to** the `Alias to CloudFront distribution` option.
2. **`/docs` behavior**
- Same settings as `/docs/*`

<Frame>
![Route 53 create record alias](/images/cloudfront/create-record-alias.png)
</Frame>
3. **`Default (*)` behavior**
- Origin: Your staging URL
- This handles all other routes

Click `Create records`.
### 4. Connect with Route53
1. Go to Route53 and select your domain's Hosted zone
2. Create a new record
3. Enable `Alias` and select `Alias to CloudFront distribution`
4. Remove any existing A record if present

<Note>
You may need to remove the existing A record if one currently exists.
For detailed Route53 setup, see AWS's [official guide](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/routing-to-cloudfront-distribution.html#routing-to-cloudfront-distribution-config)
</Note>

And voila! You should be able to have your documentation served at `/docs` for your primary domain.
## Verification
Test your setup by visiting the Distribution domain name URL in the `General` tab. The `/docs` path should show your Mintlify documentation, while other paths should show your main landing page.
11 changes: 3 additions & 8 deletions advanced/subpath/vercel.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,7 @@ import SubpathGatingSnippet from "/snippets/custom-subpath-gating.mdx";

<SubpathGatingSnippet platform="Vercel" />

## vercel.json Configuration

To host your documentation at a custom subpath using Vercel, you need to add the
following configuration to your `vercel.json` file.
Add the following configuration to your `vercel.json` file to host documentation at a custom subpath:

```json
{
Expand All @@ -28,7 +25,5 @@ following configuration to your `vercel.json` file.
```

<Note>
For more information, you can also refer to Vercel's offical guide on check
out the [Project Configuration:
Rewrites](https://vercel.com/docs/projects/project-configuration#rewrites)
</Note>
See [Vercel's Rewrites documentation](https://vercel.com/docs/projects/project-configuration#rewrites) for more details.
</Note>
Loading

0 comments on commit 569c671

Please sign in to comment.