diff --git a/fern/docs.yml b/fern/docs.yml index c3c8cb78a..a8e5d62c5 100644 --- a/fern/docs.yml +++ b/fern/docs.yml @@ -303,6 +303,8 @@ redirects: destination: /learn/docs/writing-content/components/accordions - source: /learn/docs/writing-content/components/card-groups destination: /learn/docs/writing-content/components/cards + - source: /learn/docs/writing-content/components/embed + destination: /learn/docs/writing-content/components/download - source: /learn/docs/building-and-customizing-your-docs/navigation destination: /learn/docs/configuration/navigation - source: /learn/docs/navigation/overview diff --git a/fern/products/docs/docs.yml b/fern/products/docs/docs.yml index b0b49246b..cea1de77f 100644 --- a/fern/products/docs/docs.yml +++ b/fern/products/docs/docs.yml @@ -67,9 +67,9 @@ navigation: path: ./pages/component-library/default-components/code-blocks.mdx icon: fa-duotone fa-code slug: code-blocks - - page: Embed - path: ./pages/component-library/default-components/embed.mdx - icon: fa-duotone fa-window-restore + - page: Download + path: ./pages/component-library/default-components/download.mdx + icon: fa-duotone fa-download - page: Endpoint request snippet path: ./pages/component-library/default-components/endpoint-request-snippet.mdx icon: fa-duotone fa-arrow-up diff --git a/fern/products/docs/pages/component-library/default-components/download.mdx b/fern/products/docs/pages/component-library/default-components/download.mdx new file mode 100644 index 000000000..bbd76590b --- /dev/null +++ b/fern/products/docs/pages/component-library/default-components/download.mdx @@ -0,0 +1,38 @@ +--- +title: "Download" +description: "Download assets like PDFs directly from your documentation" +--- + +The `` component lets users download assets like PDFs directly from your documentation. + + +For information on how to embed assets, check out the documentation on [Images](/learn/docs/writing-content/markdown#images), [PDFs](/learn/docs/writing-content/markdown#pdfs), and [Videos](/learn/docs/writing-content/markdown#videos). + + +## Usage + +
+ + + +
+ +```jsx Markdown + + + +``` + +## Properties + + + Path to your local asset (relative to current MDX file). The asset must be located within the `fern` folder. + + + + The text or element to display as the click target for the download. + + + + The filename to use for the downloaded asset. If not provided, the filename will be the same as the asset's name. + diff --git a/fern/products/docs/pages/component-library/default-components/embed.mdx b/fern/products/docs/pages/component-library/default-components/embed.mdx deleted file mode 100644 index 43a0f2c97..000000000 --- a/fern/products/docs/pages/component-library/default-components/embed.mdx +++ /dev/null @@ -1,115 +0,0 @@ ---- -title: "Embedded assets and files" -description: "Embed local assets like PDFs, videos, and more in your documentation" ---- - -Embed local assets like PDFs, videos, and other media directly in your documentation using native HTML5 tags. This allows you to include rich content without relying on external hosting. - - - Fern supports using the `` tag to embed [external content](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/embed) and the `` tag to embed [media or image sources](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source). - - - -## Usage (embed video) - -
- -
- -```jsx Markdown - -``` - -## Variants - -### Video file with video tag - - - Videos with audio will automatically play when the page loads. Using [` - -
- -
- -```jsx Markdown - -``` - -### PDF document - -
- -
- -```jsx Markdown - -``` - -## Downloadable assets - -
-
- - - -
-
- -```jsx Markdown - - - -``` - -## Properties - - - Path to your local asset (relative to current MDX file) - - - - MIME type of the asset (e.g. 'video/mp4', 'application/pdf') - - - - | 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` | - - - The supported file types and behavior may vary depending on the browser and the type of content being embedded. For - video files, consider using MP4 format for maximum compatibility. - - - - -### Downloadable asset properties - -Enable users to download assets from within your documentation, instead of linking to them, by using the `` component. - - - Path to your local asset (relative to current MDX file). The asset must be located within the `fern` folder. - - - - The text or element to display as the click target for the download. - - - - The filename to use for the downloaded asset. If not provided, the filename will be the same as the asset's name. - - -
-
- - diff --git a/fern/products/docs/pages/component-library/default-components/overview.mdx b/fern/products/docs/pages/component-library/default-components/overview.mdx index b71c659fa..8e04b2f66 100644 --- a/fern/products/docs/pages/component-library/default-components/overview.mdx +++ b/fern/products/docs/pages/component-library/default-components/overview.mdx @@ -63,11 +63,11 @@ Fern includes 20 built-in components for creating interactive documentation. Sel Code examples with syntax highlighting and interactive features - Embedded local assets like PDFs, videos, and other media + Download PDFs and other assets ` HTML tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) to insert the image. +You can use locally stored images or URLs to include images in your Markdown pages. Use either [Markdown syntax](https://www.markdownguide.org/basic-syntax/#images-1) or the [`` HTML tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) to insert the image. Don't use the `` element, as it has inconsistent browser support. You can reference images using paths relative to the page's location (using `./` or `../`) or relative to the `fern` folder root (using `/`). For example, an image at `fern/assets/images/logo.png` can be referenced from any page as `/assets/images/logo.png`. @@ -108,21 +108,26 @@ Common image attributes: For more details about the HTML image element and its attributes, see the [MDN documentation on the img element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img). -## Embedding local assets +## PDFs -You can embed local assets in your Markdown pages using the [`` component](/learn/docs/content/components/embed). This is useful for displaying PDFs, images, videos, OpenAPI files, and other assets into your docs. +Embed PDFs using the `