diff --git a/packages/app/app/components/Commits.vue b/packages/app/app/components/Commits.vue index 1c8c8264..6f9f2f86 100644 --- a/packages/app/app/components/Commits.vue +++ b/packages/app/app/components/Commits.vue @@ -44,20 +44,9 @@ const selectedCommit = shallowRef< (typeof commitsWithRelease.value)[number] | null >(null); -// Markdown - -// Add target to links - -const colorMode = useColorMode(); let shiki: HighlighterCore; onBeforeMount(async () => { - // if (typeof window === 'undefined') { - // const { loadWasm } = await import('shiki') - // // @ts-expect-error ignore error - // await loadWasm(import(/* @vite-ignore */ 'shiki/onig.wasm')) - // } - shiki = createHighlighterCoreSync({ themes: [githubDark, githubLight], langs: [bash], @@ -73,10 +62,45 @@ onBeforeMount(async () => { ); }, code({ text }) { - return `${shiki.codeToHtml(text, { - theme: colorMode.preference === "dark" ? "github-dark" : "github-light", + const currentTheme = document.documentElement.classList.contains("dark") + ? "github-dark" + : "github-light"; + const highlightedCode = shiki.codeToHtml(text, { + theme: currentTheme, lang: "bash", - })}`; + }); + + function copyCodeHandler(this: HTMLButtonElement, codeText: string) { + navigator.clipboard?.writeText(codeText); + if (this.dataset.timeoutId) { + clearTimeout(parseInt(this.dataset.timeoutId)); + } + this.textContent = "Copied!"; + this.classList.add("!text-green-600", "dark:!text-green-400"); + const timeoutId = setTimeout(() => { + this.textContent = "Copy"; + this.classList.remove("!text-green-600", "dark:!text-green-400"); + delete this.dataset.timeoutId; + }, 2000); + this.dataset.timeoutId = timeoutId.toString(); + } + + return ` +
+
+ +
+
+
${highlightedCode}
+
+
+ `; }, };