refactor: Use variable DEPLOY_URL for Netlify PR previews

Author: rschristian

index.html

@@ -7,10 +7,10 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimal-ui">
 		<meta name="color-scheme" content="dark light">
 		<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">
+		<link rel="alternate" type="application/rss+xml" href="%NETLIFY_DEPLOY_URL%/feed.xml">
+		<link rel="alternate" type="application/atom+xml" href="%NETLIFY_DEPLOY_URL%/feed.atom">
 		<meta property="og:type" content="website">
-		<meta property="og:image" content="https://preactjs.com/og-image.png">
+		<meta property="og:image" content="%NETLIFY_DEPLOY_URL%/og-image.png">
 		<meta name="twitter:card" content="summary_large_image">
 		<meta name="twitter:site" content="@preactjs">
 		<link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous">

plugins/netlify.js

@@ -1,5 +1,5 @@
 import path from 'node:path';
-import { pathToFileURL } from 'node:url'
+import { pathToFileURL } from 'node:url';
 import { Readable } from 'stream';
 
 /**

plugins/rss-feed.js

@@ -4,31 +4,31 @@ import config from '../src/config.json';
 /**
  * @returns {import('vite').Plugin}
  */
-export function rssFeedPlugin() {
+export function rssFeedPlugin(deployURL) {
 	return {
 		name: 'rss-feed',
 		apply: 'build',
 		generateBundle() {
 			const feed = new Feed({
 				title: 'Preact Blog',
 				description: 'Preact news and articles',
-				id: 'https://preactjs.com',
-				link: 'https://preactjs.com',
+				id: deployURL,
+				link: deployURL,
 				language: 'en',
-				image: 'https://preactjs.com/assets/branding/symbol.png',
-				favicon: 'https://preactjs.com/favicon.ico',
+				image: `${deployURL}/assets/branding/symbol.png`,
+				favicon: `${deployURL}/favicon.ico`,
 				copyright: 'All rights reserved 2022, the Preact team',
 				feedLinks: {
-					json: 'https://preactjs.com/json',
-					atom: 'https://preactjs.com/atom'
+					json: `${deployURL}/json`,
+					atom: `${deployURL}/atom`
 				}
 			});
 
 			config.blog.forEach(post => {
 				feed.addItem({
 					title: post.name.en,
-					id: `https://preactjs.com${post.path}`,
-					link: `https://preactjs.com${post.path}`,
+					id: `${deployURL}${post.path}`,
+					link: `${deployURL}${post.path}`,
 					description: post.excerpt.en,
 					date: new Date(post.date)
 				});

src/index.jsx

@@ -46,7 +46,7 @@ export async function prerender() {
 
 	const elements = new Set([
 		{ type: 'meta', props: { name: 'description', content: globalThis.description } },
-		{ type: 'meta', props: { property: 'og:url', content: `https://preactjs.com${location.pathname}` } },
+		{ type: 'meta', props: { property: 'og:url', content: `${import.meta.env.NETLIFY_DEPLOY_URL}${location.pathname}` } },
 		{ type: 'meta', props: { property: 'og:title', content: globalThis.title } },
 		{ type: 'meta', props: { property: 'og:description', content: globalThis.description } },
 		location.pathname.includes('/v8/') && { type: 'meta', props: { name: 'robots', content: 'noindex' } },

vite.config.js

@@ -10,6 +10,10 @@ import { spaFallbackMiddlewarePlugin } from './plugins/spa-fallback-middleware.j
 import { htmlRoutingMiddlewarePlugin } from './plugins/html-routing-middleware.js';
 import { rssFeedPlugin } from './plugins/rss-feed.js';
 
+const NETLIFY_DEPLOY_URL = process.env.CONTEXT === 'deploy-preview'
+	? process.env.DEPLOY_PRIME_URL
+	: 'https://preactjs.com';
+
 export default defineConfig({
 	publicDir: 'src/assets',
 	optimizeDeps: {
@@ -19,7 +23,11 @@ export default defineConfig({
 		target: ['chrome88', 'edge88', 'es2020', 'firefox78', 'safari14'],
 		outDir: 'build'
 	},
+	define: {
+		'import.meta.env.NETLIFY_DEPLOY_URL': JSON.stringify(NETLIFY_DEPLOY_URL)
+	},
 	plugins: [
+		// @ts-ignore
 		replace({
 			'process.env.BRANCH': JSON.stringify(process.env.BRANCH),
 			preventAssignment: true
@@ -53,6 +61,6 @@ export default defineConfig({
 		netlifyPlugin(),
 		spaFallbackMiddlewarePlugin(),
 		htmlRoutingMiddlewarePlugin(),
-		rssFeedPlugin()
+		rssFeedPlugin(NETLIFY_DEPLOY_URL)
 	]
 });