@sp-days-framework/docusaurus-frontpage-collection 1.1.0-beta2 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -4,7 +4,7 @@ A collection of React components for Docusaurus with TypeScript support and flex
4
4
 
5
5
  ## Features
6
6
 
7
- - **Rich Component Library**: 8 polished components including HeroBanner, Columns, CourseFeature, Iconify, and more
7
+ - **Rich Component Library**: 7 polished components including HeroBanner, Columns, CourseFeature, Iconify, and more
8
8
  - **Flexible Icon System**: Supports both Iconify's 200,000+ icons and custom themed images
9
9
  - **Interactive Effects**: Engaging animations like the dot cross grid in HeroBanner
10
10
  - **Full TypeScript Support**: Complete type definitions for all components and props
@@ -19,43 +19,32 @@ All packages within `@sp-days-framework` use the same version number. In some ca
19
19
 
20
20
  ---
21
21
 
22
- ## Version 1.1.0-beta2 ![beta](https://img.shields.io/badge/release-beta-yellow)
22
+ ## Version 1.1.0 ![Release](https://img.shields.io/badge/release-production-blue)
23
23
 
24
- Documentation improvements and visual refinements
24
+ Terminal component deprecated and documentation improvements
25
25
 
26
26
  <details>
27
- <summary><strong>Beta Details</strong> (2025 December 09)</summary>
27
+ <summary><strong>Details</strong> (2026 January 07)</summary>
28
28
 
29
- ### Improvements
30
-
31
- - **Visual Consistency**: Improved sidebar and navbar logo handling for better branding support
29
+ ### Breaking Changes
32
30
 
33
- </details>
34
-
35
- ---
31
+ - **Terminal Component Removed**: The `Terminal` component has been removed from this package and replaced with the dedicated [`@sp-days-framework/docusaurus-plugin-terminal-codeblock`](https://www.npmjs.com/package/@sp-days-framework/docusaurus-plugin-terminal-codeblock) plugin, which offers improved functionality and a better developer experience
36
32
 
37
- ## Version 1.1.0-beta1 ![beta](https://img.shields.io/badge/release-beta-yellow)
38
-
39
- Display beautiful command-line examples in your documentation
33
+ ### Improvements
40
34
 
41
- <details>
42
- <summary><strong>Beta Details</strong> (2025 December 08)</summary>
35
+ - **Edit URL Support**: Package documentation now includes "Edit this page" links that point to the correct source file in GitHub
36
+ - **Visual Consistency**: Improved sidebar and navbar logo handling for better branding support
37
+ - **Package Documentation**: Documentation is now bundled with the npm package, making it accessible during development and for offline reference
43
38
 
44
- ### New Features
39
+ ### Migration Guide
45
40
 
46
- - **Terminal Component**: Create realistic terminal output displays in your documentation
47
- - Perfect for showing command examples and expected outputs
48
- - Automatic theme support (matches your site's light/dark mode)
49
- - Customizable prompt text and colors
50
- - Browser window styling for a polished look
51
-
52
- :::warning Beta Feature
53
- This component is in beta and may be replaced with a dedicated terminal UI package in future releases.
54
- :::
41
+ If you were using the `Terminal` component from this package, install the new dedicated plugin:
55
42
 
56
- ### Package Documentation
43
+ ```bash
44
+ npm install @sp-days-framework/docusaurus-plugin-terminal-codeblock
45
+ ```
57
46
 
58
- - Documentation is now bundled with the npm package, making it accessible during development and for offline reference
47
+ See the [Terminal Codeblock Plugin documentation](https://www.npmjs.com/package/@sp-days-framework/docusaurus-plugin-terminal-codeblock) for usage details.
59
48
 
60
49
  </details>
61
50
 
package/docs/index.mdx CHANGED
@@ -86,4 +86,3 @@ See [Setup](./install.mdx) for installation and configuration.
86
86
  | [Hero Banner](./hero-banner.mdx) | `HeroBanner` | Full-width banner that displays at the top of your page |
87
87
  | [Icon Containers](./icon-containers.mdx) | `IconContainersSection` | Display icon containers in a responsive grid with icons and links |
88
88
  | [Simple Icon](./simple-icon.mdx) | `Iconify` | Add Iconify icons to your MDX pages and documentation with theme-aware colors |
89
- | [Terminal](./terminal.mdx) | `Terminal` | Terminal UI component for displaying CLI output with styled terminal windows |
package/lib/index.d.ts CHANGED
@@ -33,7 +33,4 @@ export type { IconContainersSectionProps, IconContainerBlockProps, } from "./com
33
33
  export { Iconify } from "./components/Iconify";
34
34
  export { default as IconifyDefault } from "./components/Iconify";
35
35
  export type { IconifyProps } from "./components/Iconify";
36
- export { Terminal, TerminalCommand } from "./components/Terminal";
37
- export { default as TerminalDefault } from "./components/Terminal";
38
- export type { TerminalProps, TerminalCommandProps } from "./components/Terminal";
39
36
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,uBAAuB,EACvB,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,aAAa,EACb,oBAAoB,GACrB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGhF,OAAO,EACL,aAAa,EACb,QAAQ,EACR,WAAW,GACZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,YAAY,EACV,kBAAkB,EAClB,aAAa,EACb,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACzE,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACvE,YAAY,EACV,eAAe,EACf,YAAY,EACZ,gBAAgB,GACjB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACvE,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,OAAO,EACL,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AACrF,YAAY,EACV,0BAA0B,EAC1B,uBAAuB,GACxB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAGzD,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACnE,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,uBAAuB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EACL,mBAAmB,EACnB,mBAAmB,EACnB,oBAAoB,GACrB,MAAM,mBAAmB,CAAC;AAC3B,YAAY,EACV,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,gBAAgB,EAChB,uBAAuB,EACvB,gBAAgB,EAChB,eAAe,EACf,YAAY,EACZ,aAAa,EACb,oBAAoB,GACrB,MAAM,eAAe,CAAC;AAGvB,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,YAAY,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGrD,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAGhF,OAAO,EACL,aAAa,EACb,QAAQ,EACR,WAAW,GACZ,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,YAAY,EACV,kBAAkB,EAClB,aAAa,EACb,gBAAgB,GACjB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACzE,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,OAAO,EAAE,UAAU,EAAE,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACvE,YAAY,EACV,eAAe,EACf,YAAY,EACZ,gBAAgB,GACjB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACvE,YAAY,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAG/D,OAAO,EACL,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,OAAO,IAAI,4BAA4B,EAAE,MAAM,4BAA4B,CAAC;AACrF,YAAY,EACV,0BAA0B,EAC1B,uBAAuB,GACxB,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC"}
package/lib/index.js CHANGED
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
9
9
  return (mod && mod.__esModule) ? mod : { "default": mod };
10
10
  };
11
11
  Object.defineProperty(exports, "__esModule", { value: true });
12
- exports.TerminalDefault = exports.TerminalCommand = exports.Terminal = exports.IconifyDefault = exports.Iconify = exports.IconContainersSectionDefault = exports.IconContainerBlock = exports.IconContainersSection = exports.HeroBannerDefault = exports.HeroBanner = exports.GetStartedDefault = exports.ExploreItem = exports.Explore = exports.GetStarted = exports.FancyHeaderDefault = exports.FancyHeader = exports.CourseFeatureDefault = exports.NotIncluded = exports.Included = exports.CourseFeature = exports.ColumnsDefault = exports.Right = exports.Left = exports.Columns = exports.BlockDefault = exports.Block = exports.DEFAULT_TITLE_COLORS = exports.DEFAULT_ICON_COLORS = exports.IMAGE_NOT_FOUND_SVG = exports.logInfo = exports.logError = exports.logWarn = exports.ThemedIcon = exports.IconifyIcon = void 0;
12
+ exports.IconifyDefault = exports.Iconify = exports.IconContainersSectionDefault = exports.IconContainerBlock = exports.IconContainersSection = exports.HeroBannerDefault = exports.HeroBanner = exports.GetStartedDefault = exports.ExploreItem = exports.Explore = exports.GetStarted = exports.FancyHeaderDefault = exports.FancyHeader = exports.CourseFeatureDefault = exports.NotIncluded = exports.Included = exports.CourseFeature = exports.ColumnsDefault = exports.Right = exports.Left = exports.Columns = exports.BlockDefault = exports.Block = exports.DEFAULT_TITLE_COLORS = exports.DEFAULT_ICON_COLORS = exports.IMAGE_NOT_FOUND_SVG = exports.logInfo = exports.logError = exports.logWarn = exports.ThemedIcon = exports.IconifyIcon = void 0;
13
13
  // Utility exports
14
14
  var IconifyIcon_1 = require("./utils/IconifyIcon");
15
15
  Object.defineProperty(exports, "IconifyIcon", { enumerable: true, get: function () { return IconifyIcon_1.IconifyIcon; } });
@@ -70,10 +70,4 @@ var Iconify_1 = require("./components/Iconify");
70
70
  Object.defineProperty(exports, "Iconify", { enumerable: true, get: function () { return Iconify_1.Iconify; } });
71
71
  var Iconify_2 = require("./components/Iconify");
72
72
  Object.defineProperty(exports, "IconifyDefault", { enumerable: true, get: function () { return __importDefault(Iconify_2).default; } });
73
- // Terminal component
74
- var Terminal_1 = require("./components/Terminal");
75
- Object.defineProperty(exports, "Terminal", { enumerable: true, get: function () { return Terminal_1.Terminal; } });
76
- Object.defineProperty(exports, "TerminalCommand", { enumerable: true, get: function () { return Terminal_1.TerminalCommand; } });
77
- var Terminal_2 = require("./components/Terminal");
78
- Object.defineProperty(exports, "TerminalDefault", { enumerable: true, get: function () { return __importDefault(Terminal_2).default; } });
79
73
  //# sourceMappingURL=index.js.map
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;;;;;;AAEH,kBAAkB;AAClB,mDAAkD;AAAzC,0GAAA,WAAW,OAAA;AACpB,iDAAgD;AAAvC,wGAAA,UAAU,OAAA;AACnB,yCAA4D;AAAnD,iGAAA,OAAO,OAAA;AAAE,kGAAA,QAAQ,OAAA;AAAE,iGAAA,OAAO,OAAA;AACnC,+CAI2B;AAHzB,gHAAA,mBAAmB,OAAA;AACnB,gHAAA,mBAAmB,OAAA;AACnB,iHAAA,oBAAoB,OAAA;AAgBtB,kBAAkB;AAClB,4CAA2C;AAAlC,8FAAA,KAAK,OAAA;AACd,4CAA6D;AAApD,sHAAA,OAAO,OAAgB;AAGhC,uCAAuC;AACvC,gDAA4D;AAAnD,kGAAA,OAAO,OAAA;AAAE,+FAAA,IAAI,OAAA;AAAE,gGAAA,KAAK,OAAA;AAC7B,gDAAiE;AAAxD,0HAAA,OAAO,OAAkB;AAGlC,6CAA6C;AAC7C,4DAIoC;AAHlC,8GAAA,aAAa,OAAA;AACb,yGAAA,QAAQ,OAAA;AACR,4GAAA,WAAW,OAAA;AAEb,4DAA6E;AAApE,sIAAA,OAAO,OAAwB;AAOxC,wBAAwB;AACxB,wDAAuD;AAA9C,0GAAA,WAAW,OAAA;AACpB,wDAAyE;AAAhE,kIAAA,OAAO,OAAsB;AAGtC,0CAA0C;AAC1C,sDAA2E;AAAlE,wGAAA,UAAU,OAAA;AAAE,qGAAA,OAAO,OAAA;AAAE,yGAAA,WAAW,OAAA;AACzC,sDAAuE;AAA9D,gIAAA,OAAO,OAAqB;AAOrC,uBAAuB;AACvB,sDAAqD;AAA5C,wGAAA,UAAU,OAAA;AACnB,sDAAuE;AAA9D,gIAAA,OAAO,OAAqB;AAGrC,qDAAqD;AACrD,4DAGoC;AAFlC,sHAAA,qBAAqB,OAAA;AACrB,mHAAA,kBAAkB,OAAA;AAEpB,4DAAqF;AAA5E,8IAAA,OAAO,OAAgC;AAMhD,oBAAoB;AACpB,gDAA+C;AAAtC,kGAAA,OAAO,OAAA;AAChB,gDAAiE;AAAxD,0HAAA,OAAO,OAAkB;AAGlC,qBAAqB;AACrB,kDAAkE;AAAzD,oGAAA,QAAQ,OAAA;AAAE,2GAAA,eAAe,OAAA;AAClC,kDAAmE;AAA1D,4HAAA,OAAO,OAAmB"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";AAAA;;;;;GAKG;;;;;;AAEH,kBAAkB;AAClB,mDAAkD;AAAzC,0GAAA,WAAW,OAAA;AACpB,iDAAgD;AAAvC,wGAAA,UAAU,OAAA;AACnB,yCAA4D;AAAnD,iGAAA,OAAO,OAAA;AAAE,kGAAA,QAAQ,OAAA;AAAE,iGAAA,OAAO,OAAA;AACnC,+CAI2B;AAHzB,gHAAA,mBAAmB,OAAA;AACnB,gHAAA,mBAAmB,OAAA;AACnB,iHAAA,oBAAoB,OAAA;AAgBtB,kBAAkB;AAClB,4CAA2C;AAAlC,8FAAA,KAAK,OAAA;AACd,4CAA6D;AAApD,sHAAA,OAAO,OAAgB;AAGhC,uCAAuC;AACvC,gDAA4D;AAAnD,kGAAA,OAAO,OAAA;AAAE,+FAAA,IAAI,OAAA;AAAE,gGAAA,KAAK,OAAA;AAC7B,gDAAiE;AAAxD,0HAAA,OAAO,OAAkB;AAGlC,6CAA6C;AAC7C,4DAIoC;AAHlC,8GAAA,aAAa,OAAA;AACb,yGAAA,QAAQ,OAAA;AACR,4GAAA,WAAW,OAAA;AAEb,4DAA6E;AAApE,sIAAA,OAAO,OAAwB;AAOxC,wBAAwB;AACxB,wDAAuD;AAA9C,0GAAA,WAAW,OAAA;AACpB,wDAAyE;AAAhE,kIAAA,OAAO,OAAsB;AAGtC,0CAA0C;AAC1C,sDAA2E;AAAlE,wGAAA,UAAU,OAAA;AAAE,qGAAA,OAAO,OAAA;AAAE,yGAAA,WAAW,OAAA;AACzC,sDAAuE;AAA9D,gIAAA,OAAO,OAAqB;AAOrC,uBAAuB;AACvB,sDAAqD;AAA5C,wGAAA,UAAU,OAAA;AACnB,sDAAuE;AAA9D,gIAAA,OAAO,OAAqB;AAGrC,qDAAqD;AACrD,4DAGoC;AAFlC,sHAAA,qBAAqB,OAAA;AACrB,mHAAA,kBAAkB,OAAA;AAEpB,4DAAqF;AAA5E,8IAAA,OAAO,OAAgC;AAMhD,oBAAoB;AACpB,gDAA+C;AAAtC,kGAAA,OAAO,OAAA;AAChB,gDAAiE;AAAxD,0HAAA,OAAO,OAAkB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sp-days-framework/docusaurus-frontpage-collection",
3
- "version": "1.1.0-beta2",
3
+ "version": "1.1.0",
4
4
  "description": "A collection of Docusaurus frontpage UI components.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -6,7 +6,15 @@
6
6
  */
7
7
 
8
8
  module.exports = {
9
- id: 'frontpage-collection-docs',
10
- path: require('path').join(__dirname, 'docs'),
11
- routeBasePath: 'package-docs/frontpage-collection',
9
+ id: "frontpage-collection-docs",
10
+ path: require("path").join(__dirname, "docs"),
11
+ routeBasePath: "package-docs/frontpage-collection",
12
+ editUrl: function (params) {
13
+ // Remove node_modules/@sp-days-framework/docusaurus-frontpage-collection/docs from the path
14
+ const cleanPath = params.docPath.replace(
15
+ /^.*node_modules\/@sp-days-framework\/docusaurus-frontpage-collection\/docs\//,
16
+ "",
17
+ );
18
+ return `https://github.com/helse-sorost/sp-days-framework/edit/main/docusaurus-frontpage-collection/docs/${cleanPath}`;
19
+ },
12
20
  };
package/docs/terminal.mdx DELETED
@@ -1,332 +0,0 @@
1
- ---
2
- sidebar_label: "Terminal"
3
- sidebar_position: 2.9
4
- sidebar_custom_props:
5
- section: "Components"
6
- section_position: 2
7
- ---
8
-
9
- import { Terminal, TerminalCommand } from "@sp-days-framework/docusaurus-frontpage-collection";
10
-
11
- # Terminal
12
-
13
- 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.
14
-
15
- <div style={{ position: 'relative', marginTop: '2rem', display: 'flex', justifyContent: 'center' }}>
16
- <div style={{ position: 'absolute', left: '50%', marginTop: '4px', transform: 'translateX(-50%)', fontWeight: 500, color: 'var(--ifm-color-emphasis-600)' }}>
17
- Preview
18
- </div>
19
- <div style={{ borderRadius: '12px', padding: '1rem 2rem', background: 'var(--ifm-color-emphasis-200)' }}>
20
- <Terminal user="ubuntu" directory="~/" command="echo 'Hello, World!'">
21
- Hello, World!
22
- </Terminal>
23
- </div>
24
- </div>
25
-
26
- ## Features
27
-
28
- - **Terminal Window Style** - Resembles a bash terminal with decorative header
29
- - **Flexible Prompt** - Customize user, host, directory in the prompt
30
- - **Theme Support** - Automatic light/dark mode with customizable colors
31
- - **Command Display** - Show single-line or multi-line commands
32
- - **Color Support** - Inline color tags for terminal output (red, green, cyan, etc.)
33
- - **Collapsible** - Collapse/expand terminal content with smooth animation
34
-
35
- ### When to Use
36
-
37
- - Showing expected CLI output in tutorials
38
- - Demonstrating command results
39
- - Differentiating output from copyable code blocks
40
- - Creating realistic terminal examples
41
-
42
- ## Import
43
-
44
- ```mdx
45
- import { Terminal, TerminalCommand } from "@sp-days-framework/docusaurus-frontpage-collection";
46
- ```
47
-
48
- ## Basic Usage
49
-
50
- ```mdx
51
- <Terminal>
52
- Hello, World!
53
- </Terminal>
54
- ```
55
-
56
- <Terminal>
57
- Hello, World!
58
- </Terminal>
59
-
60
- ## Props
61
-
62
- ### Terminal
63
-
64
- | Prop | Type | Default | Description |
65
- | ------------ | ----------------- | ---------- | ---------------------------------------------- |
66
- | `user` | `string` | - | Username to display in the prompt |
67
- | `host` | `string` | - | Hostname to display in the prompt |
68
- | `directory` | `string` | - | Directory/path to display in the prompt |
69
- | `command` | `string` | - | Command to display (ignored if TerminalCommand is used) |
70
- | `hideHeader` | `boolean` | `false` | Hide the terminal header (dots and controls) |
71
- | `maxHeight` | `string` | `"500px"` | Maximum height before scrolling |
72
-
73
- ## Examples
74
-
75
- ### Simple Output
76
-
77
- Display basic terminal output without a prompt:
78
-
79
- ```mdx
80
- <Terminal>
81
- npm install @sp-days-framework/docusaurus-frontpage-collection
82
- </Terminal>
83
- ```
84
-
85
- <Terminal>
86
- npm install @sp-days-framework/docusaurus-frontpage-collection
87
- </Terminal>
88
-
89
- ### With User and Directory
90
-
91
- Show a prompt with username and directory:
92
-
93
- ```mdx
94
- <Terminal user="ubuntu" directory="~/">
95
- Welcome to Ubuntu 24.04 LTS
96
- </Terminal>
97
- ```
98
-
99
- <Terminal user="ubuntu" directory="~/">
100
- Welcome to Ubuntu 24.04 LTS
101
- </Terminal>
102
-
103
- ### With User, Host, and Directory
104
-
105
- Full prompt with user, host, and directory:
106
-
107
- ```mdx
108
- <Terminal user="developer" host="localhost" directory="~/projects">
109
- Project initialized successfully!
110
- </Terminal>
111
- ```
112
-
113
- <Terminal user="developer" host="localhost" directory="~/projects">
114
- Project initialized successfully!
115
- </Terminal>
116
-
117
- ### With Single-Line Command
118
-
119
- Display a single-line command in the prompt:
120
-
121
- ```mdx
122
- <Terminal user="ubuntu" directory="~/" command="ls -la">
123
- total 128
124
- drwxr-xr-x 12 user group 4096 Nov 28 10:30 .
125
- drwxr-xr-x 8 user group 4096 Nov 27 15:20 ..
126
- -rw-r--r-- 1 user group 220 Nov 20 09:15 .bashrc
127
- </Terminal>
128
- ```
129
-
130
- <Terminal user="ubuntu" directory="~/" command="ls -la">
131
- total 128
132
- drwxr-xr-x 12 user group 4096 Nov 28 10:30 .
133
- drwxr-xr-x 8 user group 4096 Nov 27 15:20 ..
134
- -rw-r--r-- 1 user group 220 Nov 20 09:15 .bashrc
135
- </Terminal>
136
-
137
- ### With Multi-Line Command
138
-
139
- Use `TerminalCommand` for multi-line commands:
140
-
141
- ```mdx
142
- <Terminal user="ubuntu" directory="~/app">
143
- <TerminalCommand>
144
- docker run &#92;
145
- -v /data:/data &#92;
146
- -p 8080:80 &#92;
147
- nginx
148
- </TerminalCommand>
149
- Unable to find image 'nginx:latest' locally
150
- latest: Pulling from library/nginx
151
- Status: Downloaded newer image for nginx:latest
152
- </Terminal>
153
- ```
154
-
155
- <Terminal user="ubuntu" directory="~/app">
156
- <TerminalCommand>
157
- docker run &#92;
158
- -v /data:/data &#92;
159
- -p 8080:80 &#92;
160
- nginx
161
- </TerminalCommand>
162
- Unable to find image 'nginx:latest' locally
163
- latest: Pulling from library/nginx
164
- Status: Downloaded newer image for nginx:latest
165
- </Terminal>
166
-
167
- :::tip Escaping Backslashes
168
- 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.
169
-
170
- **Example:**
171
- ```mdx
172
- <TerminalCommand>
173
- docker run &#92;
174
- --name mycontainer &#92;
175
- nginx
176
- </TerminalCommand>
177
- ```
178
- :::
179
-
180
- ### With Colored Output
181
-
182
- Terminal output supports the following inline color tags:
183
-
184
- ```mdx
185
- <Terminal>
186
- <red>Red text</red>
187
- <green>Green text</green>
188
- <yellow>Yellow text</yellow>
189
- <blue>Blue text</blue>
190
- <magenta>Magenta text</magenta>
191
- <cyan>Cyan text</cyan>
192
- <white>White text</white>
193
- <gray>Gray text</gray>
194
- <bold>Bold text</bold>
195
- </Terminal>
196
- ```
197
-
198
- <Terminal>
199
- <red>Red text</red>
200
- <green>Green text</green>
201
- <yellow>Yellow text</yellow>
202
- <blue>Blue text</blue>
203
- <magenta>Magenta text</magenta>
204
- <cyan>Cyan text</cyan>
205
- <white>White text</white>
206
- <gray>Gray text</gray>
207
- <bold>Bold text</bold>
208
- </Terminal>
209
-
210
- #### Status Output
211
-
212
- Add visual interest using inline color tags:
213
-
214
- ```mdx
215
- <Terminal user="developer" directory="~/" command="docker ps">
216
- CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
217
- <cyan>a1b2c3d4e5f6</cyan> <green>nginx</green> "nginx" <yellow>2 hours</yellow> <green>Up 2hr</green> 80/tcp webserver
218
- <cyan>f6e5d4c3b2a1</cyan> <green>redis</green> "redis" <yellow>3 hours</yellow> <green>Up 3hr</green> 6379/tcp cache
219
- </Terminal>
220
- ```
221
-
222
- <Terminal user="developer" directory="~/" command="docker ps">
223
- CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
224
- <cyan>a1b2c3d4e5f6</cyan> <green>nginx</green> "nginx" <yellow>2 hours</yellow> <green>Up 2hr</green> 80/tcp webserver
225
- <cyan>f6e5d4c3b2a1</cyan> <green>redis</green> "redis" <yellow>3 hours</yellow> <green>Up 3hr</green> 6379/tcp cache
226
- </Terminal>
227
-
228
- #### Error Output
229
-
230
- Show error messages with red color:
231
-
232
- ```mdx
233
- <Terminal user="ubuntu" directory="~/" command="npm start">
234
- <red>Error: Cannot find module 'express'</red>
235
- <gray>at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)</gray>
236
- <gray>at Function.Module._load (internal/modules/cjs/loader.js:725:27)</gray>
237
- </Terminal>
238
- ```
239
-
240
- <Terminal user="ubuntu" directory="~/" command="npm start">
241
- <red>Error: Cannot find module 'express'</red>
242
- <gray>at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)</gray>
243
- <gray>at Function.Module._load (internal/modules/cjs/loader.js:725:27)</gray>
244
- </Terminal>
245
-
246
- #### Success Output
247
-
248
- Show success messages with green color:
249
-
250
- ```mdx
251
- <Terminal user="root" directory="/opt/app" command="systemctl status nginx">
252
- ● nginx.service - A high performance web server
253
- Loaded: loaded (/lib/systemd/system/nginx.service; enabled)
254
- Active: <green><bold>active (running)</bold></green> since Thu 2024-11-28 10:00:00 UTC; 2h 30min ago
255
- </Terminal>
256
- ```
257
-
258
- <Terminal user="root" directory="/opt/app" command="systemctl status nginx">
259
- ● nginx.service - A high performance web server
260
- Loaded: loaded (/lib/systemd/system/nginx.service; enabled)
261
- Active: <green><bold>active (running)</bold></green> since Thu 2024-11-28 10:00:00 UTC; 2h 30min ago
262
- </Terminal>
263
-
264
- ### Long Output with Scrolling
265
-
266
- Control maximum height for long outputs:
267
-
268
- ```mdx
269
- <Terminal user="root" directory="/var/log/" command="cat syslog" maxHeight="200px">
270
- Nov 28 10:00:01 server systemd[1]: Started Session 123
271
- Nov 28 10:00:05 server sshd[4567]: Accepted publickey for admin
272
- Nov 28 10:01:00 server CRON[5678]: (root) CMD (run-parts /etc/cron.hourly)
273
- Nov 28 10:02:15 server systemd[1]: Starting Daily apt download activities...
274
- Nov 28 10:02:16 server systemd[1]: Started Daily apt download activities.
275
- {/* Many more lines... */}
276
- </Terminal>
277
- ```
278
-
279
- <Terminal user="root" directory="/var/log/" command="cat syslog" maxHeight="200px">
280
- Nov 28 10:00:01 server systemd[1]: Started Session 123
281
- Nov 28 10:00:05 server sshd[4567]: Accepted publickey for admin
282
- Nov 28 10:01:00 server CRON[5678]: (root) CMD (run-parts /etc/cron.hourly)
283
- Nov 28 10:02:15 server systemd[1]: Starting Daily apt download activities...
284
- Nov 28 10:02:16 server systemd[1]: Started Daily apt download activities.
285
- Nov 28 10:03:00 server CRON[5679]: (root) CMD (run-parts /etc/cron.hourly)
286
- Nov 28 10:04:00 server CRON[5680]: (root) CMD (run-parts /etc/cron.hourly)
287
- Nov 28 10:05:00 server CRON[5681]: (root) CMD (run-parts /etc/cron.hourly)
288
- Nov 28 10:06:00 server CRON[5682]: (root) CMD (run-parts /etc/cron.hourly)
289
- Nov 28 10:07:00 server CRON[5683]: (root) CMD (run-parts /etc/cron.hourly)
290
- </Terminal>
291
-
292
- ### Hide Header
293
-
294
- If you don't need the interactive controls, hide the entire header:
295
-
296
- ```mdx
297
- <Terminal hideHeader>
298
- Output without header controls
299
- </Terminal>
300
- ```
301
-
302
- <Terminal hideHeader>
303
- Output without header controls
304
- </Terminal>
305
-
306
- ## Customization
307
-
308
- ### Override Terminal Colors
309
-
310
- Customize terminal colors in your Docusaurus `custom.css`:
311
-
312
- ```css
313
- :root {
314
- --terminal-bg: #fafafa;
315
- --terminal-text: #222;
316
- --terminal-green: #00aa00;
317
- --terminal-red: #cc0000;
318
- }
319
- ```
320
-
321
- ### Custom Styling
322
-
323
- Apply custom styles via props:
324
-
325
- ```mdx
326
- <Terminal
327
- className="my-custom-terminal"
328
- style={{ maxWidth: '800px', margin: '2rem auto' }}
329
- >
330
- Custom styled terminal
331
- </Terminal>
332
- ```
@@ -1,12 +0,0 @@
1
- import React from 'react';
2
- interface ColorTextProps {
3
- color: 'red' | 'green' | 'yellow' | 'blue' | 'magenta' | 'cyan' | 'white' | 'gray';
4
- children: React.ReactNode;
5
- }
6
- export declare const ColorText: React.FC<ColorTextProps>;
7
- interface BoldTextProps {
8
- children: React.ReactNode;
9
- }
10
- export declare const BoldText: React.FC<BoldTextProps>;
11
- export {};
12
- //# sourceMappingURL=ColorText.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ColorText.d.ts","sourceRoot":"","sources":["../../../src/components/Terminal/ColorText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,cAAc;IACtB,KAAK,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACnF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAE9C,CAAC;AAEF,UAAU,aAAa;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAE5C,CAAC"}
@@ -1,17 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.BoldText = exports.ColorText = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const styles_module_css_1 = __importDefault(require("./styles.module.css"));
9
- const ColorText = ({ color, children }) => {
10
- return react_1.default.createElement("span", { className: styles_module_css_1.default[`color-${color}`] }, children);
11
- };
12
- exports.ColorText = ColorText;
13
- const BoldText = ({ children }) => {
14
- return react_1.default.createElement("span", { className: styles_module_css_1.default.bold }, children);
15
- };
16
- exports.BoldText = BoldText;
17
- //# sourceMappingURL=ColorText.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ColorText.js","sourceRoot":"","sources":["../../../src/components/Terminal/ColorText.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4EAAyC;AAOlC,MAAM,SAAS,GAA6B,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IACzE,OAAO,wCAAM,SAAS,EAAE,2BAAM,CAAC,SAAS,KAAK,EAAE,CAAC,IAAG,QAAQ,CAAQ,CAAC;AACtE,CAAC,CAAC;AAFW,QAAA,SAAS,aAEpB;AAMK,MAAM,QAAQ,GAA4B,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAChE,OAAO,wCAAM,SAAS,EAAE,2BAAM,CAAC,IAAI,IAAG,QAAQ,CAAQ,CAAC;AACzD,CAAC,CAAC;AAFW,QAAA,QAAQ,YAEnB"}
@@ -1,4 +0,0 @@
1
- import React from 'react';
2
- import { TerminalCommandProps } from './types';
3
- export declare const TerminalCommand: React.FC<TerminalCommandProps>;
4
- //# sourceMappingURL=TerminalCommand.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TerminalCommand.d.ts","sourceRoot":"","sources":["../../../src/components/Terminal/TerminalCommand.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAE1D,CAAC"}
@@ -1,12 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.TerminalCommand = void 0;
7
- const react_1 = __importDefault(require("react"));
8
- const TerminalCommand = ({ children }) => {
9
- return react_1.default.createElement(react_1.default.Fragment, null, children);
10
- };
11
- exports.TerminalCommand = TerminalCommand;
12
- //# sourceMappingURL=TerminalCommand.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"TerminalCommand.js","sourceRoot":"","sources":["../../../src/components/Terminal/TerminalCommand.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAGnB,MAAM,eAAe,GAAmC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC9E,OAAO,8DAAG,QAAQ,CAAI,CAAC;AACzB,CAAC,CAAC;AAFW,QAAA,eAAe,mBAE1B"}
@@ -1,7 +0,0 @@
1
- import React from 'react';
2
- import { TerminalProps } from './types';
3
- export declare const Terminal: React.FC<TerminalProps>;
4
- export default Terminal;
5
- export { TerminalCommand } from './TerminalCommand';
6
- export type { TerminalProps, TerminalCommandProps } from './types';
7
- //# sourceMappingURL=index.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Terminal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsE,MAAM,OAAO,CAAC;AAC3F,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAiGxC,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmK5C,CAAC;AAEF,eAAe,QAAQ,CAAC;AACxB,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC"}
@@ -1,199 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || (function () {
19
- var ownKeys = function(o) {
20
- ownKeys = Object.getOwnPropertyNames || function (o) {
21
- var ar = [];
22
- for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
- return ar;
24
- };
25
- return ownKeys(o);
26
- };
27
- return function (mod) {
28
- if (mod && mod.__esModule) return mod;
29
- var result = {};
30
- if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
- __setModuleDefault(result, mod);
32
- return result;
33
- };
34
- })();
35
- var __importDefault = (this && this.__importDefault) || function (mod) {
36
- return (mod && mod.__esModule) ? mod : { "default": mod };
37
- };
38
- Object.defineProperty(exports, "__esModule", { value: true });
39
- exports.TerminalCommand = exports.Terminal = void 0;
40
- const react_1 = __importStar(require("react"));
41
- const TerminalCommand_1 = require("./TerminalCommand");
42
- const styles_module_css_1 = __importDefault(require("./styles.module.css"));
43
- const TerminalLogo = ({ onClick, isCollapsed }) => (react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", className: `${styles_module_css_1.default.logo} ${onClick ? styles_module_css_1.default.logoClickable : ''} ${isCollapsed ? styles_module_css_1.default.logoCollapsed : ''}`, onClick: onClick, "aria-label": isCollapsed ? 'Expand terminal' : 'Collapse terminal' },
44
- react_1.default.createElement("path", { fill: "currentColor", d: "m11 12l-7.071 7.071l-1.414-1.414L8.172 12L2.515 6.343L3.929 4.93zm0 7h10v2H11z" })));
45
- // Process children to handle color and bold tags
46
- const processChildren = (children) => {
47
- if (typeof children === 'string') {
48
- return children;
49
- }
50
- if (Array.isArray(children)) {
51
- const result = [];
52
- const colorTags = ['red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white', 'gray', 'bold'];
53
- for (let i = 0; i < children.length; i++) {
54
- const child = children[i];
55
- const prevChild = i > 0 ? children[i - 1] : null;
56
- // Check if current and previous children are both color/bold tags
57
- const isColorTag = (0, react_1.isValidElement)(child) && typeof child.type === 'string' && colorTags.includes(child.type);
58
- const prevIsColorTag = (0, react_1.isValidElement)(prevChild) && typeof prevChild.type === 'string' && colorTags.includes(prevChild.type);
59
- // Insert line break between consecutive color tags
60
- if (isColorTag && prevIsColorTag) {
61
- result.push(react_1.default.createElement("br", { key: `br-${i}` }));
62
- }
63
- result.push(processChild(child, i));
64
- }
65
- return result;
66
- }
67
- return processChild(children, 0);
68
- };
69
- const processChild = (child, key) => {
70
- if (!(0, react_1.isValidElement)(child)) {
71
- return child;
72
- }
73
- const element = child;
74
- const tagName = typeof element.type === 'string' ? element.type : '';
75
- // Handle color tags - preserve as inline spans
76
- const colorTags = ['red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white', 'gray'];
77
- if (colorTags.includes(tagName)) {
78
- return (react_1.default.createElement("span", { key: key, className: styles_module_css_1.default[`color-${tagName}`] }, processChildren(element.props.children)));
79
- }
80
- // Handle bold tag
81
- if (tagName === 'bold') {
82
- return (react_1.default.createElement("span", { key: key, className: styles_module_css_1.default.bold }, processChildren(element.props.children)));
83
- }
84
- // Handle paragraph tags - convert to div to preserve line breaks
85
- if (tagName === 'p') {
86
- return (react_1.default.createElement("div", { key: key, className: styles_module_css_1.default.terminalLine }, processChildren(element.props.children)));
87
- }
88
- // Recursively process children of other elements
89
- if (element.props.children) {
90
- return react_1.default.cloneElement(element, { key }, processChildren(element.props.children));
91
- }
92
- return child;
93
- };
94
- const Terminal = ({ user, host, directory, command, hideHeader = false, maxHeight = '500px', className, style, children, }) => {
95
- const [isCollapsed, setIsCollapsed] = (0, react_1.useState)(false);
96
- const [isCollapsing, setIsCollapsing] = (0, react_1.useState)(false);
97
- // Check if children contains a TerminalCommand component
98
- let terminalCommand = null;
99
- let outputChildren = children;
100
- const childrenArray = react_1.Children.toArray(children);
101
- const commandChild = childrenArray.find((child) => (0, react_1.isValidElement)(child) && child.type === TerminalCommand_1.TerminalCommand);
102
- if (commandChild && (0, react_1.isValidElement)(commandChild)) {
103
- // Extract raw text from TerminalCommand children, preserving formatting including backslashes
104
- const commandContent = commandChild.props.children;
105
- // If it's a string, use it directly
106
- if (typeof commandContent === 'string') {
107
- terminalCommand = commandContent;
108
- }
109
- else if ((0, react_1.isValidElement)(commandContent) && commandContent.type === 'p') {
110
- // Extract text from paragraph, preserving backslashes
111
- const extractText = (node) => {
112
- if (typeof node === 'string')
113
- return node;
114
- if (Array.isArray(node))
115
- return node.map(extractText).join('');
116
- if ((0, react_1.isValidElement)(node)) {
117
- // Don't convert br to newline - MDX already has the newline
118
- if (node.type === 'br')
119
- return '';
120
- if (node.props && node.props.children)
121
- return extractText(node.props.children);
122
- }
123
- return '';
124
- };
125
- const pElement = commandContent;
126
- terminalCommand = extractText(pElement.props.children);
127
- }
128
- else {
129
- terminalCommand = commandContent;
130
- }
131
- // Remove TerminalCommand from output
132
- outputChildren = childrenArray.filter((child) => child !== commandChild);
133
- }
134
- else if (command) {
135
- terminalCommand = command;
136
- }
137
- // Determine if command is multi-line
138
- const isMultilineCommand = terminalCommand && typeof terminalCommand === 'string' && terminalCommand.includes('\n');
139
- // Show prompt if we have user, host, directory, OR command
140
- const shouldShowPrompt = user || host || directory || terminalCommand;
141
- // Build the prompt
142
- const renderPrompt = () => {
143
- const parts = [];
144
- if (user) {
145
- parts.push(react_1.default.createElement("span", { key: "user", className: styles_module_css_1.default.promptUser }, user));
146
- }
147
- if (host) {
148
- if (user) {
149
- parts.push(react_1.default.createElement("span", { key: "separator", className: styles_module_css_1.default.promptSeparator }, "@"));
150
- }
151
- parts.push(react_1.default.createElement("span", { key: "host", className: styles_module_css_1.default.promptHost }, host));
152
- }
153
- if (directory) {
154
- if (user || host) {
155
- parts.push(react_1.default.createElement("span", { key: "colon", className: styles_module_css_1.default.promptColon }, ":"));
156
- }
157
- parts.push(react_1.default.createElement("span", { key: "directory", className: styles_module_css_1.default.promptDirectory }, directory));
158
- }
159
- parts.push(react_1.default.createElement("span", { key: "dollar", className: styles_module_css_1.default.promptDollar }, "$"));
160
- return parts;
161
- };
162
- const handleCollapse = () => {
163
- if (isCollapsed) {
164
- // Expanding
165
- setIsCollapsing(false);
166
- setIsCollapsed(false);
167
- }
168
- else {
169
- // Collapsing
170
- setIsCollapsing(true);
171
- setTimeout(() => {
172
- setIsCollapsed(true);
173
- setIsCollapsing(false);
174
- }, 300);
175
- }
176
- };
177
- const processedOutput = processChildren(outputChildren);
178
- return (react_1.default.createElement("div", { className: `${styles_module_css_1.default.terminal} ${className || ''}`, style: style },
179
- !hideHeader && (react_1.default.createElement("div", { className: styles_module_css_1.default.terminalHeader },
180
- react_1.default.createElement("div", { className: styles_module_css_1.default.dots },
181
- react_1.default.createElement("div", { className: `${styles_module_css_1.default.dot} ${styles_module_css_1.default.dotRed}` }),
182
- react_1.default.createElement("div", { className: `${styles_module_css_1.default.dot} ${styles_module_css_1.default.dotYellow}` }),
183
- react_1.default.createElement("div", { className: `${styles_module_css_1.default.dot} ${styles_module_css_1.default.dotGreen}` })),
184
- react_1.default.createElement("div", { className: styles_module_css_1.default.headerControls },
185
- react_1.default.createElement(TerminalLogo, { onClick: handleCollapse, isCollapsed: isCollapsed })))),
186
- !isCollapsed && (react_1.default.createElement("div", { className: `${styles_module_css_1.default.terminalBody} ${isCollapsing ? styles_module_css_1.default.terminalBodyCollapsing : ''}` },
187
- react_1.default.createElement("div", { className: styles_module_css_1.default.terminalContent, style: { maxHeight } },
188
- shouldShowPrompt && (react_1.default.createElement("div", { className: styles_module_css_1.default.terminalPrompt },
189
- renderPrompt(),
190
- terminalCommand && (react_1.default.createElement("span", { className: styles_module_css_1.default.promptCommand },
191
- ' ',
192
- terminalCommand)))),
193
- react_1.default.createElement("div", { className: styles_module_css_1.default.terminalOutput }, processedOutput))))));
194
- };
195
- exports.Terminal = Terminal;
196
- exports.default = exports.Terminal;
197
- var TerminalCommand_2 = require("./TerminalCommand");
198
- Object.defineProperty(exports, "TerminalCommand", { enumerable: true, get: function () { return TerminalCommand_2.TerminalCommand; } });
199
- //# sourceMappingURL=index.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Terminal/index.tsx"],"names":[],"mappings":"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"}
@@ -1,312 +0,0 @@
1
- /**
2
- * Terminal component styles
3
- *
4
- * Defaults to dark mode colors. Light mode overrides are provided via [data-theme='light'].
5
- * To override, define the variables below in your own CSS.
6
- */
7
-
8
- :root {
9
- /* Terminal colors - Dark mode defaults */
10
- --terminal-bg: #1e1e1e;
11
- --terminal-text: #d4d4d4;
12
- --terminal-border: #404040;
13
- --terminal-header: #2d2d2d;
14
-
15
- /* ANSI colors - Dark mode defaults */
16
- --terminal-red: #f14c4c;
17
- --terminal-green: #23d18b;
18
- --terminal-yellow: #f5f543;
19
- --terminal-blue: #3b8eea;
20
- --terminal-magenta: #d670d6;
21
- --terminal-cyan: #29b8db;
22
- --terminal-white: #e5e5e5;
23
- --terminal-gray: #a0a0a0;
24
-
25
- /* Prompt colors - Dark mode defaults */
26
- --terminal-prompt-user: #4ec9b0;
27
- --terminal-prompt-directory: #569cd6;
28
- --terminal-prompt-command: #d4d4d4;
29
- }
30
-
31
- /* Light mode overrides */
32
- [data-theme='light'] {
33
- --terminal-bg: #f5f5f5;
34
- --terminal-text: #1e1e1e;
35
- --terminal-border: #d0d0d0;
36
- --terminal-header: #e0e0e0;
37
-
38
- /* ANSI colors - Light mode */
39
- --terminal-red: #cd3131;
40
- --terminal-green: #00bc00;
41
- --terminal-yellow: #949800;
42
- --terminal-blue: #0451a5;
43
- --terminal-magenta: #bc05bc;
44
- --terminal-cyan: #0598bc;
45
- --terminal-white: #555555;
46
- --terminal-gray: #666666;
47
-
48
- /* Prompt colors - Light mode */
49
- --terminal-prompt-user: #16825d;
50
- --terminal-prompt-directory: #0451a5;
51
- --terminal-prompt-command: #1e1e1e;
52
- }
53
-
54
- .terminal {
55
- border-radius: 6px;
56
- box-shadow: var(--ifm-global-shadow-lw);
57
- margin: 1rem 0;
58
- overflow: hidden;
59
- font-family: var(--ifm-font-family-monospace);
60
- font-size: var(--ifm-code-font-size);
61
- background-color: var(--terminal-bg);
62
- border: 1px solid var(--terminal-border);
63
- position: relative;
64
- }
65
-
66
- .terminalHeader {
67
- background-color: var(--terminal-header);
68
- padding: 0.5rem 1rem;
69
- display: flex;
70
- align-items: center;
71
- justify-content: space-between;
72
- border-bottom: 1px solid var(--terminal-border);
73
- position: relative;
74
- z-index: 1;
75
- }
76
-
77
- .dots {
78
- display: flex;
79
- gap: 0.5rem;
80
- align-items: center;
81
- }
82
-
83
- .dot {
84
- width: 12px;
85
- height: 12px;
86
- border-radius: 50%;
87
- }
88
-
89
- .dotRed {
90
- background-color: #ff5f56;
91
- }
92
-
93
- .dotYellow {
94
- background-color: #ffbd2e;
95
- }
96
-
97
- .dotGreen {
98
- background-color: #27c93f;
99
- }
100
-
101
- .headerControls {
102
- display: flex;
103
- align-items: center;
104
- gap: 0.5rem;
105
- }
106
-
107
- .logo {
108
- opacity: 0.3;
109
- width: 24px;
110
- height: 24px;
111
- transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
112
- cursor: default;
113
- }
114
-
115
- .logoClickable {
116
- cursor: pointer;
117
- padding: 2px;
118
- border-radius: 4px;
119
- border: 1px solid transparent;
120
- }
121
-
122
- .logoClickable:hover {
123
- opacity: 0.5;
124
- background-color: var(--terminal-border);
125
- border-color: var(--terminal-border);
126
- }
127
-
128
- .logoClickable:active {
129
- opacity: 1;
130
- color: var(--ifm-color-primary);
131
- background-color: var(--ifm-color-primary-lightest);
132
- border-color: var(--ifm-color-primary);
133
- }
134
-
135
- .logoCollapsed {
136
- opacity: 1 !important;
137
- }
138
-
139
- .terminalBody {
140
- padding: 1rem;
141
- color: var(--terminal-text);
142
- background-color: var(--terminal-bg);
143
- animation: slideDown 0.3s ease-out;
144
- }
145
-
146
- .terminalBodyCollapsing {
147
- animation: slideUp 0.3s ease-out;
148
- }
149
-
150
- .terminalContent {
151
- overflow: auto;
152
- width: 100%;
153
- }
154
-
155
- /* Custom scrollbar for content */
156
- .terminalContent::-webkit-scrollbar {
157
- width: 8px;
158
- height: 8px;
159
- }
160
-
161
- .terminalContent::-webkit-scrollbar-track {
162
- background: transparent;
163
- }
164
-
165
- .terminalContent::-webkit-scrollbar-thumb {
166
- background: var(--terminal-border);
167
- border-radius: 4px;
168
- }
169
-
170
- .terminalContent::-webkit-scrollbar-thumb:hover {
171
- background: var(--terminal-text);
172
- opacity: 0.5;
173
- }
174
-
175
- @keyframes slideDown {
176
- from {
177
- opacity: 0;
178
- transform: translateY(-8px) scaleY(0.95);
179
- }
180
-
181
- to {
182
- opacity: 1;
183
- transform: translateY(0) scaleY(1);
184
- }
185
- }
186
-
187
- @keyframes slideUp {
188
- from {
189
- opacity: 1;
190
- transform: translateY(0) scaleY(1);
191
- }
192
-
193
- to {
194
- opacity: 0;
195
- transform: translateY(-8px) scaleY(0.95);
196
- }
197
- }
198
-
199
- /* ===================== TASK PROMPT ===================== */
200
- .terminalPrompt {
201
- margin-bottom: 0.5rem;
202
- font-weight: 500;
203
- display: flex;
204
- flex-wrap: nowrap;
205
- align-items: baseline;
206
- gap: 0;
207
- }
208
-
209
- .promptUser {
210
- color: var(--terminal-prompt-user);
211
- }
212
-
213
- .promptHost {
214
- color: var(--terminal-prompt-user);
215
- }
216
-
217
- .promptSeparator,
218
- .promptColon {
219
- color: var(--terminal-text);
220
- }
221
-
222
- .promptDirectory {
223
- color: var(--terminal-prompt-directory);
224
- }
225
-
226
- .promptDollar {
227
- color: var(--terminal-text);
228
- margin-left: 0.25rem;
229
- }
230
-
231
- .promptCommand {
232
- color: var(--terminal-prompt-command);
233
- white-space: pre;
234
- font-family: inherit;
235
- }
236
-
237
- /* Output */
238
- .terminalOutput {
239
- white-space: pre;
240
- word-break: normal;
241
- }
242
-
243
- /* Line wrapper for color-tagged content */
244
- .terminalLine {
245
- margin: 0;
246
- }
247
-
248
- /* Remove default paragraph margins inside terminal */
249
- .terminalOutput p {
250
- margin: 0;
251
- }
252
-
253
- .terminalOutput p:not(:last-child) {
254
- margin-bottom: 0;
255
- }
256
-
257
- /* Color classes - must have !important to override MDX paragraph color */
258
- .color-red {
259
- color: var(--terminal-red) !important;
260
- }
261
-
262
- .color-green {
263
- color: var(--terminal-green) !important;
264
- }
265
-
266
- .color-yellow {
267
- color: var(--terminal-yellow) !important;
268
- }
269
-
270
- .color-blue {
271
- color: var(--terminal-blue) !important;
272
- }
273
-
274
- .color-magenta {
275
- color: var(--terminal-magenta) !important;
276
- }
277
-
278
- .color-cyan {
279
- color: var(--terminal-cyan) !important;
280
- }
281
-
282
- .color-white {
283
- color: var(--terminal-white) !important;
284
- }
285
-
286
- .color-gray {
287
- color: var(--terminal-gray) !important;
288
- }
289
-
290
- .bold {
291
- font-weight: 700 !important;
292
- }
293
-
294
- /* Responsive adjustments */
295
- @media (max-width: 768px) {
296
- .terminal {
297
- font-size: 12px;
298
- }
299
-
300
- .terminalBody {
301
- padding: 0.75rem;
302
- }
303
-
304
- .terminalHeader {
305
- padding: 0.4rem 0.75rem;
306
- }
307
-
308
- .dot {
309
- width: 10px;
310
- height: 10px;
311
- }
312
- }
@@ -1,49 +0,0 @@
1
- import React from 'react';
2
- export interface TerminalProps {
3
- /**
4
- * Username to display in the prompt
5
- */
6
- user?: string;
7
- /**
8
- * Hostname to display in the prompt
9
- */
10
- host?: string;
11
- /**
12
- * Directory/path to display in the prompt
13
- */
14
- directory?: string;
15
- /**
16
- * Command to display in the prompt (single-line)
17
- * Ignored if TerminalCommand child is present
18
- */
19
- command?: string;
20
- /**
21
- * Hide the terminal header (dots and controls)
22
- * @default false
23
- */
24
- hideHeader?: boolean;
25
- /**
26
- * Maximum height before scrolling
27
- * @default "500px"
28
- */
29
- maxHeight?: string;
30
- /**
31
- * Custom CSS class name
32
- */
33
- className?: string;
34
- /**
35
- * Custom inline styles
36
- */
37
- style?: React.CSSProperties;
38
- /**
39
- * The terminal output content (Markdown/MDX)
40
- */
41
- children: React.ReactNode;
42
- }
43
- export interface TerminalCommandProps {
44
- /**
45
- * Command to display (single or multi-line)
46
- */
47
- children: React.ReactNode;
48
- }
49
- //# sourceMappingURL=types.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Terminal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAE5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B"}
@@ -1,3 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- //# sourceMappingURL=types.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/Terminal/types.ts"],"names":[],"mappings":""}