trending/OpenShell
1
0
Fork 0
mirror of https://github.com/NVIDIA/OpenShell.git synced 2026-10-02 07:34:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs: refresh landing terminal demo and apply NVIDIA fern theme (#1615)

Browse Source 
- Extract landing-page terminal demo into a reusable <CommandTerminal />
  component with inline styles (no global CSS dependency)
- Animate a second command line cycling through claude/opencode/codex
  via @keyframes scoped inside the component
- Inline BadgeLinks layout styles so the component renders correctly
  without relying on .badge-links from main.css
- Add jsx.d.ts shim so editors do not flag the React global in component
  TSX files
- Switch fern instance to global-theme: nvidia with multi-source enabled
- Bump fern CLI to 5.40.0 and drop the basepath-aware experimental flag
- Register fern/components/ as a second mdx-components directory
- Remove the unused Adobe analytics script tag
This commit is contained in:
Andrew Schilling
2026-05-28 13:44:02 -07:00
committed by GitHub
parent 6c7950da90
commit 63e3a8fb69
6 changed files with 176 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/_components/BadgeLinks.tsx
+38 -4
View File
@@ -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
+130
View File
@@ -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
Vendored
+1
View File
@@ -0,0 +1 @@
declare const React: unknown;
docs/index.mdx
+2 -41
View File
@@ -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
+4 -5
View File
@@ -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 -1
View File
@@ -1,4 +1,4 @@
{
"organization": "nvidia",
"version": "5.23.3"
"version": "5.40.0"
}