diff --git a/fern/products/docs/pages/customization/global-configuration.mdx b/fern/products/docs/pages/customization/global-configuration.mdx deleted file mode 100644 index 1b73828e3..000000000 --- a/fern/products/docs/pages/customization/global-configuration.mdx +++ /dev/null @@ -1,641 +0,0 @@ ---- -title: "Global Configuration" -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." ---- - -### YAML Schema Validation - -To enable intelligent YAML validation and autocompletion in your editor, add this line at the top of your `docs.yml` file: - -```yaml docs.yml -# yaml-language-server: $schema=https://schema.buildwithfern.dev/docs-yml.json -``` - -This enables real-time schema validation and autocompletion based on our [complete schema](https://github.com/fern-api/fern/blob/09555d587294fd3dc77ceb35f21e8976a5a2b7a2/fern/apis/docs-yml/definition/docs.yml#L110). - -## Core configuration - -Every Fern documentation website requires a `docs.yml` file that contains the core configuration settings. Here are the essential top-level properties you can configure: - -```yaml docs.yml -# yaml-language-server: $schema=https://schema.buildwithfern.dev/docs-yml.json - -title: Stripe API Documentation -favicon: assets/stripe-favicon.ico -default-language: typescript # Default code sample language - -logo: - href: https://stripe.com - dark: assets/stripe-logo-dark.svg - light: assets/stripe-logo-light.svg - -colors: - accent-primary: - light: "#635BFF" # Stripe's primary purple - dark: "#9B90FF" # Lighter purple for dark mode - background: - light: "#FFFFFF" - dark: "#0A2540" - -navbar-links: - - type: filled - text: "Dashboard" - href: "https://dashboard.stripe.com" - - type: minimal - text: "Support" - href: "https://support.stripe.com" -``` - - - A string that is used as the tab bar title. - - - - Learn more about the [`logo` configuration](/learn/docs/getting-started/global-configuration#logo-configuration). - - - - Relative filepath to the favicon. - - - - Configure the `primaryAccent` and `background` colors. Learn more about the [`colors` configuration](/learn/docs/getting-started/global-configuration#colors-configuration). - - - - An array of paths you want to configure to permanently redirect to another path. Learn more about the - [`redirects` configuration](/learn/docs/getting-started/global-configuration#redirects-configuration). - - - - Array of names and urls of links you want to include as a call to action. Learn more about the - [`navbar-links` configuration](/learn/docs/getting-started/global-configuration#navbar-links-configuration). - - - - Set a custom background image to be displayed behind every page. Learn more about the - [`background-image` configuration](/learn/docs/getting-started/global-configuration#background-image-configuration). - - - - Customize the fonts used in your documentation website. Learn more about the [`typography` configuration](/learn/docs/getting-started/global-configuration#typography-configuration). - - - - Customize the layout of your documentation website. Learn more about the - [`layout` configuration](/learn/docs/getting-started/global-configuration#layout-configuration). - - - - Creates a landing page for your documentation website. Learn more about the - [`landing-page` configuration](/learn/docs/getting-started/global-configuration#landing-page-configuration). - - - - Sets the default language displayed by code snippets in the API Reference. - - Options include: `typescript`, `python`, `java`, `go`, `ruby`, `csharp`, `curl` - - - - Configure SEO metadata for your documentation website. Learn more about the - [`metadata` configuration](/learn/docs/getting-started/global-configuration#metadata-configuration). - - -## Instances configuration - -An `instance` is the backend of a distinct docs website. Each instance is published to a unique domain using the `--instance` flag. It is most common to use instances to configure staging and production docs which publish to separate URLs. - -```yaml docs.yml -instances: - - url: plantstore.docs.buildwithfern.com - custom-domain: docs.plantstore.com -``` - - - Configure one or more documentation websites. - - - - The URL where your Fern documentation is deployed. Must contain the suffix `docs.buildwithfern.com`. - - - - The custom domain where your documentation is hosted. Learn more about [setting up a custom domain](/learn/docs/preview-publish/setting-up-your-domain). - - - - If specified, adds an "Edit this page" link to the bottom of each page that links to the given public GitHub repository. Learn more about the [`edit-this-page` configuration](#github-configuration). - - -## Colors configuration - -```yaml docs.yml -colors: - accent-primary: - light: "#418326" # Primary brand color for light mode - dark: "#ADFF8C" # Primary brand color for dark mode - - background: - light: "#ffffff" - dark: "#0d0e11" - - border: - light: "#e5e7eb" - dark: "#1f2937" - - sidebar-background: - light: "#f9fafb" - dark: "#111827" - - header-background: - light: "#ffffff" - dark: "#0d0e11" - - card-background: - light: "#f3f4f6" - dark: "#1f2937" -``` - - - The primary brand color used for interactive elements like links, buttons, and highlighted text. - Configure separate colors for light and dark modes to ensure proper contrast and visibility. - - - - The main background color for all documentation pages. Choose colors that provide good contrast with text - and complement your brand colors. Dark mode colors should reduce eye strain. - - - - Used for dividing lines, borders around elements, and visual separators. Choose subtle colors that create - clear boundaries without being too prominent. - - - - Background color for the navigation sidebar. When specified, includes a 1px border on the right side. - If omitted, the sidebar uses a transparent background without a border. - - - - Background color for the top navigation header. When specified, includes a 1px solid border on the bottom. - If omitted, the header uses a transparent background with a subtle gradient border. - - - - Background color for cards, code blocks, and other contained elements. Should be slightly different from the - main background to create visual hierarchy while maintaining readability. - - -## Logo configuration - -```yaml docs.yml -logo: - href: https://example.com - dark: assets/images/logo-dark.svg - light: assets/images/logo-light.svg -``` - - - The URL that users will be directed to when clicking the logo. Typically your company's homepage or app. - - - - Path to your dark mode logo file, relative to the docs root. SVG format is recommended for optimal quality. Example: `assets/images/logo-dark.svg` - - - - Path to your light mode logo file, relative to the docs root. SVG format is recommended for optimal quality. Example: `assets/images/logo-light.svg` - - -## Redirects configuration - -```yaml docs.yml -redirects: - - source: "/old-path" - destination: "/new-path" - - source: "/old-folder/:path" - destination: "/new-folder/:path" -``` - - - The path that you want to redirect from. - - - - The path that you want to redirect to. - - - - Toggle between **permanent** and **temporary** redirect (default `false`). When true, the status code is 308. When false the status code is 307. - - -## NavBar links configuration - -```yaml docs.yml -navbar-links: - - type: minimal - text: Contact support - href: https://example.com/support - - type: filled - text: Login - href: https://example.com/login - rounded: false -``` - - - One of `outlined`, `minimal`, or `filled`. This value controls the styling of the button. - - - - The url once you click on the button. Example: https://buildwithfern.com/contact - - - - Text inside the button. - - - - When `true`, the border radius of the button will be fully rounded. - - - - The [Font Awesome icon](https://fontawesome.com/icons) to be used in the button. This icon will appear to the **left** of the text content. Pro and Brand Icons from Font Awesome are supported. - - - - The [Font Awesome icon](https://fontawesome.com/icons) to be used in the button. This icon will appear to the **right** of the text content. Pro and Brand Icons from Font Awesome are supported. - - By default, the `rightIcon` for a `filled` button is set to `arrow-right`. - - -## Background image configuration - -```yaml docs.yml -background-image: - light: ./path/to/bg-light.svg - dark: ./path/to/bg-dark.svg -``` - - - Relative filepath to the light-mode background image. - - - - Relative filepath to the dark-mode background image. - - - -## Typography configuration - -```yaml docs.yml -typography: - # Font for headings and titles - headingsFont: - name: Inter-Bold - paths: - - path: ./fonts/Inter-Bold.woff2 - weight: 700 - style: normal - - # Font for body text - bodyFont: - name: Inter-Regular - path: fonts/Inter-Regular.woff2 - style: normal - - # Font for code snippets - codeFont: - name: JetBrains-Mono - path: ./fonts/JetBrains-Mono-Regular.woff2 -``` - - - The font used for all body text including paragraphs, lists, and general content. - For optimal performance, use WOFF2 format. - - - - The font used for headings, titles, and other prominent text elements. Can be the same as your body font - if you prefer a unified look. Supports multiple weights for different heading levels. - - - - The font used for code blocks and inline code. Monospace fonts are recommended for better code readability. - Popular choices include JetBrains Mono, Fira Code, and Source Code Pro. - - -### Font configuration - - - -```yaml -typography: - bodyFont: - name: Inter-Regular - path: fonts/Inter-Regular.woff2 - style: normal -``` - - - -```yaml -typography: - headingsFont: - name: Inter-Variable - paths: - - path: ./fonts/Inter-Variable.woff2 - weight: 400 700 # Supports range of weights - style: normal -``` - - - -```yaml -typography: - headingsFont: - name: Inter - paths: - - path: ./fonts/Inter-Regular.woff2 - weight: 400 - style: normal - - path: ./fonts/Inter-Bold.woff2 - weight: 700 - style: normal - - path: ./fonts/Inter-Italic.woff2 - weight: 400 - style: italic -``` - - - - - The name of the font. Defaults to a generated name that will be used to reference your custom font in the eventually injected CSS. - - - - The path to your font file, relative to your docs folder. Use this when you have a single font file. For multiple font files (like separate files for bold, italic etc), use `paths` instead. - - - - The weight of the font. Can be a number (400, 700) or a range for variable fonts (400 700). - Common values: 400 (normal), 700 (bold). - - - - The font style, either "normal" or "italic". Defaults to "normal" if not specified. - - - - A list of font files for particular weights. Each element in the list includes a `path`, `weight`, and `style` property. - - -## Layout configuration - -```yaml docs.yml -layout: - header-height: 70px - page-width: 1344px - content-width: 672px - sidebar-width: 336px - searchbar-placement: header - tabs-placement: header - content-alignment: left - hide-nav-links: true - hide-feedback: true -``` - - - Sets the height of the header. Defaults to `4rem` (`64px`). Valid options are `{number}rem` or `{number}px`. - - - - Sets the maximum width of the docs layout, including the sidebar and content. Defaults to `88rem` (`1408px`). - Valid options are `{number}rem`, `{number}px`, or `full`. - - - - Sets the maximum width of the Markdown article content. Defaults to `44rem` (`704px`). - Valid options are `{number}rem` or `{number}px`. - - - - Sets the width of the sidebar in desktop mode. Defaults to `18rem` (`288px`). Valid options are `{number}rem` or `{number}px`. - - - - Sets the placement of the searchbar. Can be one of `header`, `sidebar` or `header-tabs` (places the searchbar in the header but on the tabs row). - Defaults to `sidebar`. - - This setting is ignored when `disable-header` is set to true. - - - - Set the placement of the tabs. Can be one of `header` or `sidebar`. - Defaults to `sidebar`. - - This setting is ignored when `disable-header` is set to true. - - - - Set the alignment of the Markdown content. Can be one of `center` or `left`. - Defaults to `center`. - - - - If set to true, the header will not be rendered. Instead, the logo will be rendered as part of the sidebar, - and a 1px border will separate the sidebar from the content. - - - - If set to true, the navigation links (previous, next) at the bottom of the page will not be rendered. This can be overridden on a per-page basis using the [frontmatter](/learn/docs/configuration/page-level-settings#navigation-links). - - - - If set to true, the feedback form will not be rendered. This can be overridden on a per-page basis using the [frontmatter](/learn/docs/configuration/page-level-settings#on-page-feedback). - - -## GitHub configuration - - - -```yaml -instances: - - url: plantstore.docs.buildwithfern.com - edit-this-page: - github: - owner: fern - repo: plant-store-docs - branch: main -``` - - - -```yaml -# Configure edit-this-page per instance -instances: - - url: plantstore.docs.buildwithfern.com - custom-domain: docs.plantstore.com - edit-this-page: - github: - owner: fern - repo: plant-store-docs - branch: production - - url: plantstore-staging.docs.buildwithfern.com - edit-this-page: - github: - owner: fern - repo: plant-store-docs - branch: staging -``` - - - - -The GitHub repository must be **public** for the "Edit this page" feature to work correctly. - - - - The GitHub organization that owns the documentation repository. - - - - The name of the GitHub repository containing your fern folder. - - - - The branch of the repository you would like the GitHub editor to open a PR to. Default is `main`. - - -## Landing page configuration - -```yaml docs.yml -landing-page: - page: Page Title - path: path/to/landing-page.mdx -``` - - - The name of the landing page. - - - - Relative filepath to the desired landing page Markdown file. - - -See [Vapi's landing page live](https://docs.vapi.ai/) and the associated [Markdown file](https://github.com/VapiAI/docs/blob/main/fern/quickstart/introduction.mdx?plain=1). - -## Metadata configuration - -```yaml docs.yml -metadata: - # Core platform identity - og:site_name: "Square Developer Documentation" - og:title: "Square Developer Platform | Payments, Commerce & Banking APIs" - og:description: "Build with Square's suite of APIs and SDKs. Accept payments, manage inventory, create loyalty programs, and access financial services. Complete documentation for developers building the future of commerce." - og:url: "https://developer.squareup.com/docs" - - # Social sharing assets - og:image: "https://developer.squareup.com/images/docs-social-card.png" - og:image:width: 1200 - og:image:height: 630 - og:locale: "en_US" - og:logo: "https://developer.squareup.com/images/square-logo.png" - - # Twitter (I mean X) optimization - twitter:title: "Square Developer Platform Documentation" - twitter:description: "Integrate payments, point-of-sale, inventory, and financial services into your applications with Square's developer platform. Get started with our APIs, SDKs, and comprehensive guides." - twitter:handle: "@SquareDev" - twitter:image: "https://developer.squareup.com/images/twitter-card.png" - twitter:site: "@Square" - twitter:card: "summary_large_image" -``` - - - The name of your website for Open Graph tags. - - - - The title shown in social media previews. - - - - The description shown in social media previews. - - - - The canonical URL of your documentation. - - - - The image shown in social media previews. Recommended size is 1200x630 pixels. - - - - The width of your Open Graph image in pixels. - - - - The height of your Open Graph image in pixels. - - - - The locale of your content (e.g., "en_US"). - - - - URL to your company logo. - - - - The title shown in Twitter Card previews. - - - - The description shown in Twitter Card previews. - - - - Your company's Twitter handle. - - - - The image shown in Twitter Card previews. - - - - The Twitter handle for your website. - - - - The Twitter Card type. Options are `summary`, `summary_large_image`, `app`, or `player`. - - -## Analytics configuration - -```yaml docs.yml -analytics: - ga4: - measurement-id: "G-XXXXXXXXXX" - gtm: - container-id: "GTM-XXXXXX" - posthog: - api-key: "phc_xxxxxxxxxxxx" -``` - - - Your Google Analytics 4 measurement ID. Must start with "G-". - - - - Your Google Tag Manager container ID. Must start with "GTM-". - - - - Configuration for PostHog Analytics integration. - - - - Your PostHog project API key. Defaults to the api-host of "https://us.i.posthog.com". - \ 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 802c0a456..9d904a45e 100644 --- a/fern/products/docs/pages/customization/what-is-docs-yml.mdx +++ b/fern/products/docs/pages/customization/what-is-docs-yml.mdx @@ -402,6 +402,8 @@ layout: searchbar-placement: header tabs-placement: header content-alignment: left + hide-nav-links: true + hide-feedback: true ``` @@ -446,6 +448,14 @@ layout: and a 1px border will separate the sidebar from the content. + + If set to true, the navigation links (previous, next) at the bottom of the page will not be rendered. This can be overridden on a per-page basis using the [frontmatter](/learn/docs/configuration/page-level-settings#navigation-links). + + + + If set to true, the feedback form will not be rendered. This can be overridden on a per-page basis using the [frontmatter](/learn/docs/configuration/page-level-settings#on-page-feedback). + + ## GitHub configuration