Fix defineOgImageComponent, remove swipe actions in reader mode, change onClick to addEventListener

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">

components/animations/Portal.vue

@@ -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) => {

layouts/Card.vue

@@ -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(
-    card.value.addEventListener('animationend', () => {
+    'animationend',
-      animationComplete.value = true
+    () => (animationComplete.value = true),
-    })
+  )
 })
 </script>
 

pages/blog/[slug].vue

@@ -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,51 +50,49 @@ const clipboard = (el: HTMLElement) => {
 }
 
 const content = ref<Element | null>(null)
+const thumbnail: string =
+  data.value!.thumbnail ??
+  `/images/blog/thumbnails/${data.value!._path!.split('/').at(-1)}.png`
 
-if (data.value) {
+// Generate the article's Open Graph image.
-  thumbnail =
+defineOgImageComponent(
-    data.value.thumbnail ??
+  'ArticleThumbnail',
-    `/images/blog/thumbnails/${data.value._path!.split('/').at(-1)}.png`
+  {
+    title: data.value!.title,
+    description: data.value!.description,
+    logo: '/images/logo.png',
+    sectionLogo: '/images/chest.png',
+    thumbnail,
+    alt: data.value!.title,
+  },
+  {
+    fonts: ['Alexandria:700', 'Lato:700'],
+  },
+)
 
-  // Generate the article's Open Graph image.
+// Hydrate the rendered items.
-  defineOgImageComponent(
+onMounted(() => {
-    'OgThumbnail',
+  content.value
-    {
+    ?.querySelectorAll('code:not(pre *)')
-      title: data.value.title,
+    .forEach((code: Element) => {
-      description: data.value.description,
+      if (code instanceof HTMLElement)
-      logo: '/images/logo.png',
+        code.addEventListener('click', () => clipboard(code))
-      sectionLogo: '/images/chest.png',
-      thumbnail,
-      alt: data.value.title,
-    },
-    {
-      fonts: ['Alexandria:700', 'Lato:700'],
-    },
-  )
-
-  // Hydrate the rendered items.
-  onMounted(() => {
-    content.value
-      ?.querySelectorAll('code:not(pre *)')
-      .forEach((code: Element) => {
-        if (code instanceof HTMLElement) code.onclick = () => clipboard(code)
-      })
-
-    content.value?.querySelectorAll('pre').forEach((pre: HTMLElement) => {
-      const icon = h('iconify-icon', {
-        icon: 'mdi:content-copy',
-        inline: true,
-        class: 'button',
-        onClick: () => clipboard(pre),
-      })
-
-      render(icon, pre)
     })
+
+  content.value?.querySelectorAll('pre').forEach((pre: HTMLElement) => {
+    const icon = h('iconify-icon', {
+      icon: 'mdi:content-copy',
+      inline: true,
+      class: 'button',
+      onClick: () => clipboard(pre),
+    })
+
+    render(icon, pre)
   })
-}
+})
 
 useHead({
-  title: data.value ? data.value.title : 'Page not found',
+  title: data.value!.title,
   htmlAttrs: {
     lang: config.locale || 'en',
   },