Skip to content

docs: Clean up MDX formatting and fix table layout in embed documentation #1046

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

docs: Clean up MDX formatting and fix table layout in embed documentation #1046

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 19 additions & 23 deletions fern/products/docs/pages/component-library/default-components/embed.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
---
title: "Embedded Assets and Files"
description: "Embed local assets like PDFs, videos, and more in your documentation"
title: Embedded Assets and Files
description: Embed local assets like PDFs, videos, and more in your documentation
---

Fern enables using the native HTML5 tags to embed local assets like PDFs, videos, and more in your documentation. Supported tags include:

- `<embed src="..." />` - [Embed External Content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed)

- `<source src="..." />` - [Media or Image Source](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source)

Fern also implements a custom component for embedding downloadable assets:
Expand All @@ -22,7 +23,7 @@ Fern also implements a custom component for embedding downloadable assets:
MIME type of the asset (e.g. 'video/mp4', 'application/pdf')
</ParamField>

```jsx
```
<embed src="./path/to/asset.pdf" type="application/pdf" />
```

Expand All @@ -34,47 +35,41 @@ Fern also implements a custom component for embedding downloadable assets:
<Tab title="Example using `<embed>`">
<embed src="./growing-fern.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />

```jsx
```
<embed src="./growing-fern.mp4" type="video/mp4" style={{ aspectRatio: '16 / 9', width: '100%' }} />
```

<Note>
Videos with audio will automatically play when the page loads. If you want to prevent this behavior, consider using the [`<video>` component](/learn/docs/content/write-markdown#embedding-videos) instead, which provides more control over playback.
Videos with audio will automatically play when the page loads. If you want to prevent this behavior, consider using the [`<video>` component](/learn/docs/content/write-markdown#embedding-videos) instead, which provides more control over playback.
</Note>

</Tab>

<Tab title="Example using `<video>`">
<video style={{ aspectRatio: '16 / 9', width: '100%' }} controls>
<source src="./growing-fern.mp4" type="video/mp4" />
</video>
<source src="./growing-fern.mp4" type="video/mp4" />
</video>

```jsx
<video style={{ aspectRatio: '16 / 9', width: '100%' }} controls>
<source src="./growing-fern.mp4" type="video/mp4" />
</video>
```
```jsx
<video style={{ aspectRatio: '16 / 9', width: '100%' }} controls>
<source src="./growing-fern.mp4" type="video/mp4" />
</video>
```

</Tab>
</Tabs>


### PDF Document

<embed src="./all-about-ferns.pdf" type="application/pdf" width="100%" height="500px" />

```jsx
```
<embed src="./all-about-ferns.pdf" type="application/pdf" width="100%" height="500px" />
```

## Common MIME Types

| File Type | MIME Type |
| ---------- | ----------------- |
| PDF | `application/pdf` |
| MP4 Video | `video/mp4` |
| WebM Video | `video/webm` |
| SVG Image | `image/svg+xml` |
| PNG Image | `image/png` |
| JPEG Image | `image/jpeg` |
| File Type | MIME Type | | ---------- | ----------------- | | PDF | `application/pdf` | | MP4 Video | `video/mp4` | | WebM Video | `video/webm` | | SVG Image | `image/svg+xml` | | PNG Image | `image/png` | | JPEG Image | `image/jpeg` |

<Note>
The supported file types and behavior may vary depending on the browser and the type of content being embedded. For
Expand All @@ -98,13 +93,14 @@ Enable users to download assets from within your documentation, instead of linki
</ParamField>

<br />

<br />

<Download src="./all-about-ferns.pdf">
<Button intent="primary">Download PDF</Button>
</Download>

```jsx
```
<Download src="./all-about-ferns.pdf">
<Button intent="primary">Download PDF</Button>
</Download>
Expand Down
2 changes: 1 addition & 1 deletion fern/products/docs/pages/getting-started/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -155,4 +155,4 @@ subtitle: A website builder for beautiful agent and developer-friendly docs.
</div>
</a>
</CardGroup>
</div>
</div>
5 changes: 2 additions & 3 deletions fern/products/home/pages/welcome.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
---
title: Build with Fern
description: Explore our guides for how to generate SDKs and Docs with Fern.
slug: /
description: Explore our guides for how to generate SDKs and Docs with Fern.
hide-toc: true
layout: custom
---


import { FernFooter } from "../../../components/FernFooter";

<div className="lp-page-container">
Expand Down Expand Up @@ -389,4 +388,4 @@ import { FernFooter } from "../../../components/FernFooter";
</div>

</div>
</div>
</div>