docs: fix cover images (#432)

Author: giladgd

.vitepress/components/BlogEntry/BlogEntry.vue

@@ -114,7 +114,7 @@ const dateText = new Date(props.date).toLocaleDateString("en-US", {
                 align-self: start;
                 background-repeat: no-repeat;
                 background-size: cover;
-                --max-height: 256px;
+                --max-height: 320px;
             }
         }
 

.vitepress/config.ts

@@ -226,19 +226,32 @@ export default defineConfig({
                 const coverImage = await ensureLocalImage(pageData.frontmatter.image, "cover", {
                     baseDestLocation: imageDir.split("/")
                 });
-                head.push(["meta", {property: "og:image", content: resolveHref(coverImage.urlPath.absolute, true)}]);
+                const imageUrl = resolveHref(coverImage.urlPath.absolute, true);
+                head.push(["meta", {property: "og:image", content: imageUrl}]);
+                head.push(["meta", {property: "twitter:image", content: imageUrl}]);
+                head.push(["meta", {property: "twitter:card", content: "summary_large_image"}]);
             } else if (typeof pageData.frontmatter.image === "object") {
                 const coverImage = typeof pageData.frontmatter.image.url === "string"
                     ? await ensureLocalImage(pageData.frontmatter.image.url, "cover", {
                         baseDestLocation: imageDir.split("/")
                     })
                     : undefined;
 
-                if (typeof pageData.frontmatter.image.url === "string")
+                if (typeof pageData.frontmatter.image.url === "string") {
+                    const imageUrl = resolveHref(coverImage?.urlPath.absolute ?? pageData.frontmatter.image.url, true);
                     head.push(["meta", {
                         property: "og:image",
-                        content: resolveHref(coverImage?.urlPath.absolute ?? pageData.frontmatter.image.url, true)
+                        content: imageUrl
                     }]);
+                    head.push(["meta", {
+                        property: "twitter:image",
+                        content: imageUrl
+                    }]);
+                    head.push(["meta", {
+                        property: "twitter:card",
+                        content: "summary_large_image"
+                    }]);
+                }
 
                 if (pageData.frontmatter.image.width != null)
                     head.push(["meta", {
@@ -691,10 +704,17 @@ export default defineConfig({
                             "/_blog/": {
                                 text: "Blog",
                                 link: "/blog/",
-                                items: blogPosts.map((post) => ({
-                                    text: post.frontmatter.title,
-                                    link: post.url
-                                }))
+                                items: blogPosts
+                                    .filter((post) => {
+                                        const hasCoverImage = typeof post.frontmatter?.image === "string" ||
+                                            typeof post.frontmatter?.image?.url === "string";
+
+                                        return !hasCoverImage;
+                                    })
+                                    .map((post) => ({
+                                        text: post.frontmatter.title,
+                                        link: post.url
+                                    }))
                             }
                         }
                     }