diff --git a/docs/end-user/images/hamburger-icon.png b/docs/end-user/images/hamburger-icon.png new file mode 100644 index 000000000..90dab4aaa Binary files /dev/null and b/docs/end-user/images/hamburger-icon.png differ diff --git a/docs/end-user/interact-with-api.md b/docs/end-user/interact-with-api.md index 8c9209c87..e7a83d2d8 100644 --- a/docs/end-user/interact-with-api.md +++ b/docs/end-user/interact-with-api.md @@ -15,7 +15,7 @@ The project's API description files are available in both YAML and JSON formats. To download an API description file: 1. Navigate to an API's metadata page. -2. In the **Download API description** section next to your preferred format, click the **Download** icon. +1. In the **Download API description** section next to your preferred format, click the **Download** icon. The file is downloaded to your machine. diff --git a/docs/end-user/navigate-project.md b/docs/end-user/navigate-project.md index f43fabe5c..0bb0ba535 100644 --- a/docs/end-user/navigate-project.md +++ b/docs/end-user/navigate-project.md @@ -9,8 +9,8 @@ You can jump directly to the main content of a project's page, skipping navigati To skip to the page's main content: -1. After navigating to a page, press the Tab key. -1. Press the Return or Enter key, or click the **Skip to content** button. +1. After navigating to a page, press the `Tab` key. +1. Press the `Return` or `Enter` key, or click the **Skip to content** button. The page content scrolls so that the first heading is at the top of the page. @@ -72,7 +72,12 @@ The navigation bar (navbar) contains links to major parts of the project. {% tab label="Mobile" %} To access the navbar on mobile devices: - - Select the **Menu** icon in the top-right corner of the screen and then select **Main menu**. + - Select the menu icon in the top-right corner of the screen and then select **Main menu**. + + {% img + src="./images/hamburger-icon.png" + alt="Menu icon on a mobile device" + /%} The contents of the menu change to represent the structure in the navbar. @@ -108,7 +113,12 @@ A project can have a single sidebar with links to all pages, or a main sidebar w {% /tab %} {% tab label="Mobile" %} To access the sidebar on mobile devices: - - In the top-right corner of the screen, select the **Menu** icon. + - Select the menu icon in the top-right corner of the screen. + + {% img + src="./images/hamburger-icon.png" + alt="Menu icon on a mobile device" + /%} The contents of the menu represent the structure of the sidebar. @@ -137,6 +147,9 @@ The order of breadcrumb links typically reflects the hierarchy in the sidebar: f You can also use the navigation buttons located below the main content of the page. These buttons typically open the next page or the previous page in the same order as the items in the sidebar. +If a page is the first item on a sidebar, a single navigation button displays on the bottom-right side of the page directing the user to the next item in the sidebar. +If a page is the last item on a sidebar, a single navigation button displays on the bottom-left side of the page directing the user to the previous item in the sidebar. + Some projects may have a custom order for the navigation buttons to guide users through related content. {% img @@ -145,6 +158,11 @@ Some projects may have a custom order for the navigation buttons to guide users withLightbox=true /%} +### Footer + +The footer is located at the bottom of the page on all device sizes. +Footers typically contain copyright information, contact information, and links to pages about the organization that owns the project and to other legal information. + ## Switch between products A project can have multiple products represented by distinct portions of content. @@ -171,8 +189,14 @@ Products often have individual sidebars or other navigation elements, and their {% tab label="Mobile" %} To switch between products on mobile devices: - 1. Select the **Menu** icon in the top-right corner of the screen and then select **Main menu**. - 1. Under the **Products** heading, select a link. + 1. Select the menu icon in the top-right corner of the screen and then select **Main menu**. + + {% img + src="./images/hamburger-icon.png" + alt="Menu icon on a mobile device" + /%} + + 2. Under the **Products** heading, select a link. The selected product's content opens on its default page. @@ -208,7 +232,13 @@ When you first access a page, the page's latest or default version is displayed. {% tab label="Mobile" %} To switch between page versions on a mobile device: - 1. Select the **Menu** icon in the top-right corner of the screen. + 1. Select the menu icon in the top-right corner of the screen and then select **Main menu**. + + {% img + src="./images/hamburger-icon.png" + alt="Menu icon on a mobile device" + /%} + 2. Under the **Version** heading, select a version from the drop-down list. The page's content changes to reflect the selected version. diff --git a/docs/end-user/test-apis-cli.md b/docs/end-user/test-apis-cli.md index 155663cfe..2b9b174b5 100644 --- a/docs/end-user/test-apis-cli.md +++ b/docs/end-user/test-apis-cli.md @@ -13,17 +13,17 @@ To send an API request using curl: 1. (Optional) To change the server, scroll to the **Servers** section of the API documentation page, click the **Copy** icon next to a server URL, and paste the value into your command. 1. Update the values in the curl command as needed. - For example: - - ```curl {% title="curl command to call Update special event operation" %} - curl -i -X PATCH \ - -u : \ - 'https://redocly.com/_mock/docs/openapi/museum-api/special-events/dad4bce8-f5cb-4078-a211-995864315e39' \ - -H 'Content-Type: application/json' \ - -d '{ - "location": "Under the sea." - }' - ``` + For example: + + ```curl {% title="curl command to call Update special event operation" %} + curl -i -X PATCH \ + -u : \ + 'https://redocly.com/_mock/docs/openapi/museum-api/special-events/dad4bce8-f5cb-4078-a211-995864315e39' \ + -H 'Content-Type: application/json' \ + -d '{ + "location": "Under the sea." + }' + ``` 1. Run the curl command in a CLI tool. The CLI tool outputs a response from the server. diff --git a/docs/end-user/use-search.md b/docs/end-user/use-search.md index 1e020a400..282f34dbb 100644 --- a/docs/end-user/use-search.md +++ b/docs/end-user/use-search.md @@ -80,7 +80,7 @@ Each AI response includes action buttons that allow you to rate the quality and To provide feedback on an AI response: 1. After receiving an AI response, locate the feedback buttons at the bottom of the response. -2. Choose one of the following actions: +1. Choose one of the following actions: - Click the thumbs up icon to indicate the response was helpful. - Click the thumbs down icon to indicate the response was not helpful. @@ -89,12 +89,12 @@ To provide feedback on an AI response: When you indicate that a response was not helpful, you can optionally provide more specific feedback: 1. After clicking the thumbs down icon, a feedback form appears. -2. Select one of the predefined reasons: +1. Select one of the predefined reasons: - **Didn't answer my question** - **Couldn't find what I was looking for** - **Wrong topic** - **Partially helpful, but missing details** -3. Alternatively, click **More...** to provide custom feedback with specific details. +1. Alternatively, click **More...** to provide custom feedback with specific details. ## Resources