From 6749f62015c321f2bb224cc34a3e53115cdf3587 Mon Sep 17 00:00:00 2001 From: Sat Naing Date: Wed, 12 Mar 2025 20:47:12 +0700 Subject: [PATCH] fix: add an option to disable dynamic OG image generation (#476) * fix: add an option to disable dynamic OG image generation Add new `dynamicOgImage` option in the `SITE` object inside `src/config.ts` file to disable auto og-image generation during build. Resolves #428 * docs: update guides for `SITE.dynamicOgImage` option --- src/config.ts | 1 + src/data/blog/dynamic-og-images.md | 9 +++++ .../blog/how-to-configure-astropaper-theme.md | 34 ++++++++++--------- src/layouts/Layout.astro | 4 +-- src/layouts/PostDetails.astro | 27 +++++++++++---- src/pages/posts/[slug]/index.png.ts | 24 ++++++++++--- 6 files changed, 70 insertions(+), 29 deletions(-) diff --git a/src/config.ts b/src/config.ts index e7f7298..4731a27 100644 --- a/src/config.ts +++ b/src/config.ts @@ -16,4 +16,5 @@ export const SITE = { text: "Suggest Changes", appendFilePath: true, }, + dynamicOgImage: true, } as const; diff --git a/src/data/blog/dynamic-og-images.md b/src/data/blog/dynamic-og-images.md index 349b78f..ca1e038 100644 --- a/src/data/blog/dynamic-og-images.md +++ b/src/data/blog/dynamic-og-images.md @@ -1,6 +1,7 @@ --- author: Sat Naing pubDatetime: 2022-12-28T04:59:04.866Z +modDatetime: 2025-03-12T13:39:20.763Z title: Dynamic OG image generation in AstroPaper blog posts slug: dynamic-og-image-generation-in-astropaper-blog-posts featured: false @@ -80,6 +81,14 @@ async function loadGoogleFonts( > Check out [this PR](https://github.com/satnaing/astro-paper/pull/318) for more info. +## Trade-off + +While this is a nice feature to have, there's a trade-off. Each OG image takes roughly one second to generate. This might not be noticeable at first, but as the number of blog posts grows, you might want to disable this feature. Since every OG image takes time to generate, having many of them will increase the build time linearly. + +For example: If one OG image takes one second to generate, then 60 images will take around one minute, and 600 images will take approximately 10 minutes. This can significantly impact build times as your content scales. + +Related issue: [#428](https://github.com/satnaing/astro-paper/issues/428) + ## Limitations At the time of writing this, [Satori](https://github.com/vercel/satori) is fairly new and has not reached major release yet. So, there are still some limitations to this dynamic OG image feature. diff --git a/src/data/blog/how-to-configure-astropaper-theme.md b/src/data/blog/how-to-configure-astropaper-theme.md index f5b8197..1681f65 100644 --- a/src/data/blog/how-to-configure-astropaper-theme.md +++ b/src/data/blog/how-to-configure-astropaper-theme.md @@ -1,7 +1,7 @@ --- author: Sat Naing pubDatetime: 2022-09-23T04:58:53Z -modDatetime: 2025-03-07T14:01:26.494Z +modDatetime: 2025-03-12T13:39:39.057Z title: How to configure AstroPaper theme slug: how-to-configure-astropaper-theme featured: true @@ -42,26 +42,28 @@ export const SITE = { text: "Suggest Changes", appendFilePath: true, }, + dynamicOgImage: true, // enable automatic dynamic og-image generation } as const; ``` Here are SITE configuration options -| Options | Description | -| --------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `website` | Your deployed website URL | -| `author` | Your name | -| `profile` | Your personal/portfolio website URL which is used for better SEO. Put `null` or empty string `""` if you don't have any. | -| `desc` | Your site description. Useful for SEO and social media sharing. | -| `title` | Your site name | -| `ogImage` | Your default OG image for the site. Useful for social media sharing. OG images can be an external image URL or they can be placed under `/public` directory. | -| `lightAndDarkMode` | Enable or disable `light & dark mode` for the website. If disabled, primary color scheme will be used. This option is enabled by default. | -| `postPerIndex` | The number of posts to be displayed at the home page under `Recent` section. | -| `postPerPage` | You can specify how many posts will be displayed in each posts page. (eg: if you set `SITE.postPerPage` to 3, each page will only show 3 posts per page) | -| `scheduledPostMargin` | In Production mode, posts with a future `pubDatetime` will not be visible. However, if a post's `pubDatetime` is within the next 15 minutes, it will be visible. You can set `scheduledPostMargin` if you don't like the default 15 minutes margin. | -| `showArchives` | Determines whether to display the `Archives` menu (positioned between the `About` and `Search` menus) and its corresponding page on the site. This option is set to `true` by default. | -| `showBackButton` | Determines whether to display the `Go back` button in each blog post. | -| `editPost` | This option allows users to suggest changes to a blog post by providing an edit link under blog post titles. This feature can be disabled by removing it from the `SITE` config. You can also set `appendFilePath` to `true` to automatically append the file path of the post to the url, directing users to the specific post they wish to edit. | +| Options | Description | +| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `website` | Your deployed website URL | +| `author` | Your name | +| `profile` | Your personal/portfolio website URL which is used for better SEO. Put `null` or empty string `""` if you don't have any. | +| `desc` | Your site description. Useful for SEO and social media sharing. | +| `title` | Your site name | +| `ogImage` | Your default OG image for the site. Useful for social media sharing. OG images can be an external image URL or they can be placed under `/public` directory. | +| `lightAndDarkMode` | Enable or disable `light & dark mode` for the website. If disabled, primary color scheme will be used. This option is enabled by default. | +| `postPerIndex` | The number of posts to be displayed at the home page under `Recent` section. | +| `postPerPage` | You can specify how many posts will be displayed in each posts page. (eg: if you set `SITE.postPerPage` to 3, each page will only show 3 posts per page) | +| `scheduledPostMargin` | In Production mode, posts with a future `pubDatetime` will not be visible. However, if a post's `pubDatetime` is within the next 15 minutes, it will be visible. You can set `scheduledPostMargin` if you don't like the default 15 minutes margin. | +| `showArchives` | Determines whether to display the `Archives` menu (positioned between the `About` and `Search` menus) and its corresponding page on the site. This option is set to `true` by default. | +| `showBackButton` | Determines whether to display the `Go back` button in each blog post. | +| `editPost` | This option allows users to suggest changes to a blog post by providing an edit link under blog post titles. This feature can be disabled by removing it from the `SITE` config. You can also set `appendFilePath` to `true` to automatically append the file path of the post to the url, directing users to the specific post they wish to edit. | +| `dynamicOgImage` | This option controls whether to [generate dynamic og-image](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/) if no `ogImage` is specified in the blog post frontmatter. If you have many blog posts, you might want to disable this feature. See the [trade-off](https://astro-paper.pages.dev/posts/dynamic-og-image-generation-in-astropaper-blog-posts/#trade-off) for more details. | ## Configuring locale diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 7febb2f..ced4b21 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -23,14 +23,14 @@ const { author = SITE.author, profile = SITE.profile, description = SITE.desc, - ogImage = SITE.ogImage, + ogImage = SITE.ogImage ? `/${SITE.ogImage}` : "/og.png", canonicalURL = new URL(Astro.url.pathname, Astro.url), pubDatetime, modDatetime, scrollSmooth = false, } = Astro.props; -const socialImageURL = new URL(ogImage ?? SITE.ogImage ?? "og.png", Astro.url); +const socialImageURL = new URL(ogImage, Astro.url); const structuredData = { "@context": "https://schema.org", diff --git a/src/layouts/PostDetails.astro b/src/layouts/PostDetails.astro index fe295cf..720787b 100644 --- a/src/layouts/PostDetails.astro +++ b/src/layouts/PostDetails.astro @@ -24,7 +24,7 @@ const { title, author, description, - ogImage, + ogImage: initOgImage, canonicalURL, pubDatetime, modDatetime, @@ -34,11 +34,24 @@ const { const { Content } = await render(post); -const ogImageUrl = typeof ogImage === "string" ? ogImage : ogImage?.src; -const ogUrl = new URL( - ogImageUrl ?? `/posts/${slugifyStr(title)}/index.png`, - Astro.url.origin -).href; +let ogImageUrl: string | undefined; + +// Determine OG image source +if (typeof initOgImage === "string") { + ogImageUrl = initOgImage; // Remote OG image (absolute URL) +} else if (initOgImage?.src) { + ogImageUrl = initOgImage.src; // Local asset +} + +// Use dynamic OG image if enabled and no remote|local ogImage +if (!ogImageUrl && SITE.dynamicOgImage) { + ogImageUrl = `/posts/${slugifyStr(title)}/index.png`; +} + +// Resolve OG image URL (or fallback to SITE.ogImage / default `og.png`) +const ogImage = ogImageUrl + ? new URL(ogImageUrl, Astro.url.origin).href + : undefined; const layoutProps = { title: `${title} | ${SITE.title}`, @@ -47,7 +60,7 @@ const layoutProps = { pubDatetime, modDatetime, canonicalURL, - ogImage: ogUrl, + ogImage, scrollSmooth: true, }; diff --git a/src/pages/posts/[slug]/index.png.ts b/src/pages/posts/[slug]/index.png.ts index 0294eea..396cfe6 100644 --- a/src/pages/posts/[slug]/index.png.ts +++ b/src/pages/posts/[slug]/index.png.ts @@ -2,8 +2,13 @@ import type { APIRoute } from "astro"; import { getCollection, type CollectionEntry } from "astro:content"; import { generateOgImageForPost } from "@/utils/generateOgImages"; import { slugifyStr } from "@/utils/slugify"; +import { SITE } from "@/config"; export async function getStaticPaths() { + if (!SITE.dynamicOgImage) { + return []; + } + const posts = await getCollection("blog").then(p => p.filter(({ data }) => !data.draft && !data.ogImage) ); @@ -14,7 +19,18 @@ export async function getStaticPaths() { })); } -export const GET: APIRoute = async ({ props }) => - new Response(await generateOgImageForPost(props as CollectionEntry<"blog">), { - headers: { "Content-Type": "image/png" }, - }); +export const GET: APIRoute = async ({ props }) => { + if (!SITE.dynamicOgImage) { + return new Response(null, { + status: 404, + statusText: "Not found", + }); + } + + return new Response( + await generateOgImageForPost(props as CollectionEntry<"blog">), + { + headers: { "Content-Type": "image/png" }, + } + ); +};