fix: blurry svgs in safari (#2507)

* fix: blurry svgs in safari

* update canary value

* update platform-nextjs-plugin package

* try moving image to component to reduce bundle size

* compress svgs

* png

* remove bundle analyzer

* host svgs in dato

package.json

@@ -48,7 +48,7 @@
 		"@datadog/datadog-api-client": "^1.0.0-beta.7",
 		"@hashicorp/platform-cli": "^2.8.0",
 		"@hashicorp/platform-configs": "^0.2.0",
-		"@hashicorp/platform-nextjs-plugin": "^5.1.0",
+		"@hashicorp/platform-nextjs-plugin": "^5.1.1",
 		"@hashicorp/platform-postcss-config": "^0.2.0",
 		"@hashicorp/platform-tools": "^0.10.0",
 		"@hashicorp/platform-types": "^0.4.0",

src/components/try-hcp-callout/components/try-hcp-callout-prebuilt/index.tsx

@@ -19,7 +19,7 @@ export function TryHcpCalloutPrebuilt({
 }: {
 	productSlug: ProductSlugWithContent
 }) {
-	const { ctaText, ctaUrl, description, heading } =
+	const { ctaText, ctaUrl, description, heading, image } =
 		tryHcpCalloutContent[productSlug]
 	return (
 		<TryHcpCallout
@@ -28,6 +28,7 @@ export function TryHcpCalloutPrebuilt({
 			description={description}
 			heading={heading}
 			productSlug={productSlug}
+			image={image}
 		/>
 	)
 }

src/components/try-hcp-callout/components/try-hcp-callout/index.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import classNames from 'classnames'
+import { useEffect, useState } from 'react'
 import CardLink from 'components/card-link'
 import {
 	Description,
@@ -13,6 +13,8 @@ import {
 import { TryHcpCalloutProps } from 'components/try-hcp-callout/types'
 import { HcpLogoHeading } from '../hcp-logo-heading'
 import s from './try-hcp-callout.module.css'
+import InlineSvg from '@hashicorp/react-inline-svg'
+import fetchFileString from 'lib/fetch-file-string'
 
 /**
  * Renders an HCP themed callout card,
@@ -25,7 +27,14 @@ export function TryHcpCallout({
 	description,
 	ctaText,
 	ctaUrl,
+	image,
 }: TryHcpCalloutProps) {
+	const [svg, setSvg] = useState(null)
+
+	useEffect(() => {
+		fetchFileString(image).then(setSvg)
+	}, [image])
+
 	return (
 		<CardLink className={s.root} ariaLabel={ctaText} href={ctaUrl}>
 			<div className={s.background} />
@@ -40,7 +49,7 @@ export function TryHcpCallout({
 			</div>
 			<div className={s.imageContainer}>
 				<div className={s.imageWrapper}>
-					<div className={classNames(s.image, s[productSlug])} />
+					<InlineSvg src={svg} className={s.image} />
 				</div>
 			</div>
 		</CardLink>

src/components/try-hcp-callout/components/try-hcp-callout/try-hcp-callout.module.css

@@ -73,44 +73,6 @@
 
 /* Positions the image */
 .image {
-	/* Default image is Vault, this gets used with generic HCP callouts too */
-	--background-src: url('./img/try-hcp-callout-ui-mock-vault.svg');
-
-	background-image: var(--background-src);
-	background-position: 0 0;
-	background-repeat: no-repeat;
-	background-size: auto;
-	height: var(--image-height);
-	left: 0;
 	position: absolute;
 	top: var(--image-top-offset);
-	width: var(--image-width);
-
-	&.boundary {
-		--background-src: url('./img/try-hcp-callout-ui-mock-boundary.svg');
-	}
-
-	&.consul {
-		--background-src: url('./img/try-hcp-callout-ui-mock-consul.svg');
-	}
-
-	&.packer {
-		--background-src: url('./img/try-hcp-callout-ui-mock-packer.svg');
-	}
-
-	&.terraform {
-		--background-src: url('./img/try-hcp-callout-ui-mock-terraform.svg');
-	}
-
-	&.vagrant {
-		--background-src: url('./img/try-hcp-callout-ui-mock-vagrant.svg');
-	}
-
-	&.vault {
-		--background-src: url('./img/try-hcp-callout-ui-mock-vault.svg');
-	}
-
-	&.waypoint {
-		--background-src: url('./img/try-hcp-callout-ui-mock-waypoint.svg');
-	}
 }

src/components/try-hcp-callout/content.ts

@@ -8,7 +8,7 @@ import { ProductSlugWithContent } from './types'
 
 type HcpCalloutContent = Pick<
 	TryHcpCalloutProps,
-	'heading' | 'description' | 'ctaText' | 'ctaUrl'
+	'heading' | 'description' | 'ctaText' | 'ctaUrl' | 'image'
 >
 
 /**
@@ -27,48 +27,64 @@ export const tryHcpCalloutContent: Record<
 		description: 'Automate your infrastructure provisioning at any scale',
 		ctaText: 'Try HCP Terraform for free',
 		ctaUrl: 'https://app.terraform.io/public/signup/account',
+		image:
+			'https://www.datocms-assets.com/2885/1721073680-devdot-try-hcp-callout-ui-mock-terraform.svg',
 	},
 	boundary: {
 		heading: 'HCP Boundary',
 		description: 'Securely connect to clouds and remote hosts',
 		ctaText: 'Try HCP Boundary for free',
 		ctaUrl: 'https://portal.cloud.hashicorp.com/sign-up',
+		image:
+			'https://www.datocms-assets.com/2885/1721073666-devdot-try-hcp-callout-ui-mock-boundary.svg',
 	},
 	consul: {
 		heading: 'HCP Consul Dedicated',
 		description: 'Discover and securely connect your applications',
 		ctaText: 'Try HCP Consul Dedicated for free',
 		ctaUrl: 'https://portal.cloud.hashicorp.com/sign-up',
+		image:
+			'https://www.datocms-assets.com/2885/1721073672-devdot-try-hcp-callout-ui-mock-consul.svg',
 	},
 	packer: {
 		heading: 'HCP Packer',
 		description: 'Automate build management across your cloud providers',
 		ctaText: 'Try HCP Packer for free',
 		ctaUrl: 'https://portal.cloud.hashicorp.com/sign-up',
+		image:
+			'https://www.datocms-assets.com/2885/1721073676-devdot-try-hcp-callout-ui-mock-packer.svg',
 	},
 	vault: {
 		heading: 'HCP Vault Dedicated',
 		description: 'Secure your applications and protect sensitive data',
 		ctaText: 'Try HCP Vault Dedicated for free',
 		ctaUrl: 'https://portal.cloud.hashicorp.com/sign-up',
+		image:
+			'https://www.datocms-assets.com/2885/1721073685-devdot-try-hcp-callout-ui-mock-vault.svg',
 	},
 	waypoint: {
 		heading: 'HCP Waypoint',
 		description: 'Simplify your application deployments across platforms',
 		ctaText: 'Try HCP Waypoint for free',
 		ctaUrl: 'https://portal.cloud.hashicorp.com/sign-up',
+		image:
+			'https://www.datocms-assets.com/2885/1721073687-devdot-try-hcp-callout-ui-mock-waypoint.svg',
 	},
 	hcp: {
 		heading: 'HashiCorp Cloud Platform',
 		description: 'The fastest way to get up and running with HashiCorp tools',
 		ctaText: 'Try cloud for free',
 		ctaUrl: 'https://portal.cloud.hashicorp.com/sign-up',
+		image:
+			'https://www.datocms-assets.com/2885/1721073685-devdot-try-hcp-callout-ui-mock-vault.svg',
 	},
 	vagrant: {
 		heading: 'Vagrant Cloud',
 		description:
 			'Virtual boxes for Linux, Laravel and any development environment',
 		ctaText: 'Try Vagrant Cloud for free',
 		ctaUrl: 'https://app.vagrantup.com/boxes/search',
+		image:
+			'https://www.datocms-assets.com/2885/1721073683-devdot-try-hcp-callout-ui-mock-vagrant.svg',
 	},
 }

src/components/try-hcp-callout/types.ts

@@ -17,6 +17,7 @@ export interface TryHcpCalloutProps {
 	description: string
 	ctaText: string
 	ctaUrl: string
+	image: string
 }
 
 export interface TryHcpCalloutCompactProps {