Fix defineOgImageComponent, remove swipe actions in reader mode, change onClick to addEventListener
This commit is contained in:
parent
4543680a92
commit
05db0b693e
2
app.vue
2
app.vue
|
@ -28,7 +28,7 @@ useHead({
|
|||
class="flex flex-col lm:justify-center lt:justify-center items-center h-full"
|
||||
>
|
||||
<ClientOnly>
|
||||
<LazySwipeControls class="block sm:hidden" />
|
||||
<LazySwipeControls v-if="!reader" class="block sm:hidden" />
|
||||
</ClientOnly>
|
||||
|
||||
<NuxtLayout name="card">
|
||||
|
|
|
@ -643,7 +643,7 @@ onMounted(() => {
|
|||
}
|
||||
|
||||
for (const event of ['dblclick', 'touchstart'])
|
||||
layout!.addEventListener(event, click)
|
||||
layout?.addEventListener(event, click)
|
||||
|
||||
// Save the new value to local storage.
|
||||
watch(animated, (newAnimate) => {
|
||||
|
|
|
@ -11,6 +11,8 @@ const { pages, reader } = storeToRefs(usePageStore())
|
|||
const swipe = useSwipe(card, {
|
||||
passive: true,
|
||||
onSwipeEnd: (_touch: TouchEvent, _direction: UseSwipeDirection) => {
|
||||
if (reader.value) return
|
||||
|
||||
const currentPage = pages.value.find(
|
||||
(page) => page.path === route.fullPath,
|
||||
)!
|
||||
|
@ -38,10 +40,10 @@ const swipe = useSwipe(card, {
|
|||
const animationComplete = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
if (card.value)
|
||||
card.value.addEventListener('animationend', () => {
|
||||
animationComplete.value = true
|
||||
})
|
||||
card.value?.addEventListener(
|
||||
'animationend',
|
||||
() => (animationComplete.value = true),
|
||||
)
|
||||
})
|
||||
</script>
|
||||
|
||||
|
|
|
@ -6,7 +6,6 @@ import { render } from 'vue'
|
|||
const config = useAppConfig()
|
||||
const route = useRoute()
|
||||
|
||||
let thumbnail: string | null = null
|
||||
let slug = route.params.slug
|
||||
|
||||
if (Array.isArray(slug)) slug = slug.join('/')
|
||||
|
@ -51,22 +50,20 @@ const clipboard = (el: HTMLElement) => {
|
|||
}
|
||||
|
||||
const content = ref<Element | null>(null)
|
||||
|
||||
if (data.value) {
|
||||
thumbnail =
|
||||
data.value.thumbnail ??
|
||||
`/images/blog/thumbnails/${data.value._path!.split('/').at(-1)}.png`
|
||||
const thumbnail: string =
|
||||
data.value!.thumbnail ??
|
||||
`/images/blog/thumbnails/${data.value!._path!.split('/').at(-1)}.png`
|
||||
|
||||
// Generate the article's Open Graph image.
|
||||
defineOgImageComponent(
|
||||
'OgThumbnail',
|
||||
'ArticleThumbnail',
|
||||
{
|
||||
title: data.value.title,
|
||||
description: data.value.description,
|
||||
title: data.value!.title,
|
||||
description: data.value!.description,
|
||||
logo: '/images/logo.png',
|
||||
sectionLogo: '/images/chest.png',
|
||||
thumbnail,
|
||||
alt: data.value.title,
|
||||
alt: data.value!.title,
|
||||
},
|
||||
{
|
||||
fonts: ['Alexandria:700', 'Lato:700'],
|
||||
|
@ -78,7 +75,8 @@ if (data.value) {
|
|||
content.value
|
||||
?.querySelectorAll('code:not(pre *)')
|
||||
.forEach((code: Element) => {
|
||||
if (code instanceof HTMLElement) code.onclick = () => clipboard(code)
|
||||
if (code instanceof HTMLElement)
|
||||
code.addEventListener('click', () => clipboard(code))
|
||||
})
|
||||
|
||||
content.value?.querySelectorAll('pre').forEach((pre: HTMLElement) => {
|
||||
|
@ -92,10 +90,9 @@ if (data.value) {
|
|||
render(icon, pre)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: data.value ? data.value.title : 'Page not found',
|
||||
title: data.value!.title,
|
||||
htmlAttrs: {
|
||||
lang: config.locale || 'en',
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue