3 ms·

That can be a better way to do terminal sessions in readmes instead of animated gifs.

Cloudef 6y ago
There's already https://github.com/nbedos/termtosvg https://github.com/nbedos/termtosvg for that purpose
derefr 6y ago
Sadly, SVG still doesn't let you pause the animation, let alone copy-and-paste embedded text. Given the number of Github projects that want terminal "demonstrations", I'm surprised Github hasn't just provided first-party support for it (with e.g. a fancy renderer for script(1) code-embeds, that would play back the script session by writing regular DOM text nodes; and which would give you transport controls to pause, scrub through, skip around, etc.) While they're at it, they could also allow embedding of some kind of slide-deck format. Using GIFs for slides has all the same problems. (Hopefully nothing as fancy/complex as PPT; more like a basic-PostScript-profile PDF renderer, that would auto-carousel through the PDF's pages, until you begin interacting with it.)
- nitrogen 6y ago
  Does :focus or :hover apply to CSS in SVG in an <img/> tag? If so, you could use those to implement a sort of pause by combining with the next-sibling operator (actually I really really like the + operator in CSS selectors, because a lot of things that people think you need JS to do can be done with a combination of :focus and +).
- runarberg 6y ago
  > Sadly, SVG still doesn't let you pause the animation Not even through `animation-play-state: paused;`? e.g: :hover { animation-play-state: paused; }
  - uponcoffee 6y ago
    The termtosvg repo linked by another commentor seems to have a pausable example in their examples gallery, so it appears to be doable.
    - maybevain 6y ago
      The difference there is that the pausable SVG is embedded on the page as an object element. There is Javascript inside the SVG document that is enabling the replay to be pausable. Github readmes however only allow embedding SVGs as images, and Javascript won't work in that case. EDIT: added a missing word
runarberg 6y ago
At the very least support videos. That would make a lot of people happy, from being able to pause and fast forward demos in READMEs to issue filers that record the issue with a screen recorder.

There's already https://github.com/nbedos/termtosvg https://github.com/nbedos/termtosvg for that purpose

Sadly, SVG still doesn't let you pause the animation, let alone copy-and-paste embedded text. Given the number of Github projects that want terminal "demonstrations", I'm surprised Github hasn't just provided first-party support for it (with e.g. a fancy renderer for script(1) code-embeds, that would play back the script session by writing regular DOM text nodes; and which would give you transport controls to pause, scrub through, skip around, etc.) While they're at it, they could also allow embedding of some kind of slide-deck format. Using GIFs for slides has all the same problems. (Hopefully nothing as fancy/complex as PPT; more like a basic-PostScript-profile PDF renderer, that would auto-carousel through the PDF's pages, until you begin interacting with it.)

nitrogen 6y ago
Does :focus or :hover apply to CSS in SVG in an <img/> tag? If so, you could use those to implement a sort of pause by combining with the next-sibling operator (actually I really really like the + operator in CSS selectors, because a lot of things that people think you need JS to do can be done with a combination of :focus and +).
runarberg 6y ago
> Sadly, SVG still doesn't let you pause the animation Not even through `animation-play-state: paused;`? e.g: :hover { animation-play-state: paused; }
- uponcoffee 6y ago
  The termtosvg repo linked by another commentor seems to have a pausable example in their examples gallery, so it appears to be doable.
  - maybevain 6y ago
    The difference there is that the pausable SVG is embedded on the page as an object element. There is Javascript inside the SVG document that is enabling the replay to be pausable. Github readmes however only allow embedding SVGs as images, and Javascript won't work in that case. EDIT: added a missing word

runarberg 6y ago

At the very least support videos. That would make a lot of people happy, from being able to pause and fast forward demos in READMEs to issue filers that record the issue with a screen recorder.