Make asciinema responsive with fit: width

[albertchae]

Fixes https://github.com/NixOS/nixos-homepage/issues/1323

Let asciinema handle responsive design by setting fit: 'width'

https://docs.asciinema.org/manual/player/options/#fit

This is the default option but it is currently false.

It seems like we need to make a tradeoff between fitting all the text in or having a larger font. I'm betting on showing all the content being the more important of the two and that we can have terminal replays with fewer columns if we really want larger font. And it's easier to rely on asciinema's player to be responsive than to adjust font size manually ourselves.

• deleted terminalFontSize per docs that this is only relevant if fit is set to false.

• Set width to 100% instead of max-width for the asciinema examples max-width: 100% resulted in these player elements getting a width of 0 after setting player fit to width

• Use font loading API to block on font loading before mounting AsciinemaPlayer

  Trying to use Fira Code Variable was causing asciinema player elements to cut text off (at least in Firefox and Safari).

  Per the note on the bottom of https://docs.asciinema.org/manual/player/fonts/

  The player performs measurement of font metrics (width/height) when it mounts in the page, therefore it's highly recommended to ensure chosen font is already loaded before calling create. This can be achieved >

  To verify this fix, it's best to observe the network tab for font transfers with Disable Caches checked to verify that the layout issue happens when the font isn't retrieved from the cache.

• Set width of every scenario to 81

  This is the longest line out of all the scenarios when running wc -L *.scenario

  Although that's the only scenario that has a line that is 81 characters wide, per the documentation here https://docs.asciinema.org/manual/player/options/#cols

  It's recommended to set it to the same value as in asciicast file to avoid player resizing itself from 80x24 to actual dimensions of the recording when it gets loaded.

  so I just set it to 81 for all of them for simplicity

  Screenshots (from iOS)

  Before

  

After

So although there's a big improvement in being able to see the entire width of the terminal, for the top example there is still some bleeding of the terminal text into the border. This looks like it is only happening on Safari/webkit both on mobile and desktop. Chrome/Firefox look OK on mobile and desktop.

I opened https://github.com/asciinema/asciinema-player/issues/258 to double check if I'm doing something wrong and/or if there is a workaround

[github-actions[bot]]

🚀 Deployed on https://6609064bbd201684d378b549--nixos-homepage.netlify.app

[ku1ik]

max-width: 100% alone won't work with fit: 'width' as the player needs to know the actual/current width for the scaling of its terminal view to work. So switching to width: ... is indeed the right thing to do here :+1: