Add experimental Asciinema support

exampleSite/content.en/docs/shortcodes/asciinema.md

@@ -0,0 +1,28 @@
+# Asciinema
+
+> [!WARNING]
+> Experimental, could change in the future or be removed
+
+Asciinema shortcode integrates asciinema player into the markdown page.
+
+```tpl
+{{</* asciinema
+  cast="asciinema-627097.cast"
+  or
+  cast="https://asciinema.org/a/vJNKUQFjuh7qKI2j3OoaKs8Jk.cast"
+  loop=true
+  autoplay=true
+  speed=2 */>}}
+```
+
+{{< asciinema
+  cast="asciinema-627097.cast"
+  loop=true
+  autoplay=true
+  speed=2 >}}
+
+## Parameters
+
+All parameters added to the shortcode will be transformed to options for Asciinema player, expect `cast` parameter that is used to locate cast file. Cast file follows same rules as portable image, it could be site resource, page resource or remote file URL.
+
+[List of Asciinema options](https://docs.asciinema.org/manual/player/options/)

exampleSite/content.en/docs/shortcodes/badges.md

@@ -1,7 +1,7 @@
 # Badges
 
 > [!WARNING]
-> Experimental, might not stay in theme.
+> Experimental, could change in the future or be removed
 
 Badges can be used to annotate your pages with additional information or mark specific places in markdown content.
 

exampleSite/content.en/docs/shortcodes/cards.md

@@ -1,5 +1,8 @@
 # Cards
 
+> [!WARNING]
+> Experimental, could change in the future or be removed
+
 ## Example
 
 {{% columns %}}

exampleSite/content.en/docs/shortcodes/katex.md

@@ -1,6 +1,7 @@
 ---
 title: KaTeX
 ---
+
 # KaTeX
 
 KaTeX shortcode let you render math typesetting in markdown document. See [KaTeX](https://katex.org/)

layouts/_shortcodes/asciinema.html

@@ -0,0 +1,15 @@
+{{- if not (.Page.Store.Get "asciinema") -}}
+<!-- Include asciinema player only first time -->
+<link rel="stylesheet" href="{{ "asciinema/asciinema-player.css" | relURL }}" />
+<script defer src="{{ "asciinema/asciinema-player.min.js" | relURL }}"></script>
+<script defer src="{{ "asciinema/asciinema-auto.js" | relURL }}"></script>
+{{- .Page.Store.Set "asciinema" true -}}
+{{- end -}}
+
+{{- with (partial "docs/links/portable-image" (dict "Page" .Page "Destination" (index .Params "cast"))) -}}
+
+{{- $opts := newScratch -}}
+{{- $opts.Set "asciinema" $.Params -}}
+{{- $opts.DeleteInMap "asciinema" "cast" -}}
+<div class="asciinema" id="asciinema-{{ $.Ordinal }}" x-data-cast="{{ . | safeHTMLAttr }}" x-data-opts="{{ $opts.Get "asciinema" | jsonify | safeHTMLAttr }}"></div>
+{{- end -}}

static/asciinema/asciinema-auto.js

@@ -0,0 +1,7 @@
+(function() {
+  document.querySelectorAll(".asciinema").forEach(function(element) {
+    AsciinemaPlayer.create(element.getAttribute("x-data-cast"),
+    element,
+    JSON.parse(element.getAttribute("x-data-opts")));
+  });
+}());