Merge branch 'main' into cd/conditional-content

Author: chdeskur

fern/assets/styles.css

@@ -940,6 +940,12 @@ a[href*="changelog"] svg {
   pointer-events: none;
 }
 
+/* Fade out effect for AI animation */
+.rive-container.fade-bottom {
+  mask: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
+  -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
+}
+
 .rive-container canvas {
   width: 100%;
   height: 100%;

fern/products/docs/pages/component-library/custom-components/global-variables.mdx

@@ -0,0 +1,79 @@
+---
+title: Global Variables
+---
+
+<Warning>
+Global variables are not yet available. Please contact [email protected] if you have any feedback or questions.
+</Warning>
+
+Global variables allow you to maintain consistency across your documentation and make updates easier by centralizing commonly used values. You can define and use global variables in several places within Fern documentation. 
+
+## Define global variables
+
+Define global variables in your `docs.yml` file:
+
+```yaml docs.yml
+variables:
+  - name: "API_VERSION"
+    value: "v1"
+  - name: "API_URL"
+    value: "https://api.example.com"
+```
+
+## Use variables in content
+
+Reference variables throughout your MDX content using double angle brackets:
+
+### In Markdown
+
+````mdx use-api.mdx
+Use the latest version of the API: <<API_VERSION>>
+
+```bash
+curl -X GET <<API_URL>>/api/<<API_VERSION>>/users
+```
+````
+
+### In API references
+
+```yaml openapi.yml
+paths:
+  /users:
+    get:
+      description: | 
+        The API version is <<API_VERSION>>
+      responses:
+        '200':
+          description: "Success"
+          content:
+            application/json:
+              schema:
+```
+
+### In docs.yml configuration
+
+You can also use variables in your `docs.yml` configuration.
+
+```yaml docs.yml
+variables:
+  - name: "ADMIN_ROLE_NAME"
+    value: "admin"
+```
+
+```yaml docs.yml
+roles:
+  - everyone
+  - <<ADMIN_ROLE_NAME>>
+
+navigation:
+  - tab: Admin
+    layout:
+      - page: Admin Dashboard
+        path: pages/admin-dashboard.mdx
+        viewers:
+          - <<ADMIN_ROLE_NAME>>
+```
+
+<Note>
+Fern will not render variables in your content if they are not defined in your `docs.yml` configuration. Instead, the variable will be rendered as a literal string.
+</Note>

fern/products/home/pages/welcome.mdx

@@ -132,9 +132,11 @@ import { FernFooter } from "../../../components/FernFooter";
         </div>
 
         {/* Rive Animation */}
-        <div class="rive-container">
-          <canvas id="docs-rive-canvas"></canvas>
-        </div>
+        <a href="/docs/getting-started/overview" style="cursor: pointer; text-decoration: none;">
+          <div class="rive-container fade-bottom">
+            <canvas id="docs-rive-canvas"></canvas>
+          </div>
+        </a>
 
         <div className="action-buttons-vertical">
           <a className="fern-button filled normal primary gap-1 w-fit a-btn" href="/docs/getting-started/overview">
@@ -190,9 +192,11 @@ import { FernFooter } from "../../../components/FernFooter";
         </div>
 
         {/* Rive Animation */}
-        <div class="rive-container">
-          <canvas id="ai-rive-canvas"></canvas>
-        </div>
+        <a href="/ask-fern/getting-started/what-is-ask-fern" style="cursor: pointer; text-decoration: none;">
+          <div class="rive-container fade-bottom">
+            <canvas id="ai-rive-canvas"></canvas>
+          </div>
+        </a>
 
         <div className="action-buttons">
           <a className="fern-button filled normal primary gap-1 a-btn" href="/ask-fern/getting-started/what-is-ask-fern">

fern/rive-animation.js

@@ -128,6 +128,11 @@
 
     // Setup dynamic cursor changes based on Rive's interactive areas
     function setupDynamicCursor(canvas, riveInstance, stateMachine) {
+        // Skip dynamic cursor if canvas is wrapped in an anchor tag
+        if (canvas.closest('a')) {
+            return;
+        }
+        
         canvas.addEventListener('mousemove', (event) => {
             try {
                 const rect = canvas.getBoundingClientRect();
@@ -255,7 +260,7 @@
         // Docs Animation
         createRiveAnimation({
             canvasSelector: '#docs-rive-canvas',
-            riveUrl: 'https://cdn.prod.website-files.com/67880ff570cdb1a85eee946f/68825994c55f0eece04ce4e2_d261956a0f627eb6b94c39aa9fcc26f0_docs_animation.riv',
+            riveUrl: 'https://cdn.prod.website-files.com/67880ff570cdb1a85eee946f/68825994c55f0eece04ce4e2_9a50e77828a014e927d67fa21d3edf9d_docs_animation.riv',
             aspectRatio: 404/262,
             stateMachine: "State Machine 1",
             fallbackImages: [
@@ -276,7 +281,7 @@
         // AI Animation with custom event handling
         createRiveAnimation({
             canvasSelector: '#ai-rive-canvas',
-            riveUrl: 'https://cdn.prod.website-files.com/67880ff570cdb1a85eee946f/68825e97fd6225e1c8a7488c_c2966309b38902c92adfe24c2dc8ba5a_ai_animation.riv',
+            riveUrl: 'https://cdn.prod.website-files.com/67880ff570cdb1a85eee946f/68825e97fd6225e1c8a7488c_c1ab3eed9babdbd0f2333f092d16e2d1_ai_animation.riv',
             aspectRatio: 371/99,
             stateMachine: "State Machine 1",
             fallbackImages: [
@@ -291,13 +296,13 @@
                     alt: 'AI Animation Preview'
                 }
             ],
-            eventHandlers: {
+            /* eventHandlers: {
                 'Open URL': (eventData) => {
                     // Custom URL handling for AI animation, URL is defined in the Rive file
                     console.log('AI animation URL event:', eventData.url);
                     window.open(eventData.url, '_blank', 'noopener,noreferrer');
                 }
-            }
+            } */
         });
 
         // Add additional Rive animations by calling createRiveAnimation() with your config