From e288d17eb8b7b76babba302f1a63e0a6084c6ab6 Mon Sep 17 00:00:00 2001 From: Balakrishnan Balasubramanian Date: Sat, 22 Jul 2023 20:15:39 -0400 Subject: [PATCH] Add asciinema shortcode and try in Playground --- README.md | 7 ++++++ content/pages/playground.md | 12 +++++++++ layouts/_default/baseof.html | 5 +++- layouts/shortcodes/asciinema.html | 20 +++++++++++++++ static/casts/demo.cast | 42 +++++++++++++++++++++++++++++++ 5 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 README.md create mode 100644 content/pages/playground.md create mode 100644 layouts/shortcodes/asciinema.html create mode 100644 static/casts/demo.cast diff --git a/README.md b/README.md new file mode 100644 index 0000000..b2fa2d4 --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +## Source of balki.me + +## Asciinema + +Followed instructions from here: https://jenciso.github.io/blog/embedding-asciinema-cast-in-your-hugo-site/ + +Asciinema uses wasm which needs CSP unsafe-eval. Ref: https://www.aaron-powell.com/posts/2019-11-27-using-webassembly-with-csp-headers/ diff --git a/content/pages/playground.md b/content/pages/playground.md new file mode 100644 index 0000000..593bdf7 --- /dev/null +++ b/content/pages/playground.md @@ -0,0 +1,12 @@ +--- +title: "Playground" +date: 2023-07-22T19:56:37-04:00 +draft: true +asciinema: true +--- + +# Playground for hugo + +{{< asciinema key="demo" >}} + +There should be a asciinema cast above! diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 753e544..2821af4 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -3,7 +3,7 @@ - + {{- block "title" . -}} {{ .Site.Title }} @@ -13,6 +13,9 @@ <!-- Diable favicon requests: https://stackoverflow.com/a/13416784 --> <link rel="icon" href="data:;base64,iVBORw0KGgo="> <link href="/assets/bootstrap.min.css" rel="stylesheet" > + {{ if .Params.asciinema }} + <link rel="stylesheet" type="text/css" href="/assets/asciinema-player.css" /> + {{ end }} <style> {{- block "styles" . -}} {{- end -}} diff --git a/layouts/shortcodes/asciinema.html b/layouts/shortcodes/asciinema.html new file mode 100644 index 0000000..d8557eb --- /dev/null +++ b/layouts/shortcodes/asciinema.html @@ -0,0 +1,20 @@ +<div id='{{ with .Get "key" }}{{ . }}{{ end }}'></div> +<script src="/assets/asciinema-player.min.js"></script> +<script> + AsciinemaPlayer.create('/casts/{{ with .Get "key" }}{{ . }}{{ end }}.cast', document.getElementById('{{ with .Get "key" }}{{ . }}{{ end }}'), { + {{ if .Get "cols" }}cols: "{{ .Get "cols" }}",{{ end }} + {{ if .Get "rows" }}rows: "{{ .Get "rows" }}",{{ end }} + {{ if .Get "autoPlay" }}autoPlay: "{{ .Get "autoPlay" }}",{{ end }} + {{ if .Get "preload" }}preload: "{{ .Get "preload" }}",{{ end }} + {{ if .Get "loop" }}loop: "{{ .Get "loop" }}",{{ end }} + {{ if .Get "startAt" }}startAt: "{{ .Get "startAt" }}",{{ end }} + {{ if .Get "speed" }}speed: "{{ .Get "speed" }}",{{ end }} + {{ if .Get "idleTimeLimit" }}idleTimeLimit: "{{ .Get "idleTimeLimit" }}",{{ end }} + {{ if .Get "theme" }}theme: "{{ .Get "theme" }}",{{ end }} + {{ if .Get "poster" }}poster: "{{ .Get "poster" }}",{{ end }} + {{ if .Get "fit" }}fit: "{{ .Get "fit" }}",{{ end }} + {{ if .Get "terminalFontSize" }}terminalFontSize: "{{ .Get "terminalFontSize" }}",{{ end }} + {{ if .Get "terminalFontFamily" }}terminalFontFamily: "{{ .Get "terminalFontFamily" }}",{{ end }} + {{ if .Get "terminalLineHeight" }}terminalLineHeight: "{{ .Get "terminalLineHeight" }}",{{ end }} + }); +</script> diff --git a/static/casts/demo.cast b/static/casts/demo.cast new file mode 100644 index 0000000..8997927 --- /dev/null +++ b/static/casts/demo.cast @@ -0,0 +1,42 @@ +{"version": 2, "width": 211, "height": 54, "timestamp": 1690070416, "env": {"SHELL": "/bin/zsh", "TERM": "tmux-256color"}} +[0.616662, "o", "\u001b[1m\u001b[7m%\u001b[27m\u001b[1m\u001b[0m \r \r"] +[0.651075, "o", "\r\u001b[0m\u001b[27m\u001b[24m\u001b[J\r\n\u001b[1;36mblog\u001b[0m on \u001b[1;35m \u001b[0m\u001b[1;35masciinema\u001b[0m \u001b[1;31m[\u001b[0m\u001b[1;31m$\u001b[0m\u001b[1;31m!\u001b[0m\u001b[1;31m?\u001b[0m\u001b[1;31m]\u001b[0m \r\n\u001b[1;2;31m⬢\u001b[0m\u001b[1;2;31m [\u001b[0m\u001b[1;2;31mOCI\u001b[0m\u001b[1;2;31m]\u001b[0m \u001b[1;32m❯\u001b[0m \u001b[K\u001b[?2004h"] +[2.137003, "o", "e"] +[2.144549, "o", "\be\u001b[90mcho bye\u001b[39m\b\b\b\b\b\b\b"] +[2.192516, "o", "\be\u001b[39mc"] +[2.232416, "o", "\u001b[39mh"] +[2.372576, "o", "\u001b[39mo"] +[2.390732, "o", "\u001b[39m "] +[2.774916, "o", "\u001b[39m\"\u001b[39m \u001b[39m \b\b"] +[2.781599, "o", "\u001b[90m{{ .Render }}\" > layouts/index.html\u001b[39m\u001b[35D"] +[3.091004, "o", "\u001b[39mH\u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[34D"] +[3.098663, "o", "\u001b[90meh\" | nc 127.0.0.1 8080\u001b[39m\u001b[23D"] +[3.228845, "o", "\u001b[39me"] +[3.42287, "o", "\u001b[39me\u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[21D"] +[3.830673, "o", "\b \b"] +[3.849255, "o", "\u001b[90mh\" | nc 127.0.0.1 8080\u001b[39m\u001b[22D"] +[4.059485, "o", "\u001b[39ml\u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[21D"] +[4.067668, "o", "\u001b[90ml\" | nc 127.0.0.1 8080\u001b[39m\u001b[22D"] +[4.211281, "o", "\u001b[39ml"] +[4.469571, "o", "\u001b[39mo\u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[20D"] +[4.477592, "o", "\u001b[90m\" | nc 127.0.0.1 8080\u001b[39m\u001b[21D"] +[4.943674, "o", "\u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[20D"] +[4.951654, "o", "\u001b[90mworld ha ah aha\" | nc 127.0.0.1 8080\u001b[39m\u001b[36D"] +[5.144929, "o", "\u001b[39mw"] +[5.205373, "o", "\u001b[39mo"] +[5.303329, "o", "\u001b[39mr"] +[5.422771, "o", "\u001b[39ml"] +[5.502979, "o", "\u001b[39md"] +[6.684966, "o", "\u001b[39m\"\u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[30D"] +[7.170616, "o", "\u001b[?2004l\r\r\n"] +[7.174019, "o", "Hello world\r\n\u001b[1m\u001b[7m%\u001b[27m\u001b[1m\u001b[0m \r \r"] +[7.204173, "o", "\r\u001b[0m\u001b[27m\u001b[24m\u001b[J\r\n\u001b[1;36mblog\u001b[0m on \u001b[1;35m \u001b[0m\u001b[1;35masciinema\u001b[0m \u001b[1;31m[\u001b[0m\u001b[1;31m$\u001b[0m\u001b[1;31m!\u001b[0m\u001b[1;31m?\u001b[0m\u001b[1;31m]\u001b[0m \r\n\u001b[1;2;31m⬢\u001b[0m\u001b[1;2;31m [\u001b[0m\u001b[1;2;31mOCI\u001b[0m\u001b[1;2;31m]\u001b[0m \u001b[1;32m❯\u001b[0m \u001b[K\u001b[?2004h"] +[10.303159, "o", "e"] +[10.310087, "o", "\be\u001b[90mcho \"Hello world\"\u001b[39m\u001b[17D"] +[10.49929, "o", "\be\u001b[39mx\u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[16D"] +[10.505837, "o", "\u001b[90mport EDITOR=vim\u001b[39m\u001b[15D"] +[10.597115, "o", "\u001b[39mi\u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[39m \u001b[14D"] +[10.61047, "o", "\u001b[90mt()\u001b[39m\r\r\n\u001b[90mecho hi\u001b[39m\u001b[K\u001bM\u001b[6C"] +[10.714876, "o", "\u001b[39mt"] +[11.946849, "o", "\u001b[39m \u001b[39m \u001b[1B\r\u001b[K\u001bM\u001b[14C"] +[11.947131, "o", "\u001b[?2004l\u001b[1B\r"]