reduce dependencies, and stop blocking

components/content/ProseCode.vue

@@ -29,9 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { useClipboard } from '@vueuse/core';
-const { copy, copied } = useClipboard();
-const props = withDefaults(
+withDefaults(
     defineProps<{
         code?: string;
         language?: string | null;
@@ -42,6 +40,7 @@ const props = withDefaults(
 );
 
 const codeElm = ref();
+let copied = ref(false);
 
 const copyCode = () => {
     if (!codeElm.value) {
@@ -58,7 +57,13 @@ const copyCode = () => {
         }
     }
 
-    copy(str);
+    if (import.meta.client) {
+        navigator.clipboard.writeText(str);
+        copied.value = true;
+        setTimeout(() => {
+            copied.value = false;
+        }, 2000);
+    }
 };
 </script>
 

components/content/ProseH2.vue

@@ -3,7 +3,7 @@
         <h2 :id="id" class="text-2xl">
             <slot />
         </h2>
-        <button @click="copy(location.origin + location.pathname + '#' + id)"
+        <button @click="copy('https://juls07.dev' + route.path + '#' + id)"
             class="dark:text-white ml-2 group-hover:opacity-100 opacity-0 transition-all">
             <div class="h-5" v-if="copied">
                 <Icon size="20" name="tabler:check" />
@@ -16,8 +16,6 @@
 </template>
 
 <script setup lang="ts">
-import { useBrowserLocation, useClipboard } from '@vueuse/core';
-const { copy, copied } = useClipboard();
 withDefaults(
     defineProps<{
         id?: string;
@@ -25,7 +23,18 @@ withDefaults(
     { id: '' }
 );
 
-const location = useBrowserLocation()
+let copied = ref(false);
+const copy = (text: string) => {
+    if (import.meta.client) {
+        navigator.clipboard.writeText(text)
+        copied.value = true;
+        setTimeout(() => {
+            copied.value = false;
+        }, 2000);
+    }
+};
+
+const route = useRoute();
 </script>
 
 <style scoped>

components/content/ProseH3.vue

@@ -3,7 +3,7 @@
         <h3 :id="id" class="text-xl">
             <slot />
         </h3>
-        <button @click="copy(location.origin + location.pathname + '#' + id)"
+        <button @click="copy('https://juls07.dev' + route.path + '#' + id)"
             class="dark:text-white ml-2 group-hover:opacity-100 opacity-0 transition-all">
             <div class="h-5" v-if="copied">
                 <Icon size="20" name="tabler:check" />
@@ -16,8 +16,6 @@
 </template>
 
 <script setup lang="ts">
-import { useBrowserLocation, useClipboard } from '@vueuse/core';
-const { copy, copied } = useClipboard();
 withDefaults(
     defineProps<{
         id?: string;
@@ -25,7 +23,18 @@ withDefaults(
     { id: '' }
 );
 
-const location = useBrowserLocation()
+let copied = ref(false);
+const copy = (text: string) => {
+    if (import.meta.client) {
+        navigator.clipboard.writeText(text)
+        copied.value = true;
+        setTimeout(() => {
+            copied.value = false;
+        }, 2000);
+    }
+};
+
+const route = useRoute();
 </script>
 
 <style scoped>