feat: enhance blog components, improve routing, and add clean script for build process

This commit is contained in:
mahdiarghyani
2025-12-14 13:37:51 +03:30
parent 25aa41bcb8
commit c6b09fabc9
11 changed files with 117 additions and 37 deletions
+1 -1
View File
@@ -1,6 +1,6 @@
<template>
<UInput :model-value="modelValue" :placeholder="t('blog.searchPlaceholder')" icon="i-heroicons-magnifying-glass"
size="lg" :ui="{ icon: { trailing: { pointer: '' } } }" @update:model-value="handleInput">
size="lg" @update:model-value="handleInput">
<template v-if="modelValue" #trailing>
<UButton color="gray" variant="link" icon="i-heroicons-x-mark-20-solid" :padded="false" @click="clearSearch" />
</template>
@@ -26,6 +26,12 @@ const shouldShowToc = computed(() => {
return countLinks(props.toc.links) >= 3
})
const setHashWithoutNavigation = (id: string) => {
const url = new URL(window.location.href)
url.hash = id
window.history.replaceState(window.history.state, '', url.toString())
}
// Smooth scroll to heading with offset for sticky header
const scrollToHeading = (id: string) => {
const element = document.getElementById(id)
@@ -40,11 +46,28 @@ const scrollToHeading = (id: string) => {
})
activeId.value = id
setHashWithoutNavigation(id)
}
}
// Track active section with IntersectionObserver
onMounted(() => {
// Handle initial hash (avoid full page navigation / transition)
const initialId = window.location.hash.replace(/^#/, '')
if (initialId) {
setTimeout(() => {
const el = document.getElementById(initialId)
if (!el) return
const offset = 100
const elementPosition = el.getBoundingClientRect().top + window.pageYOffset
const offsetPosition = elementPosition - offset
window.scrollTo({ top: offsetPosition, behavior: 'auto' })
activeId.value = initialId
}, 0)
}
const headings = document.querySelectorAll('article h2, article h3, article h4')
const observer = new IntersectionObserver(