make asset and opengraph paths deployment-origin aware

_data/site.json

@@ -5,6 +5,7 @@
   "keywords": "Dane Bertram, Software Developer, YNAB, Articulate, Fog Creek Software, FogBugz, WebPutty, Dabsoft Solutions, Dane the Canadian, do these actually do anything?",
   "url": "https://danebertram.com/",
   "image": "/assets/images/dane_bertram_avatar.jpg",
+  "og_image": "/dane_bertram_avatar.jpg",
   "header": {
     "nameplate_email": "mailto:dbertram+resume@gmail.com",
     "tagline_html": "A proud builder of bits at <abbr title=\"You Need A Budget\">YNAB</abbr>",

_includes/layouts/base.njk

@@ -9,8 +9,8 @@
 
     <meta property="og:title" content="{{ site.name }} - {{ site.title }}">
     <meta property="og:type" content="website">
-    <meta property="og:url" content="{{ site.url }}">
-    <meta property="og:image" content="{{ site.image }}">
+    <meta property="og:url" content="{{ page.url | absoluteUrl(deployOrigin) }}">
+    <meta property="og:image" content="{{ site.og_image | absoluteUrl(deployOrigin) }}">
 
     <link rel="shortcut icon" href="/favicon.ico" />
     <link rel="stylesheet" href="/assets/styles/main.scss" />

eleventy.config.mjs

@@ -7,13 +7,25 @@ import { formatMonthYear } from './src/shared/date.mjs'
 const __filename = fileURLToPath(import.meta.url)
 const __dirname = path.dirname(__filename)
 const siteData = JSON.parse(fs.readFileSync(path.join(__dirname, '_data', 'site.json'), 'utf8'))
-const isDevServer = process.env.ELEVENTY_ENV === 'development'
+const deployOrigin =
+  process.env.DEPLOY_PRIME_URL ?? // Netlify branch deploys and deploy previews
+  process.env.URL ?? // Netlify production deploys
+  (process.env.ELEVENTY_ENV === 'development' ? 'http://localhost:8080/' : siteData.url)
+
+function toAbsoluteUrl(pathname, origin = deployOrigin) {
+  if (!pathname) {
+    return origin
+  }
+
+  return new URL(pathname, origin).href
+}
 
 export default function (eleventyConfig) {
-  eleventyConfig.addPlugin(EleventyVitePlugin, {
-    viteOptions: {
-      base: isDevServer ? '/' : siteData.url, // ensures og:image meta tag uses an absolute URL instead of relative
-    },
+  eleventyConfig.addPlugin(EleventyVitePlugin)
+
+  eleventyConfig.addGlobalData('deployOrigin', deployOrigin)
+  eleventyConfig.addFilter('absoluteUrl', (pathname, origin = deployOrigin) => {
+    return toAbsoluteUrl(pathname, origin)
   })
 
   const iconsDirectory = path.join(__dirname, '_includes', 'icons')