Replace data-asciicinema with <ascii-cinema> Vue component

Author: mythz

MyApp/Pages/Shared/AsciiCinemaIncludes.cshtml

@@ -1,13 +1,2 @@
 <link rel="stylesheet" href="/css/asciinema-player.css">
 <script src="/lib/js/asciinema-player.js"></script>
-<script>
-document.addEventListener("DOMContentLoaded", () => {
-    document.querySelectorAll('[data-asciicinema]').forEach(el => {
-        const path = el.dataset.asciicinema
-        const options = el.dataset.options 
-            ? new Function(`return (${el.dataset.options})`)()
-            : { loop: true, poster:'npt:00:01' }
-        AsciinemaPlayer.create(path, el, options)
-    })
-})
-</script>

MyApp/Pages/Shared/DocsPage.cshtml

@@ -273,6 +273,13 @@ if (document.querySelector('.hide-title')) {
 }
 </script>
 
+@*Only load additional deps for pages with custom .mjs*@
+@if (docMjs != null)
+{
+    @await Html.PartialAsync("MermaidIncludes")
+    @await Html.PartialAsync("AsciiCinemaIncludes")
+}
+
 <script type="module">
 import { ref } from "vue"
 import { mount } from "app.mjs"

MyApp/_pages/ai-server/comfy-extension.md

@@ -25,8 +25,8 @@ cat install.sh | bash
 
 This process will also persist the configuration in the `.env` file in the ComfyUI Agent directory, so you can easily restart the ComfyUI Agent with the same configuration.
 
-<div data-asciicinema="/pages/ai-server/agent-comfy-install.cast" 
-     data-options="{loop:true,poster:'npt:00:09',theme:'dracula',rows:16}"></div>
+<ascii-cinema src="/pages/ai-server/agent-comfy-install.cast" 
+    loop="true" poster="npt:00:09" theme="dracula" rows="13" />
 
 :::info
 On the first run, the ComfyUI Agent will download the models you selected during the installation process. This can take some time depending on the size of the models and your internet connection speed.

MyApp/_pages/ai-server/index.md

@@ -22,8 +22,8 @@ cd ai-server && cat install.sh | bash
 The installer will detect common environment variables for its supported AI Providers including OpenAI, Anthropic, 
 Mistral AI, Google, etc. and prompt if you would like to include any others in your AI Server configuration.
 
-<div data-asciicinema="/pages/ai-server/ai-server-install.cast" 
-     data-options="{loop:true,poster:'npt:00:21',theme:'dracula',rows:13}"></div>
+<ascii-cinema src="/pages/ai-server/ai-server-install.cast" 
+    loop="true" poster="npt:00:21" theme="dracula" rows="12" />
 
 ## Accessing AI Server
 
@@ -44,8 +44,8 @@ If needed you can reset the process by deleting your local `App_Data` directory
 
 If your server also has a GPU you can ask the installer to also install the [ComfyUI Agent](/ai-server/comfy-extension) locally:
 
-<div data-asciicinema="https://docs.servicestack.net/pages/ai-server/agent-comfy-install.cast" 
-     data-options="{loop:true,poster:'npt:00:09',theme:'dracula',rows:16}"></div>
+<ascii-cinema src="/pages/ai-server/agent-comfy-install.cast" 
+    loop="true" poster="npt:00:09" theme="dracula" rows="13" />
 
 The ComfyUI Agent is a separate Docker agent for running [ComfyUI](https://www.comfy.org), 
 [Whisper](https://github.com/openai/whisper) and [FFmpeg](https://www.ffmpeg.org) on servers with GPUs to handle 

MyApp/wwwroot/pages/ai-server/comfy-extension.mjs

@@ -0,0 +1,12 @@
+import AsciiCinema from '../components/AsciiCinema.mjs'
+
+export default {
+    install(app) {
+    },
+    components: {
+        AsciiCinema,
+    },
+    setup() {
+        return { }
+    }
+}

MyApp/wwwroot/pages/ai-server/index.mjs

@@ -0,0 +1,12 @@
+import AsciiCinema from '../components/AsciiCinema.mjs'
+
+export default {
+    install(app) {
+    },
+    components: {
+        AsciiCinema,
+    },
+    setup() {
+        return { }
+    }
+}

MyApp/wwwroot/pages/components/AsciiCinema.mjs

@@ -0,0 +1,18 @@
+import { ref, onMounted } from "vue"
+
+export default {
+    template:`
+        <div ref="el"></div>
+    `,
+    props:['src','loop','poster','theme','rows'],
+    setup(props) {
+        const el = ref()
+        
+        onMounted(() => {
+            console.log('globalThis.AsciinemaPlayer', globalThis.AsciinemaPlayer)
+            globalThis.AsciinemaPlayer.create(props.src, el.value, props)
+        })
+        
+        return { el }
+    }   
+}

MyApp/wwwroot/pages/releases/v8_05.mjs

@@ -0,0 +1,12 @@
+import AsciiCinema from '../components/AsciiCinema.mjs'
+
+export default {
+    install(app) {
+    },
+    components: {
+        AsciiCinema,
+    },
+    setup() {
+        return { }
+    }
+}