glorious-codes / glorious-demo

The easiest way to demonstrate your code in action.

Glorious Codes

Glorious Codes website

Contributing

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

2. Clone the repo:

git clone [email protected]:glorious-codes/glorious-codes.git

3. Go to the project directory

cd glorious-codes

4. Install the project dependencies

npm install

5. If you want to just build the project, run:

npm run build

6. Otherwise, run:

npm run start

The app runs on http://localhost:7000. The browser automatically reloads for any source file changes.

Tests

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

npm run test

2. You can optionally generate coverage report after running tests:

npm run test -- --coverage

glorious-demo's Issues

Span height issue creating mini vertical scroll

The default span.cursor class has a height of 24px.

I found this creates these weird mini vertical scroll bars when writing to an editor.

Changing span.cursor to a height of 16px fixed the issue.

Create image for Product Hunt gallery

Size: 1920x760 (px)

Improve terminal application line breaks

Lines must not break to keep layout consistent.

Is it for programming video teaching video tutorial?

Dear author:
i'm teaching programming in video tutorial. And i want to show code in slides in an elegant and interactive way.
Current I found Carbon is good enough to show static code image in an element way. However it's static and can not show code animation line by line , or paragraph by paragraph.

I find your great Glorious tool can show code in an interactive way. and I have some questions.

1. Can Glorious export the animation to a gif file? so that i can embed it in ms office.
2. Can I control the line or paragraph show time? i mean, can i set it show after n seconds, or even show it after i click?
3. Can i easily export a gif of a file by giving any source file?

Thank you.

Circle CI is not building fork Pull Requests

Feliciano's comment gives a good insight about this here. However, even after to turn it on (in Circle CI advanced settings), Pull Requests are not getting built.

Investigate it a little better and, if no success with CircleCI, change it to Travis.

Add software license

Add MIT License to the project

npm run build failure

It seems like your build script isn't working. After cloning and installing, the npm run build command will initially tell you that it won't work because the script is just a filepath, not a command. After changing this to node ./node_modules/whatever/webpack.js the build script will still fail. Thoughts?

Animaton start

To avoid users to miss the animation, play it only when its container gets visible on screen.

Automatically scroll if text exceeds the bounds of the text box

Currently, if my code exceeds the bounds of the text box, a scroll bar appears and then I can manually scroll down to see what is there. However, given the demo/presentation nature of this tool, it would be nice if it could automatically scroll instead. So when the code exceeds the area provided, it should scroll down automatically. Or at least there should be an option for this behavior.

Create a minimal syntax highlighter for javascript

Why

Highlight.js seems to be a heavy package to be included. That said, create a minimal syntax highlither for javascript or investigate the use of the alternative called Prism. As we can read on its page, the use of a babel plugin allows include only the necessary language:

To make it easy to configure your Prism instance with only the languages and plugins you need, use the babel plugin, babel-plugin-prismjs. This will allow you to load the minimum number of languages and plugins to satisfy your needs. See that plugin's documentation for configuration details.

Example of how using Prism to get the code highlighted:

var Prism = require('prismjs');

// The code snippet you want to highlight, as a string
var code = "var data = 1;";

// Returns a highlighted HTML string
var html = Prism.highlight(code, Prism.languages.javascript, 'javascript');

How

First Alternative

• Make Prism work when passing a code sample to write() method;
• If succeed, write instructions on how highlight code in a specific Wiki page and refer ir on README.

Use Prism when passing a code sample to write() method:

import Prism from 'prismjs';
import GDemo from '@glorious/demo';

const code = `
  console.log("Hello World!");
`;
const highlightedCode = Prism.highlight(code, Prism.languages.javascript, 'javascript');

const demo = new GDemo('#container');
demo.openApp('editor').write(highlightedCode).end();

Second Alternative

• Editor Application should be able to receive syntaxHighlighter (plugin) in its options.
• Plugins should export an object containing only one method , highlight().
• Plugin should be able to receive a plain code and returns it wrapped in the appropriated <span> with css classes applied.

import jsSyntaxHighlighter from '@glorious/js-syntax-highlighter';
import GDemo from '@glorious/demo';

const demo = new GDemo('#container');
demo.openApp('editor', { syntaxHighlighter: jsSyntaxHighlighter }).end();

change the style of the cursor

It's better to create the API to change the style of the cursor, such as ▋ and _, and the original style seems not suitable for the terminal.

Add some formatter to the project

Suggestion: ESLint

Typing animation for only certain part of code

Just like If I am already have block of code and wanted to add an additional line in it. only the new line should be animated inside the static code content. will this be possible?

Chinese with your README.md + Wiki, if you like :)

Translation

• https://github.com/chinanf-boy/glorious-demo-zh
• https://github.com/chinanf-boy/glorious-demo-zh/wiki

Improve terminal application

Find a way to avoid having to write an empty command step.

First alternative

• Instantiate terminal with one terminal command line already built
• When commanding, look and type on the last terminal command line built

Second alternative

• ?

Extendable API

I was wondering if there were plans to create an extensible API so users can additional types of applications. I would be very interested in contributing to something like this.

I am working on a fork of this project to allow users to demo a web browser experience using your base code. I wouldn't want that browser window to be added to this repo as it would bloat the app unnecessarily for most people, but I think lots would value if they could add it as an option if we added some sort of API to add extra types of applications.

Let me know what you think and I can submit a PR possibly :)

Add possibility to customize typing speed

This enhancement has been suggested by Ignacio as a review on Glorious Demo's page at Product Hunt:

Hey, great product!

It'd be awesome if it included speed per code snippet. e.g. a piece of code that is 3x and another that is 1x.

This is useful to display code that is not critical at a fast speed.

Add possibility to open an application without window animation

At this moment, a "maximizing window movement" is fired when openApp is invoked.

The ideia behind this issue is to offer the possibility to optionally turn off this movement, starting the animation with the application window already shown.

Example

.openApp('editor', { animation: false })

Allow to pass HTML string as terminal response or prompt string

This will allow full customisation of prompt string and responses.

Allow users to edit the existing typed code in the editor

According this comment, figure out a way of offering a way to edit some already typed code.

Users should be allowed to:

• Add an entire new line in the middle of the existing code
• Add a new char in the middle of some existing line
• Remove an entire line
• Remove a char from a specific line

Retro terminal

Hi @rafaelcamargo.
How are u buddy ?! :)
What's your idea to implement this type of terminal ?!
terminal emulator
so cute :D

Provide a referrence sheet and an examples page on the website.

write() doesn't honor code highlighted with Prism

Hi @rafaelcamargo,

First, thanks for the great package; look what I did it with it in around a half-an-hour:
Code Demo App

But, now I'm facing a problem with the editor's write() method, it renders the highlighted code
as plain HTML ...

The code I'm trying to show:

function name () {doSomething();}

What I verified was:

• This has nothing to do with the position of the container (nor its styling apparently)
• The terminal app works fine
• The text to be highlighted is pulled out of a YAML file, but putting it in a const code as is produces the same output.

What I suspect to cause the problem:

Maybe nesting things in a function. Check How I'm doing this.
It's likely that passing demo as an argument like this is causing this issue but I don't know how to debug this kind of stuff 😢

I hope you could help me figure out what I'm missing here; and thanks in advance

Include animation in README

High Quality

Low Quality

Remove babelrc.js

Missed to to remove that.

Make .end() return a promise

Ref.: #47 (comment)

How to close demo after "end( )" ?

It should have a "close( )" method to close the terminal after ending.

Issue with character escaping when using Prism

Assuming the following code:

const gdemo = new GDemo('[data-demo-container]');

const code = `
let x = 4

if (x > 2) {
  console.log('Oops')
}
`

const highlightedCode = Prism.highlight(
  code,
  Prism.languages.javascript,
  'javascript'
);

gdemo
  .openApp('editor', { minHeight: '400px', windowTitle: 'demo.js' })
  .write(code)
  .write(highlightedCode, { onCompleteDelay: 2000 })
  .end();

Using Prism for highlight, makes glorious-demo produce incorrect characters, replacing the > for \&gt\;.

Allow Multiple Terminals

I am trying to create a demo where I start a server and then curl the API. It would be nice if I could open a new terminal session (it would look pretty cool if it shows up as a tab at the top) and switch back and forth while adding responses to each one independently

Support soft-wrap feature

Usually, the IDE provides a function called soft-wrap.

This is automatically displayed in the next line when a line of text exceeds the width of the screen.

What do you think of adding this same feature?

Create a method to close some application

Something like:

demo.openApp('terminal').closeApp('terminal').end();

More info: #47 (comment)

NPM format script not working on Windows

According this, remove single quotes from the command.

HTML vs Plain Text Handling

Here's a quick sample of a demo:

const animator = new GDemo('#container');
animator.openApp('editor');
animator.write('class Test extends Base<T>');
animator.write('<span></span>class Test extends Base&lt;T&gt;');

This particular demo creates some issues.

The first line renders exactly as written with the < and > being rendered as is.
The second line actually decodes the < and > into < and >.

So there is an unexpected difference in how it renders the two lines of code.

I would expect it to either always decode the symbols or never decode them, rather than sometimes as it is right now.

Allow to open an application with some content already typed

Sometimes, we just need open the application window with some code already typed on it.

Create a method to clear terminal content

Something like:

demo.openApp('terminal')
  .comand('node ./demo')
  .respond('Hello World!', { onCompleteDelay: 2000 })
  .clear()
  .end();

More info: #47 (comment)

Create new animation for README

The new animation should contain some highlighted code.

Improve white space on terminal application

hello, @rafaelcamargo

Thanks for creating glorious-demo.

I used glorious-demo on my blog.

And I found a problem. There is no problem with editor type, but terminal type does not represent white space.

I used a temporary <span style =' white-space: pre '> ... </ span> to solve this problem. But I think there is a better way.

example

<html>
<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@glorious/[email protected]/dist/gdemo.min.css">
</head>
<body>
<div id="container"></div>

<script src="https://cdn.jsdelivr.net/npm/@glorious/[email protected]/dist/gdemo.min.js"></script>
<script>
const demo = new GDemo('#container');

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

greet();
`;

demo
    .openApp('terminal', {minHeight: '350px', promptString: '$'})
    .command('cat demo.js', {onCompleteDelay: 500})
    .respond(code)
    .command('')
    .end();

</script>
</body>
</html>

result

$ cat demo.js
function greet(){
console.log("Hello World!");
}

greet();

+) I will make hexo tag library of glorious-demo. how about you?

Include cursor animation when typing some text

• Make animated cursor default
• Allow to hide cursor optionally

Support multi-line commands

Hi Rafael, love your nifty library, it's really useful!

I've tried to make multi-line commands work but it's as neat as single line commands:

Eg in order to display :

$ curl \
  http://localhost:8008 \
  --request POST \
  --header "Content-Type: application/json" \
  --data '{"status": "ok"}'

I wrote this script:

const demo = new GDemo('#demo-container');

const inputCommand = `
curl \\
  http://localhost:8008 \\
  --request POST \\
  --header "Content-Type: application/json" \\
  --data '{"status": "ok"}'
`;

const result = `OK`;

demo
    .openApp('terminal',
        {
            minHeight: '350px',
            windowTitle: 'terminal',
            onCompleteDelay: 1000,
            promptString: '$'
        })
    .command(inputCommand, {onCompleteDelay: 500})
    .respond(result)
    .command('')
    .end();

Which produces this result.

I tried encoding the inputCommand using HTML with div and span elements but unfortunately, the next.command('') isn't aware of the last line and produces a new prompt on line 2!

Allow multiple independent editors.

I would like to be able to open multiple editors (one at a time) to represent different files. In otherwords, I'd like to be able to do something like:

demo
  .openApp('editor', {minHeight: '350px', windowTitle: 'file1.js'})
  .write(code, {onCompleteDelay: 1500})
  .openApp('editor', {minHeight: '350px', windowTitle: 'file2.js'})
  .write(otherCode, {onCompleteDelay: 1500})
  .end();

However, with the current implementation, this just appends to the existing editor, rather than creating a new one. It would be better if this would create a new editor with a new window title.

Reveal code manually, one line at a time.

It might be nice to have a feature where rather than automatically typing out the code all at once, you could trigger it to reveal one line at a time (say every time you press enter or space).

This would allow for a more controlled demo experience if required.