diff --git a/src/collections/sistent/components/terminal/code.mdx b/src/collections/sistent/components/terminal/code.mdx new file mode 100644 index 00000000000000..9e640f4bcd3d30 --- /dev/null +++ b/src/collections/sistent/components/terminal/code.mdx @@ -0,0 +1,145 @@ +--- +title: Terminal Code +component: terminal +description: Terminal is a styled console window component used to display command-line output, code snippets, and log-style text in a familiar terminal-like interface. + +--- + +Terminal displays static, pre-defined lines of text in a console-style window. It is composed of a title bar and a scrollable content area. + + +

Basic Terminal

+ + +A simple terminal with a title and a few lines of output. + +
+
+ +
+ +
+ +
+ + + `} /> +
+ + +

Terminal without Title

+ + +The `title` prop is optional and can be omitted when no additional context is needed. + +
+
+ +
+ +
+ +
+ + + `} /> +
+ + +

Indented Output

+ + +Use the `indent` property on individual lines to represent nested or hierarchical output, such as a file tree. + +
+
+ +
+ +
+ +
+ + + `} /> +
+ + +

Compact Lines

+ + +Setting `short` on a line reduces its line height, useful for displaying denser output such as multi-line logs. + +
+
+ + +
+ +
+ +
+ + + `} /> +
diff --git a/src/collections/sistent/components/terminal/guidance.mdx b/src/collections/sistent/components/terminal/guidance.mdx new file mode 100644 index 00000000000000..9136bc1bbc37f4 --- /dev/null +++ b/src/collections/sistent/components/terminal/guidance.mdx @@ -0,0 +1,53 @@ +--- +title: Terminal Guidance +component: terminal +description: Terminal is a styled console window component used to display command-line output, code snippets, and log-style text in a familiar terminal-like interface. + +--- + +Terminal is a presentational component for displaying static, pre-defined text content in a console-like visual format. It does not execute commands or accept live input — it is intended purely for showing CLI output, code, or log-style content within a page. + + +

When to Use

+ + +Use Terminal when you need to visually communicate: + +- Installation or setup commands and their expected output +- Example CLI usage in documentation +- Static log excerpts or console output snippets +- Code or command sequences that benefit from a console-style presentation for clarity + +Avoid using Terminal to simulate an interactive shell, as it does not support user input, command execution, or live streaming of data. For those use cases, a dedicated interactive console component should be used instead. + + +

Content Formatting

+ + +

Lines

+ +Content is passed as an array of line objects, where each line has a `code` string representing the text to display. Keep individual lines concise so they remain readable within the fixed-width terminal window, and break longer output into multiple lines rather than relying on wrapping. + +

Color

+ +Each line can be assigned a custom `color` to differentiate between types of output — for example, using a distinct color for commands versus their results, or to highlight errors, warnings, and success messages. Maintain a consistent color convention across a project (e.g., always using the same color for errors) so users can quickly scan and interpret output. + +

Indentation

+ +The `indent` property can be used to visually nest lines, which is useful for representing hierarchical output such as file trees, nested command results, or grouped log entries. + +

Line Height

+ +Setting `short` on a line reduces its line height, which can help fit denser output (such as multi-line logs) into a more compact vertical space. + + +

Titling

+ + +The optional `title` prop should be used to give context to the terminal window, such as the shell type (e.g. "bash", "zsh"), a filename, or the purpose of the shown output. Omitting the title is acceptable when the surrounding content already makes the context clear. + + +

Themes

+ + +Terminal uses a fixed dark background for its content area regardless of the surrounding page theme, preserving the familiar look of a console window in both light and dark mode contexts. Text color within the terminal defaults to the theme's info color but can be overridden per line as needed. diff --git a/src/collections/sistent/components/terminal/index.mdx b/src/collections/sistent/components/terminal/index.mdx new file mode 100644 index 00000000000000..1c63a093e5113e --- /dev/null +++ b/src/collections/sistent/components/terminal/index.mdx @@ -0,0 +1,50 @@ +--- +name: "Terminal" +title: Terminal +published: true +component: terminal +description: Terminal is a styled console window component used to display command-line output, code snippets, and log-style text in a familiar terminal-like interface. +--- + +Terminal renders a stylized, macOS-style console window used to present command-line output, logs, or code snippets in a visually familiar way. It displays a title bar with window controls and a dark, monospaced content area, making it useful for illustrating CLI usage, showing command output, or presenting log excerpts within documentation and product interfaces. + + +

Structure

+ + +The Terminal component consists of two main parts: + +

Title Bar

+ +The title bar sits at the top of the terminal window and displays three window control dots (styled to evoke the familiar red, yellow, and green window controls) along with an optional title text, such as a filename or command context. + +

Content Area

+ +Below the title bar, the content area renders a set of lines in a monospaced font against a dark background, similar to a real terminal or console output. + + +

Basic Usage

+ + +Terminal accepts an array of lines to render, where each line can be individually styled with color and indentation. + + + +
+ +
+ + + + +

Scroll Behavior

+ + +By default, the content area is scrollable when the number of lines exceeds the visible height. Setting the `noScroll` prop disables this scrolling behavior, allowing the content to expand or be clipped without a scrollbar. diff --git a/src/templates/sistent-component.js b/src/templates/sistent-component.js index 7cfb70a33de265..8144bfcf7b325b 100644 --- a/src/templates/sistent-component.js +++ b/src/templates/sistent-component.js @@ -8,6 +8,8 @@ import { SistentLayout } from "../sections/Projects/Sistent/sistent-layout"; import TabButton from "../reusecore/Button"; import { Col, Row } from "../reusecore/Layout"; import CodeBlock from "../components/CodeBlock"; +import { SistentThemeProvider, Button, Terminal } from "@sistent/sistent"; +import { useStyledDarkMode } from "../theme/app/useStyledDarkMode"; import { SistentThemeProvider, Button } from "@sistent/sistent"; import ThemeWrapper from "../sections/Projects/Sistent/theme-wrapper"; import SEO from "../components/seo"; @@ -22,6 +24,11 @@ const shortcodes = { SistentThemeProvider, ThemeWrapper, Button, + Terminal, + Col, + Row, + CodeBlock, + FaArrowRight Col, Row, CodeBlock, @@ -74,6 +81,9 @@ const SistentComponentTemplate = ({ data, children, pageContext }) => { )} +
+ {children} +
{children}