diff --git a/README.md b/README.md
index cd0abeb37c..dc4eaa2176 100644
--- a/README.md
+++ b/README.md
@@ -97,6 +97,13 @@ Using a theme, all of your default configuration lives in an npm package.
- [Metadata with Front matter](#metadata-with-front-matter)
- [OpenAPI](#openapi)
- [Redocly API Block](#RedoclyAPIBlock)
+ - [On-premise license keys](#on-premise-license-keys)
+ - [Full width page](#full-width-page)
+ - [width (optional)](#width-optional)
+ - [typography (optional)](#typography-optional)
+ - [codeblock (optional)](#codeblock-optional)
+ - [disableSidebar (optional)](#disablesidebar-optional)
+ - [disableSearch (optional)](#disablesearch-optional)
- [JSDoc](#jsdoc)
- [MDX](#mdx)
- [Modular Content System](#modular-content-system)
@@ -1081,14 +1088,80 @@ We use [Redoc](https://github.com/Redocly/redoc) to render OpenAPI specs. Simply
```js
```
+
We can now host your own OpenAPI YAML files and have them rendered by Redocly documents. This approach allows us to avoid using iframes and instead host our own API YAML files directly in Redocly.
+#### On-premise license keys
+
When implementing this feature, ensure that GATSBY_REDOCLY_KEY: ${{ secrets.REDOCLY_LICENSE_KEY }} is added to the deploy.yml file in the repository. Additionally, for new repositories, remember to include the on-premise license keys through the repository settings.
The license key should be found in your redocly account settings -> On-premise license keys
+#### Full width page
+
+Use [custom layout](#custom-layout) to do a full width page
+
+#### width (optional)
+
+```js
+
+```
+Sets the width (of the right panel).
+
+Defaults to ```'500px'```
+
+https://redocly.com/docs/api-reference-docs/configuration/theming/#path=rightPanel
+
+#### typography (optional)
+
+```js
+
+```
+
+Controls the appearance of text.
+
+Defaults to ```'fontFamily: `adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif`'```
+
+https://redocly.com/docs/api-reference-docs/configuration/theming/#path=typography
+
+#### codeblock (optional)
+
+```js
+
+```
+
+Controls the appearance of code snippets.
+
+Defaults to ```"tokens: { punctuation: { color: 'white' }}"```
+
+https://redocly.com/docs/api-reference-docs/configuration/theming/#path=codeBlock
+
+#### disableSidebar (optional)
+
+```js
+
+```
+
+If set to `true`, hides the navigation sidebar (the left panel). Setting this option to `false` does not disable the search feature.
+
+Defaults to ```false```
+
+https://redocly.com/docs/api-reference-docs/configuration/functionality/#theme-object-openapi-schema
+
+#### disableSearch (optional)
+
+```js
+
+```
+
+Disables search indexing and hides the search box from the API documentation page.
+
+Defaults to ```false```
+
+https://redocly.com/docs/api-reference-docs/configuration/functionality/#theme-object-openapi-schema
+
### JSDoc
We currently recommend to use the [JSDoc to markdown](https://github.com/jsdoc2md/jsdoc-to-markdown) converter.
diff --git a/packages/gatsby-theme-aio/CHANGELOG.md b/packages/gatsby-theme-aio/CHANGELOG.md
index e933c0e918..5a234c7e60 100644
--- a/packages/gatsby-theme-aio/CHANGELOG.md
+++ b/packages/gatsby-theme-aio/CHANGELOG.md
@@ -3,6 +3,18 @@
All notable changes to this project will be documented in this file.
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [4.11.7](https://github.com/adobe/aio-theme/compare/@adobe/gatsby-theme-aio@4.11.4...@adobe/gatsby-theme-aio@4.11.7) (2024-03-13)
+
+### Features
+
+* **DEVSITE-1106:** Make width and codeblock customizable [8a76182](https://github.com/adobe/aio-theme/commit/8a76182c4f259331975e478d320a19d01a21bf3c)
+* **DEVSITE-1106:** Make disableSidebar and disableSearch customizable [486625c](https://github.com/adobe/aio-theme/commit/486625c98452b8a5f657840e366a701069e41e0d)
+* **DEVSITE-1106:** Make typography customizable [a5e783b](https://github.com/adobe/aio-theme/commit/a5e783bfd5e516de4eb2e2d6d7f26135a8a0e7c3)
+
+### Fix
+
+* **DEVSITE-1106:** Hide loading animation as a work-around to make the redocly integration appear more seamless [c3396c3](https://github.com/adobe/aio-theme/commit/c3396c308ff4a2623500aceba744eec47cef374c)
+
## [4.11.4](https://github.com/adobe/aio-theme/compare/@adobe/gatsby-theme-aio@4.11.3...@adobe/gatsby-theme-aio@4.11.4) (2023-02-28)
### Fix
diff --git a/packages/gatsby-theme-aio/package.json b/packages/gatsby-theme-aio/package.json
index 3c548ccbeb..b7b16ae582 100644
--- a/packages/gatsby-theme-aio/package.json
+++ b/packages/gatsby-theme-aio/package.json
@@ -1,6 +1,6 @@
{
"name": "@adobe/gatsby-theme-aio",
- "version": "4.11.4",
+ "version": "4.11.7",
"description": "The Adobe I/O theme for building markdown powered sites",
"main": "index.js",
"license": "Apache-2.0",
@@ -153,4 +153,4 @@
"use-debounce": "^9.0.4",
"uuid": "^9.0.0"
}
-}
+}
\ No newline at end of file
diff --git a/packages/gatsby-theme-aio/src/components/RedoclyAPIBlock/index.js b/packages/gatsby-theme-aio/src/components/RedoclyAPIBlock/index.js
index 9d3d21fd0f..8f9de3e93b 100644
--- a/packages/gatsby-theme-aio/src/components/RedoclyAPIBlock/index.js
+++ b/packages/gatsby-theme-aio/src/components/RedoclyAPIBlock/index.js
@@ -18,7 +18,13 @@ import PropTypes from 'prop-types';
const licenseKey = process.env.GATSBY_REDOCLY_KEY;
// Redocly API Block that will render the OpenAPI yaml files with Redocly TryIt feature.
-const RedoclyAPIBlock = ({ src }) => {
+const RedoclyAPIBlock = ({
+ src, width = '500px',
+ typography = 'fontFamily: `adobe-clean, "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif`',
+ codeBlock = "tokens: { punctuation: { color: 'white' }}",
+ disableSidebar = false,
+ disableSearch = false
+}) => {
const [isRedoclyLoading, setIsRedoclyLoading] = useState(true);
let input = {};
@@ -48,16 +54,21 @@ const RedoclyAPIBlock = ({ src }) => {
<>
{!isRedoclyLoading && (
<>
-
+