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"
>
-
+
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),
+ )
})
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(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',
},