Skip to content
This repository was archived by the owner on Aug 18, 2023. It is now read-only.

Example: Drilldown, combined, and separated sidebars demo for multiple APIs #58

Open
wants to merge 8 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions catalog/breakfast/breakfast.page.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
type: reference-docs
definitionId: paper
settings:
pagination: section
generateCodeSamples:
languages:
- lang: curl
- lang: JavaScript
- lang: Node.js
- lang: Python
- lang: C#
- lang: Java
1 change: 1 addition & 0 deletions catalog/breakfast/sidebars.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- page: ./breakfast.page.yaml
12 changes: 12 additions & 0 deletions catalog/dinner/dinner.page.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
type: reference-docs
definitionId: paper
settings:
pagination: section
generateCodeSamples:
languages:
- lang: curl
- lang: JavaScript
- lang: Node.js
- lang: Python
- lang: C#
- lang: Java
1 change: 1 addition & 0 deletions catalog/dinner/sidebars.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- page: ./dinner.page.yaml
27 changes: 27 additions & 0 deletions catalog/games.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
title: Games APIs
description: Games APIs
---

import { WideTile, Flex } from '@redocly/developer-portal/ui';

# Games APIs

The Games APIs entertain.

Prerequisites
- Good attitude

<div>
<Flex justifyContent="space-between" flexWrap="wrap">
<WideTile to="../separated/rock.page.yaml" header="Rock">
The hardest game
</WideTile>
<WideTile to="../separated/paper.page.yaml" header="Paper">
The lightest game
</WideTile>
<WideTile to="../separated/scissors.page.yaml" header="Scissors">
The sharpest game
</WideTile>
</Flex>
</div>
32 changes: 32 additions & 0 deletions catalog/index.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
---
title: API catalog
description: Our API catalog is composed of dozens of microservices organized into categories.
---

import { WideTile, Flex } from '@redocly/developer-portal/ui';

# API catalog

Welcome to a sample API catalog.

There are many ways to organize information in Redocly.

This pull request demonstrates:
- separated sidebars
- combined sidebars
- drilldown sidebars

This catalog view is a combination of combined sidebars and separate sidebars.

Select a category such as games, and then select an API.

<div>
<Flex justifyContent="space-between" flexWrap="wrap">
<WideTile to="./games.mdx" header="Games">
Entertainment
</WideTile>
<WideTile to="./meals.mdx" header="Meals">
Nutrition and energy
</WideTile>
</Flex>
</div>
12 changes: 12 additions & 0 deletions catalog/lunch/lunch.page.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
type: reference-docs
definitionId: paper
settings:
pagination: section
generateCodeSamples:
languages:
- lang: curl
- lang: JavaScript
- lang: Node.js
- lang: Python
- lang: C#
- lang: Java
1 change: 1 addition & 0 deletions catalog/lunch/sidebars.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- page: ./lunch.page.yaml
31 changes: 31 additions & 0 deletions catalog/meals.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
---
title: Meals APIs
description: Meals APIs
---

import { WideTile, Flex } from '@redocly/developer-portal/ui';

# Meals APIs

The Meals APIs satisfy hunger.

Prerequisites
- Mouth
- Food

<div>
<Flex justifyContent="space-between" flexWrap="wrap">
<WideTile to="./breakfast/breakfast.page.yaml" header="Breakfast">
The most important meal of the day
</WideTile>
<WideTile to="./lunch/lunch.page.yaml" header="Lunch">
Mid-day meal
</WideTile>
<WideTile to="./dinner/dinner.page.yaml" header="Dinner">
End the day with a dinner
</WideTile>
<WideTile to="./snacks/snacks.page.yaml" header="Snacks">
Recharge in between meals
</WideTile>
</Flex>
</div>
3 changes: 3 additions & 0 deletions catalog/sidebars.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
- page: index.mdx
- page: games.mdx
- page: meals.mdx
1 change: 1 addition & 0 deletions catalog/snacks/sidebars.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- page: ./snacks.page.yaml
12 changes: 12 additions & 0 deletions catalog/snacks/snacks.page.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
type: reference-docs
definitionId: paper
settings:
pagination: section
generateCodeSamples:
languages:
- lang: curl
- lang: JavaScript
- lang: Node.js
- lang: Python
- lang: C#
- lang: Java
15 changes: 15 additions & 0 deletions combined/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
# Combined sidebars

This puts multiple APIs into a single visible sidebar.

```yaml
combined:
- page: combined/index.md
- page: combined/rock.page.yaml
- page: combined/paper.page.yaml
- page: combined/scissors.page.yaml
```

:::note Pagination
We've paginated the rock, paper, and scissors APIs differently as well.
:::
12 changes: 12 additions & 0 deletions combined/paper.page.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
type: reference-docs
definitionId: paper
settings:
pagination: section
generateCodeSamples:
languages:
- lang: curl
- lang: JavaScript
- lang: Node.js
- lang: Python
- lang: C#
- lang: Java
10 changes: 10 additions & 0 deletions combined/rock.page.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
type: reference-docs
definitionId: rock
settings:
pagination: none
generateCodeSamples:
languages:
- lang: curl
- lang: Go
- lang: PHP
- lang: Ruby
12 changes: 12 additions & 0 deletions combined/scissors.page.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
type: reference-docs
definitionId: scissors
settings:
pagination: item
generateCodeSamples:
languages:
- lang: curl
- lang: JavaScript
- lang: Node.js
- lang: Python
- lang: C#
- lang: Java
33 changes: 33 additions & 0 deletions drilldown/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
# Drilldown style of sidebars

This shows the drilldown style of sidebars.

Notice that the `/*` is appended to the `rock.page.yaml` and `paper.page.yaml` files to avoid an extra group.
We remove the `/*` from the `scissors.page.yaml` file so you can see the difference.

```yaml
drilldown-style:
- page: drilldown/index.md
- group: Rock
menuStyle: drilldown
icon: images/rock.png
sublabel: Rock API docs
pages:
- page: openapi/rock.page.yaml/*
- group: Paper
menuStyle: drilldown
icon: images/paper.png
sublabel: Paper API docs
pages:
- page: openapi/paper.page.yaml/*
- group: Scissors
menuStyle: drilldown
icon: images/scissors.png
sublabel: Scissors API docs
pages:
- page: openapi/scissors.page.yaml
```

:::note Pagination
We've paginated the rock, paper, and scissors APIs differently as well.
:::
12 changes: 12 additions & 0 deletions drilldown/paper.page.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
type: reference-docs
definitionId: paper
settings:
pagination: section
generateCodeSamples:
languages:
- lang: curl
- lang: JavaScript
- lang: Node.js
- lang: Python
- lang: C#
- lang: Java
10 changes: 10 additions & 0 deletions drilldown/rock.page.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
type: reference-docs
definitionId: rock
settings:
pagination: none
generateCodeSamples:
languages:
- lang: curl
- lang: Go
- lang: PHP
- lang: Ruby
12 changes: 12 additions & 0 deletions drilldown/scissors.page.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
type: reference-docs
definitionId: scissors
settings:
pagination: item
generateCodeSamples:
languages:
- lang: curl
- lang: JavaScript
- lang: Node.js
- lang: Python
- lang: C#
- lang: Java
Binary file added images/paper.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/rock.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added images/scissors.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
31 changes: 10 additions & 21 deletions index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,9 @@ import {
NavBar,
} from '@redocly/developer-portal/ui';

import icon1 from './images/icon1.png';
import launchFastIcon from './images/launch-fast.svg';
import icon3 from './images/icon3.png';
import bookManagementIcon from './images/book-management.svg';
import foundOrPrivate from './images/found-or-private.svg';
import rock from './images/rock.png';
import paper from './images/paper.png';
import scissors from './images/scissors.png';

export default LandingLayout;

Expand All @@ -44,26 +42,17 @@ export default LandingLayout;
</Jumbotron>
<Box my={25}>
<SectionHeader>
Create your <Emphasis> developer portal </Emphasis> today!
Browse our <Emphasis> API catalog </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/rock.page.yaml" icon={rock} header="Rock">
This is the Rock API. It thinks it is better than the Scissors API. But it has to watch out for paper.
</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/paper.page.yaml" icon={paper} header="Paper">
The Paper API frightens the Rock 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/scissors.page.yaml" icon={scissors} header="Scissors">
The Scissors API is great as long as it stays away from the Rock API.
</ThinTile>
</FlexSection>
{/* <Jumbotron parallaxEffect bgImage={icon1}>
Expand Down
12 changes: 12 additions & 0 deletions openapi/paper.page.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
type: reference-docs
definitionId: paper
settings:
pagination: section
generateCodeSamples:
languages:
- lang: curl
- lang: JavaScript
- lang: Node.js
- lang: Python
- lang: C#
- lang: Java
10 changes: 10 additions & 0 deletions openapi/rock.page.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
type: reference-docs
definitionId: rock
settings:
pagination: none
generateCodeSamples:
languages:
- lang: curl
- lang: Go
- lang: PHP
- lang: Ruby
12 changes: 12 additions & 0 deletions openapi/scissors.page.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
type: reference-docs
definitionId: scissors
settings:
pagination: item
generateCodeSamples:
languages:
- lang: curl
- lang: JavaScript
- lang: Node.js
- lang: Python
- lang: C#
- lang: Java
29 changes: 29 additions & 0 deletions separated/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
# Separate sidebars

This makes separate sidebars (all within a single `sidebars.yaml` file).

Notice we use the `/*` to eliminate one grouping level in the scissors and rock APIs.
You will visually see the difference between those and the paper API.

```yaml
## different sidebars
rock:
- page: separated/rock-quickstart.md
- page: separated/rock.page.yaml/*
paper:
- page: separated/paper.page.yaml
scissors:
- page: separated/scissors.page.yaml/*

```

Use these links to visit those APIs:

- [Rock](./rock-quickstart.md)
- [Paper](./paper.page.yaml)
- [Scissors](./scissors.page.yaml)


:::note Pagination
We've paginated the rock, paper, and scissors APIs differently as well.
:::
Loading