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 `
+