docs: refresh landing terminal demo and apply NVIDIA fern theme

docs/_components/BadgeLinks.tsx

@@ -1,9 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
 /**
- * Badge links for GitHub, License, PyPI, etc.
+ * Badge links for GitHub, License, project status, Discord, etc.
  * Uses a flex wrapper to display badges horizontally and hides Fern's
  * external-link icon that otherwise stacks under each badge image.
  * Requires the `.badge-links` CSS rule from main.css.
  */
+declare const React: unknown;
+
 export type BadgeItem = {
   href: string;
   src: string;
@@ -15,10 +22,37 @@ export function BadgeLinks({ badges = [] }: { badges?: BadgeItem[] }) {
     return null;
   }
   return (
-    <div className="badge-links">
+    <div
+      className="badge-links"
+      style={{
+        alignItems: "center",
+        display: "flex",
+        flexWrap: "wrap",
+        gap: "8px",
+        lineHeight: 0,
+        margin: "0.25rem 0 0.75rem",
+      }}
+    >
       {badges.map((b) => (
-        <a key={b.href} href={b.href} target="_blank" rel="noreferrer">
-          <img src={b.src} alt={b.alt} />
+        <a
+          key={b.href}
+          href={b.href}
+          target="_blank"
+          rel="noreferrer"
+          style={{
+            alignItems: "center",
+            display: "inline-flex",
+            width: "auto",
+          }}
+        >
+          <img
+            src={b.src}
+            alt={b.alt}
+            style={{
+              display: "block",
+              margin: 0,
+            }}
+          />
         </a>
       ))}
     </div>

docs/_components/CommandTerminal.tsx

@@ -0,0 +1,130 @@
+/*
+ * SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+declare const React: unknown;
+
+const rotatingAgents = ["", "claude", "opencode", "codex"];
+
+export function CommandTerminal({ command }: { command: string }) {
+  return (
+    <div
+      style={{
+        background: "#1a1a2e",
+        borderRadius: "8px",
+        boxShadow: "0 4px 16px rgb(0 0 0 / 25%)",
+        fontFamily:
+          '"SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+        fontSize: "0.875rem",
+        lineHeight: 1.8,
+        margin: "1.5rem 0",
+        overflow: "hidden",
+      }}
+    >
+      <style>{`
+        @keyframes nc-cycle {
+          0%,
+          20% {
+            opacity: 1;
+          }
+          25%,
+          100% {
+            opacity: 0;
+          }
+        }
+
+        @keyframes nc-blink {
+          50% {
+            opacity: 0;
+          }
+        }
+      `}</style>
+      <div
+        style={{
+          alignItems: "center",
+          background: "#252545",
+          display: "flex",
+          gap: "7px",
+          padding: "10px 14px",
+        }}
+      >
+        <span style={dotStyle("#ff5f56")} />
+        <span style={dotStyle("#ffbd2e")} />
+        <span style={dotStyle("#27c93f")} />
+      </div>
+      <div
+        style={{
+          color: "#d4d4d8",
+          display: "grid",
+          gridTemplateRows: "repeat(2, 1.8em)",
+          overflowX: "auto",
+          padding: "16px 20px",
+        }}
+      >
+        <div style={{ minWidth: "max-content", whiteSpace: "nowrap" }}>
+          <span style={{ color: "#76B900", userSelect: "none" }}>$ </span>
+          <span>{command}</span>
+        </div>
+        <div style={{ minWidth: "max-content", whiteSpace: "nowrap" }}>
+          <span style={{ color: "#76B900", userSelect: "none" }}>$ </span>
+          <span>{"openshell sandbox create "}</span>
+          <span
+            style={{
+              display: "inline-block",
+              height: "1.8em",
+              minWidth: "12ch",
+              overflow: "hidden",
+              position: "relative",
+              verticalAlign: "top",
+            }}
+          >
+            {rotatingAgents.map((agent, index) => (
+              <span
+                key={agent}
+                style={{
+                  animation: "nc-cycle 12s ease-in-out infinite",
+                  animationDelay: `${index * 3}s`,
+                  inset: "0 auto auto 0",
+                  opacity: 0,
+                  position: "absolute",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {agent !== "" && (
+                  <span>
+                    {"-- "}
+                    <span style={{ color: "#76B900", fontWeight: 600 }}>
+                      {agent}
+                    </span>
+                    <span
+                      style={{
+                        animation: "nc-blink 1s step-end infinite",
+                        background: "#d4d4d8",
+                        display: "inline-block",
+                        height: "1.1em",
+                        marginLeft: "1px",
+                        verticalAlign: "text-bottom",
+                        width: "2px",
+                      }}
+                    />
+                  </span>
+                )}
+              </span>
+            ))}
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function dotStyle(background: string) {
+  return {
+    background,
+    borderRadius: "50%",
+    display: "inline-block",
+    height: "12px",
+    width: "12px",
+  };
+}

docs/_components/jsx.d.ts

@@ -0,0 +1 @@
+declare const React: unknown;

docs/index.mdx

@@ -8,6 +8,7 @@ position: 1
 ---
 
 import { BadgeLinks } from "./_components/BadgeLinks";
+import { CommandTerminal } from "./_components/CommandTerminal";
 
 <BadgeLinks
   badges={[
@@ -38,49 +39,9 @@ uncontrolled network activity.
 
 Install OpenShell and create your first sandbox in two commands.
 
-{/*Terminal demo styles live in fern/main.css. Inline <style> with { } breaks MDX/acorn*/}
 <llms-ignore>
 
-<div className="nc-term">
-  <div className="nc-term-bar">
-    <span className="nc-term-dot nc-term-dot-r" />
-    <span className="nc-term-dot nc-term-dot-y" />
-    <span className="nc-term-dot nc-term-dot-g" />
-  </div>
-  <div className="nc-term-body">
-    <div>
-      <span className="nc-ps">$ </span>
-      <span>
-        {
-          "curl -LsSf https://raw.githubusercontent.com/NVIDIA/OpenShell/main/install.sh | sh"
-        }
-      </span>
-    </div>
-    <div>
-      <span className="nc-ps">$ </span>
-      <span>{"openshell sandbox create "}</span>
-      <span className="nc-swap">
-        <span>
-          {"-- "}
-          <span className="nc-hl">claude</span>
-          <span className="nc-cursor" />
-        </span>
-        <span>
-          {"-- "}
-          <span className="nc-hl">opencode</span>
-          <span className="nc-cursor" />
-        </span>
-        <span>
-          {"-- "}
-          <span className="nc-hl">
-            codex
-            <span className="nc-cursor" />
-          </span>
-        </span>
-      </span>
-    </div>
-  </div>
-</div>
+<CommandTerminal command="curl -LsSf https://raw.githubusercontent.com/NVIDIA/OpenShell/main/install.sh | sh" />
 
 </llms-ignore>
 

fern/docs.yml

@@ -6,9 +6,12 @@
 instances:
   - url: openshell.docs.buildwithfern.com/openshell
     custom-domain: docs.nvidia.com/openshell
+    multi-source: true
 
 title: NVIDIA OpenShell
 
+global-theme: nvidia
+
 announcement:
   message: "🔔 NVIDIA OpenShell is <strong>alpha software</strong>. APIs and behavior may change without notice. Do not use in production."
 
@@ -43,10 +46,6 @@ logo:
 
 favicon: ./assets/NVIDIA_symbol.svg
 
-js:
-  - url: https://assets.adobedtm.com/5d4962a43b79/c1061d2c5e7b/launch-191c2462b890.min.js
-    strategy: beforeInteractive
-
 css:
   - ./main.css
 
@@ -57,7 +56,7 @@ navbar-links:
 experimental:
   mdx-components:
     - ../docs/_components
-  basepath-aware: true
+    - ./components
 
 versions:
   - display-name: Latest

fern/fern.config.json

@@ -1,4 +1,4 @@
 {
   "organization": "nvidia",
-  "version": "5.23.3"
+  "version": "5.40.0"
 }