diff --git a/internal/web/handlers/gist/gist.go b/internal/web/handlers/gist/gist.go index 83d557f..bd297a4 100644 --- a/internal/web/handlers/gist/gist.go +++ b/internal/web/handlers/gist/gist.go @@ -165,10 +165,39 @@ func escapeJavaScriptContent(htmlContent, cssUrl, themeUrl string) (string, erro } js := fmt.Sprintf(` - document.write(''); - document.write(''); - document.write(%s); - `, +(function() { + if (!customElements.get('opengist-embed')) { + customElements.define('opengist-embed', class extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: 'open' }); + } + + init(css1, css2, content) { + this.shadowRoot.innerHTML = %s + +
${content}
+ %s; + } + }); + } + + var currentScript = document.currentScript || (function() { + var scripts = document.getElementsByTagName('script'); + return scripts[scripts.length - 1]; + })(); + + const instance = document.createElement('opengist-embed'); + instance.init(%s, %s, %s); + currentScript.parentNode.insertBefore(instance, currentScript.nextSibling); +})(); +`, + "`", + "`", string(jsonCssUrl), string(jsonThemeUrl), string(jsonContent), diff --git a/public/css/embed.css b/public/css/embed.css index c8f5522..bd54411 100644 --- a/public/css/embed.css +++ b/public/css/embed.css @@ -35,6 +35,14 @@ --border-width-1: 1px; } +@layer base { + :host { + --tw-border-style: solid; + --tw-border-width: 0; + display: block; + } +} + .opengist-embed { @import "tailwindcss"; @layer base { @@ -50,4 +58,4 @@ @import './ipynb.css'; @import "./style.css"; } -} \ No newline at end of file +}