production mode should now use cloudinary for image delivery (playfulprogramming#1250)

Preview:
https://playfulprogramming-git-fork-gungier-1230-migrat-ef6732-oceanbit.vercel.app/

Author: fennifith

src/views/collections/framework-field-guide/people-pictures/anar_kamalova.jpg content/crutchcorn/collections/framework-field-guide/people-pictures/anar_kamalova.jpg

@@ -1,6 +1,6 @@
-const buildMode = process.env.BUILD_ENV || "production";
+const buildMode = import.meta.env.BUILD_ENV || "production";
 const siteUrl = (() => {
-	let siteUrl = process.env.SITE_URL || process.env.VERCEL_URL || "";
+	let siteUrl = import.meta.env.SITE_URL || import.meta.env.VERCEL_URL || "";
 
 	if (siteUrl && !siteUrl.startsWith("http")) siteUrl = `https://${siteUrl}`;
 

src/views/collections/framework-field-guide/people-pictures/brad_garropy.jpg content/crutchcorn/collections/framework-field-guide/people-pictures/brad_garropy.jpg

@@ -1,5 +1,6 @@
 import type { JSX } from "preact";
 import type { ImageMetadata } from "astro";
+import { siteUrl } from "../constants/site-config";
 
 export interface GetPictureSizes {
 	[size: number]: {
@@ -42,7 +43,13 @@ function getSupportedWidth(width: number) {
 
 const isDev = Boolean(import.meta.env?.DEV);
 
-function getSource(src: string, width: number) {
+const PUBLIC_CLOUDINARY_CLOUD_NAME = import.meta.env
+	.PUBLIC_CLOUDINARY_CLOUD_NAME;
+
+if (!isDev && !PUBLIC_CLOUDINARY_CLOUD_NAME)
+	console.error("missing public variable CLOUDINARY_CLOUD_NAME");
+
+function getSource(src: string, width: number, getFormat: string) {
 	if (isDev) {
 		// If the dev server is running, we can use the /_image endpoint
 		return `/_image?${new URLSearchParams({
@@ -51,12 +58,9 @@ function getSource(src: string, width: number) {
 			q: "100",
 		})}`;
 	} else {
-		// Otherwise, use Vercel's Image Optimization API
-		return `/_vercel/image?${new URLSearchParams({
-			url: src,
-			w: String(width),
-			q: "100",
-		})}`;
+		// If in production use cloudinary's fetch
+		const domainUrl = new URL(src, siteUrl);
+		return `https://res.cloudinary.com/${PUBLIC_CLOUDINARY_CLOUD_NAME}/image/fetch/w_${width},f_${getFormat},q_auto/${encodeURIComponent(domainUrl.toString())}`;
 	}
 }
 
@@ -76,7 +80,7 @@ export function getPictureUrls(options: GetPictureOptions): GetPictureUrls {
 
 		for (const width of widths) {
 			const supportedWidth = getSupportedWidth(width);
-			formatUrls[supportedWidth] = getSource(src, supportedWidth);
+			formatUrls[supportedWidth] = getSource(src, supportedWidth, format);
 		}
 	}
 

src/views/collections/framework-field-guide/people-pictures/brandon_roberts.jpg content/crutchcorn/collections/framework-field-guide/people-pictures/brandon_roberts.jpg

@@ -1,10 +1,9 @@
 ---
 import { Picture } from "components/image/picture";
 import styles from "./quote-card.module.scss";
-import type { ImageMetadata } from "astro";
 
 interface Props {
-	avatarSrc: string | Promise<{ default: ImageMetadata }>;
+	avatarSrc: string;
 	quote: string;
 	personLink: string;
 	personTitle: string;
@@ -13,9 +12,6 @@ interface Props {
 
 const { avatarSrc, quote, personTitle, personName, personLink } =
 	Astro.props as Props;
-
-const src =
-	typeof avatarSrc === "string" ? avatarSrc : (await avatarSrc).default;
 ---
 
 <li class={styles.quoteCardContainerLi}>
@@ -26,7 +22,7 @@ const src =
 		<div class={styles.personDetailsContainer}>
 			<Picture
 				imgAttrs={{ class: styles.personAvatar }}
-				src={src}
+				src={avatarSrc}
 				alt=""
 				width={40}
 				height={40}

src/views/collections/framework-field-guide/people-pictures/crutchcorn.png content/crutchcorn/collections/framework-field-guide/people-pictures/crutchcorn.png

@@ -5,6 +5,9 @@ import QuoteCard from "../components/quote-card.astro";
 import QuotesContainer from "../components/quotes-container.astro";
 import SmallFilledButton from "../components/small-filled-button.astro";
 import styles from "./quotes.module.scss";
+
+const peoplePicturesDir =
+	"/content/crutchcorn/collections/framework-field-guide/people-pictures";
 ---
 
 <section class={styles.fullQuotesContainer} aria-labelledby="quotes-heading">
@@ -36,7 +39,7 @@ Whether you want to go from zero to hero in the marvelous world of frontend Java
 		<QuoteCard
 			personName={`Santosh Yadav`}
 			personLink={"https://twitter.com/SantoshYadavDev"}
-			avatarSrc={import("../people-pictures/santosh_yadav.jpg")}
+			avatarSrc={`${peoplePicturesDir}/santosh_yadav.jpg`}
 			personTitle={`Angular GDE, GitHub Star, OSS Advocate, Auth0 Ambassador`}
 			quote={`
 I know Angular, and the book is written in such a beautiful way I loved reading it. I just don't believe it is going to be available for free. It is one of the best technical books I've read recently; it's very well structured to give you ideas about React, Angular, and Vue.
@@ -47,7 +50,7 @@ Even if you are not interested in learning other frameworks and want to learn on
 		<QuoteCard
 			personName={`Satyajit Sahoo`}
 			personLink={"https://twitter.com/satya164"}
-			avatarSrc={import("../people-pictures/satyajit_sahoo.jpg")}
+			avatarSrc={`${peoplePicturesDir}/satyajit_sahoo.jpg`}
 			personTitle={`Maintainer of React Navigation, Creator of Linaria`}
 			quote={`
 I am really impressed with "The Framework Field Guide" by Corbin - not only does it manage to describe various concepts of popular frameworks in a very concise way with code examples and illustrations, but it does so for multiple frameworks at once. For developers like me who are already familiar with React, it's a great way to learn how to translate those concepts to other frameworks. I highly recommend it.
@@ -56,7 +59,8 @@ I am really impressed with "The Framework Field Guide" by Corbin - not only does
 		<QuoteCard
 			personName={`Jessica Temporal`}
 			personLink={"https://twitter.com/jesstemporal"}
-			avatarSrc={import("../people-pictures/jessica_temporal.jpg")}
+			avatarSrc={getPersonById("jtemporal", "en")!.profileImgMeta
+				.relativeServerPath}
 			personTitle={`PyLady • GitHub Star • Sr Developer Advocate @ Auth0 by Okta`}
 			quote={`
 As a developer, my main focus is on Python. I still find the world of JavaScript confusing at times. However, Corbin's teaching style is so easy-going that even people like myself can have a great time. I first met Corbin through one of his live streams, and I can assure you that his content is worth your while. If you need help with React, Angular, and/or Vue, you've come to the right place.
@@ -65,7 +69,7 @@ As a developer, my main focus is on Python. I still find the world of JavaScript
 		<QuoteCard
 			personName={`Nic Raboy`}
 			personLink={"https://twitter.com/nraboy"}
-			avatarSrc={import("../people-pictures/nic_raboy.jpg")}
+			avatarSrc={`${peoplePicturesDir}/nic_raboy.jpg`}
 			personTitle={`Founder of The Polyglot Developer`}
 			quote={`
 Corbin is an incredible teacher who is able to create easy to digest material that is both thorough and fun. If you're looking to become an expert in both JavaScript as well as a JavaScript related framework, this book series should help you accomplish it.
@@ -74,7 +78,7 @@ Corbin is an incredible teacher who is able to create easy to digest material th
 		<QuoteCard
 			personName={`Esther Agbaje`}
 			personLink={"https://estheragbaje.dev/"}
-			avatarSrc={import("../people-pictures/esther_agbaje.png")}
+			avatarSrc={`${peoplePicturesDir}/esther_agbaje.png`}
 			personTitle={`Developer Advocate, Chakra UI`}
 			quote={`
 The structure of the book as a whole is well-organized and in-depth, making it a great resource for individuals with little to no prior experience in web development as well as those interested in learning more about the theoretical underpinnings of JavaScript frameworks.
@@ -85,7 +89,7 @@ In particular, what I like about Corbin's approach is how he takes intricate con
 		<QuoteCard
 			personName={`Mark Takata`}
 			personLink={"https://twitter.com/MarkTakata"}
-			avatarSrc={import("../people-pictures/mark_takata.jpg")}
+			avatarSrc={`${peoplePicturesDir}/mark_takata.jpg`}
 			personTitle={`Global Adobe Technical Evangelist for ColdFusion, Keynote Speaker`}
 			quote={`
 Most old timey developers will tell you that, under the hood, nearly all programming languages work more or less the same. But Corbin is one of the first to lift that hood, climb in the engine bay & invite the world in for a tour. A book series that truly embodies the three E’s: Entertainment, engagement & education. Recommended for anyone with an interest in this whole ‘JavaScript frameworks’ razzledazzle.
@@ -94,7 +98,7 @@ Most old timey developers will tell you that, under the hood, nearly all program
 		<QuoteCard
 			personName={`Brad Garropy`}
 			personLink="https://bradgarropy.com/"
-			avatarSrc={import("../people-pictures/brad_garropy.jpg")}
+			avatarSrc={`${peoplePicturesDir}/brad_garropy.jpg`}
 			personTitle={`Lead Frontend Developer, Open Source Maintainer`}
 			quote={`
 Teaching three frameworks at once is a huge undertaking, but Corbin goes deeper into software than anyone I know. He identifies core concepts and teaches them in a way that's valuable for conceptual understanding, then shows practical implementations across frameworks. This is the most comprehensive guide I've seen!
@@ -103,7 +107,7 @@ Teaching three frameworks at once is a huge undertaking, but Corbin goes deeper
 		<QuoteCard
 			personName={`James Quick`}
 			personLink="https://www.youtube.com/jamesqquick"
-			avatarSrc={import("../people-pictures/james_quick.png")}
+			avatarSrc={`${peoplePicturesDir}/james_quick.png`}
 			personTitle={`Developer. Speaker. Teacher`}
 			quote={`
 This is one of the most unique and valuable approaches to teaching and learning frontend frameworks that I've ever seen. Being able to compare Angular, React, and Vue alongside each other while learning the core concepts of frameworks is incredible. I think focusing on the concepts while also showing how the different frameworks implement those concepts is an incredible idea!
@@ -112,7 +116,7 @@ This is one of the most unique and valuable approaches to teaching and learning
 		<QuoteCard
 			personName={`Brandon Roberts`}
 			personLink="https://twitter.com/brandontroberts"
-			avatarSrc={import("../people-pictures/brandon_roberts.jpg")}
+			avatarSrc={`${peoplePicturesDir}/brandon_roberts.jpg`}
 			personTitle={`NgRX and AnalogJS Maintainer, Angular GDE, Web Developer`}
 			quote={`
 Learning the similarities and differences between different web frameworks helps you make an informed decision about which works better for your next project. This book does an excellent job of providing clear examples and guidance about how React, Angular, and Vue work, along with how to move on from basic understanding to advanced topics. I can recommend this book to web developers without hesitation.
@@ -121,7 +125,7 @@ Learning the similarities and differences between different web frameworks helps
 		<QuoteCard
 			personName={`Joshua Goldberg`}
 			personLink="https://www.joshuakgoldberg.com"
-			avatarSrc={import("../people-pictures/joshua_goldberg.jpg")}
+			avatarSrc={`${peoplePicturesDir}/joshua_goldberg.jpg`}
 			personTitle={`Maintainer of TypeScript ESLint, Author of “Learning TypeScript”`}
 			quote={`
 The Framework Field Guide does a wonderful job of comparing and contrasting three of the most widely used UI frameworks out there. As a proficient user only in React, I found it quite useful for branching into Angular and Vue. I'd recommend this for anybody looking to level up their knowledge of modern UI frameworks!
@@ -140,7 +144,7 @@ Reading the Framework Field Guide is like boarding the ship of frontend developm
 		<QuoteCard
 			personName={`Sean Whitesell`}
 			personLink="https://twitter.com/codewithseanw"
-			avatarSrc={import("../people-pictures/sean_whitesell.jpg")}
+			avatarSrc={`${peoplePicturesDir}/sean_whitesell.jpg`}
 			personTitle={`Microsoft MVP, Cloud Architect, Author of “Pro Microservices In .NET 6”`}
 			quote={`
 Corbin does an amazing job teaching fundamentals that simplify learning React, Angular, and Vue. The many analogies, pictures, and diagrams are fantastic for conveying detailed information in a way that is easy to consume. You can easily tell that Corbin cares about you, the reader, and really wants you to learn as easily as possible.
@@ -158,7 +162,7 @@ This guide offers a brilliant overview of concepts that can apply to almost any
 		/>
 		<QuoteCard
 			personName={`Anar Kamalova`}
-			avatarSrc={import("../people-pictures/anar_kamalova.jpg")}
+			avatarSrc={`${peoplePicturesDir}/anar_kamalova.jpg`}
 			personLink="https://www.linkedin.com/in/anarkamalova/"
 			personTitle={`Frontend Engineer`}
 			quote={`
@@ -168,7 +172,7 @@ Corbin's approach to teaching is to take the safest and easiest path to understa
 		<QuoteCard
 			personName={`Salma Alam-Naylor`}
 			personLink="https://whitep4nth3r.com/"
-			avatarSrc={import("../people-pictures/salma_alam-naylor.png")}
+			avatarSrc={`${peoplePicturesDir}/salma_alam-naylor.png`}
 			personTitle={`DX Engineer, Microsoft MVP, teacher, writer, live coder`}
 			quote={`
 The Framework Field Guide is a quality resource whether you want to take a very deep dive or a light, gentle paddle in the vast open waters of JavaScript frameworks. And whether you're a seasoned developer or just starting out, you'll learn some new things on every page in a friendly and approachable way.
@@ -177,7 +181,7 @@ The Framework Field Guide is a quality resource whether you want to take a very
 		<QuoteCard
 			personName={`Mathis Hammel`}
 			personLink="https://twitter.com/mathishammel"
-			avatarSrc={import("../people-pictures/mathis_hammel.jpg")}
+			avatarSrc={`${peoplePicturesDir}/mathis_hammel.jpg`}
 			personTitle={`Technical Evangelist`}
 			quote={`
 I've never understood anything about JavaScript. {}+[] is 0, seriously?
@@ -188,7 +192,7 @@ That was until I met Corbin. His extensive knowledge, along with his amazing abi
 		<QuoteCard
 			personName={`James Perkins`}
 			personLink="https://twitter.com/james_r_perkins"
-			avatarSrc={import("../people-pictures/james_perkins.jpg")}
+			avatarSrc={`${peoplePicturesDir}/james_perkins.jpg`}
 			personTitle={`Senior Developer Advocate, Content Creator`}
 			quote={`
 Corbin is great at giving new developers the keys to the kingdom. The pictures, diagrams, and detailed explanations allow anyone thinking about learning Vue, React, or Angular an easy blueprint. Corbin clearly cares about his readers and wants them to come away with new knowledge of industry leading frameworks
@@ -209,7 +213,7 @@ I'm confident the book contents will help you grow your skillset and use any fra
 		<QuoteCard
 			personName={`Jacob Walker`}
 			personLink="https://www.linkedin.com/in/jacobjwalker/"
-			avatarSrc={import("../people-pictures/jacob_walker.jpg")}
+			avatarSrc={`${peoplePicturesDir}/jacob_walker.jpg`}
 			personTitle={`Lead Software Engineer, Renaissance Learning`}
 			quote={`
 New software developers often don't see how programming languages share many commonalities with each other and get hung up on syntax instead of functionality. By showing three frameworks at the same time, Corbin dispels this misconception while also showing the pros and cons of each framework.
@@ -218,7 +222,7 @@ New software developers often don't see how programming languages share many com
 		<QuoteCard
 			personName={`PixelPirate_`}
 			personLink="https://twitter.com/pixlpirate_"
-			avatarSrc={import("../people-pictures/pixelpirate_.png")}
+			avatarSrc={`${peoplePicturesDir}/pixelpirate_.png`}
 			personTitle={`Java Scrublord`}
 			quote={`
 Being a junior developer myself, the things Corbin can do with an IDE might as well be wizardry. He's the kind of guy that, when I asked him for help wrangling some code, instead built me a bespoke tool that did the job better than I could have imagined. Not to show off but just for the love of the craft. The kind of guy I wish I could have learned from in college.