feat: integration screen

web/src/composables/useCopyToClipboard.ts

@@ -0,0 +1,28 @@
+import { onUnmounted, ref } from 'vue'
+
+const COPIED_DURATION_MS = 2000
+
+export function useCopyToClipboard() {
+	const copied = ref(false)
+	let revertTimer: ReturnType<typeof setTimeout> | null = null
+
+	function clearRevertTimer() {
+		if (revertTimer !== null) {
+			clearTimeout(revertTimer)
+			revertTimer = null
+		}
+	}
+
+	async function copy(text: string) {
+		await navigator.clipboard.writeText(text)
+		copied.value = true
+		clearRevertTimer()
+		revertTimer = setTimeout(() => {
+			copied.value = false
+		}, COPIED_DURATION_MS)
+	}
+
+	onUnmounted(clearRevertTimer)
+
+	return { copied, copy }
+}

web/src/composables/useShikiHighlighter.ts

@@ -0,0 +1,21 @@
+import { createHighlighter, type Highlighter } from 'shiki'
+
+let highlighterPromise: Promise<Highlighter> | null = null
+
+export function useShikiHighlighter() {
+	if (!highlighterPromise) {
+		highlighterPromise = createHighlighter({
+			themes: ['github-light', 'github-dark'],
+			langs: ['javascript'],
+		})
+	}
+	return highlighterPromise
+}
+
+export function highlightToHtml(highlighter: Highlighter, code: string, lang: string) {
+	return highlighter.codeToHtml(code, {
+		lang,
+		themes: { light: 'github-light', dark: 'github-dark' },
+		defaultColor: false,
+	})
+}