Skip to content

Commit 7b9c73d

Browse files
committed
reorganize products and versions pages for clarity
1 parent d843e52 commit 7b9c73d

File tree

4 files changed

+104
-83
lines changed

4 files changed

+104
-83
lines changed

fern/products/docs/pages/navigation/products.mdx

Lines changed: 44 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -111,9 +111,15 @@ products:
111111
```
112112
</CodeBlock>
113113
</Step>
114-
<Step title="Add versioning to your products (optional)">
114+
<Step title="Remove extra navigation from docs.yml">
115+
116+
If your `docs.yml` file includes a `navigation` field or a `tabs` field, be sure to remove. Those fields should now belong in the product-specific `.yml` files.
117+
</Step>
118+
</Steps>
119+
120+
### Add versioning to your products (optional)
115121

116-
You can optionally add versions to a product. Versioned and unversioned products can live next to each other in your site. Each version of a single product has its own `yml` file.
122+
Once you've defined your products, you can optionally add versions. Versioned and unversioned products can live next to each other in your site.
117123

118124
In the below example, Product A is **unversioned** and Product B is **versioned**:
119125

@@ -140,40 +146,65 @@ In the below example, Product A is **unversioned** and Product B is **versioned*
140146
```
141147
</CodeBlock>
142148

149+
<Steps>
150+
<Step title="Define your versions">
151+
Each version of a single product has its own `yml` file. To specify the contents of each version, add a `.yml` file to the `versions` folder to define the navigational structure of that version. Make sure to include the `navigation` and `tabs` properties, if applicable.
152+
153+
Version-specific `yml` files:
154+
155+
<Markdown src="/snippets/version-specific-yml-files.mdx" />
156+
157+
</Step>
158+
<Step title="Add your version configuration">
159+
160+
Define a version in the top-level `docs.yml` by adding an item to the `versions` list and specifying the `display-name` and `path`.
161+
143162
The top-level `doc.yml` configuration for a Fern Docs website containing two products, one unversioned and one versioned, might look something like this:
144163

145164
<CodeBlock title="docs.yml">
146-
```yaml {2, 8, 13-19}
165+
```yaml {2, 8, 12-16}
147166
products:
148167
- display-name: Product A # unversioned
149-
path: ./products/product-a.yml
168+
path: ./products/product-a.yml
150169
icon: fa-solid fa-leaf # optional
151170
slug: product-a # optional
152171
subtitle: Product A subtitle # optional
153-
154172
- display-name: Product B # versioned
155173
path: ./products/product-b/latest.yml # <-- default showing latest
156174
image: ./images/product-b.png # optional
157175
slug: product-b # optional
158176
subtitle: Product B subtitle # optional
159-
versions: # optional
177+
versions:
160178
- display-name: Latest
161-
path: ./products/product-b/latest.yml
162-
availability: beta
179+
path: ./products/product-b/latest.yml # relative path to the version file
163180
- display-name: V2
164-
path: ./products/product-b/v2.yml
165-
availability: ga
181+
path: ./products/product-b/v2.yml # relative path to the version file
166182
```
167183
</CodeBlock>
168184

169-
For more information on setting up versioned products, follow our [versioning docs](/docs/configuration/versions).
170185
</Step>
171-
<Step title="Remove extra navigation from docs.yml">
186+
<Step title="Indicate availability">
172187

173-
If your `docs.yml` file includes a `navigation` field or a `tabs` field, be sure to remove. Those fields should now belong in the product-specific `.yml` files.
188+
<Markdown src="/snippets/version-availability.mdx" />
189+
190+
<CodeBlock title="docs.yml">
191+
```yaml {4}
192+
versions:
193+
- display-name: Latest
194+
path: ./products/product-b/latest.yml
195+
availability: beta
196+
- display-name: V2
197+
path: ./products/product-b/v2.yml
198+
availability: stable
199+
```
200+
</CodeBlock>
201+
</Step>
202+
<Step title="Remove extra navigation from docs.yml">
203+
If your `docs.yml` file includes a `navigation` field or a `tabs` field, be sure to remove. Those fields should now belong in the version-specific `.yml` files.
174204
</Step>
175205
</Steps>
176206

207+
177208
## Customizing Selector Styling
178209

179210
You can directly customize the appearance of the product and version selectors by targeting their CSS classes:

fern/products/docs/pages/navigation/versions.mdx

Lines changed: 15 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -25,104 +25,49 @@ fern/
2525
├─ pages/
2626
├─ ...
2727
└─ versions/
28-
├─ v2-1/pages/...
29-
├─ v2-1.yml
30-
├─ v2-2/pages/...
31-
└─ v2-2.yml
28+
├─ latest/pages/...
29+
├─ latest.yml
30+
├─ v2/pages/...
31+
└─ v2.yml
3232
```
3333
</CodeBlock>
3434

35-
3635
Version-specific `yml` files:
3736

38-
<CodeBlocks>
39-
<CodeBlock title="versions/v2-1.yml">
40-
```yaml
41-
navigation:
42-
- section: Introduction
43-
contents:
44-
- page: My Page
45-
path: ./v2-1/pages/my-page.mdx # relative path to the file
46-
- page: Shared Resource
47-
path: ../shared-pages/shared-resource.mdx
48-
- api: API Reference
49-
```
50-
</CodeBlock>
51-
<CodeBlock title="versions/v2-2.yml">
52-
```yaml
53-
tabs:
54-
api:
55-
title: API Reference
56-
icon: puzzle
57-
help:
58-
title: Help Center
59-
icon: home
60-
61-
navigation:
62-
- tab: api
63-
contents:
64-
- section: Introduction
65-
contents:
66-
- page: My Page
67-
path: ./v2-2/pages/my-page.mdx # relative path to the file
68-
- page: Shared Resource
69-
path: ../shared-pages/shared-resource.mdx
70-
- api: API Reference
71-
- tab: help
72-
contents:
73-
- section: Help Center
74-
contents:
75-
- page: Contact Us
76-
path: contact-us.mdx
77-
```
78-
</CodeBlock>
79-
</CodeBlocks>
37+
<Markdown src="/snippets/version-specific-yml-files.mdx" />
8038

8139
<Note>You can also have multiple products, some versioned and some unversioned. For more information on setting up multiple products, follow our [product switching docs](/docs/configuration/products).</Note>
8240
</Step>
8341
<Step title="Add your version configuration">
8442

85-
To define a version, in `docs.yml`, add an item to the `versions` list, specifying the `display-name` and `path`.
86-
87-
```bash
88-
fern/
89-
├─ fern.config.json
90-
├─ generators.yml
91-
├─ docs.yml
92-
└─ versions/
93-
├─ ...
94-
├─ v2-1.yml
95-
└─ v2-2.yml
96-
```
43+
Define a version in the top-level `docs.yml` by adding an item to the `versions` list and specifying the `display-name` and `path`.
9744

9845
<CodeBlock title="docs.yml">
9946
```yaml
10047
versions:
101-
- display-name: v2.2 # shown in the dropdown
102-
path: ./versions/v2-2.yml # relative path to the version file
103-
- display-name: v2.1
104-
path: ./versions/v2-1.yml
48+
- display-name: Latest # shown in the dropdown
49+
path: ./versions/latest.yml # relative path to the version file
50+
- display-name: V2
51+
path: ./versions/v2.yml
10552
```
10653
</CodeBlock>
10754
</Step>
10855
<Step title="Indicate availability">
10956
110-
You can optionally set the availability status for each version. Options are `deprecated`, `ga`, `stable`, and `beta`.
57+
<Markdown src="/snippets/version-availability.mdx" />
11158
11259
<CodeBlock title="docs.yml">
11360
```yaml {4}
11461
versions:
115-
- display-name: v2.2
116-
path: ./versions/v2-2.yml
62+
- display-name: Latest
63+
path: ./versions/latest.yml
11764
availability: beta
118-
- display-name: v2.1
119-
path: ./versions/v2-1.yml
65+
- display-name: v2
66+
path: ./versions/v2.yml
12067
availability: stable
12168
```
12269
</CodeBlock>
12370
124-
Version availability is distinct from [section and page availability](/learn/docs/configuration/navigation#section-and-page-availability), with different options. If you want to set section and page availability, do so in your version-specific `yml` files.
125-
12671
</Step>
12772
<Step title="Remove extra navigation from docs.yml">
12873
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
You can optionally set the availability status for each version. Options are `deprecated`, `ga`, `stable`, and `beta`.
2+
3+
Version availability is distinct from [section and page availability](/learn/docs/configuration/navigation#section-and-page-availability), with different options. If you want to set section and page availability, do so in your version-specific `yml` files.
Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<CodeBlocks>
2+
<CodeBlock title="versions/latest.yml">
3+
```yaml
4+
navigation:
5+
- section: Introduction
6+
contents:
7+
- page: My Page
8+
path: ./latest/pages/my-page.mdx # relative path to the file
9+
- page: Shared Resource
10+
path: ../shared-pages/shared-resource.mdx
11+
- api: API Reference
12+
```
13+
</CodeBlock>
14+
<CodeBlock title="versions/v2.yml">
15+
```yaml
16+
tabs:
17+
api:
18+
title: API Reference
19+
icon: puzzle
20+
help:
21+
title: Help Center
22+
icon: home
23+
24+
navigation:
25+
- tab: api
26+
contents:
27+
- section: Introduction
28+
contents:
29+
- page: My Page
30+
path: ./v2/pages/my-page.mdx # relative path to the file
31+
- page: Shared Resource
32+
path: ../shared-pages/shared-resource.mdx
33+
- api: API Reference
34+
- tab: help
35+
contents:
36+
- section: Help Center
37+
contents:
38+
- page: Contact Us
39+
path: contact-us.mdx
40+
```
41+
</CodeBlock>
42+
</CodeBlocks>

0 commit comments

Comments
 (0)