The easiest way to demonstrate your code in action.
npm install @glorious/demo --save
< link rel =" stylesheet " href =" node_modules/@glorious/demo/dist/gdemo.min.css " >
< script src =" node_modules/@glorious/demo/dist/gdemo.min.js " > </ script >
// 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 ( ) ;
/*
** @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 ( ) ;
/*
** @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: 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 ( ) ;
/*
** @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 ( ) ;
demo . openApp ( 'terminal' )
. command ( 'node demo' )
. respond ( 'Hello World!' )
. end ( )
. then ( ( ) => {
// Custom code to be performed at the end of the demostration goes here.
} ) ;
-
Install Node . Download the "Recommend for Most Users" version. -
Clone the repo:
git clone git@github.com :glorious-codes/glorious-demo.git
-
Go to the project directory:
cd glorious-demo
-
Install the project dependencies:
npm install
-
Build the project:
npm run build
npm run test -- --coverage