aria.pds.witchcraft.systems / trans-info.aria.coffee
The Trans Directory
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix(ogImage): update socialImage path to include base URL if defined (#1858)

* fix(ogImage): update socialImage path to include base URL if defined

* feat(path): add function to check if a file path is absolute

* fix(ogImage): handle absolute paths for user defined og image paths

* docs(CustomOgImages): update socialImage property to accept full URLs

* fix(ogImage): typo

* fix(ogImage): improve user-defined OG image path handling

* Update docs/plugins/CustomOgImages.md

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* Update quartz/plugins/emitters/ogImage.tsx

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* refactor(path): remove isAbsoluteFilePath function

* fix(ogImage): update user-defined OG image path handling to support relative URLs

* feat(ogImage): enhance user-defined OG image path handling with absolute URL support

* refactor(ogImage): remove debug log for ogImagePath

* feat(path): add isAbsoluteURL function and corresponding tests

* refactor(path): remove unused URL import for isomorphic compatibility

---------

Co-authored-by: Karim H <karimh96@hotmail.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

authored by

Karim
Jacky Zhao
Karim H and committed by
GitHub 3ce6aa49 9316ddf2

+31 -4
+1 -1
docs/plugins/CustomOgImages.md
··· 62 62 | `socialDescription` | `description` | Description to be used for preview. | 63 63 | `socialImage` | `image`, `cover` | Link to preview image. | 64 64 65 - The `socialImage` property should contain a link to an image relative to `quartz/static`. If you have a folder for all your images in `quartz/static/my-images`, an example for `socialImage` could be `"my-images/cover.png"`. 65 + The `socialImage` property should contain a link to an image either relative to `quartz/static`, or a full URL. If you have a folder for all your images in `quartz/static/my-images`, an example for `socialImage` could be `"my-images/cover.png"`. Alternatively, you can use a fully qualified URL like `"https://example.com/cover.png"`. 66 66 67 67 > [!info] Info 68 68 >
+9 -3
quartz/plugins/emitters/ogImage.tsx
··· 1 1 import { QuartzEmitterPlugin } from "../types" 2 2 import { i18n } from "../../i18n" 3 3 import { unescapeHTML } from "../../util/escape" 4 - import { FullSlug, getFileExtension, joinSegments, QUARTZ } from "../../util/path" 4 + import { FullSlug, getFileExtension, isAbsoluteURL, joinSegments, QUARTZ } from "../../util/path" 5 5 import { ImageOptions, SocialImageOptions, defaultImage, getSatoriFonts } from "../../util/og" 6 6 import sharp from "sharp" 7 7 import satori, { SatoriOptions } from "satori" ··· 144 144 additionalHead: [ 145 145 (pageData) => { 146 146 const isRealFile = pageData.filePath !== undefined 147 - const userDefinedOgImagePath = pageData.frontmatter?.socialImage 147 + let userDefinedOgImagePath = pageData.frontmatter?.socialImage 148 + 149 + if (userDefinedOgImagePath) { 150 + userDefinedOgImagePath = isAbsoluteURL(userDefinedOgImagePath) 151 + ? userDefinedOgImagePath 152 + : `https://${baseUrl}/static/${userDefinedOgImagePath}` 153 + } 154 + 148 155 const generatedOgImagePath = isRealFile 149 156 ? `https://${baseUrl}/${pageData.slug!}-og-image.webp` 150 157 : undefined 151 158 const defaultOgImagePath = `https://${baseUrl}/static/og-image.png` 152 159 const ogImagePath = userDefinedOgImagePath ?? generatedOgImagePath ?? defaultOgImagePath 153 - 154 160 const ogImageMimeType = `image/${getFileExtension(ogImagePath) ?? "png"}` 155 161 return ( 156 162 <>
+11
quartz/util/path.test.ts
··· 38 38 assert(!path.isRelativeURL("./abc/def.md")) 39 39 }) 40 40 41 + test("isAbsoluteURL", () => { 42 + assert(path.isAbsoluteURL("https://example.com")) 43 + assert(path.isAbsoluteURL("http://example.com")) 44 + assert(path.isAbsoluteURL("ftp://example.com/a/b/c")) 45 + assert(path.isAbsoluteURL("http://host/%25")) 46 + assert(path.isAbsoluteURL("file://host/twoslashes?more//slashes")) 47 + 48 + assert(!path.isAbsoluteURL("example.com/abc/def")) 49 + assert(!path.isAbsoluteURL("abc")) 50 + }) 51 + 41 52 test("isFullSlug", () => { 42 53 assert(path.isFullSlug("index")) 43 54 assert(path.isFullSlug("abc/def"))
+10
quartz/util/path.ts
··· 1 1 import { slug as slugAnchor } from "github-slugger" 2 2 import type { Element as HastElement } from "hast" 3 3 import { clone } from "./clone" 4 + 4 5 // this file must be isomorphic so it can't use node libs (e.g. path) 5 6 6 7 export const QUARTZ = "quartz" ··· 37 38 const validStart = /^\.{1,2}/.test(s) 38 39 const validEnding = !endsWith(s, "index") 39 40 return validStart && validEnding && ![".md", ".html"].includes(getFileExtension(s) ?? "") 41 + } 42 + 43 + export function isAbsoluteURL(s: string): boolean { 44 + try { 45 + new URL(s) 46 + } catch { 47 + return false 48 + } 49 + return true 40 50 } 41 51 42 52 export function getFullSlug(window: Window): FullSlug {