Glorious Demo

演示代码的最简单方法。

安装

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>

注意：如果您不了解包管理，请从第三方CDN 提供商加载它。

// 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();

注意：查看此处了解如何使用 Prism 突出显示您的代码。

API

openApp

打开或最大化打开的应用程序。

/*
** @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
  initialContent: 'Some text', // for 'editor' applications only
  inanimate: true, // Turns off application's window animation
  onCompleteDelay: 1000 // Delay before executing the next method
}

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

write

在打开的编辑器应用程序中编写一些代码。

/*
** @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

在打开的终端应用程序中写入一些命令。

/*
** @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

在打开的终端应用程序上显示一些响应。

/*
** @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

表示演示结束。如果您想在演示结束时执行某些操作，该方法将返回一个承诺。

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

重要提示： 不要忘记在演示结束时调用它。否则，演示将无法播放。

贡献

1. 安装节点。下载“推荐给大多数用户”版本。
2. 克隆回购：

git clone git@github.com:glorious-codes/glorious-demo.git

3. 进入项目目录：

cd glorious-demo

4. 安装项目依赖：

npm install

5. 构建项目：

npm run build

测试

确保您添加的所有代码都包含在单元测试中：

npm run test -- --coverage