Merge pull request #31 from davidecaruso/improve-customization

Improve customization
davidecaruso · Aug 19, 2022 · 51ae5db · 51ae5db
2 parents 178373d + 5dd2ca3
commit 51ae5db
Show file tree

Hide file tree

Showing 13 changed files with 145 additions and 123 deletions.
diff --git a/docs/README.md b/docs/README.md
@@ -1,4 +1,6 @@
-## What it is
+# Shell.js
+
+> A <strong>JavaScript</strong> library to create HTML <strong>terminals</strong> in web pages.
 
 **Shell.js** magically creates terminals in web pages. Use it to make awesome websites!
 

diff --git a/docs/_sidebar.md b/docs/_sidebar.md
@@ -1,4 +1,15 @@
 * [Quick start](quickstart.md "Quick start | Shell.js")
 * [Customization](customization.md "Customization | Shell.js")
+  * [User](customization.md?id=user "Customization | Shell.js")
+  * [Host](customization.md?id=host "Customization | Shell.js")
+  * [Path](customization.md?id=path "Customization | Shell.js")
+  * [Engine](customization.md?id=engine "Customization | Shell.js")
+  * [Theme](customization.md?id=theme "Customization | Shell.js")
+  * [Root](customization.md?id=root "Customization | Shell.js")
+  * [Responsiveness](customization.md?id=responsiveness "Customization | Shell.js")
+  * [Shadiness](customization.md?id=shadiness "Customization | Shell.js")
 * [Commands](commands.md "Commands | Shell.js")
+  * [Simple](commands.md?id=simple-commands "Commands | Shell.js")
+  * [Special](commands.md?id=special-commands "Commands | Shell.js")
+  * [Custom](commands.md?id=custom-commands "Commands | Shell.js")
 * [Integrations](integrations.md "Integrations | Shell.js")
diff --git a/docs/coverpage.html b/docs/coverpage.html
@@ -1,11 +1,11 @@
 <div id="cover-page">
   <div class="cover-main">
-    <h1 id="shelljs">
-      <a href="#/?id=shelljs" data-id="shelljs" class="anchor"><span>Shell.js</span></a>
+    <h1>
+      <a href="#/?id=shelljs" class="anchor"><span>Shell.js</span></a>
     </h1>
     <div id="cover-shell"></div>
     <p>
-      <a href="#/?id=what-it-is">Getting Started</a>
+      <a href="#/?id=shelljs">Getting Started</a>
     </p>
   </div>
 </div>
diff --git a/docs/customization.md b/docs/customization.md
@@ -1,5 +1,29 @@
 ## Customization
 
+### User
+
+Set the user of the terminal session. _(default: "user")_
+
+```javascript
+Shell("#shell", [ ... ], { "user": "johndoe" });
+```
+
+### Host
+
+Set the host of the terminal session. _(default: "host")_
+
+```javascript
+Shell("#shell", [ ... ], { "host": "example.org" });
+```
+
+### Path
+
+Set the path location of the terminal session. _(default: "~" or "C:\Windows\system32\")_
+
+```javascript
+Shell("#shell", [ ... ], { "path": "/tmp" });
+```
+
 ### Engine
 
 Choose your favorite operating system to style your **Shell.js** instance from the available options:
@@ -10,26 +34,38 @@ Choose your favorite operating system to style your **Shell.js** instance from t
 * `default` _(default)_
 
 ```javascript
-Shell("#shell", [ ... ], { "style": { "engine": "macos" } });
+Shell("#shell", [ ... ], { "engine": "macos" });
 ```
 
 ### Theme
 
-Choose between the `light` and the `dark` side of the Force:
+Choose between the `light` and the `dark` side of the Force.  _(default: "dark")_
 
 ```javascript
-Shell("#shell", [ ... ], { "style": { "theme": "dark" } });
+Shell("#shell", [ ... ], { "theme": "light" });
 ```
 
-### Attributes
+### Responsiveness
+
+Decide if the terminal should be responsive or not. _(default: false)_
+
+```javascript
+Shell("#shell", [ ... ], { "responsive": true });
+```
+
+### Shadiness
+Decide if the terminal should have shadow or not. _(default: false)_
+
+```javascript
+Shell("#shell", [ ... ], { "shadow": true });
+```
 
-**Shell.js** has some _boolean_ attributes:
+### Root
 
-* `responsive` _(default: false)_
-* `shadow` _(default: false)_
+Decide if the logged user of the terminal session is `root` or not. _(default: false)_
 
 ```javascript
-Shell("#shell", [ ... ], { "style": { "responsive": true, "shadow": true } });
+Shell("#shell", [ ... ], { "root": true });
 ```
 
 Let's create some [commands](commands.md)!
diff --git a/docs/index.html b/docs/index.html
@@ -41,7 +41,7 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="//fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
   <script src="//cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js"></script>
-  <script src="//cdn.jsdelivr.net/npm/shell.js@4.1.0/lib/shell.min.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/shell.js@4.2.0/lib/shell.min.js"></script>
   <style>
       #cover-page h1 a span {
           text-transform: lowercase !important;
@@ -100,8 +100,8 @@
     notFoundPage: "_404.html",
     ga: "UA-108263871-1",
     copyCode: {
-      buttonText : 'Copy',
-      successText: 'Copied!'
+      buttonText: "Copy",
+      successText: "Copied!"
     },
     plugins: [
       function(hook, vm) {
@@ -121,11 +121,9 @@
                 user: "guest",
                 host: "shelljs.io",
                 typing: { ctor: Typed },
-                style: {
-                  engine: randomEngine(),
-                  responsive: true,
-                  shadow: true
-                }
+                engine: randomEngine(),
+                responsive: true,
+                shadow: true
               }).type();
             }, delay);
           } else {
@@ -149,11 +147,9 @@
                   user: "guest",
                   host: "shelljs.io",
                   typing: { ctor: Typed },
-                  style: {
-                    engine: randomEngine(),
-                    responsive: true,
-                    shadow: true
-                  }
+                  engine: randomEngine(),
+                  responsive: true,
+                  shadow: true
                 }).type();
               }, delay);
             }

diff --git a/src/Classes.test.ts b/src/Classes.test.ts
@@ -36,16 +36,16 @@ describe('Classes', () => {
             it('should return correct classes', () => {
                 expect(buildClasses({})()).to.be.deep.equal(['shell', 'shell--default', 'shell--dark'])
                 expect(
-                    buildClasses({ style: { engine: 'macos', theme: 'light', shadow: true, responsive: false } })()
+                    buildClasses({ engine: 'macos', theme: 'light', shadow: true, responsive: false })()
                 ).to.be.deep.equal(['shell', 'shell--macos', 'shell--light', 'shell--shadow'])
                 expect(
-                    buildClasses({ style: { engine: 'windows', theme: 'dark', shadow: false, responsive: true } })()
+                    buildClasses({ engine: 'windows', theme: 'dark', shadow: false, responsive: true })()
                 ).to.be.deep.equal(['shell', 'shell--windows', 'shell--dark', 'shell--responsive'])
                 expect(
-                    buildClasses({ style: { engine: 'ubuntu', theme: 'light', shadow: true, responsive: false } })()
+                    buildClasses({ engine: 'ubuntu', theme: 'light', shadow: true, responsive: false })()
                 ).to.be.deep.equal(['shell', 'shell--ubuntu', 'shell--light', 'shell--shadow'])
                 expect(
-                    buildClasses({ style: { engine: 'ubuntu', theme: 'light', shadow: false, responsive: true } })()
+                    buildClasses({ engine: 'ubuntu', theme: 'light', shadow: false, responsive: true })()
                 ).to.be.deep.equal(['shell', 'shell--ubuntu', 'shell--light', 'shell--responsive'])
             })
         })
@@ -60,28 +60,28 @@ describe('Classes', () => {
                     'shell--dark',
                 ])
                 expect(
-                    buildClasses({ style: { engine: 'macos', theme: 'light', shadow: true, responsive: false } })([
+                    buildClasses({ engine: 'macos', theme: 'light', shadow: true, responsive: false })([
                         'foo',
                         'bar',
                         'baz',
                     ])
                 ).to.be.deep.equal(['foo', 'bar', 'baz', 'shell', 'shell--macos', 'shell--light', 'shell--shadow'])
                 expect(
-                    buildClasses({ style: { engine: 'windows', theme: 'dark', shadow: false, responsive: true } })([
+                    buildClasses({ engine: 'windows', theme: 'dark', shadow: false, responsive: true })([
                         'foo',
                         'bar',
                         'baz',
                     ])
                 ).to.be.deep.equal(['foo', 'bar', 'baz', 'shell', 'shell--windows', 'shell--dark', 'shell--responsive'])
                 expect(
-                    buildClasses({ style: { engine: 'ubuntu', theme: 'light', shadow: true, responsive: false } })([
+                    buildClasses({ engine: 'ubuntu', theme: 'light', shadow: true, responsive: false })([
                         'foo',
                         'bar',
                         'baz',
                     ])
                 ).to.be.deep.equal(['foo', 'bar', 'baz', 'shell', 'shell--ubuntu', 'shell--light', 'shell--shadow'])
                 expect(
-                    buildClasses({ style: { engine: 'ubuntu', theme: 'light', shadow: false, responsive: true } })([
+                    buildClasses({ engine: 'ubuntu', theme: 'light', shadow: false, responsive: true })([
                         'foo',
                         'bar',
                         'baz',

diff --git a/src/Classes.ts b/src/Classes.ts
@@ -33,8 +33,8 @@ export const buildClasses =
     (elClassName: ReadonlyArray<string> = []): ReadonlyArray<string> => {
         const classNames = [
             shellClass,
-            `${shellClass}--${config.style?.engine ?? defaultConfig.style?.engine}`,
-            `${shellClass}--${config.style?.theme ?? defaultConfig.style?.theme}`,
+            `${shellClass}--${config?.engine ?? defaultConfig?.engine}`,
+            `${shellClass}--${config?.theme ?? defaultConfig?.theme}`,
             isResponsive(config) ? `${shellClass}--responsive` : '',
             hasShadow(config) ? `${shellClass}--shadow` : '',
             isTyped(config) ? `${shellClass}--typed` : '',

diff --git a/src/Command.test.ts b/src/Command.test.ts
@@ -122,25 +122,25 @@ describe('Command', () => {
     describe('login', () => {
         const date = new Date()
         describe('with "ubuntu" engine', () => {
-            const config: Config = { ...defaultConfig, style: { ...defaultConfig.style, engine: 'ubuntu' } }
+            const config: Config = { ...defaultConfig, engine: 'ubuntu' }
             it('should return empty string', () => {
                 expect(login(config)(date)).to.be.deep.equal(output(config)(''))
             })
         })
         describe('with "windows" engine', () => {
-            const config: Config = { ...defaultConfig, style: { ...defaultConfig.style, engine: 'windows' } }
+            const config: Config = { ...defaultConfig, engine: 'windows' }
             it('should return empty string', () => {
                 expect(login(config)(date)).to.be.deep.equal(output(config)(''))
             })
         })
         describe('with "default" engine', () => {
-            const config: Config = { ...defaultConfig, style: { ...defaultConfig.style, engine: 'default' } }
+            const config: Config = { ...defaultConfig, engine: 'default' }
             it('should return empty string', () => {
                 expect(login(config)(date)).to.be.deep.equal(output(config)(''))
             })
         })
         describe('with "macos" engine', () => {
-            const config: Config = { ...defaultConfig, style: { ...defaultConfig.style, engine: 'macos' } }
+            const config: Config = { ...defaultConfig, engine: 'macos' }
             it('should return login string', () => {
                 const result = login(config)(date)
                 expect(result).to.not.be.empty
@@ -152,31 +152,31 @@ describe('Command', () => {
     describe('exec', () => {
         describe('sudo', () => {
             describe('with "ubuntu" engine', () => {
-                const config: Config = { ...defaultConfig, style: { ...defaultConfig.style, engine: 'ubuntu' } }
+                const config: Config = { ...defaultConfig, engine: 'ubuntu' }
                 it('should have root privileges', () => {
                     expect(exec(input(config)('sudo -i'))).to.be.deep.equal(
                         output({ ...config, root: true })(`[sudo] password for ${config.user}:`)
                     )
                 })
             })
             describe('with "windows" engine', () => {
-                const config: Config = { ...defaultConfig, style: { ...defaultConfig.style, engine: 'windows' } }
+                const config: Config = { ...defaultConfig, engine: 'windows' }
                 it('should not know "sudo" command', () => {
                     expect(exec(input(config)('sudo -i'))).to.be.deep.equal(
                         output({ ...config, root: false })(`bash: sudo: command not found`)
                     )
                 })
             })
             describe('with "default" engine', () => {
-                const config: Config = { ...defaultConfig, style: { ...defaultConfig.style, engine: 'default' } }
+                const config: Config = { ...defaultConfig, engine: 'default' }
                 it('should have root privileges', () => {
                     expect(exec(input(config)('sudo -i'))).to.be.deep.equal(
                         output({ ...config, root: true })(`[sudo] password for ${config.user}:`)
                     )
                 })
             })
             describe('with "macos" engine', () => {
-                const config: Config = { ...defaultConfig, style: { ...defaultConfig.style, engine: 'macos' } }
+                const config: Config = { ...defaultConfig, engine: 'macos' }
                 it('should have root privileges', () => {
                     expect(exec(input(config)('sudo -i'))).to.be.deep.equal(
                         output({ ...config, root: true })(`Password: <span class="icon-key"></span>`)
@@ -190,7 +190,7 @@ describe('Command', () => {
                 const config: Config = {
                     ...defaultConfig,
                     root: true,
-                    style: { ...defaultConfig.style, engine: 'ubuntu' },
+                    engine: 'ubuntu',
                 }
                 it('should exit from root session', () => {
                     expect(exec(input(config)('exit'))).to.be.deep.equal(output({ ...config, root: false })(`logout`))
@@ -200,7 +200,7 @@ describe('Command', () => {
                 const config: Config = {
                     ...defaultConfig,
                     root: true,
-                    style: { ...defaultConfig.style, engine: 'windows' },
+                    engine: 'windows',
                 }
                 it('should not know "exit" command', () => {
                     expect(exec(input(config)('exit'))).to.be.deep.equal(
@@ -212,7 +212,7 @@ describe('Command', () => {
                 const config: Config = {
                     ...defaultConfig,
                     root: true,
-                    style: { ...defaultConfig.style, engine: 'default' },
+                    engine: 'default',
                 }
                 it('should exit from root session', () => {
                     expect(exec(input(config)('exit'))).to.be.deep.equal(output({ ...config, root: false })(`logout`))
@@ -222,7 +222,7 @@ describe('Command', () => {
                 const config: Config = {
                     ...defaultConfig,
                     root: true,
-                    style: { ...defaultConfig.style, engine: 'macos' },
+                    engine: 'macos',
                 }
                 it('should exit from root session', () => {
                     expect(exec(input(config)('exit'))).to.be.deep.equal(output({ ...config, root: false })(`logout`))