add TOC add better blog navigation and a new blog post

This commit is contained in:
Zoe
2024-04-23 18:33:05 -05:00
parent df52d24242
commit 2e75732908
27 changed files with 2530 additions and 10686 deletions

View File

@@ -1,41 +1,35 @@
<template>
<div :id="id"
class="group flex mt-2">
<div class="text-2xl">
<slot />
</div>
<button @click="copy(location.origin + location.pathname + '#' + id)"
class="group-hover:opacity-100 ml-2 hover:bg-zinc-800 flex items-center h-fit p-[2px] transition-opacity duration-200 rounded opacity-0">
<div class="h-4"
v-if="copied">
<Icon size="16"
name="tabler:check" />
</div>
<div class="h-4"
v-else>
<Icon size="16"
name="tabler:link" />
</div>
</button>
</div>
<div class="group flex mt-2">
<h2 :id="id" class="text-2xl">
<slot />
</h2>
<button @click="copy(location.origin + location.pathname + '#' + 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" />
</div>
<div class="h-5" v-else>
<Icon size="20" name="tabler:link" />
</div>
</button>
</div>
</template>
<script setup lang="ts">
import {
useClipboard, useBrowserLocation
} from '@vueuse/core';
const { copy, copied, text } = useClipboard();
const props = withDefaults(
defineProps<{
id?: string;
}>(),
{ id: '' }
import { useBrowserLocation, useClipboard } from '@vueuse/core';
const { copy, copied } = useClipboard();
withDefaults(
defineProps<{
id?: string;
}>(),
{ id: '' }
);
const location = useBrowserLocation()
</script>
<style scoped>
.icon {
display: block;
display: block;
}
</style>