elixir-lang / elixir-lang.github.com

Website for Elixir
elixir-lang.org
354 stars 822 forks source link

Remove data-rows attr from asciinema script tags #1582

Closed ku1ik closed 2 years ago

ku1ik commented 2 years ago

Hey!

First, it always feels good to see asciinema demo in new release posts ❤️

I've recently released a new major version of the asciinema web player which, among other things, comes with vastly better way of scaling the text with regards to the number of colums/rows and available space in the container element on the page (is also responsive, and looks much better on small screens, .e.g mobile). asciinema.org has been already updated to use it, including the embed script/iframe.

One result of this that's relevant for embedding is that font size is now automatically scaled to make all terminal content visible, while previously the font size was fixed and if there was more columns than can fit in the embed area the terminal content on the right side was cut off.

For cases where you record in a wide terminal and then embed in a relatively narrow space on the website (grid column / div) this makes text very small, harder to read.

One way to solve this when embedding is to pass the data-cols and data-rows attributes to the embed script. This is what you did for the 1.12 release post.

I've just added a persistent settings for terminal colums and rows to the asciicast settings page:

terminal-size-settings

These default to the original values found in uploaded asciicast files, and can be used to override the dimensions so it's applied automatically to the embeds as well as to the player viewed directly on asciinema.org. The data-cols / data-rows attrs still work, and can be used to override the persisted setting from asciinema.org

I went through the recent posts on this blog and found that the embedded demos have rather small text (due to the new fitting algorithm) so I went ahead and updated the columns and rows overrides to make the text in demos good looking. I set 100 columns on all your demos so the text size is consistent between demos. For the ones where I found you used data-rows=20 I set this value in the database, which makes it look the same on the blog and when viewed directly on asciinema.org.

With that in place the override on the script tags in 1.12 post is now redundant so this PR removes it. Keeping it as it is brings no issues and doesn't change the display so feel free to ignore this PR. I just took this PR as an opportunity to let you know about the above changes :)

josevalim commented 2 years ago

Thank you for the PR! I love asciinema, it is my pleasure to use it. :)

josevalim commented 2 years ago

:green_heart: :blue_heart: :purple_heart: :yellow_heart: :heart: