[Sistent] Add Terminal component to the Sistent components page

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.
+
+<a id="Basic Terminal">
+  <h2>Basic Terminal</h2>
+</a>
+
+A simple terminal with a title and a few lines of output.
+
+<div className="showcase">
+  <div className="items">
+    <ThemeWrapper>
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <Terminal
+          title="bash"
+          lines={[
+            { code: '$ npm install @sistent/sistent' },
+            { code: 'Installing dependencies...', color: '#66a2ff' },
+            { code: 'Done in 2.3s', color: '#4caf50' }
+          ]}
+        />
+      </div>
+    </ThemeWrapper>
+  </div>
+  <CodeBlock name="basic-terminal" collapsible code={`  <SistentThemeProvider>
+       <Terminal
+         title="bash"
+         lines={[
+           { code: '$ npm install @sistent/sistent' },
+           { code: 'Installing dependencies...', color: '#66a2ff' },
+           { code: 'Done in 2.3s', color: '#4caf50' }
+         ]}
+       />
+  </SistentThemeProvider>`} />
+</div>
+
+<a id="Terminal without Title">
+  <h2>Terminal without Title</h2>
+</a>
+
+The `title` prop is optional and can be omitted when no additional context is needed.
+
+<div className="showcase">
+  <div className="items">
+    <ThemeWrapper>
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <Terminal
+          lines={[
+            { code: '$ git status' },
+            { code: 'On branch master', color: '#bdbec2' },
+            { code: 'nothing to commit, working tree clean', color: '#4caf50' }
+          ]}
+        />
+      </div>
+    </ThemeWrapper>
+  </div>
+  <CodeBlock name="terminal-no-title" collapsible code={`  <SistentThemeProvider>
+       <Terminal
+         lines={[
+           { code: '$ git status' },
+           { code: 'On branch master', color: '#bdbec2' },
+           { code: 'nothing to commit, working tree clean', color: '#4caf50' }
+         ]}
+       />
+  </SistentThemeProvider>`} />
+</div>
+
+<a id="Indented Output">
+  <h2>Indented Output</h2>
+</a>
+
+Use the `indent` property on individual lines to represent nested or hierarchical output, such as a file tree.
+
+<div className="showcase">
+  <div className="items">
+    <ThemeWrapper>
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <Terminal
+          title="file tree"
+          lines={[
+            { code: 'src/' },
+            { code: 'components/', indent: 1 },
+            { code: 'Terminal.tsx', indent: 2 },
+            { code: 'index.ts', indent: 2 }
+          ]}
+        />
+      </div>
+    </ThemeWrapper>
+  </div>
+  <CodeBlock name="terminal-indented" collapsible code={`  <SistentThemeProvider>
+       <Terminal
+         title="file tree"
+         lines={[
+           { code: 'src/' },
+           { code: 'components/', indent: 1 },
+           { code: 'Terminal.tsx', indent: 2 },
+           { code: 'index.ts', indent: 2 }
+         ]}
+       />
+  </SistentThemeProvider>`} />
+</div>
+
+<a id="Compact Lines">
+  <h2>Compact Lines</h2>
+</a>
+
+Setting `short` on a line reduces its line height, useful for displaying denser output such as multi-line logs.
+
+<div className="showcase">
+  <div className="items">
+    <ThemeWrapper>
+
+      <div style={{ display: 'flex', justifyContent: 'center' }}>
+        <Terminal
+          title="logs"
+          noScroll
+          lines={[
+            { code: '[INFO] Starting server...', short: true },
+            { code: '[INFO] Listening on port 3000', short: true },
+            { code: '[WARN] No .env file found', short: true, color: '#e2b93b' },
+            { code: '[INFO] Ready', short: true, color: '#4caf50' }
+          ]}
+        />
+      </div>
+    </ThemeWrapper>
+  </div>
+  <CodeBlock name="terminal-compact" collapsible code={`  <SistentThemeProvider>
+       <Terminal
+         title="logs"
+         noScroll
+         lines={[
+           { code: '[INFO] Starting server...', short: true },
+           { code: '[INFO] Listening on port 3000', short: true },
+           { code: '[WARN] No .env file found', short: true, color: '#e2b93b' },
+           { code: '[INFO] Ready', short: true, color: '#4caf50' }
+         ]}
+       />
+  </SistentThemeProvider>`} />
+</div>

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.
+
+<a id="When to Use">
+  <h2>When to Use</h2>
+</a>
+
+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.
+
+<a id="Content Formatting">
+  <h2>Content Formatting</h2>
+</a>
+
+<h3>Lines</h3>
+
+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.
+
+<h3>Color</h3>
+
+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.
+
+<h3>Indentation</h3>
+
+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.
+
+<h3>Line Height</h3>
+
+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.
+
+<a id="Titling">
+  <h2>Titling</h2>
+</a>
+
+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.
+
+<a id="Themes">
+  <h2>Themes</h2>
+</a>
+
+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.

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.
+
+<a id="Structure">
+  <h2>Structure</h2>
+</a>
+
+The Terminal component consists of two main parts:
+
+<h3>Title Bar</h3>
+
+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.
+
+<h3>Content Area</h3>
+
+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.
+
+<a id="Basic Usage">
+  <h2>Basic Usage</h2>
+</a>
+
+Terminal accepts an array of lines to render, where each line can be individually styled with color and indentation.
+
+<Row className="image-container">
+  <ThemeWrapper>
+    <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+      <Terminal
+        title="bash"
+        lines={[
+          { code: '$ npm install @sistent/sistent' },
+          { code: 'Installing dependencies...', color: '#66a2ff' },
+          { code: 'Done in 2.3s', color: '#4caf50' }
+        ]}
+      />
+    </div>
+  </ThemeWrapper>
+</Row>
+
+<a id="Scroll Behavior">
+  <h2>Scroll Behavior</h2>
+</a>
+
+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.

src/templates/sistent-component.js

@@ -8,18 +8,19 @@ 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 } from "@sistent/sistent";
+import { SistentThemeProvider, Button, Terminal } from "@sistent/sistent";
 import { useStyledDarkMode } from "../theme/app/useStyledDarkMode";
 import ThemeWrapper from "../sections/Projects/Sistent/theme-wrapper";
 
-const shortcodes = { 
+const shortcodes = {
   SistentThemeProvider,
   ThemeWrapper,
-  Button, 
-  Col, 
-  Row, 
+  Button,
+  Terminal,
+  Col,
+  Row,
   CodeBlock,
-  FaArrowRight 
+  FaArrowRight
 };
 
 const SistentComponentTemplate = ({ data, children, pageContext }) => {
@@ -40,11 +41,11 @@ const SistentComponentTemplate = ({ data, children, pageContext }) => {
     <SistentLayout title={displayName}>
       <div className="content">
         <div style={{ marginBottom: "1rem" }}>
-           <h1>{displayName}</h1>
-           {frontmatter.description && <p>{frontmatter.description}</p>}
+          <h1>{displayName}</h1>
+          {frontmatter.description && <p>{frontmatter.description}</p>}
         </div>
         <MDXProvider components={shortcodes}>
-           <div className="filterBtns">
+          <div className="filterBtns">
             {availablePages.includes("overview") && (
               <TabButton
                 className={location.pathname === baseUrl ? "active" : ""}
@@ -67,7 +68,7 @@ const SistentComponentTemplate = ({ data, children, pageContext }) => {
               />
             )}
           </div>
-          
+
           <div className="main-content">
             {children}
           </div>