feat: updated component pages styling and product swticher

fern/assets/styles.css

@@ -214,7 +214,7 @@ h1, h2, h3 {
       }
     }
 
-    > a[href*="fern-def"] {
+    > a[href*="ferndef"] {
       grid-column: 3;
       grid-row: 5;
       transform: translateY(-96px);
@@ -225,7 +225,7 @@ h1, h2, h3 {
       }
     }
 
-    > a[href*="api-definitions"] {
+    > a[href="/learn/api-definitions"] {
       display: none;
     }
   }
@@ -1109,22 +1109,58 @@ h1, h2, h3 {
 }
 
 /*** START -- HIGHLIGHTED FRAME STYLING ***/
+/* @keyframes gradient-shift {
+  0%, 100% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+} */
+
 .highlight-frame {
-  background-color: var(--accent-a2);
-  border-radius: 0.75rem;
-  padding: 1.5rem;
+  /* background-color: var(--accent-a2); */
+  background-color:hsla(222,58%,66%,1);
+  background:
+    radial-gradient(circle at 20% 50%, hsla(109,80%,78%,0.8) 0%, transparent 50%),
+    radial-gradient(circle at 80% 50%, hsla(222,83%,81%,0.8) 0%, transparent 50%),
+    radial-gradient(circle at 50% 20%, hsla(108,91%,90%,0.7) 0%, transparent 50%),
+    radial-gradient(circle at 50% 80%, hsla(222,75%,72%,0.7) 0%, transparent 50%),
+    hsla(222,58%,66%,1);
+  background-size: 100% 100%;
+  border-radius: 1rem;
+  padding: 0.5rem;
   margin: 1rem 0;
-}
+  /* animation: gradient-shift 20s ease-in-out infinite; */
 
-.highlight-frame > *:first-child {
-  margin-top: 0;
-}
+  .highlight-frame-content {
+    padding: 1rem;
+    background-color: var(--background, lightdark(#fff,#000));
+    border-radius: 0.5rem;
+    overflow: hidden;
 
-.highlight-frame > *:last-child {
-  margin-bottom: 0;
-}
+    > *:first-child {
+      margin-top: 0;
+    }
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+  }
 
-:is(.dark) .highlight-frame {
-  background-color: var(--accent-a3);
+  .highlight-frame-content-not-prose {
+    padding: 0.5rem;
+    background-color: var(--background, lightdark(#fff,#000));
+    border-radius: 0.5rem;
+    overflow: hidden;
+  }
+
+  > *:first-child {
+    margin-top: 0;
+  }
+
+  > *:last-child {
+    margin-bottom: 0;
+  }
 }
 /*** END -- HIGHLIGHTED FRAME STYLING ***/

fern/docs.yml

@@ -61,34 +61,29 @@ products:
     slug: api-definitions
 
   - display-name: OpenAPI
-    path: ./products/api-def/openapi-def.yml
+    href: /learn/api-definitions/openapi/overview
     icon: fa-regular fa-book
     image: ./images/product-switcher/openapi-definition-light.png
-    slug: openapi-definition
 
   - display-name: AsyncAPI
-    path: ./products/api-def/asyncapi-def.yml
+    href: /learn/api-definitions/asyncapi/overview
     icon: fa-regular fa-bolt
     image: ./images/product-switcher/asyncapi-light.png
-    slug: asyncapi-definition
 
   - display-name: OpenRPC
-    path: ./products/api-def/openrpc-def.yml
+    href: /learn/api-definitions/openrpc/overview
     icon: fa-regular fa-code
     image: ./images/product-switcher/openrpc-light.png
-    slug: openrpc-definition
 
   - display-name: gRPC
-    path: ./products/api-def/grpc-def.yml
+    href: /learn/api-definitions/grpc/overview
     icon: fa-regular fa-plug
     image: ./images/product-switcher/grpc-light.png
-    slug: grpc-definition
 
   - display-name: Fern Definition
-    path: ./products/api-def/ferndef-def.yml
+    href: /learn/api-definitions/ferndef/overview
     icon: fa-regular fa-seedling
     image: ./images/product-switcher/fern-definition-light.png
-    slug: fern-definition
 
 css: ./assets/styles.css
 

fern/fern.config.json

@@ -1,4 +1,4 @@
 {
   "organization": "fern",
-  "version": "0.95.0"
-}
+  "version": "0.107.3"
+}

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

@@ -14,7 +14,9 @@ The `<Anchor>` component creates direct links to specific content like paragraph
 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`).
 
 <div className="highlight-frame">
-<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.
+  <div className="highlight-frame-content">
+  <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.
+  </div>
 </div>
 
 ```jsx Markdown
@@ -26,17 +28,18 @@ Wrap your content with the `<Anchor>` tag and assign it a custom anchor ID, whic
 ### Anchor a table
 
 <div className="highlight-frame">
+  <div className="highlight-frame-content">
   <Anchor id="api-endpoints">
-
   | Endpoint | Method | Description |
   |----------|--------|-------------|
   | `/plants` | GET | Retrieve all plants |
   | `/plants/:id` | GET | Retrieve a specific plant |
   | `/plants` | POST | Create a new plant |
 
   </Anchor>
+  <p>You can link directly to the [API endpoints table](#api-endpoints).</p>
+  </div>
 
-You can link directly to the [API endpoints table](#api-endpoints).
 </div>
 
 ```jsx Markdown
@@ -56,8 +59,8 @@ You can link directly to the [API endpoints table](#api-endpoints).
 ### Anchor a code block
 
 <div className="highlight-frame">
+  <div className="highlight-frame-content">
   <Anchor id="example-code">
-
   ```python
   def water_plant(plant_id, amount):
       """Water a plant with specified amount"""
@@ -68,6 +71,7 @@ You can link directly to the [API endpoints table](#api-endpoints).
   ```
 Reference the [watering code example](#example-code) in your implementation.
   </Anchor>
+  </div>
 </div>
 
 ````jsx Markdown

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

@@ -8,7 +8,9 @@ Use the `<Badge>` component to display small pieces of information, such as stat
 ## Usage
 
 <div className="highlight-frame">
-### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>
+  <div className="highlight-frame-content">
+  ### Plant Care API <Badge intent="info">v2.1.0</Badge> <Badge intent="launch" minimal>New</Badge>
+  </div>
 </div>
 
 ```jsx Markdown
@@ -20,14 +22,18 @@ Use the `<Badge>` component to display small pieces of information, such as stat
 ### Intents
 
 <div className="highlight-frame">
-  <Badge intent="success">Success</Badge>
-  <Badge intent="note">Note</Badge>
-  <Badge intent="tip">Tip</Badge>
-  <Badge intent="warning">Warning</Badge>
-  <Badge intent="error">Error</Badge>
-  <Badge intent="info">Info</Badge>
-  <Badge intent="launch">Launch</Badge>
-  <Badge intent="check">Check</Badge>
+  <div className="highlight-frame-content"> 
+    <div className="flex flex-wrap gap-2">
+    <Badge intent="success">Success</Badge>
+    <Badge intent="note">Note</Badge>
+    <Badge intent="tip">Tip</Badge>
+    <Badge intent="warning">Warning</Badge>
+    <Badge intent="error">Error</Badge>
+    <Badge intent="info">Info</Badge>
+    <Badge intent="launch">Launch</Badge>
+    <Badge intent="check">Check</Badge>
+    </div>
+  </div>
 </div>
 
 ```jsx Markdown
@@ -44,10 +50,14 @@ Use the `<Badge>` component to display small pieces of information, such as stat
 ### Styles
 
 <div className="highlight-frame">
-  <Badge intent="success" minimal>Success badge, minimal style</Badge>
-  <Badge intent="error" minimal>Error badge, minimal style</Badge>
-  <Badge intent="success" outlined>Success badge, outlined style</Badge>
-  <Badge intent="error" minimal outlined>Error badge, outlined and minimal style</Badge>
+  <div className="highlight-frame-content">
+    <div className="flex flex-wrap gap-2">  
+    <Badge intent="success" minimal>Success badge, minimal style</Badge>
+    <Badge intent="error" minimal>Error badge, minimal style</Badge>
+    <Badge intent="success" outlined>Success badge, outlined style</Badge>
+    <Badge intent="error" minimal outlined>Error badge, outlined and minimal style</Badge>
+    </div>
+  </div>
 </div>
 
 ```jsx Markdown

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

@@ -8,10 +8,12 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
 ## Usage
 
 <div className="highlight-frame">
-  <div className="space-x-2">
-    <Button intent="primary">Primary Button</Button>
-    <Button intent="success">Success Button</Button>
-    <Button outlined>Outlined Button</Button>
+  <div className="highlight-frame-content">
+    <div className="flex flex-wrap gap-2">
+      <Button intent="primary">Primary Button</Button>
+      <Button intent="success">Success Button</Button>
+      <Button outlined>Outlined Button</Button>
+    </div>
   </div>
 </div>
 
@@ -26,14 +28,12 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
 ### Intents
 
 <div className="highlight-frame">
-  <div className="space-y-4">
-    <div className="space-x-2">
+  <div className="highlight-frame-content">
+    <div className="flex flex-wrap gap-2">
       <Button intent="primary">Primary button</Button>
       <Button intent="success">Success button</Button>
       <Button intent="warning">Warning button</Button>
       <Button intent="danger">Danger button</Button>
-    </div>
-    <div className="space-x-2">
       <Button intent="none">Plain button</Button>
     </div>
   </div>
@@ -50,10 +50,12 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
 ### Styles
 
 <div className="highlight-frame">
-  <div className="space-x-2">
-    <Button intent="success" outlined large rounded>Large, outlined, rounded</Button>
-    <Button intent="success" minimal>Minimal</Button>
-    <Button intent="warning" mono>Monospaced</Button>
+  <div className="highlight-frame-content">
+    <div className="flex flex-wrap gap-2">
+      <Button intent="success" outlined large rounded>Large, outlined, rounded</Button>
+      <Button intent="success" minimal>Minimal</Button>
+      <Button intent="warning" mono>Monospaced</Button>
+    </div>
   </div>
 </div>
 
@@ -66,10 +68,12 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
 ### Sizes
 
 <div className="highlight-frame">
-  <div className="space-x-2">
-    <Button small>Small Button</Button>
-    <Button>Normal Button</Button>
-    <Button large>Large Button</Button>
+  <div className="highlight-frame-content">
+    <div className="flex flex-wrap gap-2">
+      <Button small>Small Button</Button>
+      <Button>Normal Button</Button>
+      <Button large>Large Button</Button>
+    </div>
   </div>
 </div>
 
@@ -82,10 +86,12 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
 ### With icons
 
 <div className="highlight-frame">
-  <div className="space-x-2">
-    <Button icon="download">Download</Button>
-    <Button rightIcon="arrow-right">Continue</Button>
-    <Button icon="star" rightIcon="arrow-right">Favorite</Button>
+  <div className="highlight-frame-content">
+    <div className="flex flex-wrap gap-2">
+      <Button icon="download">Download</Button>
+      <Button rightIcon="arrow-right">Continue</Button>
+      <Button icon="star" rightIcon="arrow-right">Favorite</Button>
+    </div>
   </div>
 </div>
 
@@ -98,9 +104,11 @@ The `<Button>` component renders interactive buttons with various styles, sizes,
 ### Link and disabled states
 
 <div className="highlight-frame">
-  <div className="space-x-2">
-    <Button href="/learn/docs/getting-started/overview">Link Button</Button>
-    <Button disabled>Disabled Button</Button>
+  <div className="highlight-frame-content">
+    <div className="flex flex-wrap gap-2">
+      <Button href="/learn/docs/getting-started/overview">Link Button</Button>
+      <Button disabled>Disabled Button</Button>
+    </div>
   </div>
 </div>
 

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

@@ -10,7 +10,9 @@ To display very short pieces of information like status indicators and version n
 ## Usage
 
 <div className="highlight-frame">
-<Note>This adds a note in your documentation.</Note>
+  <div className="highlight-frame-content">
+  <Note>This adds a note in your documentation.</Note>
+  </div>
 </div>
 
 ```jsx Markdown
@@ -22,13 +24,15 @@ To display very short pieces of information like status indicators and version n
 ### Intents
 
 <div className="highlight-frame">
-<Warning>This raises a warning to watch out for</Warning>
-<Success>This indicates a successful operation or positive outcome</Success>
-<Error>This indicates a potential error</Error>
-<Info>This draws attention to important information</Info>
-<Launch>This celebrates an announcement, styled using the primary accent of the docs site</Launch>
-<Tip>This suggests a helpful tip</Tip>
-<Check>This shows a checked status</Check>
+  <div className="highlight-frame-content">
+  <Warning>This raises a warning to watch out for</Warning>
+  <Success>This indicates a successful operation or positive outcome</Success>
+  <Error>This indicates a potential error</Error>
+  <Info>This draws attention to important information</Info>
+  <Launch>This celebrates an announcement, styled using the primary accent of the docs site</Launch>
+  <Tip>This suggests a helpful tip</Tip>
+  <Check>This shows a checked status</Check>
+  </div>
 </div>
 
 ```jsx Markdown
@@ -44,9 +48,11 @@ To display very short pieces of information like status indicators and version n
 ### Custom icon
 
 <div className="highlight-frame">
-<Warning title="Example callout" icon="skull-crossbones">
-This callout uses a title and a custom Font Awesome icon. 
-</Warning>
+  <div className="highlight-frame-content">
+  <Warning title="Example callout" icon="skull-crossbones">
+  This callout uses a title and a custom Font Awesome icon. 
+  </Warning>
+  </div>
 </div>
 
 ```jsx Markdown