search

chipzoller / hugo-clarity

A theme for Hugo based on VMware Clarity
Other
571 stars 263 forks source link

Support for asciinema recordings #97

Open chipzoller opened 3 years ago

chipzoller commented 3 years ago

It would be super cool to support asciinema recordings in Clarity. See also here.

chipzoller commented 3 years ago

@onweru your thoughts on this?

onweru commented 3 years ago

I have been familiarizing myself with the concept. I think we should add it.

chipzoller commented 3 years ago

Should we try and support in this version or table for 2.0 milestone?

onweru commented 3 years ago

I think we can enable it ASAP

toolleeo commented 3 years ago

I made a shortcode for this:

{{ $n := .Get 0 }}
<p align="center">
<script id="asciicast-{{ $n }}" src="https://asciinema.org/a/{{ $n }}.js" async></script>
</p>

Put this in a file like asciicast.html within the directory containing the shortcodes. You can use it like this in your pages:

{{< asciicast num >}}

where num is the id number of the asciicast on the asciinema website.

The only drawback is that the player does not scale well on mobile devices since it uses a fixed width font. But changes to the player are outside of my possibilities. The authors themselves just recommend to use the right width of the window at the time of recording.

rootwork commented 2 years ago

I think we could support this and add some of the customizing the playback options to that shortcode as well. In terms of the mobile sizing issue:

The latest version of the player uses text auto-scaling which adapts font size to the available space. This prevents truncation at the cost of text being very small for cases where screen is small while the terminal size during recording was large. I think it's way better than it used to be though. (Dec. 21, 2021)

So I think that's reasonably addressed, although I have to say it wasn't really mentioned in their documentation anywhere.