Automate screenshot generation

[brendanzab]

Automate screenshot generation

[brendanzab]

So this kind of works:

cargo run --example emit 2>&1 | ansifilter --svg --encoding utf8 -o test.svg

But it seems to be outputting unbalanced tags in the SVG. When opening up the file in Firefox I get:

XML Parsing Error: mismatched tag. Expected: </tspan>.
Location: file:///.../codespan/test.svg
Line Number 28, Column 3:
</text>
--^

I'm guessing this is to do with how ansifilter is interpreting the resets sent from termcolor.

[brendanzab]

Ok, so it seems #96 fixes the woes with ansifilter! I'm guessing it was choking on interpreting pairs of set_color and reset across lines.

[brendanzab]

One thought: we might be able to just hook into the termcolor writer in a way that's similar to how we test codespan, and generate an SVG (note that I've not tested the following against github's SVG sanitiser):

<svg viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
  <style>
    /* https://github.com/aaron-williamson/base16-alacritty/blob/master/colors/base16-tomorrow-night-256.yml */

    pre {
      background: #1d1f21;
      margin: 15px;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
      color: #ffffff;
      font: 10px SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
    }

    pre .bold { font-weight: bold; }

    pre .fg-black   { color: #1d1f21; }
    pre .fg-red     { color: #cc6666; }
    pre .fg-green   { color: #b5bd68; }
    pre .fg-yellow  { color: #f0c674; }
    pre .fg-blue    { color: #81a2be; }
    pre .fg-magenta { color: #b294bb; }
    pre .fg-cyan    { color: #8abeb7; }
    pre .fg-white   { color: #c5c8c6; }

    pre .fg-black.bright    { color: #969896; }
    pre .fg-red.bright      { color: #cc6666; }
    pre .fg-green.bright    { color: #b5bd68; }
    pre .fg-yellow.bright   { color: #f0c674; }
    pre .fg-blue.bright     { color: #81a2be; }
    pre .fg-magenta.bright  { color: #b294bb; }
    pre .fg-cyan.bright     { color: #8abeb7; }
    pre .fg-white.bright    { color: #ffffff; }
  </style>

  <foreignObject x="10" y="10" width="580" height="380">
    <div xmlns="http://www.w3.org/1999/xhtml">
      <pre><span class="fg-red bold bright">error[E0308]</span><span class="bold bright">: `case` clauses have incompatible types</span>

   <span class="fg-blue">┌</span><span class="fg-blue">──</span> FizzBuzz.fun:3:15 <span class="fg-blue">───</span>
   <span class="fg-blue">│</span>
 <span class="fg-blue">8</span> <span class="fg-blue">│</span>     _ _ => <span class="fg-red">num</span>
   <span class="fg-blue">│</span>            <span class="fg-red">^^^ expected `String`, found `Nat`</span>
   <span class="fg-blue">│</span>
 <span class="fg-blue">4</span> <span class="fg-blue">│</span>   fizz₁ num = <span class="fg-blue">case (mod num 5) (mod num 3) of</span>
   <span class="fg-blue">│</span> <span class="fg-blue">╭─────────────'</span>
 <span class="fg-blue">5</span> <span class="fg-blue">│</span> <span class="fg-blue">│</span><span class="fg-blue">     0 0 => "FizzBuzz"</span>
 <span class="fg-blue">6</span> <span class="fg-blue">│</span> <span class="fg-blue">│</span><span class="fg-blue">     0 _ => "Fizz"</span>
 <span class="fg-blue">7</span> <span class="fg-blue">│</span> <span class="fg-blue">│</span><span class="fg-blue">     _ 0 => "Buzz"</span>
 <span class="fg-blue">8</span> <span class="fg-blue">│</span> <span class="fg-blue">│</span><span class="fg-blue">     _ _ => num</span>
   <span class="fg-blue">│</span> <span class="fg-blue">╰──────────────' `case` clauses have incompatible types</span>
   <span class="fg-blue">│</span>
 <span class="fg-blue">3</span> <span class="fg-blue">│</span> fizz₁ : Nat → <span class="fg-blue">String</span>
   <span class="fg-blue">│</span>               <span class="fg-blue">------ expected type `String` found here</span>
   <span class="fg-blue">│</span>
   <span class="fg-blue">=</span> expected type `String`
        found type `Nat`
</pre>
    </div>
  </foreignObject>
</svg>

[brendanzab]

Seems like it works! https://gist.github.com/brendanzab/eacd88be521e49669506bc4bd6deb3a6