balki/blog
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

Add asciinema shortcode and try in Playground

Browse Source
This commit is contained in:
Balakrishnan Balasubramanian 2023-07-22 20:15:39 -04:00
parent 06c5f6b8ff
commit e288d17eb8
5 changed files with 85 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md Normal file
View File

@ -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/

12
content/pages/playground.md Normal file
View File

@ -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!

5
layouts/_default/baseof.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: ;">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' data: ;{{ if .Params.asciinema }}script-src 'self' 'unsafe-inline' 'unsafe-eval';{{ end }}">
<title>
{{- 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 -}}

20
layouts/shortcodes/asciinema.html Normal file
View File

@ -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>

42
static/casts/demo.cast Normal file
View File

@ -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"]