Add standalone asciinema players to example page

[hyrodium]

This PR adds standalone asciiinema players. x-ref: https://github.com/AtelierArith/Replay.jl/pull/54#issuecomment-1501776517.

[hyrodium]

Hmm, the standalone players don't fit the page in my local environment.

https://user-images.githubusercontent.com/7488140/231814266-bdb93d27-de1b-4f23-92ce-625d1bcbe095.mp4

Maybe we should enable push_preview option in Documenter.deploydocs and check a result from the GitHub action, but it looks like I need permission to push to the repository for this.

This feature works for pull requests with head branch in the same repository, i.e. not from forks.

https://documenter.juliadocs.org/stable/lib/public/#Documenter.deploydocs

---

EDIT (2023-04-16) I tried on another environment with a smaller display, but the unwanted scrollbar problem still exists, so it seems push_preview does not help here. I will check asciinema-player documentation this week.

[terasakisatoshi]

the standalone players don't fit the page in my local environment.

I could reproduce the issue you reported.

[terasakisatoshi]

FYI Websites built by Franklin.jl does not have the issue.

https://user-images.githubusercontent.com/16760547/232522380-3b97a5f6-b96b-4fd7-84e9-9d1a77f457e0.mov

[hyrodium]

I found a way to fix the problem with some dirty hacks. I will clean up my code and push the changes tomorrow.

https://user-images.githubusercontent.com/7488140/232535561-afe59f19-6255-420b-bc40-0dced922b2f6.mp4

[terasakisatoshi]

I found a way to fix the problem with some dirty hacks. Excellent! I also found a solution.

Here is what I did:

git diff asciinema-player.css
diff --git a/docs/src/assets/asciinema-player.css b/docs/src/assets/asciinema-player.css
index a5898e5..4acdbff 100644
--- a/docs/src/assets/asciinema-player.css
+++ b/docs/src/assets/asciinema-player.css
@@ -102,7 +102,7 @@
   overflow: hidden;
   max-width: 100%;
   border-radius: 4px;
-  font-size: 15px;
+  font-size: 20px;
 }
 pre.asciinema-terminal {
   box-sizing: content-box;

https://user-images.githubusercontent.com/16760547/232539914-29f4c4f6-cee1-4c31-9f55-0609102a9e52.mov

I'm not sure this is the best, but it works. 😅

[hyrodium]

What I did were creating *.html file for each *.cast file and embedding the HTML files to examples.md. But the solution of changing the CSS file would be better:+1:

[hyrodium]

Hmm, it seems that the new player is cutting off lines with a large number of characters in my environment.

[hyrodium]

The player's cutting-off problem is maybe just in my environment, so I pushed the commit.

We have more options to embed the player (e.g. use Franklin.jl, use VHS, fix CSS file more, etc.), but the main problems (i.e. adding standalone players, fixing the scrollbar) are solved, so I think this PR is ready to merge.

[terasakisatoshi]

🥇 I appreciate your contributions.