Example: add API catalog style with multiple sidebars

index.mdx

@@ -49,23 +49,14 @@ export default LandingLayout;
     Create your <Emphasis> developer portal </Emphasis> today!
   </SectionHeader>
   <FlexSection justifyContent="space-around" flexWrap="wrap">
-    <ThinTile to="developer-portal/index.md" icon={icon1} header="Rock">
-        Lorem ipsum dolor sit amet, pri putent oportere quaerendum in, ea mea justo invenire
-        aliquando. Usu modo suavitate ea. Et sed labitur epicurei adipiscing. Nibh zril labitur
-        an usu.Lorem ipsum dolor sit amet, pri putent oportere quaerendum in, ea mea justo
-        invenire aliquando. Usu modo suavitate ea. Et sed labitur epicurei adipiscing. Nibh zril
-        labitur an usu.Lorem ipsum dolor sit amet, pri putent oportere quaerendum in, ea mea
-        justo invenire aliquando. Usu modo suavitate ea. Et sed labitur epicurei adipiscing.
+    <ThinTile to="openapi/demo.page.yaml" icon={icon1} header="Rock">
+        This is a sample API.
     </ThinTile>
-    <ThinTile to="developer-portal/index.md" icon={launchFastIcon} header="Paper">
-        Lorem ipsum dolor sit amet, pri putent oportere quaerendum in, ea mea justo invenire
-        aliquando. Usu modo suavitate ea. Et sed labitur epicurei adipiscing. Nibh zril labitur
-        an usu.
+    <ThinTile to="openapi/demo-parameters.page.yaml" icon={launchFastIcon} header="Paper">
+        Another API.
     </ThinTile>
-    <ThinTile to="contact.mdx" icon={icon3} header="Scissors">
-        Lorem ipsum dolor sit amet, pri putent oportere quaerendum in, ea mea justo invenire
-        aliquando. Usu modo suavitate ea. Et sed labitur epicurei adipiscing. Nibh zril labitur
-        an usu.
+    <ThinTile to="openapi/starter.page.yaml" icon={icon3} header="Scissors">
+        And another API.
     </ThinTile>
   </FlexSection>
   {/* <Jumbotron parallaxEffect bgImage={icon1}>

openapi/demo-parameters.page.yaml

@@ -0,0 +1,13 @@
+type: redoc
+definitionId: demo-parameters
+showInfo: true
+expand: true
+settings:
+  generateCodeSamples:
+    languages:
+      - lang: curl
+      - lang: JavaScript
+      - lang: Node.js
+      - lang: Python
+      - lang: C#
+      - lang: Java

openapi/demo.page.yaml

@@ -0,0 +1,13 @@
+type: redoc
+definitionId: demo
+showInfo: true
+expand: false
+settings:
+  generateCodeSamples:
+    languages:
+      - lang: curl
+      - lang: JavaScript
+      - lang: Node.js
+      - lang: Python
+      - lang: C#
+      - lang: Java

openapi/starter.page.yaml

@@ -0,0 +1,13 @@
+type: redoc
+definitionId: starter
+showInfo: true
+expand: true
+settings:
+  generateCodeSamples:
+    languages:
+      - lang: curl
+      - lang: JavaScript
+      - lang: Node.js
+      - lang: Python
+      - lang: C#
+      - lang: Java

sidebars.yaml

@@ -69,3 +69,9 @@ training:
 alternative:
   - page: developer-portal/sidebar-alternative.md
     label: Alternative sidebar example
+demo:
+  - page: openapi/demo.page.yaml
+demo-parameters:
+  - page: openapi/demo-parameters.page.yaml
+starter:
+  - page: openapi/starter.page.yaml/*

siteConfig.yaml

@@ -6,6 +6,10 @@ headerIcon: ./images/logo.png
 enableToc: true
 oasDefinitions:
   petstore: ./openapi/petstore.yaml
+  demo-parameters: https://api.redoc.ly/registry/redocly/Demo%20Adam/adam-demo/bundle/examples-parameters/openapi.yaml
+  demo: https://api.redoc.ly/registry/redocly/Demo%20Adam/adam-demo/bundle/master/openapi.yaml
+  starter: https://api.redoc.ly/registry/redocly/Adam's%20Demo/openapi-starter/bundle/main/openapi.yaml
+
   # add links to definitions in our API registry by using a fully qualified URL.
 stylesheets:
   - https://fonts.googleapis.com/css?family=Roboto:300,400,600,700