Skip to content

Improve API reference layout #886

@marc1404

Description

@marc1404

Description

Gardener's API reference is embedded into the documentation here:
https://gardener.cloud/docs/gardener/api-reference/

Unfortunately, the wide Markdown tables in its content often don't fit into the narrow container of VitePress' default theme. The left-hand side holds the sidebar; the outline is to the right (useful for providing an overview in the API reference); and finally, the content container itself does not take up the available width. For 'regular' text-heavy content, it makes sense to limit the width of flowing text to support a natural reading flow.

Image

Possible Solutions

Customized Layout

We could configure a custom layout in VitePress for all paths under /docs/gardener/api-reference. This layout should use the entire width of the browser viewport and have the content container expand to the available width. On narrow screens, the outline to the right should be hidden or collapsed.

Standalone Layout

It's also an option to implement a standalone layout for the API reference (along with making it a top-level navigation element so it's easy to find). An inspiration for this could be Kubernetes' one-page API reference:
https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.35/

With this approach, the API reference would be treated as its own kind of content, separate from the rest of the documentation.

Requirements / Goals

  • Content in the API reference should not have a horizontal scrollbar or be cut off otherwise.
  • The outline to the right (called the aside outline in VitePress) should show the resource types listed on the pages in the API reference.
  • Stretch goal: The API reference becomes a top-level entry in the navigation and structure, turning it into a dedicated section. (e.g. /docs/gardener/api-reference -> /api-reference)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions