Fix light theme, fix animation bugs, add programmatic scrolling, improve custom card blog component

pages/blog/[slug].vue

@@ -5,6 +5,7 @@ import { render } from 'vue'
 import { CodeControls } from '#components'
 
 const config = useAppConfig()
+const router = useRouter()
 const route = useRoute()
 
 let slug = route.params.slug
@@ -40,14 +41,12 @@ useSeoMeta({
 
 const clipboard = (el: HTMLElement) => {
   if (el.textContent)
-    navigator.clipboard
-      .writeText(el.textContent)
-      .then(() => {
-        alert(`successfully copied ${el.textContent}`)
-      })
-      .catch(() => {
-        alert('something went wrong')
-      })
+    navigator.clipboard.writeText(el.textContent).catch(() => {
+      console.error(
+        'Failed to copy element data to the clipboard! Element data:',
+        el,
+      )
+    })
 }
 
 const content = ref<Element | null>(null)
@@ -73,6 +72,11 @@ defineOgImageComponent(
 
 // Hydrate the rendered items.
 onMounted(() => {
+  if (route.hash)
+    content.value
+      ?.querySelector(route.hash.toLowerCase())
+      ?.scrollIntoView({ behavior: 'smooth' })
+
   content.value
     ?.querySelectorAll('code:not(pre *)')
     .forEach((code: Element) => {
@@ -80,10 +84,27 @@ onMounted(() => {
         code.addEventListener('click', () => clipboard(code))
     })
 
-  content.value?.querySelectorAll('pre').forEach((pre: HTMLElement) => {
-    const icon = h(CodeControls)
+  content.value?.querySelectorAll('pre').forEach((pre: HTMLPreElement) => {
+    const overlay = h(CodeControls, { onCopy: () => clipboard(pre) })
 
-    render(icon, pre)
+    render(overlay, pre)
+  })
+
+  content.value?.querySelectorAll('a').forEach((a: HTMLAnchorElement) => {
+    if (
+      a.hash &&
+      a.host === window.location.host &&
+      a.pathname.toLowerCase() === route.path.toLowerCase()
+    )
+      a.addEventListener('click', (e: Event) => {
+        e.preventDefault()
+
+        content.value
+          ?.querySelector(a.hash.toLowerCase())
+          ?.scrollIntoView({ behavior: 'smooth' })
+
+        history.replaceState(history.state, '', a.hash)
+      })
   })
 })
 
@@ -117,7 +138,7 @@ useHead({
   </div>
   <article
     v-else-if="data"
-    class="flex-grow post snap-normal fade-mask-sm flex flex-col gap-4 overflow-x-hidden overflow-y-auto sm:py-4 sm:pe-4"
+    class="flex-grow post snap-normal fade-mask-sm flex flex-col gap-4 overflow-y-auto sm:py-4 sm:pe-4"
   >
     <div class="grid-thumbnail grid max-w-[768px] snap-end">
       <img