@sp-days-framework/docusaurus-frontpage-collection 1.0.4 → 1.1.0-beta1

package/docs/terminal.mdx

@@ -0,0 +1,332 @@
+---
+sidebar_label: "Terminal"
+sidebar_position: 2.9
+sidebar_custom_props:
+  section: "Components"
+  section_position: 2
+---
+
+import { Terminal, TerminalCommand } from "@sp-days-framework/docusaurus-frontpage-collection";
+
+# Terminal
+
+A Terminal UI component that provides a styled terminal window to display CLI output. Visually differentiates expected command outputs from copyable code snippets, making documentation clearer for users following CLI tutorials and instructions.
+
+<div style={{ position: 'relative', marginTop: '2rem', display: 'flex', justifyContent: 'center' }}>
+  <div style={{ position: 'absolute', left: '50%', marginTop: '4px', transform: 'translateX(-50%)', fontWeight: 500, color: 'var(--ifm-color-emphasis-600)' }}>
+    Preview
+  </div>
+  <div style={{ borderRadius: '12px', padding: '1rem 2rem', background: 'var(--ifm-color-emphasis-200)' }}>
+    <Terminal user="ubuntu" directory="~/" command="echo 'Hello, World!'">
+      Hello, World!
+    </Terminal>
+  </div>
+</div>
+
+## Features
+
+- **Terminal Window Style** - Resembles a bash terminal with decorative header
+- **Flexible Prompt** - Customize user, host, directory in the prompt
+- **Theme Support** - Automatic light/dark mode with customizable colors
+- **Command Display** - Show single-line or multi-line commands
+- **Color Support** - Inline color tags for terminal output (red, green, cyan, etc.)
+- **Collapsible** - Collapse/expand terminal content with smooth animation
+
+### When to Use
+
+- Showing expected CLI output in tutorials
+- Demonstrating command results
+- Differentiating output from copyable code blocks
+- Creating realistic terminal examples
+
+## Import
+
+```mdx
+import { Terminal, TerminalCommand } from "@sp-days-framework/docusaurus-frontpage-collection";
+```
+
+## Basic Usage
+
+```mdx
+<Terminal>
+  Hello, World!
+</Terminal>
+```
+
+<Terminal>
+  Hello, World!
+</Terminal>
+
+## Props
+
+### Terminal
+
+| Prop         | Type              | Default    | Description                                    |
+| ------------ | ----------------- | ---------- | ---------------------------------------------- |
+| `user`       | `string`          | -          | Username to display in the prompt              |
+| `host`       | `string`          | -          | Hostname to display in the prompt              |
+| `directory`  | `string`          | -          | Directory/path to display in the prompt        |
+| `command`    | `string`          | -          | Command to display (ignored if TerminalCommand is used) |
+| `hideHeader` | `boolean`         | `false`    | Hide the terminal header (dots and controls)   |
+| `maxHeight`  | `string`          | `"500px"`  | Maximum height before scrolling                |
+
+## Examples
+
+### Simple Output
+
+Display basic terminal output without a prompt:
+
+```mdx
+<Terminal>
+  npm install @sp-days-framework/docusaurus-frontpage-collection
+</Terminal>
+```
+
+<Terminal>
+  npm install @sp-days-framework/docusaurus-frontpage-collection
+</Terminal>
+
+### With User and Directory
+
+Show a prompt with username and directory:
+
+```mdx
+<Terminal user="ubuntu" directory="~/">
+  Welcome to Ubuntu 24.04 LTS
+</Terminal>
+```
+
+<Terminal user="ubuntu" directory="~/">
+  Welcome to Ubuntu 24.04 LTS
+</Terminal>
+
+### With User, Host, and Directory
+
+Full prompt with user, host, and directory:
+
+```mdx
+<Terminal user="developer" host="localhost" directory="~/projects">
+  Project initialized successfully!
+</Terminal>
+```
+
+<Terminal user="developer" host="localhost" directory="~/projects">
+  Project initialized successfully!
+</Terminal>
+
+### With Single-Line Command
+
+Display a single-line command in the prompt:
+
+```mdx
+<Terminal user="ubuntu" directory="~/" command="ls -la">
+  total 128
+  drwxr-xr-x  12 user group  4096 Nov 28 10:30 .
+  drwxr-xr-x   8 user group  4096 Nov 27 15:20 ..
+  -rw-r--r--   1 user group   220 Nov 20 09:15 .bashrc
+</Terminal>
+```
+
+<Terminal user="ubuntu" directory="~/" command="ls -la">
+  total 128
+  drwxr-xr-x  12 user group  4096 Nov 28 10:30 .
+  drwxr-xr-x   8 user group  4096 Nov 27 15:20 ..
+  -rw-r--r--   1 user group   220 Nov 20 09:15 .bashrc
+</Terminal>
+
+### With Multi-Line Command
+
+Use `TerminalCommand` for multi-line commands:
+
+```mdx
+<Terminal user="ubuntu" directory="~/app">
+  <TerminalCommand>
+    docker run &#92;
+      -v /data:/data &#92;
+      -p 8080:80 &#92;
+      nginx
+  </TerminalCommand>
+  Unable to find image 'nginx:latest' locally
+  latest: Pulling from library/nginx
+  Status: Downloaded newer image for nginx:latest
+</Terminal>
+```
+
+<Terminal user="ubuntu" directory="~/app">
+  <TerminalCommand>
+    docker run &#92;
+      -v /data:/data &#92;
+      -p 8080:80 &#92;
+      nginx
+  </TerminalCommand>
+  Unable to find image 'nginx:latest' locally
+  latest: Pulling from library/nginx
+  Status: Downloaded newer image for nginx:latest
+</Terminal>
+
+:::tip Escaping Backslashes
+When displaying multi-line commands with line continuation (`\`), you need to escape the backslash in MDX using the HTML entity `&#92;` to ensure it renders correctly. MDX may otherwise interpret `\` as an escape character.
+
+**Example:**
+```mdx
+<TerminalCommand>
+  docker run &#92;
+    --name mycontainer &#92;
+    nginx
+</TerminalCommand>
+```
+:::
+
+### With Colored Output
+
+Terminal output supports the following inline color tags:
+
+```mdx
+<Terminal>
+  <red>Red text</red>
+  <green>Green text</green>
+  <yellow>Yellow text</yellow>
+  <blue>Blue text</blue>
+  <magenta>Magenta text</magenta>
+  <cyan>Cyan text</cyan>
+  <white>White text</white>
+  <gray>Gray text</gray>
+  <bold>Bold text</bold>
+</Terminal>
+```
+
+<Terminal>
+  <red>Red text</red>
+  <green>Green text</green>
+  <yellow>Yellow text</yellow>
+  <blue>Blue text</blue>
+  <magenta>Magenta text</magenta>
+  <cyan>Cyan text</cyan>
+  <white>White text</white>
+  <gray>Gray text</gray>
+  <bold>Bold text</bold>
+</Terminal>
+
+#### Status Output
+
+Add visual interest using inline color tags:
+
+```mdx
+<Terminal user="developer" directory="~/" command="docker ps">
+  CONTAINER ID   IMAGE     COMMAND   CREATED      STATUS       PORTS      NAMES
+  <cyan>a1b2c3d4e5f6</cyan>   <green>nginx</green>     "nginx"   <yellow>2 hours</yellow>      <green>Up 2hr</green>       80/tcp     webserver
+  <cyan>f6e5d4c3b2a1</cyan>   <green>redis</green>     "redis"   <yellow>3 hours</yellow>      <green>Up 3hr</green>       6379/tcp   cache
+</Terminal>
+```
+
+<Terminal user="developer" directory="~/" command="docker ps">
+  CONTAINER ID   IMAGE     COMMAND   CREATED      STATUS       PORTS      NAMES
+  <cyan>a1b2c3d4e5f6</cyan>   <green>nginx</green>     "nginx"   <yellow>2 hours</yellow>      <green>Up 2hr</green>       80/tcp     webserver
+  <cyan>f6e5d4c3b2a1</cyan>   <green>redis</green>     "redis"   <yellow>3 hours</yellow>      <green>Up 3hr</green>       6379/tcp   cache
+</Terminal>
+
+#### Error Output
+
+Show error messages with red color:
+
+```mdx
+<Terminal user="ubuntu" directory="~/" command="npm start">
+  <red>Error: Cannot find module 'express'</red>
+    <gray>at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)</gray>
+    <gray>at Function.Module._load (internal/modules/cjs/loader.js:725:27)</gray>
+</Terminal>
+```
+
+<Terminal user="ubuntu" directory="~/" command="npm start">
+  <red>Error: Cannot find module 'express'</red>
+    <gray>at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)</gray>
+    <gray>at Function.Module._load (internal/modules/cjs/loader.js:725:27)</gray>
+</Terminal>
+
+#### Success Output
+
+Show success messages with green color:
+
+```mdx
+<Terminal user="root" directory="/opt/app" command="systemctl status nginx">
+  ● nginx.service - A high performance web server
+     Loaded: loaded (/lib/systemd/system/nginx.service; enabled)
+     Active: <green><bold>active (running)</bold></green> since Thu 2024-11-28 10:00:00 UTC; 2h 30min ago
+</Terminal>
+```
+
+<Terminal user="root" directory="/opt/app" command="systemctl status nginx">
+  ● nginx.service - A high performance web server
+     Loaded: loaded (/lib/systemd/system/nginx.service; enabled)
+     Active: <green><bold>active (running)</bold></green> since Thu 2024-11-28 10:00:00 UTC; 2h 30min ago
+</Terminal>
+
+### Long Output with Scrolling
+
+Control maximum height for long outputs:
+
+```mdx
+<Terminal user="root" directory="/var/log/" command="cat syslog" maxHeight="200px">
+  Nov 28 10:00:01 server systemd[1]: Started Session 123
+  Nov 28 10:00:05 server sshd[4567]: Accepted publickey for admin
+  Nov 28 10:01:00 server CRON[5678]: (root) CMD (run-parts /etc/cron.hourly)
+  Nov 28 10:02:15 server systemd[1]: Starting Daily apt download activities...
+  Nov 28 10:02:16 server systemd[1]: Started Daily apt download activities.
+  {/* Many more lines... */}
+</Terminal>
+```
+
+<Terminal user="root" directory="/var/log/" command="cat syslog" maxHeight="200px">
+  Nov 28 10:00:01 server systemd[1]: Started Session 123
+  Nov 28 10:00:05 server sshd[4567]: Accepted publickey for admin
+  Nov 28 10:01:00 server CRON[5678]: (root) CMD (run-parts /etc/cron.hourly)
+  Nov 28 10:02:15 server systemd[1]: Starting Daily apt download activities...
+  Nov 28 10:02:16 server systemd[1]: Started Daily apt download activities.
+  Nov 28 10:03:00 server CRON[5679]: (root) CMD (run-parts /etc/cron.hourly)
+  Nov 28 10:04:00 server CRON[5680]: (root) CMD (run-parts /etc/cron.hourly)
+  Nov 28 10:05:00 server CRON[5681]: (root) CMD (run-parts /etc/cron.hourly)
+  Nov 28 10:06:00 server CRON[5682]: (root) CMD (run-parts /etc/cron.hourly)
+  Nov 28 10:07:00 server CRON[5683]: (root) CMD (run-parts /etc/cron.hourly)
+</Terminal>
+
+### Hide Header
+
+If you don't need the interactive controls, hide the entire header:
+
+```mdx
+<Terminal hideHeader>
+  Output without header controls
+</Terminal>
+```
+
+<Terminal hideHeader>
+  Output without header controls
+</Terminal>
+
+## Customization
+
+### Override Terminal Colors
+
+Customize terminal colors in your Docusaurus `custom.css`:
+
+```css
+:root {
+  --terminal-bg: #fafafa;
+  --terminal-text: #222;
+  --terminal-green: #00aa00;
+  --terminal-red: #cc0000;
+}
+```
+
+### Custom Styling
+
+Apply custom styles via props:
+
+```mdx
+<Terminal 
+  className="my-custom-terminal"
+  style={{ maxWidth: '800px', margin: '2rem auto' }}
+>
+  Custom styled terminal
+</Terminal>
+```

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@sp-days-framework/docusaurus-frontpage-collection",
-  "version": "1.0.4",
+  "version": "1.1.0-beta1",
   "description": "A collection of Docusaurus frontpage UI components.",
   "repository": {
     "type": "git",
-    "url": "https://github.com/helse-sorost/sp-days-framework",
+    "url": "git+https://github.com/helse-sorost/sp-days-framework.git",
     "directory": "docusaurus-frontpage-collection"
   },
   "author": "SP-Days Framework",
@@ -21,6 +21,8 @@
   "types": "lib/index.d.ts",
   "files": [
     "lib/**/*",
+    "docs/**/*",
+    "publish-package-docs.js",
     "README.md",
     "LICENSE"
   ],
@@ -31,7 +33,8 @@
       "types": "./lib/index.d.ts"
     },
     "./lib/components*": "./lib/components/*",
-    "./lib/plugin/*": "./lib/plugin/*"
+    "./lib/plugin/*": "./lib/plugin/*",
+    "./publish-package-docs": "./publish-package-docs.js"
   },
   "publishConfig": {
     "access": "public"

package/publish-package-docs.js

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) Sykehuspartner HF
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+module.exports = {
+  id: 'frontpage-collection-docs',
+  path: require('path').join(__dirname, 'docs'),
+  routeBasePath: 'package-docs/frontpage-collection',
+};