feat: shell prompt (#250)

* wip: shell prompt component

* docs: document the ShellPrompt WIP component

docs/xx-appendices/thanks.md

@@ -11,7 +11,7 @@ Many people have contributed their time and support to help build this book. Tha
 <table>
   <tbody>
     <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/xiaoyou-elsie-jiang"><img src="https://avatars.githubusercontent.com/u/101381124?v=4?s=100" width="100px;" alt="Xiaoyou "Elsie" Jiang"/><br /><sub><b>Xiaoyou "Elsie" Jiang</b></sub></a><br /><a href="https://github.com/dwmkerr/effective-shell/commits?author=xiaoyou-elsie-jiang" title="Documentation">📖</a> <a href="https://github.com/dwmkerr/effective-shell/pulls?q=is%3Apr+reviewed-by%3Axiaoyou-elsie-jiang" title="Reviewed Pull Requests">👀</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/xiaoyou-elsie-jiang"><img src="https://avatars.githubusercontent.com/u/101381124?v=4?s=100" width="100px;" alt="Xiaoyou 'Elsie' Jiang"/><br /><sub><b>Xiaoyou "Elsie" Jiang</b></sub></a><br /><a href="https://github.com/dwmkerr/effective-shell/commits?author=xiaoyou-elsie-jiang" title="Documentation">📖</a> <a href="https://github.com/dwmkerr/effective-shell/pulls?q=is%3Apr+reviewed-by%3Axiaoyou-elsie-jiang" title="Reviewed Pull Requests">👀</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://linkedin.com/in/tbueschel"><img src="https://avatars.githubusercontent.com/u/13087421?v=4?s=100" width="100px;" alt="Tobias Büschel"/><br /><sub><b>Tobias Büschel</b></sub></a><br /><a href="https://github.com/dwmkerr/effective-shell/pulls?q=is%3Apr+reviewed-by%3Atobiasbueschel" title="Reviewed Pull Requests">👀</a></td>
       <td align="center" valign="top" width="14.28%"><a href="http://foostack.ai"><img src="https://avatars.githubusercontent.com/u/15166953?v=4?s=100" width="100px;" alt="Doug Foo"/><br /><sub><b>Doug Foo</b></sub></a><br /><a href="https://github.com/dwmkerr/effective-shell/commits?author=dougfoo" title="Documentation">📖</a> <a href="https://github.com/dwmkerr/effective-shell/pulls?q=is%3Apr+reviewed-by%3Adougfoo" title="Reviewed Pull Requests">👀</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/skokaina"><img src="https://avatars.githubusercontent.com/u/2756985?v=4?s=100" width="100px;" alt="Sallah Kokaina"/><br /><sub><b>Sallah Kokaina</b></sub></a><br /><a href="https://github.com/dwmkerr/effective-shell/commits?author=skokaina" title="Documentation">📖</a> <a href="https://github.com/dwmkerr/effective-shell/pulls?q=is%3Apr+reviewed-by%3Askokaina" title="Reviewed Pull Requests">👀</a></td>

docs/zz-developer-guide/components.mdx

@@ -95,6 +95,23 @@ The following properties are exposed:
 | ---------------- | --------------------------------------------------------------------------------- |
 | `caretStyle`           | The style of the cursor, `block` by default, or `line` for an 'insert mode' cursor. |
 
+## Shell Prompt
+
+The `Prompt` component is work in progress.
+
+First, import the component:
+
+```jsx
+import ShellPrompt from '@site/src/components/ShellPrompt/ShellPrompt.tsc';
+```
+
+Use the component as below:
+
+```jsx live
+<ShellPrompt
+/>
+```
+
 ## Tips for Developing Components
 
 Check the following resources for useful tips on Component Development:

src/components/ShellPrompt/ShellPrompt.tsx

@@ -0,0 +1,17 @@
+// @ts-check
+import React from 'react';
+
+interface ShellPromptProps {
+  children: JSX.Element;
+}
+
+const promptStyle = {
+  color: '#00FF00',
+};
+
+const ShellPrompt: React.FC<ShellPromptProps> = ({
+}: ShellPromptProps) => (
+   <span style={promptStyle}>$ </span>
+);
+
+export default ShellPrompt;

src/theme/ReactLiveScope/index.js

@@ -9,6 +9,7 @@ import ReactLiveScope from '@theme-original/ReactLiveScope';
 import AnnotatedCommand from '@site/src/components/AnnotatedCommmand/AnnotatedCommand.tsx';
 import AsciinemaPlayer from '@site/src/components/AsciinemaPlayer/AsciinemaPlayer.tsx';
 import Caret from '@site/src/components/Caret/Caret.tsx';
+import ShellPrompt from '@site/src/components/ShellPrompt/ShellPrompt.tsx';
 //  import Image from '@theme/IdealImage'; // disabled until I work out why it breaks non-ideal images
 
 const ReactLiveScopeWrapper = (props) => (
@@ -22,6 +23,7 @@ const ReactLiveScopeWrapper = (props) => (
 ReactLiveScopeWrapper.AnnotatedCommand = AnnotatedCommand;
 ReactLiveScopeWrapper.AsciinemaPlayer = AsciinemaPlayer;
 ReactLiveScopeWrapper.Caret = Caret;
+ReactLiveScopeWrapper.ShellPrompt = ShellPrompt;
 //ReactLiveScopeWrapper.Image = Image;
 
 export default ReactLiveScopeWrapper;