Skip to content

glorious-codes/glorious-demo

Repository files navigation

Glorious Demo

The easiest way to demonstrate your code in action.

 CircleCI  Coverage Status

Installation

 npm install @glorious/demo --save

Basic Usage

 < link  rel =" stylesheet " href =" node_modules/@glorious/demo/dist/gdemo.min.css " >
 < script  src =" node_modules/@glorious/demo/dist/gdemo.min.js " > </ script >

Note: If you're not into package management, load it from a third-party CDN provider .

 // Constructor receives a selector that indicates
 // where to inject the demonstration in your page.
 const  demo  =  new  GDemo ( '#container' ) ;

 const  code  =  `
 function greet(){
 console.log("Hello World!");
 }

 greet();
 `

 demo
   . openApp ( 'editor' ,  { minHeight : '350px' ,  windowTitle : 'demo.js' } )
   . write ( code ,  { onCompleteDelay : one thousand and five hundred } )
   . openApp ( 'terminal' ,  { minHeight : '350px' ,  promptString : '$' } )
   . command ( 'node ./ demo' ,  { onCompleteDelay : five hundred } )
   . respond ( 'Hello World!' )
   . command ( '' )
   . end ( ) ;

NOTE: Check here to know how to use Prism to get your code highlighted.

API

openApp

Opens or maximizes an open application.

 /*
 ** @applicationType: String [required]
 ** @options: Object [optional]
 */

 // Possible values are 'editor' or 'terminal'
 const  applicationType  =  'terminal' ;

 const  openAppOptions  =  {
   minHeight : '350px' ,
   windowTitle : 'bash' ,
   id : 'someId' ,  // Identifies an application,  in case of multiple instances
   inanimate : true ,  // Turns off application's window animation
   promptString : '~/my-project $' ,  // For 'terminal' applications only
   initialContent : 'Some text' ,  // For 'editor' applications only
   onCompleteDelay : one thousand  // Delay before executing the next method
 }

 demo . openApp ( applicationType ,  openAppOptions ) . end ( ) ;

write

Writes some code in the open Editor application.

 /*
 ** @codeSample: String [required]
 ** @options: Object [optional]
 */

 // Tabs and line breaks will be preserved
 const  codeSample  =  `
 function sum(a, b) {
 return a + b;
 }

 sum();
 ` ;

 const  writeOptions  =  {
   id : 'someId' ,  // Identifies an application,  in case of multiple instances
   onCompleteDelay : five hundred  // Delay before executing the next method
 }

 demo . openApp ( 'editor' ) . write ( codeSample ,  writeOptions ) . end ( ) ;

command

Writes some command in the open Terminal application.

 /*
 ** @command: String [required]
 ** @options: Object [optional]
 */

 const  command  =  'npm install @glorious/demo --save' ;

 // Redefines prompt string for this and following commands
 const  promptString  =  '$'

 // Can optionally be an HTML string:
 const  promptString  =  '<span class="my-custom-class">$</span>'

 const  commandOptions  =  {
   id : 'someId' ,  // Identifies an application,  in case of multiple instances promptString ,  // Sets a custom string. Default: ~/demo $
   onCompleteDelay : five hundred  // Delay before executing the next method
 }

 demo . openApp ( 'terminal' ) . command ( command ,  commandOptions ) . end ( ) ;

respond

Shows some response on the open Terminal application.

 /*
 ** @response: String [required]
 ** @options: Object [optional]
 */

 // Line breaks will be preserved
 const  response  =  `
 + @glorious/demo successfully installed!
 + v0.1.0
 ` ;

 // Can optionally be an HTML string:
 const  response  =  `
 <div><span class="my-custom-class">+</span> @glorious/demo successfully installed!</ div>
 <div><span class="my-custom-class">+</span> v0.6.0</div>
 ` ;

 const  respondOptions  =  {
   id : 'someId' ,  // Identifies an application,  in case of multiple instances
   onCompleteDelay : five hundred  // Delay before executing the next method
 }

 demo . openApp ( 'terminal' ) . respond ( response ,  respondOptions ) . end ( ) ;

end

Indicates the end of the demonstration. The method returns a promise in case you want to perform some action at the end of the demonstration.

 demo . openApp ( 'terminal' )
     . command ( 'node demo' )
     . respond ( 'Hello World!' )
     . end ( )
     . then ( ( )  =>  {
       // Custom code to be performed at the end of the demostration goes here.
     } ) ;

IMPORTANT: Do not forget to invoke it at the end of your demo. Otherwise, the demo won't be played.

Contributing

  1. Install Node . Download the "Recommend for Most Users" version.

  2. Clone the repo:

 git clone  git@github.com :glorious-codes/glorious-demo.git
  1. Go to the project directory:
 cd glorious-demo
  1. Install the project dependencies:
 npm install
  1. Build the project:
 npm run build

Tests

Ensure that all code that you have added is covered with unit tests:

 npm run test -- --coverage