diff --git a/docs/plugins/CustomOgImages.md b/docs/plugins/CustomOgImages.md index 5d47c419c..4b5bf0391 100644 --- a/docs/plugins/CustomOgImages.md +++ b/docs/plugins/CustomOgImages.md @@ -62,7 +62,7 @@ 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 `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"`. +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"`. > [!info] Info > diff --git a/quartz.config.ts b/quartz.config.ts index 195f521dc..efe96485c 100644 --- a/quartz.config.ts +++ b/quartz.config.ts @@ -18,7 +18,7 @@ const config: QuartzConfig = { locale: "en-US", baseUrl: "quartz.jzhao.xyz", ignorePatterns: ["private", "templates", ".obsidian"], - defaultDateType: "created", + defaultDateType: "modified", theme: { fontOrigin: "googleFonts", cdnCaching: true, diff --git a/quartz/plugins/emitters/componentResources.ts b/quartz/plugins/emitters/componentResources.ts index 5dd67e6aa..92794ef5e 100644 --- a/quartz/plugins/emitters/componentResources.ts +++ b/quartz/plugins/emitters/componentResources.ts @@ -88,89 +88,108 @@ function addGlobalPageResources(ctx: BuildCtx, componentResources: ComponentReso if (cfg.analytics?.provider === "google") { const tagId = cfg.analytics.tagId componentResources.afterDOMLoaded.push(` - const gtagScript = document.createElement("script") - gtagScript.src = "https://www.googletagmanager.com/gtag/js?id=${tagId}" - gtagScript.defer = true - document.head.appendChild(gtagScript) - - window.dataLayer = window.dataLayer || []; - function gtag() { dataLayer.push(arguments); } - gtag("js", new Date()); - gtag("config", "${tagId}", { send_page_view: false }); - - document.addEventListener("nav", () => { - gtag("event", "page_view", { - page_title: document.title, - page_location: location.href, + const gtagScript = document.createElement('script'); + gtagScript.src = 'https://www.googletagmanager.com/gtag/js?id=${tagId}'; + gtagScript.defer = true; + gtagScript.onload = () => { + window.dataLayer = window.dataLayer || []; + function gtag() { + dataLayer.push(arguments); + } + gtag('js', new Date()); + gtag('config', '${tagId}', { send_page_view: false }); + gtag('event', 'page_view', { page_title: document.title, page_location: location.href }); + document.addEventListener('nav', () => { + gtag('event', 'page_view', { page_title: document.title, page_location: location.href }); }); - });`) + }; + + document.head.appendChild(gtagScript); + `) } else if (cfg.analytics?.provider === "plausible") { const plausibleHost = cfg.analytics.host ?? "https://plausible.io" componentResources.afterDOMLoaded.push(` - const plausibleScript = document.createElement("script") - plausibleScript.src = "${plausibleHost}/js/script.manual.js" - plausibleScript.setAttribute("data-domain", location.hostname) - plausibleScript.defer = true - document.head.appendChild(plausibleScript) + const plausibleScript = document.createElement('script'); + plausibleScript.src = '${plausibleHost}/js/script.manual.js'; + plausibleScript.setAttribute('data-domain', location.hostname); + plausibleScript.defer = true; + plausibleScript.onload = () => { + window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments); }; + plausible('pageview'); + document.addEventListener('nav', () => { + plausible('pageview'); + }); + }; - window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) } - - document.addEventListener("nav", () => { - plausible("pageview") - }) + document.head.appendChild(plausibleScript); `) } else if (cfg.analytics?.provider === "umami") { componentResources.afterDOMLoaded.push(` - const umamiScript = document.createElement("script") - umamiScript.src = "${cfg.analytics.host ?? "https://analytics.umami.is"}/script.js" - umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}") - umamiScript.setAttribute("data-auto-track", "false") - umamiScript.defer = true - document.head.appendChild(umamiScript) - - document.addEventListener("nav", () => { + const umamiScript = document.createElement("script"); + umamiScript.src = "${cfg.analytics.host ?? "https://analytics.umami.is"}/script.js"; + umamiScript.setAttribute("data-website-id", "${cfg.analytics.websiteId}"); + umamiScript.setAttribute("data-auto-track", "false"); + umamiScript.defer = true; + umamiScript.onload = () => { umami.track(); - }) + document.addEventListener("nav", () => { + umami.track(); + }); + }; + + document.head.appendChild(umamiScript); `) } else if (cfg.analytics?.provider === "goatcounter") { componentResources.afterDOMLoaded.push(` - const goatcounterScript = document.createElement("script") - goatcounterScript.src = "${cfg.analytics.scriptSrc ?? "https://gc.zgo.at/count.js"}" - goatcounterScript.defer = true - goatcounterScript.setAttribute("data-goatcounter", - "https://${cfg.analytics.websiteId}.${cfg.analytics.host ?? "goatcounter.com"}/count") - document.head.appendChild(goatcounterScript) + const goatcounterScript = document.createElement('script'); + goatcounterScript.src = "${cfg.analytics.scriptSrc ?? "https://gc.zgo.at/count.js"}"; + goatcounterScript.defer = true; + goatcounterScript.setAttribute( + 'data-goatcounter', + "https://${cfg.analytics.websiteId}.${cfg.analytics.host ?? "goatcounter.com"}/count" + ); + goatcounterScript.onload = () => { + window.goatcounter = { no_onload: true }; + goatcounter.count({ path: location.pathname }); + document.addEventListener('nav', () => { + goatcounter.count({ path: location.pathname }); + }); + }; - window.goatcounter = { no_onload: true } - document.addEventListener("nav", () => { - goatcounter.count({ path: location.pathname }) - }) + document.head.appendChild(goatcounterScript); `) } else if (cfg.analytics?.provider === "posthog") { componentResources.afterDOMLoaded.push(` - const posthogScript = document.createElement("script") + const posthogScript = document.createElement("script"); posthogScript.innerHTML= \`!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId".split(" "),n=0;n { + posthog.capture('$pageview', { path: location.pathname }); + + document.addEventListener('nav', () => { + posthog.capture('$pageview', { path: location.pathname }); + }); + }; - document.addEventListener("nav", () => { - posthog.capture('$pageview', { path: location.pathname }) - }) + document.head.appendChild(posthogScript); `) } else if (cfg.analytics?.provider === "tinylytics") { const siteId = cfg.analytics.siteId componentResources.afterDOMLoaded.push(` - const tinylyticsScript = document.createElement("script") - tinylyticsScript.src = "https://tinylytics.app/embed/${siteId}.js?spa" - tinylyticsScript.defer = true - document.head.appendChild(tinylyticsScript) - - document.addEventListener("nav", () => { - window.tinylytics.triggerUpdate() - }) + const tinylyticsScript = document.createElement('script'); + tinylyticsScript.src = 'https://tinylytics.app/embed/${siteId}.js?spa'; + tinylyticsScript.defer = true; + tinylyticsScript.onload = () => { + window.tinylytics.triggerUpdate(); + document.addEventListener('nav', () => { + window.tinylytics.triggerUpdate(); + }); + }; + + document.head.appendChild(tinylyticsScript); `) } else if (cfg.analytics?.provider === "cabin") { componentResources.afterDOMLoaded.push(` diff --git a/quartz/plugins/emitters/ogImage.tsx b/quartz/plugins/emitters/ogImage.tsx index 0b786955c..7fad8c530 100644 --- a/quartz/plugins/emitters/ogImage.tsx +++ b/quartz/plugins/emitters/ogImage.tsx @@ -1,7 +1,7 @@ import { QuartzEmitterPlugin } from "../types" import { i18n } from "../../i18n" import { unescapeHTML } from "../../util/escape" -import { FullSlug, getFileExtension, joinSegments, QUARTZ } from "../../util/path" +import { FullSlug, getFileExtension, isAbsoluteURL, joinSegments, QUARTZ } from "../../util/path" import { ImageOptions, SocialImageOptions, defaultImage, getSatoriFonts } from "../../util/og" import sharp from "sharp" import satori, { SatoriOptions } from "satori" @@ -144,13 +144,19 @@ export const CustomOgImages: QuartzEmitterPlugin> = additionalHead: [ (pageData) => { const isRealFile = pageData.filePath !== undefined - const userDefinedOgImagePath = pageData.frontmatter?.socialImage + let userDefinedOgImagePath = pageData.frontmatter?.socialImage + + if (userDefinedOgImagePath) { + userDefinedOgImagePath = isAbsoluteURL(userDefinedOgImagePath) + ? userDefinedOgImagePath + : `https://${baseUrl}/static/${userDefinedOgImagePath}` + } + const generatedOgImagePath = isRealFile ? `https://${baseUrl}/${pageData.slug!}-og-image.webp` : undefined const defaultOgImagePath = `https://${baseUrl}/static/og-image.png` const ogImagePath = userDefinedOgImagePath ?? generatedOgImagePath ?? defaultOgImagePath - const ogImageMimeType = `image/${getFileExtension(ogImagePath) ?? "png"}` return ( <> diff --git a/quartz/util/path.test.ts b/quartz/util/path.test.ts index 29d845d95..9f94c68ec 100644 --- a/quartz/util/path.test.ts +++ b/quartz/util/path.test.ts @@ -38,6 +38,17 @@ describe("typeguards", () => { assert(!path.isRelativeURL("./abc/def.md")) }) + test("isAbsoluteURL", () => { + assert(path.isAbsoluteURL("https://example.com")) + assert(path.isAbsoluteURL("http://example.com")) + assert(path.isAbsoluteURL("ftp://example.com/a/b/c")) + assert(path.isAbsoluteURL("http://host/%25")) + assert(path.isAbsoluteURL("file://host/twoslashes?more//slashes")) + + assert(!path.isAbsoluteURL("example.com/abc/def")) + assert(!path.isAbsoluteURL("abc")) + }) + test("isFullSlug", () => { assert(path.isFullSlug("index")) assert(path.isFullSlug("abc/def")) diff --git a/quartz/util/path.ts b/quartz/util/path.ts index 0681fae72..b95770159 100644 --- a/quartz/util/path.ts +++ b/quartz/util/path.ts @@ -1,6 +1,7 @@ import { slug as slugAnchor } from "github-slugger" import type { Element as HastElement } from "hast" import { clone } from "./clone" + // this file must be isomorphic so it can't use node libs (e.g. path) export const QUARTZ = "quartz" @@ -39,6 +40,15 @@ export function isRelativeURL(s: string): s is RelativeURL { return validStart && validEnding && ![".md", ".html"].includes(getFileExtension(s) ?? "") } +export function isAbsoluteURL(s: string): boolean { + try { + new URL(s) + } catch { + return false + } + return true +} + export function getFullSlug(window: Window): FullSlug { const res = window.document.body.dataset.slug! as FullSlug return res