Added full URL support to frontmatter socialImage link

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
 >

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<SatoriOptions["fonts"]>
 
@@ -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