@heyramzi/marketing 2.0.1 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/marketing",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "description": "Umami analytics for client, server, and Svelte, plus a satori-based HTML-to-image pipeline.",
   "license": "MIT",
   "repository": {
@@ -25,6 +25,7 @@
     "./analytics/unified": "./src/analytics/unified.ts",
     "./imagegen": "./src/imagegen/index.ts",
     "./brand": "./src/brand/index.ts",
+    "./brand/deck": "./src/brand/deck.ts",
     "./testimonials/types": "./src/testimonials/types.ts",
     "./testimonials/server": "./src/testimonials/server.ts",
     "./testimonials/render-content": "./src/testimonials/render-content.ts",

package/src/brand/deck.ts

@@ -0,0 +1,110 @@
+// The one source of UpSys deck tokens. The app's Svelte layouts and the
+// standalone proposal deck both read these, so the two cannot drift.
+
+import { BRAND_HEX } from "#src/brand/index.js";
+
+// Flat hex, not oklch: Chromium's print pipeline shifts oklch on the way to PDF.
+// A colour the brand palette already holds comes from BRAND_HEX, never a second literal.
+export const DECK_COLORS = {
+  /** Page ground for every slide except the cover and the close. */
+  ink: BRAND_HEX.ink,
+  /** The cover and the close sit a step lighter so the deck bookends. */
+  night: BRAND_HEX.night,
+  /** Hairlines and the rules under a section. */
+  veil: BRAND_HEX.veil,
+  /** Row separators, quieter than veil. */
+  dusk: "#0d1a32",
+  /** Body text on ink. */
+  cream: BRAND_HEX.cream,
+  /** Headlines and anything that has to read first. */
+  linen: BRAND_HEX.linen,
+  indigo: BRAND_HEX.indigo,
+  /** Links and the sub-line under a cover title. */
+  indigo200: "#b2c2f9",
+  /** Lede paragraphs and the say column beside a screenshot. */
+  indigo100: "#dbe4ff",
+  /** Prices, and the heading of the left column in a two-column slide. */
+  sand: BRAND_HEX.sand,
+  /** The accent rule. One per slide, never decoration. */
+  terra: BRAND_HEX.terra,
+  terra200: "#feac9e",
+  /** The positive green, from `--success-600`, within 0.3 of terra's contrast on ink. */
+  moss: "#2f9f3d",
+  /** Captions. */
+  dim: "#8fa0c0",
+  /** Source lines, the smallest type on any slide. */
+  dimmer: "#5d6d8c",
+} as const;
+
+/**
+ * The type ramp, in design pixels on a 960x540 slide. The standalone deck uses
+ * these times 5/3. Keep the ratios; don't invent a size.
+ */
+export const DECK_TYPE = {
+  coverTitle: { size: 66, weight: 800, tracking: "-0.03em", leading: 1.02 },
+  coverSub: { size: 20, weight: 600, tracking: "-0.02em", leading: 1.2 },
+  statement: { size: 42, weight: 800, tracking: "-0.03em", leading: 1.05 },
+  slideTitle: { size: 32, weight: 800, tracking: "-0.03em", leading: 1.05 },
+  sayTitle: { size: 22, weight: 700, tracking: "-0.02em", leading: 1.2 },
+  figure: { size: 35, weight: 800, tracking: "-0.04em", leading: 1 },
+  price: { size: 40, weight: 800, tracking: "-0.04em", leading: 1 },
+  /** One sentence that is the slide. `body` stays at 14 because narrow boxes are measured against it. */
+  claim: { size: 18, weight: 400, tracking: "0", leading: 1.45 },
+  lede: { size: 17, weight: 400, tracking: "0", leading: 1.5 },
+  body: { size: 14, weight: 400, tracking: "0", leading: 1.5 },
+  caption: { size: 11, weight: 400, tracking: "0", leading: 1.45 },
+  label: { size: 10, weight: 400, tracking: "0.08em", leading: 1.4 },
+} as const;
+
+export type DeckTypeToken = keyof typeof DECK_TYPE;
+
+/**
+ * The cover lockup: the client's mark beside the UpSys logo. Design pixels on a
+ * 960x540 slide.
+ */
+export const DECK_LOCKUP = {
+  /** The tile under the client mark. Client logos ship on white; night eats them. */
+  clientTile: 96,
+  clientPad: 14,
+  clientRadius: 16,
+  /** Wordmark height. The mark's own ratio makes the width 4.3x this. */
+  agencyLogo: 30,
+  /** Between the tile, the rule, and the wordmark. */
+  gap: 26,
+  /** The hairline that separates the two marks. */
+  ruleHeight: 52,
+} as const;
+
+/**
+ * Slide margins in design pixels on a 960x540 slide. One gutter for every
+ * slide, so headlines sit on the same vertical line across the deck.
+ */
+export const DECK_SPACE = {
+  gutter: 78,
+  top: 53,
+  bottom: 35,
+  /** The accent rule above a slide title. One per slide, never decoration. */
+  ruleWidth: 72,
+  ruleHeight: 3,
+} as const;
+
+/** The UpSys wordmark's ink on the cover ground. The in-app cover and the PDF both draw it. */
+export const DECK_AGENCY_LOGO_FILL = "#F3F3F3";
+
+export const DECK_FONTS = {
+  heading: "Manrope, system-ui, sans-serif",
+  body: "Satoshi, system-ui, sans-serif",
+  mono: '"Space Grotesk", ui-monospace, monospace',
+} as const;
+
+/** Inline style string for a type token, for `style={...}` on an element. */
+export function deckType(token: DeckTypeToken, family: keyof typeof DECK_FONTS) {
+  const t = DECK_TYPE[token];
+  return [
+    `font-family:${DECK_FONTS[family]}`,
+    `font-size:${t.size}px`,
+    `font-weight:${t.weight}`,
+    `letter-spacing:${t.tracking}`,
+    `line-height:${t.leading}`,
+  ].join(";");
+}

package/src/testimonials/embed.test.ts

@@ -0,0 +1,40 @@
+import { describe, expect, it } from "vitest";
+import { getEmbedUrl } from "#src/testimonials/embed.js";
+
+describe("getEmbedUrl", () => {
+  it("turns a youtube watch link into its embed url", () => {
+    expect(getEmbedUrl("https://www.youtube.com/watch?v=abc123")).toBe(
+      "https://www.youtube.com/embed/abc123",
+    );
+  });
+
+  it("keeps a youtube embed link as it is", () => {
+    expect(getEmbedUrl("https://youtube.com/embed/abc123")).toBe("https://youtube.com/embed/abc123");
+  });
+
+  it("turns a youtu.be short link into its embed url", () => {
+    expect(getEmbedUrl("https://youtu.be/abc123")).toBe("https://www.youtube.com/embed/abc123");
+  });
+
+  it("turns a vimeo link into the player url", () => {
+    expect(getEmbedUrl("https://vimeo.com/76979871")).toBe("https://player.vimeo.com/video/76979871");
+  });
+
+  it("turns a loom share link into its embed url", () => {
+    expect(getEmbedUrl("https://www.loom.com/share/deadbeef?sid=1")).toBe(
+      "https://www.loom.com/embed/deadbeef",
+    );
+  });
+
+  it("returns null for a file url so the <video> path runs", () => {
+    expect(getEmbedUrl("https://example.com/clip.mp4")).toBeNull();
+  });
+
+  it("returns null for a youtube link with no video id", () => {
+    expect(getEmbedUrl("https://www.youtube.com/")).toBeNull();
+  });
+
+  it("returns null for text that is not a url", () => {
+    expect(getEmbedUrl("not a url")).toBeNull();
+  });
+});

package/src/testimonials/embed.ts

@@ -0,0 +1,41 @@
+/**
+ * WHY: a testimonial's `videoUrl` is a pasted link, so YouTube, Vimeo and Loom arrive as watch or share pages that refuse to load inside an iframe.
+ */
+
+/*
+ * Returns the iframe-safe url for a known host, and null for anything else, so the caller falls back to a `<video>`.
+ */
+export function getEmbedUrl(videoUrl: string): string | null {
+  let parsed: URL;
+  try {
+    parsed = new URL(videoUrl);
+  } catch {
+    return null;
+  }
+
+  const { hostname, pathname } = parsed;
+
+  if (hostname === "www.youtube.com" || hostname === "youtube.com") {
+    if (pathname.startsWith("/embed/")) return videoUrl;
+    const videoId = parsed.searchParams.get("v");
+    return videoId ? `https://www.youtube.com/embed/${videoId}` : null;
+  }
+
+  if (hostname === "youtu.be") {
+    const videoId = pathname.slice(1);
+    return videoId ? `https://www.youtube.com/embed/${videoId}` : null;
+  }
+
+  if (hostname === "vimeo.com" || hostname === "www.vimeo.com") {
+    const videoId = pathname.slice(1);
+    return videoId ? `https://player.vimeo.com/video/${videoId}` : null;
+  }
+
+  if (hostname === "www.loom.com" || hostname === "loom.com") {
+    if (pathname.startsWith("/embed/")) return videoUrl;
+    const shareId = pathname.match(/\/share\/([^?]+)/)?.[1];
+    return shareId ? `https://www.loom.com/embed/${shareId}` : null;
+  }
+
+  return null;
+}

package/src/testimonials/svelte/TestimonialCarousel.svelte

@@ -5,7 +5,7 @@
 	import type { PublicTestimonial } from "#src/testimonials/types.js";
 	import { renderTestimonialContent } from "#src/testimonials/render-content.js";
 	import StarRating from "#src/testimonials/svelte/StarRating.svelte";
-	import VideoEmbed from "#src/testimonials/svelte/VideoEmbed.svelte";
+	import TestimonialVideoPlayer from "#src/testimonials/svelte/TestimonialVideoPlayer.svelte";
 
 	// =========================
 	// PROPS
@@ -68,7 +68,7 @@
 			>
 				{#if testimonial.videoUrl}
 					<div class="mb-4">
-						<VideoEmbed url={testimonial.videoUrl} />
+						<TestimonialVideoPlayer src={testimonial.videoUrl} nativeControls />
 					</div>
 				{/if}
 

package/src/testimonials/svelte/TestimonialGrid.svelte

@@ -75,7 +75,7 @@
 			>
 				{#if testimonial.videoUrl}
 					{@const cap = getCaption ? getCaption(testimonial.videoUrl) : null}
-					<TestimonialVideoPlayer src={testimonial.videoUrl} caption={cap} />
+					<TestimonialVideoPlayer src={testimonial.videoUrl} caption={cap} rounded={false} />
 				{/if}
 
 				<div class="p-5">
@@ -87,7 +87,7 @@
 
 					<blockquote class="mb-3 text-sm leading-relaxed text-foreground">
 						<div
-							class={`testimonial-content ${needsClamp && !isExpanded ? "is-clamped" : "is-expanded"}`}
+							class={`testimonial-content ${needsClamp ? "can-clamp" : ""} ${needsClamp && !isExpanded ? "is-clamped" : ""}`}
 						>
 							<p>"<!-- eslint-disable-next-line svelte/no-at-html-tags -->{@html rendered}"</p>
 						</div>
@@ -153,17 +153,22 @@
 <!-- STYLE -->
 <!-- =========================== -->
 <style>
+	/* WHY grid rows: 0fr to 1fr animates to the text's real height with no
+	   max-height guess, and the row never goes below the five-line floor. */
 	.testimonial-content {
 		position: relative;
+		display: grid;
+		grid-template-rows: 1fr;
+		transition: grid-template-rows 360ms cubic-bezier(0.4, 0, 0.2, 1);
+	}
+	.testimonial-content > p {
 		overflow: hidden;
-		transition: max-height 360ms cubic-bezier(0.4, 0, 0.2, 1);
-		will-change: max-height;
 	}
-	.testimonial-content.is-clamped {
-		max-height: calc(1.625em * 5);
+	.testimonial-content.can-clamp > p {
+		min-height: calc(1.625em * 5);
 	}
-	.testimonial-content.is-expanded {
-		max-height: 200vh;
+	.testimonial-content.is-clamped {
+		grid-template-rows: 0fr;
 	}
 	.testimonial-content.is-clamped::after {
 		content: "";

package/src/testimonials/svelte/TestimonialHighlight.svelte

@@ -5,7 +5,7 @@
 	import type { PublicTestimonial } from "#src/testimonials/types.js";
 	import { renderTestimonialContent } from "#src/testimonials/render-content.js";
 	import StarRating from "#src/testimonials/svelte/StarRating.svelte";
-	import VideoEmbed from "#src/testimonials/svelte/VideoEmbed.svelte";
+	import TestimonialVideoPlayer from "#src/testimonials/svelte/TestimonialVideoPlayer.svelte";
 	import quoteIcon from "#src/testimonials/svelte/quote-icon.svg?raw";
 
 	// =========================
@@ -45,7 +45,7 @@
 
 		{#if featured.videoUrl}
 			<div class="mb-6">
-				<VideoEmbed url={featured.videoUrl} />
+				<TestimonialVideoPlayer src={featured.videoUrl} nativeControls />
 			</div>
 		{/if}
 

package/src/testimonials/svelte/TestimonialVideoPlayer.svelte

@@ -5,6 +5,7 @@
 	import Play from "phosphor-svelte/lib/Play";
 	import Pause from "phosphor-svelte/lib/Pause";
 	import ClosedCaptioning from "phosphor-svelte/lib/ClosedCaptioning";
+	import { getEmbedUrl } from "#src/testimonials/embed.js";
 	import { getMuxPlaybackId, getMuxPosterUrl } from "#src/testimonials/mux.js";
 	import type { TestimonialCaption } from "#src/testimonials/svelte/types.js";
 
@@ -15,13 +16,26 @@
 		src: string;
 		caption?: TestimonialCaption | null;
 		fit?: "cover" | "contain";
+		rounded?: boolean;
+		/** Browser controls on a file video, instead of the centred play button and caption toggle. */
+		nativeControls?: boolean;
+		/** Accessible name of the YouTube, Vimeo or Loom frame. */
+		title?: string;
 		class?: string;
 	};
 
 	// =========================
 	// PROPS
 	// =========================
-	let { src, caption = null, fit = "cover", class: extraClass = "" }: Props = $props();
+	let {
+		src,
+		caption = null,
+		fit = "cover",
+		rounded = true,
+		nativeControls = false,
+		title = "Video testimonial",
+		class: extraClass = "",
+	}: Props = $props();
 
 	// =========================
 	// STATE
@@ -37,6 +51,7 @@
 	// DERIVED
 	// =========================
 	const muxPlaybackId = $derived(getMuxPlaybackId(src));
+	const embedUrl = $derived(muxPlaybackId ? null : getEmbedUrl(src));
 
 	// =========================
 	// FUNCTIONS
@@ -123,7 +138,7 @@
 <!-- MARKUP -->
 <!-- =========================== -->
 <div
-	class={`group relative w-full overflow-hidden bg-black ${extraClass}`}
+	class={`group relative w-full overflow-hidden bg-black ${rounded ? "rounded-lg" : ""} ${extraClass}`}
 	style={aspectRatio ? `aspect-ratio: ${aspectRatio};` : "aspect-ratio: 16 / 9;"}
 	onmousemove={showControls}
 	onmouseleave={() => playing && (controlsVisible = false)}
@@ -137,10 +152,13 @@
 			stream-type="on-demand"
 			class="testimonial-mux-player size-full"
 		></mux-player>
+	{:else if embedUrl}
+		<iframe src={embedUrl} class="absolute inset-0 size-full" allowfullscreen {title}></iframe>
 	{:else}
 		<video
 			bind:this={videoEl}
 			{src}
+			controls={nativeControls}
 			class={`size-full ${fit === "contain" ? "object-contain" : "object-cover"}`}
 			preload="metadata"
 			playsinline
@@ -162,31 +180,33 @@
 				<track kind="captions" src="" srclang="en" label="Captions" default />
 			{/if}
 		</video>
-		<button
-			onclick={togglePlay}
-			class={`absolute inset-0 flex cursor-pointer items-center justify-center border-none bg-transparent text-white transition-opacity duration-300 ${controlsVisible ? "opacity-100" : "opacity-0"}`}
-			aria-label={playing ? "Pause" : "Play"}
-		>
-			<span
-				class="flex size-16 items-center justify-center rounded-full bg-black/55 backdrop-blur-sm transition-colors group-hover:bg-black/75"
-			>
-				{#if playing}
-					<Pause size={28} weight="fill" />
-				{:else}
-					<Play size={28} weight="fill" />
-				{/if}
-			</span>
-		</button>
-		{#if caption}
+		{#if !nativeControls}
 			<button
-				onclick={toggleCaptions}
-				class={`absolute bottom-2.5 right-2.5 flex size-7 cursor-pointer items-center justify-center rounded text-white backdrop-blur-sm transition-opacity duration-300 ${controlsVisible ? "opacity-100" : "pointer-events-none opacity-0"} ${captionsOn ? "border border-white/70 bg-white/20" : "border border-white/20 bg-black/55 hover:bg-black/75"}`}
-				aria-label={captionsOn ? "Hide captions" : "Show captions"}
-				aria-pressed={captionsOn}
-				title={captionsOn ? "Hide captions" : "Show captions"}
+				onclick={togglePlay}
+				class={`absolute inset-0 flex cursor-pointer items-center justify-center border-none bg-transparent text-white transition-opacity duration-300 ${controlsVisible ? "opacity-100" : "opacity-0"}`}
+				aria-label={playing ? "Pause" : "Play"}
 			>
-				<ClosedCaptioning size={14} weight={captionsOn ? "fill" : "regular"} />
+				<span
+					class="flex size-16 items-center justify-center rounded-full bg-black/55 backdrop-blur-sm transition-colors group-hover:bg-black/75"
+				>
+					{#if playing}
+						<Pause size={28} weight="fill" />
+					{:else}
+						<Play size={28} weight="fill" />
+					{/if}
+				</span>
 			</button>
+			{#if caption}
+				<button
+					onclick={toggleCaptions}
+					class={`absolute bottom-2.5 right-2.5 flex size-7 cursor-pointer items-center justify-center rounded text-white backdrop-blur-sm transition-opacity duration-300 ${controlsVisible ? "opacity-100" : "pointer-events-none opacity-0"} ${captionsOn ? "border border-white/70 bg-white/20" : "border border-white/20 bg-black/55 hover:bg-black/75"}`}
+					aria-label={captionsOn ? "Hide captions" : "Show captions"}
+					aria-pressed={captionsOn}
+					title={captionsOn ? "Hide captions" : "Show captions"}
+				>
+					<ClosedCaptioning size={14} weight={captionsOn ? "fill" : "regular"} />
+				</button>
+			{/if}
 		{/if}
 	{/if}
 </div>

package/src/testimonials/svelte/index.ts

@@ -5,7 +5,6 @@ export { default as TestimonialCompact } from "#src/testimonials/svelte/Testimon
 export { default as TestimonialHighlight } from "#src/testimonials/svelte/TestimonialHighlight.svelte";
 export { default as TestimonialVideoPlayer } from "#src/testimonials/svelte/TestimonialVideoPlayer.svelte";
 export { default as StarRating } from "#src/testimonials/svelte/StarRating.svelte";
-export { default as VideoEmbed } from "#src/testimonials/svelte/VideoEmbed.svelte";
 
 export { renderTestimonialContent } from "#src/testimonials/render-content.js";
 export { getMuxPlaybackId, getMuxPosterUrl } from "#src/testimonials/mux.js";

package/src/testimonials/svelte/VideoEmbed.svelte

@@ -1,170 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import pauseIcon from "#src/testimonials/svelte/pause-icon.svg?raw";
-	import playIcon from "#src/testimonials/svelte/play-icon.svg?raw";
-
-	// =========================
-	// PROPS
-	// =========================
-	let {
-		url,
-		rounded = true,
-		playOnly = false,
-	}: { url: string; rounded?: boolean; playOnly?: boolean } = $props();
-
-	// =========================
-	// STATE
-	// =========================
-	let videoEl = $state<HTMLVideoElement | null>(null);
-	let playing = $state(false);
-
-	// =========================
-	// DERIVED
-	// =========================
-	const VIDEO_EXTENSIONS = [".mp4", ".webm", ".ogg", ".mov"];
-
-	const isDirectVideo = $derived.by(() => {
-		try {
-			const { pathname } = new URL(url);
-			return VIDEO_EXTENSIONS.some((ext) => pathname.toLowerCase().endsWith(ext));
-		} catch {
-			return false;
-		}
-	});
-
-	const embedUrl = $derived.by(() => {
-		if (isDirectVideo) return null;
-		try {
-			const parsed = new URL(url);
-
-			if (parsed.hostname === "www.youtube.com" || parsed.hostname === "youtube.com") {
-				if (parsed.pathname.startsWith("/embed/")) return url;
-				const videoId = parsed.searchParams.get("v");
-				if (videoId) return `https://www.youtube.com/embed/${videoId}`;
-			}
-
-			if (parsed.hostname === "youtu.be") {
-				const videoId = parsed.pathname.slice(1);
-				if (videoId) return `https://www.youtube.com/embed/${videoId}`;
-			}
-
-			if (parsed.hostname === "vimeo.com" || parsed.hostname === "www.vimeo.com") {
-				const videoId = parsed.pathname.slice(1);
-				if (videoId) return `https://player.vimeo.com/video/${videoId}`;
-			}
-
-			if (parsed.hostname === "www.loom.com" || parsed.hostname === "loom.com") {
-				if (parsed.pathname.startsWith("/embed/")) return url;
-				const match = parsed.pathname.match(/\/share\/([^?]+)/);
-				if (match?.[1]) return `https://www.loom.com/embed/${match[1]}`;
-			}
-
-			return null;
-		} catch {
-			return null;
-		}
-	});
-
-	const roundingClass = $derived(rounded ? "rounded-lg" : "");
-
-	// =========================
-	// FUNCTIONS
-	// =========================
-	function togglePlay() {
-		if (!videoEl) return;
-		if (videoEl.paused) {
-			videoEl.play();
-			playing = true;
-		} else {
-			videoEl.pause();
-			playing = false;
-		}
-	}
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-{#if isDirectVideo}
-	{#if playOnly}
-		<div class="relative aspect-video w-full overflow-hidden {roundingClass}">
-			<video
-				bind:this={videoEl}
-				src={url}
-				class="size-full object-cover"
-				preload="metadata"
-				playsinline
-				onended={() => (playing = false)}
-			></video>
-			<button onclick={togglePlay} class="play-btn" aria-label={playing ? "Pause" : "Play"}>
-				{#if playing}
-					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-					{@html pauseIcon}
-				{:else}
-					<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-					{@html playIcon}
-				{/if}
-			</button>
-		</div>
-	{:else}
-		<video
-			src={url}
-			class="aspect-video w-full object-cover {roundingClass}"
-			controls
-			preload="metadata"
-			playsinline
-		></video>
-	{/if}
-{:else if embedUrl}
-	<div class="relative aspect-video w-full overflow-hidden {roundingClass}">
-		<iframe
-			src={embedUrl}
-			class="absolute inset-0 size-full"
-			allowfullscreen
-			title="Video testimonial"
-		></iframe>
-	</div>
-{/if}
-
-<!-- =========================== -->
-<!-- STYLE -->
-<!-- =========================== -->
-<style>
-	.play-btn {
-		position: absolute;
-		inset: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		color: white;
-	}
-
-	.play-btn::before {
-		content: "";
-		position: absolute;
-		width: 64px;
-		height: 64px;
-		border-radius: 50%;
-		background: rgba(0, 0, 0, 0.55);
-		backdrop-filter: blur(4px);
-		transition: background 0.15s ease;
-	}
-
-	.play-btn:hover::before {
-		background: rgba(0, 0, 0, 0.75);
-	}
-
-	.play-btn :global(svg) {
-		position: relative;
-		z-index: 1;
-	}
-
-	.play-btn:active {
-		transform: scale(0.97);
-	}
-</style>

package/src/testimonials/svelte/pause-icon.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" fill="currentColor" width="28" height="28" aria-hidden="true"><rect x="6" y="4" width="4" height="16" rx="1" /><rect x="14" y="4" width="4" height="16" rx="1" /></svg>

package/src/testimonials/svelte/play-icon.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 24 24" fill="currentColor" width="28" height="28" aria-hidden="true"><path d="M8 5.14v14l11-7-11-7z" /></svg>