GitHub - glorious-codes/glorious-demo: The easiest way to demonstrate your code...
source link: https://github.com/glorious-codes/glorious-demo
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
Glorious Demo
The easiest way to demonstrate your code in action.
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: 1500}) .openApp('terminal', {minHeight: '350px', promptString: '$'}) .command('node ./demo', {onCompleteDelay: 500}) .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', promptString: '~/my-project $', // for 'terminal' applications only onCompleteDelay: 1000 // 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 = { onCompleteDelay: 500 // 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 = { promptString, onCompleteDelay: 500 // 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 = { onCompleteDelay: 500 // Delay before executing the next method } demo.openApp('terminal').respond(response, respondOptions).end();
end
Indicates the end of the demonstration. Do not forget to invoke it at the end of your demo. Otherwise, the demo won't be played.
Contributing
-
Install Node. Download the "Recommend for Most Users" version.
-
Clone the repo:
git clone [email protected]:rafaelcamargo/glorious-demo.git
- Go to the project directory:
cd glorious-demo
- Install the project dependencies:
npm install
- Build the project:
npm run build
Tests
Ensure that all code that you have added is covered with unit tests:
npm run test
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK