diff --git a/fern/products/docs/pages/component-library/custom-components/custom-css-js.mdx b/fern/products/docs/pages/component-library/custom-components/custom-css-js.mdx index dacb29adb..ae65bfe7b 100644 --- a/fern/products/docs/pages/component-library/custom-components/custom-css-js.mdx +++ b/fern/products/docs/pages/component-library/custom-components/custom-css-js.mdx @@ -9,6 +9,8 @@ Custom CSS & JS are available on the Basic plan. Adding Custom Components is available on the Pro plan. +This page covers how to customize your docs with CSS, JavaScript, and custom components. However, you can [customize many things directly in your `docs.yml` file](/docs/configuration/what-is-docs-yml), including colors, typography, navbar links, layout, analytics, and metadata. Try these built-in options first before adding custom code. + ## Custom CSS You can add custom CSS to your docs to further customize the look and feel. The defined class names are applied across all MDX files. @@ -194,6 +196,12 @@ js: ``` +### Common use cases + +- Integrate with [third-party platforms](/docs/integrations/overview) that Fern doesn't natively support +- Implement custom search (also requires [your Algolia credentials](/docs/customization/search)) +- Insert scripts and widgets + ## Custom components You can use custom CSS and JS to replace Fern's default UI components with your own. The `header` and `footer` 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 0ccbd7594..d0e02d7a0 100644 --- a/fern/products/docs/pages/component-library/default-components/overview.mdx +++ b/fern/products/docs/pages/component-library/default-components/overview.mdx @@ -34,6 +34,8 @@ This will automatically render a card with the title, icon, and content you spec Want to bring your own UI components, such as a custom header and footer? You can on the Enterprise plan. [Contact us](https://buildwithfern.com/contact) to learn more. +For styling and functionality customizations, see [Custom CSS & JavaScript](/docs/customization/custom-css-js). + ## Requests for new components Have a component in mind that you'd like to see in Fern? Let us know by filing a [GitHub Issue](https://github.com/fern-api/fern/issues/new?assignees=&labels=&projects=&template=feature-request.md&title=%5BFeature%5D). diff --git a/fern/products/docs/pages/customization/frontmatter.mdx b/fern/products/docs/pages/customization/frontmatter.mdx index 2bf85cd28..604b36676 100644 --- a/fern/products/docs/pages/customization/frontmatter.mdx +++ b/fern/products/docs/pages/customization/frontmatter.mdx @@ -4,7 +4,7 @@ subtitle: Set titles, add meta descriptions, and more description: Use frontmatter to set a variety of page properties and metadata. --- -You can optionally use frontmatter to set each page's title, full slug override, meta description, a URL to suggest edits to the page, and its OpenGraph image. You can also use frontmatter to disable certain page elements like the table of contents and on-page feedback. +You can optionally use frontmatter to set each page's title, full slug override, meta description, a URL to suggest edits to the page, and its OpenGraph image. You can also use frontmatter to disable certain page elements like the table of contents and on-page feedback. For advanced styling and functionality customizations beyond frontmatter options, see [custom CSS and JavaScript](/docs/customization/custom-css-js). Frontmatter must be added to the top of a `.md` or `.mdx` file, before the rest of the content. Use sets of three dashes to indicate the beginning and end of your frontmatter, as shown: diff --git a/fern/products/docs/pages/customization/search.mdx b/fern/products/docs/pages/customization/search.mdx index dbf424bc7..7f4ef3cfd 100644 --- a/fern/products/docs/pages/customization/search.mdx +++ b/fern/products/docs/pages/customization/search.mdx @@ -42,4 +42,4 @@ Contact the Fern team to get your specific application ID and index name. Creden ## Using an alternative search -You can override Fern's search with your own solution. To learn more, see [Custom JavaScript](/learn/docs/building-and-customizing-your-docs/custom-css-global-js#custom-javascript). \ No newline at end of file +You can override Fern's search with your own solution using [custom JavaScript](/learn/docs/building-and-customizing-your-docs/custom-css-global-js#custom-javascript) and your Algolia credentials. \ No newline at end of file diff --git a/fern/products/docs/pages/customization/what-is-docs-yml.mdx b/fern/products/docs/pages/customization/what-is-docs-yml.mdx index f5c87aeee..f8a486c95 100644 --- a/fern/products/docs/pages/customization/what-is-docs-yml.mdx +++ b/fern/products/docs/pages/customization/what-is-docs-yml.mdx @@ -4,6 +4,8 @@ subtitle: "Customize your documentation using the docs.yml file" description: "Learn how to configure your Fern documentation site with the docs.yml file. Customize colors, typography, layout, analytics and more." --- +The `docs.yml` file is your primary tool for customizing your documentation site, including colors, typography, layout, analytics, and more. Start here for most customization needs before considering [custom CSS and JavaScript](/docs/customization/custom-css-js) for advanced use cases. + ### YAML Schema Validation To enable intelligent YAML validation and autocompletion in your editor, add this line at the top of your `docs.yml` file: diff --git a/fern/products/docs/pages/integrations/overview.mdx b/fern/products/docs/pages/integrations/overview.mdx index 1a0d30f3c..78652f1e8 100644 --- a/fern/products/docs/pages/integrations/overview.mdx +++ b/fern/products/docs/pages/integrations/overview.mdx @@ -94,3 +94,7 @@ are available during the workflow run. The Postman integration is not configured in `docs.yml`. Check out this [page](/learn/docs/integrations/postman) to learn more. + +## Connect other integrations + +If you want to integrate with a third-party analytics or support platforms that Fern doesn't directly support, you can do so [using custom JS](/docs/customization/custom-css-js#custom-javascript). diff --git a/fern/products/docs/pages/navigation/announcement-banner.mdx b/fern/products/docs/pages/navigation/announcement-banner.mdx index e16461001..c3b76447d 100644 --- a/fern/products/docs/pages/navigation/announcement-banner.mdx +++ b/fern/products/docs/pages/navigation/announcement-banner.mdx @@ -10,4 +10,4 @@ announcement: message: "🚀 New feature: Announcements are available! (Learn more) 🚀" ``` -Markdown and HTML is supported in the announcement message. You can include links, images, and other formatting. [Custom CSS](/learn/docs/building-your-docs/custom-css-global-js#custom-css) can be used to customize the style of the announcement. +Markdown and HTML is supported in the announcement message. You can include links, images, and other formatting. [Custom CSS](/docs/customization/custom-css-js#custom-css) can be used to customize the style of the announcement.