Asciinema Terminal Recordings

[tilman-schieber]

I am trying to embed terminal recordings with asciinema
I tried

script:   https://cdn.jsdelivr.net/npm/asciinema-player@3.8.0/dist/bundle/asciinema-player.min.js
link:     https://cdn.jsdelivr.net/npm/asciinema-player@3.8.0/dist/bundle/asciinema-player.min.css

@asciinema
<div id="@0"></div>
<script run-once modify="false">
  AsciinemaPlayer.create('cast/@0.cast', document.getElementById('@0'));
</script>
@end

I load this via asciinema(test) but it gives errors I do not understand, e.g.
missing ) after argument list

I reckon I should use the parameter format that uses markdown links... but the documentation is very sparse and I cannot get it to work
Am I close to the solution? or what am I misunderstanding?

[tilman-schieber]

I had some typos in it and I think I figured out the link-parameter thingy:

@asciinema
<div id="@0"></div>
<script run-once modify="false">
  var _ = AsciinemaPlayer.create("@0", document.getElementById("@0"));
</script>
@end

this seems to works fine and I use it with
@[asciinema](cast/test.cast)

I have assigned the output to the variable _ so I do not get some json on the page. Is there a more elegant way to suppress output?
And I am still a bit lost how I can now pass additional options to the URL parameter. I want to pass some optional options as a JS Object to the AsciinemaPlayer.create call but I cannot get it to work.

[andre-dietrich]

I have never heard of ASCIINEMA ... sounds very interesting ...

Maybe this can help ... added a helper macro ... the first sets some optional parameters, @uid will generate a unique id, and then the first and the second parameter are passed as @0 -> @1 and @1 -> @2 (this is the URL). If the URL is relative, then a full path relative to the README will be automatically generated. The last parameter is always the URL, you can also add multiple additional parameters, which are separated by comma within the first parenthesis ... or like in the second example predefine some values, which are passed ...

<!--
script:   https://cdn.jsdelivr.net/npm/asciinema-player@3.8.0/dist/bundle/asciinema-player.min.js
link:     https://cdn.jsdelivr.net/npm/asciinema-player@3.8.0/dist/bundle/asciinema-player.min.css

@asciinema: @asciinema_helper(@uid,@0,@1)

@asciinema2: @asciinema_helper(@uid,width: 100%; height 65vh,@0)

@asciinema_helper
<div id="id_@0" style="@1"></div>
<script run-once modify="false">
  AsciinemaPlayer.create('@2', document.getElementById('id_@0'));
  console.log("The last statement has to be undefined to prevent beeing displayed")
</script>
@end

-->

# Course

@[asciinema(width: 100%; height 65vh)](cast/test.cast)

@[asciinema2](cast/test.cast)

I hope this works and makes sense ;-) ... This looks like an interesting template that you could also publish. By tagging your project with liascript-template this will be visible for others ...

[tilman-schieber]

Yes I like asciinema because its just a text based format that I can add to git and its better than a video because you can copy&paste the commands.
Thanks for your improved asciinema macros.
The uuid is a nice touch. Is this just a built in macro?

However you misunderstood my admittedly vaguely formulated problem:
I do not want to pass css styling to the player but I want to pass a JS object to the player that contains configuation options.
In plain JS i would write for example

AsciinemaPlayer.create('cast/test.cast', document.getElementById('demo'), {
  speed: 2,
  idleTimeLimit: 2,
});

I want the call
@[asciinema(speed: 2; idleTimeLimit: 2)](cast/test.cast)
to result in the above javascript (that would be ideal but doing it differently would also be fine)

I guess I have a really poor understanding how macros work under the hood but I cannot figure it out. I do not mind passing the whole options object in curly braces but this also does not work for some reason (the commas perhaps being the issue).

I appreciate you being so responsive. Once I am happy with it I'd be happy to create an asciinema template and tag it accordingly. Although if you have to fix my mistakes it would probably be more honest if you published it ;-)

[andre-dietrich]

Hi, I am currently on holidays, that's why the response is so delayed ... your solution might look like this:

<!--
script:   https://cdn.jsdelivr.net/npm/asciinema-player@3.8.0/dist/bundle/asciinema-player.min.js
link:     https://cdn.jsdelivr.net/npm/asciinema-player@3.8.0/dist/bundle/asciinema-player.min.css

@asciinema: @asciinema_helper(@uid,`@0`,@1)

@asciinema2: @asciinema_helper(@uid,`speed: 2, idleTimeLimit: 2`,@0)

@asciinema_helper
<div id="id_@0"></div>
<script run-once modify="false">
  AsciinemaPlayer.create('@2', document.getElementById('id_@0'),{@1});
  console.log("The last statement has to be undefined to prevent being displayed")
</script>
@end

-->

# Course

@[asciinema(`speed: 2, idleTimeLimit: 2`)](cast/test.cast)

@[asciinema2](cast/test.cast)

To handle parameters with commas, you can surround them with backticks.
The idea behind macros is quite simple, think of it as a string that gets injected directly where the @asciinema macro is defined. The parser stops at this place, searches for an existing definition and tries to set all parameters, if parameters are also macros, then they are evaluated and beforehand. The newly generated string is then used to replace the macro and the parsers takes over the control again ... It is simply a string substitution that outputs markdown, LiaScript, JavaScript or other macros ...

Does this make sense?

[tilman-schieber]

Okay now I get it. Actually I had it almost right, my misunderstanding was the correct numbering of the arguments. For some reason I assumed the argument in square brackets would always be @0. Renumbering the arguments in @asciinema2 did the trick!
Thanks again for the help and enjoy you holidays.