terminal.css needs more colors and blinking

[matthias-vogt]

This input: out.txt

Should look like this: (Terminal.app and iTerm 2 with standard ANSI colors)

…but looks more like this:

So the "2 - 6" has no color and the little bolts don't blink.

[mipearson]

Yeah, I think it's that the provided terminal.css doesn't include those codes.

Also the current code doesn't interpret blink, but that's trivial to add.

@keithpitt any chance we can get the terminal.css that's used with buildkite atm in this repo as the example?

[ticky]

Just had a look, and the only difference in our production CSS is that Consolas has been added to the font stack!

There do seem to be a few omissions in the regular colour palette 🤔

[keithpitt]

https://gist.github.com/keithpitt/f35b0101a12adc382ccce337505c2a90

I've just gisted it up!

[keithpitt]

Feel free to make revisions to the CSS and I'll get it merged it back in.

[ticky]

I’d love to move this to frontend (but uh, lol, #41), or have it imported from this repo so it’s consistent. Is submoduling Terminal even reasonable?

[keithpitt]

@ticky we could totally just copy/paste the CSS file from our backend application to frontend - nothing wrong with that!

[ticky]

I guess, but given that this would also ideally be something shipped with Terminal that may be suboptimal?

[keithpitt]

Yeah probably. I also just realised that @matthias-vogt might be using this library standalone (not through Buildkite) :P

[matthias-vogt]

That's right :)

[keithpitt]

@matthias-vogt ah! In that case, you just need to add a few more lines to this file: https://github.com/buildkite/terminal/blob/master/assets/terminal.css We'd happily accept a pull request adding a few extra colours to it.

[mipearson]

If somebody writes a CSS animation for blink and adds it to the file, I'll add the code to interpret it.

[mipearson]

(I briefly considered having it wrap in <blink> but then came to my senses)

[matthias-vogt]

.terminal-blink {
    animation: blink 1s infinite steps(2);
}

@keyframes blink {
    from { opacity: 0 }
    to { opacity: 1 }
}

[matthias-vogt]

I don't really know anything about color codes so I was hoping you guys could help me out with that…

[ticky]

Things missing;

• bold (for the  → stanza
• Xterm extended foreground colours 47 and 49 (which for some reason are both present in the CSS?)

[mipearson]

Huh, so it might actually be a Go bug. I should have some time this weekend to dive in further.

[ticky]

Looking into prepping a more comprehensive Xterm-256color test, as they seem… thin on the ground?

[ticky]

Something like

#!/usr/bin/env bash

COLGROUPS=40

if which tput >/dev/null 2>&1; then
  COLGROUPS=$(( $(tput cols) / 7 ))
fi

for ((background=0;background<=255;background++)); do
  echo -en "\033[48;5;${background}m"
  for ((foreground=0;foreground<=255;foreground++)); do
    echo -en "\033[38;5;${foreground}m•\033[39m"

    if (( $foreground < 16 && $foreground % 4 == 3 )); then
      echo
    fi

    if (( $foreground > 15 && $foreground < 232 && ($foreground - 15) % 6 == 0 )); then
      echo -en "\033[49m \033[48;5;${background}m"
      if (( ($foreground - 15) / 6 == $COLGROUPS )); then
        echo
      fi
    fi

    if (( $foreground == 231 || $foreground == 255 )); then
      echo
    fi
  done
done

Note that this tests all Xterm-256 backgrounds as well, which we don’t seem to provide support for currently. It’s also probably not an ideal test of the standard 16-colour set as it uses the extended mode control code to apply all the colours! Also, note that this outputs 1.4 MB of text. :P

[mipearson]

I've got a possible fix in https://github.com/buildkite/terminal/pull/44

On my machine the output (when used with terminal-to-html --preview) now matches the expected example above.

[ticky]

I think this was fixed in #44! Feel free to reopen if it wasn’t!

[matthias-vogt]

Beautiful, thanks a lot :) Used it in https://github.com/matthias-vogt/wttr-uebersicht Now the lighting bolts blink when there's thunder! Awesome.