goplay for ghost blog code injection

ghost-goplay-injection.js

<style>
    .goplay-container { margin-top: 8px; }
    .goplay-run { margin-right: 5px; }
    .goplay-output .stderr { color: #b50000; }
    .goplay-output .system { color: green; }
</style>

<script type="module">
    import { GoPlayProxy } from "https://unpkg.com/@ggicci/goplay/dist/index.js";
    const goplay = new GoPlayProxy("https://goplay.ggicci.me");

    function initGoPlay(container) {
        const targetPre = container.previousElementSibling;
        if (!targetPre) {
            console.warn("goplay: no target pre node (previous pre sibling of .goplay-container), skip init.");
            return;
        }
        const code = targetPre.textContent.trim();

        const runButton = document.createElement("button");
        runButton.classList.add("goplay-run");
        runButton.textContent = "🚀 Run";
        container.append(runButton);
        
        const shareButton = document.createElement("button");
        shareButton.classList.add("goplay-share");
        shareButton.textContent = "Share";
        container.append(shareButton);

        runButton.onclick = function() {
            let outputContainer = container.querySelector(".goplay-output");
            if (!outputContainer) {
                const outputPre = document.createElement("pre");
                outputContainer = document.createElement("code");
                outputContainer.classList.add("goplay-output", "hljs");
                outputPre.appendChild(outputContainer);
                container.prepend(outputPre);
            }
            goplay.renderCompile(outputContainer, code);
        };
        shareButton.onclick = async function() {
            const shareUrl = await goplay.share(code);
            window.open(shareUrl, "_blank").focus();
        };
    }
    
    document.querySelectorAll('pre+.goplay-container').forEach(initGoPlay);
</script>

post.html

<!-- add a HTML section in your post right after your code block -->
<div class="goplay-container"></div>