fix: Netlify env var access

Author: rschristian

index.html

@@ -9,7 +9,7 @@
 		<meta name="theme-color" content="#673AB8">
 		<link rel="alternate" type="application/rss+xml" href="https://preactjs.com/feed.xml">
 		<link rel="alternate" type="application/atom+xml" href="https://preactjs.com/feed.atom">
-		<meta property="og:image" content="%DEPLOY_URL%/og-image.png">
+		<meta property="og:image" content="%NETLIFY_DEPLOY_URL%/og-image.png">
 		<meta name="twitter:card" content="summary">
 		<link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous">
 	</head>

plugins/netlify.js

@@ -45,6 +45,14 @@ export function netlifyPlugin() {
 		},
 		configurePreviewServer(server) {
 			server.middlewares.use(netlifyFunctionMiddleware);
+		},
+		// Vite only accesses env vars prepeneded with 'VITE_', so this
+		// is the simplest way to access Netlify's env vars.
+		transformIndexHtml(html) {
+			return html.replace(
+				'%NETLIFY_DEPLOY_URL%',
+				process.env.DEPLOY_URL || ''
+			);
 		}
 	};
 }