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,34 +50,33 @@ 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`
-
-  // Generate the article's Open Graph image.
-  defineOgImageComponent(
-    'OgThumbnail',
   {
-      title: data.value.title,
+    title: data.value!.title,
-      description: data.value.description,
+    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'],
   },
-  )
+)
 
-  // Hydrate the rendered items.
+// Hydrate the rendered items.
-  onMounted(() => {
+onMounted(() => {
   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) => {
@@ -91,11 +89,10 @@ 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',
   },