Asciinema shortcode in Hugo

asciinema.html

<div id="asciinema-player"></div>
<script>
  AsciinemaPlayer.create("https://asciinema.org/a/{{ with .Get "key" }}{{ . }}{{ end }}.cast", document.getElementById('asciinema-player'), {
    {{ if .Get "autoplay" }}autoplay: {{ .Get "autoplay" }},{{ end }}
    {{ if .Get "preload" }}preload: {{ .Get "preload" }},{{ end }}
    {{ if .Get "loop" }}loop: {{ .Get "loop" }},{{ end }}
    {{ if .Get "idleTimeLimit" }}idleTimeLimit: {{ .Get "idleTimeLimit" }},{{ end }}
    {{ if .Get "poster" }}poster: "{{ .Get "poster" }}",{{ end }}
    {{ if .Get "terminalFontSize" }}terminalFontSize: {{ .Get "terminalFontSize" }},{{ end }}
    {{ if .Get "terminalFontFamily" }}terminalFontFamily: "{{ .Get "terminalFontFamily" }}",{{ end }}
    {{ if .Get "terminalLineHeight" }}terminalLineHeight: {{ .Get "terminalLineHeight" }},{{ end }}
    {{ if .Get "theme" }}theme: "{{ .Get "theme" }}",{{ end }}
    {{ if .Get "title" }}title: "{{ .Get "title" }}",{{ end }}
    startAt: {{ if .Get "startAt" }}{{ .Get "startAt" }}{{ else }}0{{ end }},
    speed: {{ if .Get "speed" }}{{ .Get "speed" }}{{ else }}1{{ end }},
    cols: {{ if .Get "cols" }}{{ .Get "cols" }}{{ else }}640{{ end }},
    rows: {{ if .Get "rows" }}{{ .Get "rows" }}{{ else }}10{{ end }}
  });
</script>

post.md

Content

blahblah

{{< asciinema key="412004" rows="10" preload="1" >}}

blahblah

script.html

{{ if .Params.asciinema }}
    <script src="{{ .Site.BaseURL }}js/asciinema-player.js"></script>
{{ end }}

style.html

{{ if .Params.asciinema }}
    <link rel="stylesheet" type="text/css" href="{{ .Site.BaseURL }}css/asciinema-player.css" />
{{ end }}