Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/glorious-codes/glorious-demo
The easiest way to demonstrate your code in action.
https://github.com/glorious-codes/glorious-demo
animation code demo editor mac snippet terminal
Last synced: 1 day ago
JSON representation
The easiest way to demonstrate your code in action.
- Host: GitHub
- URL: https://github.com/glorious-codes/glorious-demo
- Owner: glorious-codes
- License: mit
- Created: 2018-07-15T03:00:25.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-26T22:37:46.000Z (about 1 year ago)
- Last Synced: 2024-12-13T09:04:24.320Z (8 days ago)
- Topics: animation, code, demo, editor, mac, snippet, terminal
- Language: JavaScript
- Homepage: https://gdemo.compilorama.com
- Size: 2.04 MB
- Stars: 3,406
- Watchers: 30
- Forks: 108
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-starred-test - glorious-codes/glorious-demo - The easiest way to demonstrate your code in action. (JavaScript)
- awesome-repositories - glorious-codes/glorious-demo
- awesome-made-by-brazilians - Glorious Demo
README
# Glorious Demo
> The easiest way to demonstrate your code in action.
[](https://circleci.com/gh/glorious-codes/glorious-demo)
[](https://coveralls.io/github/glorious-codes/glorious-demo?branch=master)
## Installation
```
npm install @glorious/demo --save
```
## Basic Usage
``` html
```
*Note: If you're not into package management, load it from a third-party [CDN provider](https://github.com/rafaelcamargo/glorious-demo/wiki/CDN-Providers).*
``` javascript
// 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](https://github.com/rafaelcamargo/glorious-demo/wiki/Syntax-highlight) to know how to use Prism to get your code highlighted.*
### API
#### `openApp`
Opens or maximizes an open application.
``` javascript
/*
** @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: 1000 // Delay before executing the next method
}
demo.openApp(applicationType, openAppOptions).end();
```
#### `write`
Writes some code in the open Editor application.
``` javascript
/*
** @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: 500 // Delay before executing the next method
}
demo.openApp('editor').write(codeSample, writeOptions).end();
```
#### `command`
Writes some command in the open Terminal application.
``` javascript
/*
** @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 = '$'
const commandOptions = {
id: 'someId', // Identifies an application, in case of multiple instances
promptString, // Sets a custom string. Default: ~/demo $
onCompleteDelay: 500 // Delay before executing the next method
}
demo.openApp('terminal').command(command, commandOptions).end();
```
#### `respond`
Shows some response on the open Terminal application.
``` javascript
/*
** @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 = `
+ @glorious/demo successfully installed!
+ v0.6.0
`;
const respondOptions = {
id: 'someId', // Identifies an application, in case of multiple instances
onCompleteDelay: 500 // 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.
``` javascript
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](https://nodejs.org/en/). Download the "Recommend for Most Users" version.
2. Clone the repo:
``` bash
git clone [email protected]:glorious-codes/glorious-demo.git
```
3. Go to the project directory:
``` bash
cd glorious-demo
```
4. Install the project dependencies:
``` bash
npm install
```
5. Build the project:
``` bash
npm run build
```
## Tests
Ensure that all code that you have added is covered with unit tests:
``` bash
npm run test -- --coverage
```