From a2282740c3a54a980710c4e636b264785e1b941e Mon Sep 17 00:00:00 2001 From: Stephen Tse Date: Tue, 19 Nov 2024 19:22:09 -0800 Subject: [PATCH] Added full URL support to frontmatter socialImage link --- docs/features/social images.md | 6 +++++- quartz/components/Head.tsx | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/features/social images.md b/docs/features/social images.md index 78644ec768840..17bb59e92b00e 100644 --- a/docs/features/social images.md +++ b/docs/features/social images.md @@ -45,7 +45,11 @@ The following properties can be used to customize your link previews: | `socialDescription` | `description` | Description to be used for preview. | | `socialImage` | `image`, `cover` | Link to preview image. | -The `socialImage` property should contain a link to an image relative to your base URL. For example, if you have an image `cover.png` in `quartz/static/`, the `socialImage` value could be `"static/cover.png"`. If your image is in `content/assets/`, then the `socialImage` value would become `"assets/cover.png"`. +The `socialImage` property should be a link to an image. It can be relative to your base URL, or you can provide a full URL with scheme (HTTP protocol only). For example: + +1. If you have an image `cover.png` in `quartz/static/`, the `socialImage` value could be `"static/cover.png"`. +2. If your image is in `content/assets/`, then the `socialImage` value would become `"assets/cover.png"`. +3. If your image is hosted elsewhere, say `https://example.com/cover.png`, then the `socialImage` value should be `"https://example.com/cover.png"`. > [!info] Info > diff --git a/quartz/components/Head.tsx b/quartz/components/Head.tsx index e908511ce3728..e8b8cc0e0f66a 100644 --- a/quartz/components/Head.tsx +++ b/quartz/components/Head.tsx @@ -44,6 +44,8 @@ const defaultOptions: SocialImageOptions = { excludeRoot: false, } +const urlSchemeRegex = new RegExp("^(http|https)://", "i"); + export default (() => { let fontsPromise: Promise @@ -147,7 +149,9 @@ export default (() => { // Override with frontmatter url if existing if (frontmatterImgUrl) { - ogImagePath = `https://${cfg.baseUrl}/${frontmatterImgUrl}` + ogImagePath = urlSchemeRegex.test(frontmatterImgUrl) + ? frontmatterImgUrl + : `https://${cfg.baseUrl}/${frontmatterImgUrl}` } // Url of current page