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

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) {
-  thumbnail =
-    data.value.thumbnail ??
-    `/images/blog/thumbnails/${data.value._path!.split('/').at(-1)}.png`
+// Generate the article's Open Graph image.
+defineOgImageComponent(
+  'ArticleThumbnail',
+  {
+    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.
-  defineOgImageComponent(
-    'OgThumbnail',
-    {
-      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'],
-    },
-  )
-
-  // 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)
+// Hydrate the rendered items.
+onMounted(() => {
+  content.value
+    ?.querySelectorAll('code:not(pre *)')
+    .forEach((code: Element) => {
+      if (code instanceof HTMLElement)
+        code.addEventListener('click', () => 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)
   })
-}
+})
 
 useHead({
-  title: data.value ? data.value.title : 'Page not found',
+  title: data.value!.title,
   htmlAttrs: {
     lang: config.locale || 'en',
   },