Skip to content

Commit 004b559

Browse files
devalogdevalog
committed
add changelog, more realistic example, card on overview page
1 parent 0690071 commit 004b559

File tree

3 files changed

+136
-60
lines changed

3 files changed

+136
-60
lines changed

‎fern/products/docs/pages/changelog/2025-11-09.mdx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
## Files component for displaying file tree structures
2+
3+
The new `<Files>` component creates visual file tree structures with expandable folders and nested files. Use it to show project structures, directory layouts, or any hierarchical file organization in your documentation.
4+
5+
<Files>
6+
<Folder name="components" defaultOpen>
7+
<File name="accordion.mdx" />
8+
<File name="button.mdx" />
9+
<File name="card.mdx" />
10+
<File name="tabs.mdx" />
11+
</Folder>
12+
<Folder name="assets">
13+
<File name="styles.css" />
14+
</Folder>
15+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
16+
<File name="README.md" />
17+
</Files>
18+
19+
The component consists of three parts: `<Files>` as the container, `<Folder>` for directories that can be expanded or collapsed, and `<File>` for individual files. Folders and files support optional `href` properties to make them clickable links, and folders can use `defaultOpen` to start expanded when the page loads.
20+
21+
```jsx Markdown maxLines=10
22+
<Files>
23+
<Folder name="components" defaultOpen>
24+
<File name="accordion.mdx" />
25+
<File name="button.mdx" />
26+
<File name="card.mdx" />
27+
<File name="tabs.mdx" />
28+
</Folder>
29+
<Folder name="assets">
30+
<File name="styles.css" />
31+
</Folder>
32+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
33+
<File name="README.md" />
34+
</Files>
35+
```
36+
37+
Read more in the [Files component documentation](/learn/docs/writing-content/components/files).

‎fern/products/docs/pages/component-library/default-components/files.mdx‎

Lines changed: 91 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -11,31 +11,33 @@ The component consists of three parts: `<Files>` as the container, `<Folder>` fo
1111

1212
<div className="highlight-frame">
1313
<Files>
14-
<Folder name="app" defaultOpen>
15-
<File name="layout.tsx" />
16-
<File name="page.tsx" />
17-
<File name="global.css" />
14+
<Folder name="components" defaultOpen>
15+
<File name="accordion.mdx" />
16+
<File name="button.mdx" />
17+
<File name="card.mdx" />
18+
<File name="tabs.mdx" />
1819
</Folder>
19-
<Folder name="components">
20-
<File name="button.tsx" />
21-
<File name="tabs.tsx" />
20+
<Folder name="assets">
21+
<File name="styles.css" />
2222
</Folder>
23-
<File name="package.json" />
23+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
24+
<File name="README.md" />
2425
</Files>
2526
</div>
2627

27-
```jsx Markdown
28+
```jsx Markdown maxLines=10
2829
<Files>
29-
<Folder name="app" defaultOpen>
30-
<File name="layout.tsx" />
31-
<File name="page.tsx" />
32-
<File name="global.css" />
30+
<Folder name="components" defaultOpen>
31+
<File name="accordion.mdx" />
32+
<File name="button.mdx" />
33+
<File name="card.mdx" />
34+
<File name="tabs.mdx" />
3335
</Folder>
34-
<Folder name="components">
35-
<File name="button.tsx" />
36-
<File name="tabs.tsx" />
36+
<Folder name="assets">
37+
<File name="styles.css" />
3738
</Folder>
38-
<File name="package.json" />
39+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
40+
<File name="README.md" />
3941
</Files>
4042
```
4143

@@ -47,61 +49,83 @@ You can nest folders within folders to create deep directory structures. The com
4749

4850
<div className="highlight-frame">
4951
<Files>
50-
<Folder name="src" defaultOpen>
51-
<Folder name="components" defaultOpen>
52-
<Folder name="ui">
53-
<File name="button.tsx" />
54-
<File name="input.tsx" />
55-
</Folder>
56-
<File name="header.tsx" />
52+
<Folder name="components" defaultOpen>
53+
<Folder name="layout" defaultOpen>
54+
<File name="header.mdx" />
55+
<File name="footer.mdx" />
56+
<File name="sidebar.mdx" />
5757
</Folder>
58-
<Folder name="lib">
59-
<File name="utils.ts" />
58+
<Folder name="ui">
59+
<File name="button.mdx" />
60+
<File name="card.mdx" />
61+
<File name="tabs.mdx" />
6062
</Folder>
63+
<File name="accordion.mdx" />
6164
</Folder>
62-
<File name="package.json" />
65+
<Folder name="assets">
66+
<File name="styles.css" />
67+
</Folder>
68+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
69+
<File name="README.md" />
6370
</Files>
6471
</div>
6572

66-
```jsx Markdown
73+
```jsx Markdown maxLines=10
6774
<Files>
68-
<Folder name="src" defaultOpen>
69-
<Folder name="components" defaultOpen>
70-
<Folder name="ui">
71-
<File name="button.tsx" />
72-
<File name="input.tsx" />
73-
</Folder>
74-
<File name="header.tsx" />
75+
<Folder name="components" defaultOpen>
76+
<Folder name="layout" defaultOpen>
77+
<File name="header.mdx" />
78+
<File name="footer.mdx" />
79+
<File name="sidebar.mdx" />
7580
</Folder>
76-
<Folder name="lib">
77-
<File name="utils.ts" />
81+
<Folder name="ui">
82+
<File name="button.mdx" />
83+
<File name="card.mdx" />
84+
<File name="tabs.mdx" />
7885
</Folder>
86+
<File name="accordion.mdx" />
87+
</Folder>
88+
<Folder name="assets">
89+
<File name="styles.css" />
7990
</Folder>
80-
<File name="package.json" />
91+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
92+
<File name="README.md" />
8193
</Files>
8294
```
8395

8496
### Linked files and folders
8597

86-
Add the `href` property to make files or folders clickable. This is useful for linking to GitHub repositories, documentation pages, or other resources.
98+
Add the `href` property to make files or folders clickable. This is useful for linking to documentation pages, GitHub repositories, or other resources.
8799

88100
<div className="highlight-frame">
89101
<Files>
90-
<Folder name="src" defaultOpen href="https://github.com/example/repo/tree/main/src">
91-
<File name="index.ts" href="https://github.com/example/repo/blob/main/src/index.ts" />
92-
<File name="utils.ts" href="https://github.com/example/repo/blob/main/src/utils.ts" />
102+
<Folder name="components">
103+
<File name="accordion.mdx" href="/docs/writing-content/components/accordions" />
104+
<File name="button.mdx" href="/docs/writing-content/components/button" />
105+
<File name="card.mdx" href="/docs/writing-content/components/cards" />
106+
<File name="tabs.mdx" href="/docs/writing-content/components/tabs" />
107+
</Folder>
108+
<Folder name="assets">
109+
<File name="styles.css" href="https://github.com/fern-api/docs/blob/main/fern/assets/styles.css" />
93110
</Folder>
94-
<File name="README.md" href="https://github.com/example/repo/blob/main/README.md" />
111+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
112+
<File name="README.md" href="https://github.com/fern-api/docs/blob/main/README.md" />
95113
</Files>
96114
</div>
97115

98-
```jsx Markdown
116+
```jsx Markdown maxLines=10
99117
<Files>
100-
<Folder name="src" defaultOpen href="https://github.com/example/repo/tree/main/src">
101-
<File name="index.ts" href="https://github.com/example/repo/blob/main/src/index.ts" />
102-
<File name="utils.ts" href="https://github.com/example/repo/blob/main/src/utils.ts" />
118+
<Folder name="components">
119+
<File name="accordion.mdx" href="/docs/writing-content/components/accordions" />
120+
<File name="button.mdx" href="/docs/writing-content/components/button" />
121+
<File name="card.mdx" href="/docs/writing-content/components/cards" />
122+
<File name="tabs.mdx" href="/docs/writing-content/components/tabs" />
123+
</Folder>
124+
<Folder name="assets">
125+
<File name="styles.css" href="https://github.com/fern-api/docs/blob/main/fern/assets/styles.css" />
103126
</Folder>
104-
<File name="README.md" href="https://github.com/example/repo/blob/main/README.md" />
127+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
128+
<File name="README.md" href="https://github.com/fern-api/docs/blob/main/README.md" />
105129
</Files>
106130
```
107131

@@ -111,25 +135,33 @@ Use the `defaultOpen` property to have specific folders expanded when the page l
111135

112136
<div className="highlight-frame">
113137
<Files>
114-
<Folder name="src" defaultOpen>
115-
<File name="index.ts" />
116-
<File name="app.ts" />
138+
<Folder name="components" defaultOpen>
139+
<File name="accordion.mdx" />
140+
<File name="button.mdx" />
141+
<File name="card.mdx" />
142+
<File name="tabs.mdx" />
117143
</Folder>
118-
<Folder name="tests">
119-
<File name="app.test.ts" />
144+
<Folder name="assets">
145+
<File name="styles.css" />
120146
</Folder>
147+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
148+
<File name="README.md" />
121149
</Files>
122150
</div>
123151

124-
```jsx Markdown
152+
```jsx Markdown maxLines=10
125153
<Files>
126-
<Folder name="src" defaultOpen>
127-
<File name="index.ts" />
128-
<File name="app.ts" />
154+
<Folder name="components" defaultOpen>
155+
<File name="accordion.mdx" />
156+
<File name="button.mdx" />
157+
<File name="card.mdx" />
158+
<File name="tabs.mdx" />
129159
</Folder>
130-
<Folder name="tests">
131-
<File name="app.test.ts" />
160+
<Folder name="assets">
161+
<File name="styles.css" />
132162
</Folder>
163+
<File name="markdown.mdx" href="/learn/docs/writing-content/markdown" />
164+
<File name="README.md" />
133165
</Files>
134166
```
135167

‎fern/products/docs/pages/component-library/default-components/overview.mdx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ title: 'Components overview'
33
description: 'Built-in components for creating interactive documentation'
44
---
55

6-
Fern includes 21 built-in components for creating interactive documentation. Select a component below to view usage examples and configuration options.
6+
Fern includes 22 built-in components for creating interactive documentation. Select a component below to view usage examples and configuration options.
77

88
<CardGroup cols={3}>
99
<Card
@@ -97,6 +97,13 @@ Fern includes 21 built-in components for creating interactive documentation. Sel
9797
>
9898
Endpoint schema snippets from your API Reference
9999
</Card>
100+
<Card
101+
title="Files"
102+
icon="fa-duotone fa-folder-tree"
103+
href="/docs/writing-content/components/files"
104+
>
105+
Display interactive file tree structures with expandable folders
106+
</Card>
100107
<Card
101108
title="Frame"
102109
icon="fa-duotone fa-window-maximize"

0 commit comments

Comments
 (0)