Add thumbnails generation for the blog

Author: roxblnfk

.gitignore

@@ -13,6 +13,9 @@
 .DS_Store
 *.local
 
+# Generated thumbnails
+*.thumb.jpg
+
 # Logs
 npm-debug.log*
 yarn-debug.log*

.vitepress/theme/BlogPosts.vue

@@ -15,7 +15,7 @@ const filteredPosts = computed(() => {
   <div class="blog-posts">
     <article v-for="post in filteredPosts" :key="post.url" class="post-card">
       <a :href="post.url" class="post-image-link">
-        <img v-if="post.image" :src="post.image" :alt="post.title" class="post-image" />
+        <img v-if="post.thumb || post.image" :src="post.thumb || post.image" :alt="post.title" class="post-image" />
       </a>
       <div class="post-content">
         <div class="post-title">

.vitepress/theme/posts.data.ts

@@ -7,9 +7,17 @@ export interface Post {
   date: string
   description: string
   image?: string
+  thumb?: string
   author?: string
 }
 
+function getThumbUrl(imageUrl: string | undefined): string | undefined {
+  if (!imageUrl) return undefined
+  const ext = imageUrl.lastIndexOf('.')
+  if (ext === -1) return undefined
+  return `${imageUrl.slice(0, ext)}.thumb.jpg`
+}
+
 declare const data: Post[]
 export { data }
 
@@ -23,6 +31,7 @@ export default createContentLoader(getBlogGlobPatterns(), {
         date: formatDate(page.frontmatter.date),
         description: page.frontmatter.description,
         image: page.frontmatter.image,
+        thumb: getThumbUrl(page.frontmatter.image),
         author: page.frontmatter.author,
       }))
       .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())