[READ-ONLY] Mirror of https://github.com/bombshell-dev/docs. bomb.sh/docs
Something went wrong. Try again.
1.9 kB · 77 lines
Astro
at fix/wc-url
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778<docs-terminal class="not-content" />
<style>docs-terminal { display: block; min-height: 256px;}</style>
<script> import type { Terminal } from "@xterm/xterm"; import { theme } from "./theme.ts";
customElements.define( "docs-terminal", class extends HTMLElement { instance: Terminal | undefined; ro: ResizeObserver | undefined; updateSize = () => {}; connectedCallback() { this.boot(); } disconnectedCallback() { this.instance?.dispose(); this.ro?.disconnect(); } handleResize() { this.ro = new ResizeObserver(() => this.updateSize()); this.ro.observe(this); } async boot() { if (this.instance) { this.instance.options.theme = theme; this.instance.open(this); return; } this.innerHTML = ""; const [{ Terminal }, { FitAddon }, { WebLinksAddon }] = await Promise.all([ import("@xterm/xterm"), import("@xterm/addon-fit"), import("@xterm/addon-web-links"), ]); this.instance = new Terminal({ convertEol: true, cursorBlink: false, disableStdin: false, theme, fontSize: 16, fontFamily: "Menlo, courier-new, courier, monospace", });
this.instance.open(this);
const fit = new FitAddon(); this.instance.loadAddon(fit); this.instance.loadAddon(new WebLinksAddon()); this.updateSize = () => fit.fit(); this.updateSize(); this.handleResize(); } } );</script>
<style is:global> @import "@xterm/xterm/css/xterm.css" layer(xterm);
.xterm { padding: 24px 12px; } .xterm-viewport { background: var(--container-fill); border: 1px solid var(--surface-border-fill); }</style>