[READ-ONLY] Mirror of https://github.com/bombshell-dev/docs. bomb.sh/docs
Something went wrong. Try again.
2.2 kB · 85 lines
Astro
at main
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586<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 = () => {}; inputId = `docs-terminal-${crypto.randomUUID()}`; connectedCallback() { this.boot(); } disconnectedCallback() { this.instance?.dispose(); this.ro?.disconnect(); } handleResize() { this.ro = new ResizeObserver(() => this.updateSize()); this.ro.observe(this); } labelHelperInput() { const input = this.querySelector<HTMLTextAreaElement>(".xterm-helper-textarea"); input?.setAttribute("id", this.inputId); input?.setAttribute("name", this.inputId); } async boot() { if (this.instance) { this.instance.options.theme = theme; this.instance.open(this); this.labelHelperInput(); 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); this.labelHelperInput();
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>