Skip to content

Commit 54d4603

Browse files
kgowruKapil GowruKapil Gowru
authored
feat: updated component pages styling and product swticher (#1747)
Co-authored-by: Kapil Gowru <[email protected]> Co-authored-by: Kapil Gowru <[email protected]>
1 parent 7217951 commit 54d4603

File tree

18 files changed

+349
-240
lines changed

18 files changed

+349
-240
lines changed

‎fern/assets/styles.css‎

Lines changed: 50 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -214,7 +214,7 @@ h1, h2, h3 {
214214
}
215215
}
216216

217-
> a[href*="fern-def"] {
217+
> a[href*="ferndef"] {
218218
grid-column: 3;
219219
grid-row: 5;
220220
transform: translateY(-96px);
@@ -225,7 +225,7 @@ h1, h2, h3 {
225225
}
226226
}
227227

228-
> a[href*="api-definitions"] {
228+
> a[href="/learn/api-definitions"] {
229229
display: none;
230230
}
231231
}
@@ -1109,22 +1109,58 @@ h1, h2, h3 {
11091109
}
11101110

11111111
/*** START -- HIGHLIGHTED FRAME STYLING ***/
1112+
/* @keyframes gradient-shift {
1113+
0%, 100% {
1114+
background-position: 0% 50%;
1115+
}
1116+
50% {
1117+
background-position: 100% 50%;
1118+
}
1119+
} */
1120+
11121121
.highlight-frame {
1113-
background-color: var(--accent-a2);
1114-
border-radius: 0.75rem;
1115-
padding: 1.5rem;
1122+
/* background-color: var(--accent-a2); */
1123+
background-color:hsla(222,58%,66%,1);
1124+
background:
1125+
radial-gradient(circle at 20% 50%, hsla(109,80%,78%,0.8) 0%, transparent 50%),
1126+
radial-gradient(circle at 80% 50%, hsla(222,83%,81%,0.8) 0%, transparent 50%),
1127+
radial-gradient(circle at 50% 20%, hsla(108,91%,90%,0.7) 0%, transparent 50%),
1128+
radial-gradient(circle at 50% 80%, hsla(222,75%,72%,0.7) 0%, transparent 50%),
1129+
hsla(222,58%,66%,1);
1130+
background-size: 100% 100%;
1131+
border-radius: 1rem;
1132+
padding: 0.5rem;
11161133
margin: 1rem 0;
1117-
}
1134+
/* animation: gradient-shift 20s ease-in-out infinite; */
11181135

1119-
.highlight-frame > *:first-child {
1120-
margin-top: 0;
1121-
}
1136+
.highlight-frame-content {
1137+
padding: 1rem;
1138+
background-color: var(--background, lightdark(#fff,#000));
1139+
border-radius: 0.5rem;
1140+
overflow: hidden;
11221141

1123-
.highlight-frame > *:last-child {
1124-
margin-bottom: 0;
1125-
}
1142+
> *:first-child {
1143+
margin-top: 0;
1144+
}
1145+
1146+
> *:last-child {
1147+
margin-bottom: 0;
1148+
}
1149+
}
11261150

1127-
:is(.dark) .highlight-frame {
1128-
background-color: var(--accent-a3);
1151+
.highlight-frame-content-not-prose {
1152+
padding: 0.5rem;
1153+
background-color: var(--background, lightdark(#fff,#000));
1154+
border-radius: 0.5rem;
1155+
overflow: hidden;
1156+
}
1157+
1158+
> *:first-child {
1159+
margin-top: 0;
1160+
}
1161+
1162+
> *:last-child {
1163+
margin-bottom: 0;
1164+
}
11291165
}
11301166
/*** END -- HIGHLIGHTED FRAME STYLING ***/

‎fern/docs.yml‎

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -61,34 +61,29 @@ products:
6161
slug: api-definitions
6262

6363
- display-name: OpenAPI
64-
path: ./products/api-def/openapi-def.yml
64+
href: /learn/api-definitions/openapi/overview
6565
icon: fa-regular fa-book
6666
image: ./images/product-switcher/openapi-definition-light.png
67-
slug: openapi-definition
6867

6968
- display-name: AsyncAPI
70-
path: ./products/api-def/asyncapi-def.yml
69+
href: /learn/api-definitions/asyncapi/overview
7170
icon: fa-regular fa-bolt
7271
image: ./images/product-switcher/asyncapi-light.png
73-
slug: asyncapi-definition
7472

7573
- display-name: OpenRPC
76-
path: ./products/api-def/openrpc-def.yml
74+
href: /learn/api-definitions/openrpc/overview
7775
icon: fa-regular fa-code
7876
image: ./images/product-switcher/openrpc-light.png
79-
slug: openrpc-definition
8077

8178
- display-name: gRPC
82-
path: ./products/api-def/grpc-def.yml
79+
href: /learn/api-definitions/grpc/overview
8380
icon: fa-regular fa-plug
8481
image: ./images/product-switcher/grpc-light.png
85-
slug: grpc-definition
8682

8783
- display-name: Fern Definition
88-
path: ./products/api-def/ferndef-def.yml
84+
href: /learn/api-definitions/ferndef/overview
8985
icon: fa-regular fa-seedling
9086
image: ./images/product-switcher/fern-definition-light.png
91-
slug: fern-definition
9287

9388
css: ./assets/styles.css
9489

‎fern/fern.config.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
{
22
"organization": "fern",
3-
"version": "0.95.0"
4-
}
3+
"version": "0.107.3"
4+
}

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ The `<Anchor>` component creates direct links to specific content like paragraph
1414
Wrap your content with the `<Anchor>` tag and assign it a custom anchor ID, which you can link to in URLs using the hash symbol (example: `https://website.com/page#data`).
1515

1616
<div className="highlight-frame">
17-
<Anchor id="data">This sentence has a custom anchor named `#data`</Anchor>. You can access it via this URL: https://buildwithfern.com/learn/docs/writing-content/components/anchor#data.
17+
<div className="highlight-frame-content">
18+
<Anchor id="data">This sentence has a custom anchor named `#data`</Anchor>. You can access it via this URL: https://buildwithfern.com/learn/docs/writing-content/components/anchor#data.
19+
</div>
1820
</div>
1921

2022
```jsx Markdown
@@ -26,17 +28,18 @@ Wrap your content with the `<Anchor>` tag and assign it a custom anchor ID, whic
2628
### Anchor a table
2729

2830
<div className="highlight-frame">
31+
<div className="highlight-frame-content">
2932
<Anchor id="api-endpoints">
30-
3133
| Endpoint | Method | Description |
3234
|----------|--------|-------------|
3335
| `/plants` | GET | Retrieve all plants |
3436
| `/plants/:id` | GET | Retrieve a specific plant |
3537
| `/plants` | POST | Create a new plant |
3638

3739
</Anchor>
40+
<p>You can link directly to the [API endpoints table](#api-endpoints).</p>
41+
</div>
3842

39-
You can link directly to the [API endpoints table](#api-endpoints).
4043
</div>
4144

4245
```jsx Markdown
@@ -56,8 +59,8 @@ You can link directly to the [API endpoints table](#api-endpoints).
5659
### Anchor a code block
5760

5861
<div className="highlight-frame">
62+
<div className="highlight-frame-content">
5963
<Anchor id="example-code">
60-
6164
```python
6265
def water_plant(plant_id, amount):
6366
"""Water a plant with specified amount"""
@@ -68,6 +71,7 @@ You can link directly to the [API endpoints table](#api-endpoints).
6871
```
6972
Reference the [watering code example](#example-code) in your implementation.
7073
</Anchor>
74+
</div>
7175
</div>
7276

7377
````jsx Markdown

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

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@ Use the `<Badge>` component to display small pieces of information, such as stat
88
## Usage
99

1010
<div className="highlight-frame">
11-
### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>
11+
<div className="highlight-frame-content">
12+
### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>
13+
</div>
1214
</div>
1315

1416
```jsx Markdown
@@ -20,14 +22,18 @@ Use the `<Badge>` component to display small pieces of information, such as stat
2022
### Intents
2123

2224
<div className="highlight-frame">
23-
<Badge intent="success">Success</Badge>
24-
<Badge intent="note">Note</Badge>
25-
<Badge intent="tip">Tip</Badge>
26-
<Badge intent="warning">Warning</Badge>
27-
<Badge intent="error">Error</Badge>
28-
<Badge intent="info">Info</Badge>
29-
<Badge intent="launch">Launch</Badge>
30-
<Badge intent="check">Check</Badge>
25+
<div className="highlight-frame-content">
26+
<div className="flex flex-wrap gap-2">
27+
<Badge intent="success">Success</Badge>
28+
<Badge intent="note">Note</Badge>
29+
<Badge intent="tip">Tip</Badge>
30+
<Badge intent="warning">Warning</Badge>
31+
<Badge intent="error">Error</Badge>
32+
<Badge intent="info">Info</Badge>
33+
<Badge intent="launch">Launch</Badge>
34+
<Badge intent="check">Check</Badge>
35+
</div>
36+
</div>
3137
</div>
3238

3339
```jsx Markdown
@@ -44,10 +50,14 @@ Use the `<Badge>` component to display small pieces of information, such as stat
4450
### Styles
4551

4652
<div className="highlight-frame">
47-
<Badge intent="success" minimal>Success badge, minimal style</Badge>
48-
<Badge intent="error" minimal>Error badge, minimal style</Badge>
49-
<Badge intent="success" outlined>Success badge, outlined style</Badge>
50-
<Badge intent="error" minimal outlined>Error badge, outlined and minimal style</Badge>
53+
<div className="highlight-frame-content">
54+
<div className="flex flex-wrap gap-2">
55+
<Badge intent="success" minimal>Success badge, minimal style</Badge>
56+
<Badge intent="error" minimal>Error badge, minimal style</Badge>
57+
<Badge intent="success" outlined>Success badge, outlined style</Badge>
58+
<Badge intent="error" minimal outlined>Error badge, outlined and minimal style</Badge>
59+
</div>
60+
</div>
5161
</div>
5262

5363
```jsx Markdown

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

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,12 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
88
## Usage
99

1010
<div className="highlight-frame">
11-
<div className="space-x-2">
12-
<Button intent="primary">Primary Button</Button>
13-
<Button intent="success">Success Button</Button>
14-
<Button outlined>Outlined Button</Button>
11+
<div className="highlight-frame-content">
12+
<div className="flex flex-wrap gap-2">
13+
<Button intent="primary">Primary Button</Button>
14+
<Button intent="success">Success Button</Button>
15+
<Button outlined>Outlined Button</Button>
16+
</div>
1517
</div>
1618
</div>
1719

@@ -26,14 +28,12 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
2628
### Intents
2729

2830
<div className="highlight-frame">
29-
<div className="space-y-4">
30-
<div className="space-x-2">
31+
<div className="highlight-frame-content">
32+
<div className="flex flex-wrap gap-2">
3133
<Button intent="primary">Primary button</Button>
3234
<Button intent="success">Success button</Button>
3335
<Button intent="warning">Warning button</Button>
3436
<Button intent="danger">Danger button</Button>
35-
</div>
36-
<div className="space-x-2">
3737
<Button intent="none">Plain button</Button>
3838
</div>
3939
</div>
@@ -50,10 +50,12 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
5050
### Styles
5151

5252
<div className="highlight-frame">
53-
<div className="space-x-2">
54-
<Button intent="success" outlined large rounded>Large, outlined, rounded</Button>
55-
<Button intent="success" minimal>Minimal</Button>
56-
<Button intent="warning" mono>Monospaced</Button>
53+
<div className="highlight-frame-content">
54+
<div className="flex flex-wrap gap-2">
55+
<Button intent="success" outlined large rounded>Large, outlined, rounded</Button>
56+
<Button intent="success" minimal>Minimal</Button>
57+
<Button intent="warning" mono>Monospaced</Button>
58+
</div>
5759
</div>
5860
</div>
5961

@@ -66,10 +68,12 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
6668
### Sizes
6769

6870
<div className="highlight-frame">
69-
<div className="space-x-2">
70-
<Button small>Small Button</Button>
71-
<Button>Normal Button</Button>
72-
<Button large>Large Button</Button>
71+
<div className="highlight-frame-content">
72+
<div className="flex flex-wrap gap-2">
73+
<Button small>Small Button</Button>
74+
<Button>Normal Button</Button>
75+
<Button large>Large Button</Button>
76+
</div>
7377
</div>
7478
</div>
7579

@@ -82,10 +86,12 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
8286
### With icons
8387

8488
<div className="highlight-frame">
85-
<div className="space-x-2">
86-
<Button icon="download">Download</Button>
87-
<Button rightIcon="arrow-right">Continue</Button>
88-
<Button icon="star" rightIcon="arrow-right">Favorite</Button>
89+
<div className="highlight-frame-content">
90+
<div className="flex flex-wrap gap-2">
91+
<Button icon="download">Download</Button>
92+
<Button rightIcon="arrow-right">Continue</Button>
93+
<Button icon="star" rightIcon="arrow-right">Favorite</Button>
94+
</div>
8995
</div>
9096
</div>
9197

@@ -98,9 +104,11 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
98104
### Link and disabled states
99105

100106
<div className="highlight-frame">
101-
<div className="space-x-2">
102-
<Button href="/learn/docs/getting-started/overview">Link Button</Button>
103-
<Button disabled>Disabled Button</Button>
107+
<div className="highlight-frame-content">
108+
<div className="flex flex-wrap gap-2">
109+
<Button href="/learn/docs/getting-started/overview">Link Button</Button>
110+
<Button disabled>Disabled Button</Button>
111+
</div>
104112
</div>
105113
</div>
106114

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

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ To display very short pieces of information like status indicators and version n
1010
## Usage
1111

1212
<div className="highlight-frame">
13-
<Note>This adds a note in your documentation.</Note>
13+
<div className="highlight-frame-content">
14+
<Note>This adds a note in your documentation.</Note>
15+
</div>
1416
</div>
1517

1618
```jsx Markdown
@@ -22,13 +24,15 @@ To display very short pieces of information like status indicators and version n
2224
### Intents
2325

2426
<div className="highlight-frame">
25-
<Warning>This raises a warning to watch out for</Warning>
26-
<Success>This indicates a successful operation or positive outcome</Success>
27-
<Error>This indicates a potential error</Error>
28-
<Info>This draws attention to important information</Info>
29-
<Launch>This celebrates an announcement, styled using the primary accent of the docs site</Launch>
30-
<Tip>This suggests a helpful tip</Tip>
31-
<Check>This shows a checked status</Check>
27+
<div className="highlight-frame-content">
28+
<Warning>This raises a warning to watch out for</Warning>
29+
<Success>This indicates a successful operation or positive outcome</Success>
30+
<Error>This indicates a potential error</Error>
31+
<Info>This draws attention to important information</Info>
32+
<Launch>This celebrates an announcement, styled using the primary accent of the docs site</Launch>
33+
<Tip>This suggests a helpful tip</Tip>
34+
<Check>This shows a checked status</Check>
35+
</div>
3236
</div>
3337

3438
```jsx Markdown
@@ -44,9 +48,11 @@ To display very short pieces of information like status indicators and version n
4448
### Custom icon
4549

4650
<div className="highlight-frame">
47-
<Warning title="Example callout" icon="skull-crossbones">
48-
This callout uses a title and a custom Font Awesome icon.
49-
</Warning>
51+
<div className="highlight-frame-content">
52+
<Warning title="Example callout" icon="skull-crossbones">
53+
This callout uses a title and a custom Font Awesome icon.
54+
</Warning>
55+
</div>
5056
</div>
5157

5258
```jsx Markdown

0 commit comments

Comments
 (0)