diff --git a/src/pages/post/[...slug].astro b/src/pages/post/[...slug].astro index ae5d4db..59049c3 100644 --- a/src/pages/post/[...slug].astro +++ b/src/pages/post/[...slug].astro @@ -33,7 +33,7 @@ let matchedImage_src; if (matchedImage && !customFeaturedImage) { matchedImage_src = await getImage({src: featuredImages[matchedImage], format: 'webp'}) || null; } -const firstImageURL = await ExtractFirstImage(Content) +const firstImageURL = await ExtractFirstImage(Content,Astro.url.origin) const cover = customFeaturedImage || matchedImage_src?.src || firstImageURL || `/post/${slug}/featured.png` || ''; --- diff --git a/src/pages/post/[slug]/featured.png.js b/src/pages/post/[slug]/featured.png.js index bcd4371..449cf73 100644 --- a/src/pages/post/[slug]/featured.png.js +++ b/src/pages/post/[slug]/featured.png.js @@ -20,22 +20,14 @@ async function getExternalImage(post) { return matchedImage_?.src; } -// Function to check for images in markdown without rendering -function checkForImages(markdownContent) { - // Match markdown image syntax ![alt](url) or HTML tags - const imageRegex = /!\[.*?]\(.*?\)|/g; - return imageRegex.test(markdownContent); -} - // This function dynamically generates og:images for posts that don't have a featured image export async function GET({ props }) { const {post} = props; const ExternalImageURL = await getExternalImage(post); - const hasImage = checkForImages(post.body); try { // Check if a custom cover image already exists - if (post.data.cover || ExternalImageURL || hasImage) { - // set it to empty to prevent the image generation + if (post.data.cover || ExternalImageURL) { + // Redirect to the existing image return new Response(null); } diff --git a/src/plugins/extract-images.js b/src/plugins/extract-images.js index 7bb35d2..61253dd 100644 --- a/src/plugins/extract-images.js +++ b/src/plugins/extract-images.js @@ -3,7 +3,7 @@ import {getContainerRenderer as getMDXRenderer} from "@astrojs/mdx"; import {experimental_AstroContainer as AstroContainer} from "astro/container"; import {transform, walk} from "ultrahtml"; -export async function ExtractFirstImage(Content) { +export async function ExtractFirstImage(Content, baseUrl = '') { // Load MDX renderer. Other renderers for UI frameworks (e.g. React, Vue, etc.) would need adding here if you were using those. const renderers = await loadRenderers([getMDXRenderer()]); @@ -22,7 +22,15 @@ export async function ExtractFirstImage(Content) { await walk(node, (node) => { if (node.name === "img" && node.attributes.src) { // Store the first image URL we find - firstImageUrl = node.attributes.src; + if (!firstImageUrl) { + firstImageUrl = node.attributes.src.startsWith("/") + ? baseUrl + node.attributes.src + : node.attributes.src; + } + // Still update the src attribute if needed + if (node.attributes.src.startsWith("/")) { + node.attributes.src = baseUrl + node.attributes.src; + } } }); return node;