From 05db0b693e9559d4c3c542afe06e2f80dc6ccf55 Mon Sep 17 00:00:00 2001
From: Andrew <admin@enderman.ch>
Date: Wed, 19 Jun 2024 01:19:57 +0300
Subject: [PATCH] Fix defineOgImageComponent, remove swipe actions in reader
 mode, change onClick to addEventListener

---
 app.vue                                       |  2 +-
 .../ArticleThumbnail.vue}                     |  0
 components/animations/Portal.vue              |  2 +-
 layouts/Card.vue                              | 10 ++-
 pages/blog/[slug].vue                         | 77 +++++++++----------
 5 files changed, 45 insertions(+), 46 deletions(-)
 rename components/{content/OgThumbnail.vue => OgImage/ArticleThumbnail.vue} (100%)

diff --git a/app.vue b/app.vue
index 3a9edbd..6daad62 100644
--- a/app.vue
+++ b/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">
diff --git a/components/content/OgThumbnail.vue b/components/OgImage/ArticleThumbnail.vue
similarity index 100%
rename from components/content/OgThumbnail.vue
rename to components/OgImage/ArticleThumbnail.vue
diff --git a/components/animations/Portal.vue b/components/animations/Portal.vue
index b9131b8..cd9551e 100644
--- a/components/animations/Portal.vue
+++ b/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) => {
diff --git a/layouts/Card.vue b/layouts/Card.vue
index d3b717c..5adf46a 100644
--- a/layouts/Card.vue
+++ b/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('animationend', () => {
-      animationComplete.value = true
-    })
+  card.value?.addEventListener(
+    'animationend',
+    () => (animationComplete.value = true),
+  )
 })
 </script>
 
diff --git a/pages/blog/[slug].vue b/pages/blog/[slug].vue
index 161dba9..368d881 100644
--- a/pages/blog/[slug].vue
+++ b/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',
   },