Fix broken placeholder images (#923)

primer · Feb 17, 2025 · 1ef253a · 1ef253a
1 parent 0ba9b1f
commit 1ef253a
Show file tree

Hide file tree

Showing 136 changed files with 178 additions and 231 deletions.
diff --git a/apps/docs/content/components/Bento.mdx b/apps/docs/content/components/Bento.mdx
@@ -167,7 +167,7 @@ Breakpoints use `min-width`, where it will also apply your chosen `span` value t
       <Bento.Visual>
         <img
           alt="placeholder, blank area with an gray background color"
-          src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
+          src="/brand/assets/placeholder.png"
         />
       </Bento.Visual>
     </Bento.Item>

diff --git a/apps/docs/content/components/Card/react.mdx b/apps/docs/content/components/Card/react.mdx
@@ -129,7 +129,7 @@ Use the `Image` component to add an image to the `Card`. The `Image` component i
 ```jsx live
 <Card href="https://github.com">
   <Card.Image
-    src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
+    src="/brand/assets/placeholder.png"
     alt="placeholder, blank area with an gray background color"
   />
   <Card.Heading>Code search & code view</Card.Heading>
@@ -174,7 +174,7 @@ Combine `Image` and `Label` when you need to add more metadata or context to the
 ```jsx live
 <Card href="https://github.com">
   <Card.Image
-    src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
+    src="/brand/assets/placeholder.png"
     alt="placeholder, blank area with an gray background color"
   />
   <Card.Heading>Code search & code view</Card.Heading>

diff --git a/apps/docs/content/components/Footnotes/react.mdx b/apps/docs/content/components/Footnotes/react.mdx
@@ -98,8 +98,8 @@ import {Footnotes} from '@primer/react-brand'
   <River>
     <River.Visual>
       <img
-        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
-        alt="placeholder, blank area with an off-white background color"
+        src="/brand/assets/placeholder.png"
+        alt="placeholder, blank area with a gray background color"
       />
     </River.Visual>
     <River.Content
@@ -129,8 +129,8 @@ import {Footnotes} from '@primer/react-brand'
   <River>
     <River.Visual>
       <img
-        src="https://via.placeholder.com/600x400/f5f5f5/f5f5f5.png"
-        alt="placeholder, blank area with an off-white background color"
+        src="/brand/assets/placeholder.png"
+        alt="placeholder, blank area with a gray background color"
       />
     </River.Visual>
     <River.Content>

diff --git a/apps/docs/content/components/Hero/react.mdx b/apps/docs/content/components/Hero/react.mdx
@@ -55,8 +55,8 @@ import {Hero} from '@primer/react-brand'
     <Hero.Heading>Automate your workflow from idea to production</Hero.Heading>
     <Hero.PrimaryAction href="#">Get started with Actions</Hero.PrimaryAction>
     <Hero.Image
-      src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
-      alt="placeholder, blank area with an off-white background color"
+      src="/brand/assets/placeholder.png"
+      alt="placeholder, blank area with a gray background color"
     />
   </Hero>
   <br />
@@ -68,8 +68,9 @@ import {Hero} from '@primer/react-brand'
     <Hero.PrimaryAction href="#">Get started with Actions</Hero.PrimaryAction>
     <Hero.Image
       position="inline-end"
-      src="https://via.placeholder.com/300x450/d3d9df/d3d9df.png"
-      alt="placeholder, blank area with an off-white background color"
+      src="/brand/assets/placeholder.png"
+      alt="placeholder, blank area with a gray background color"
+      style={{height: '100%'}}
     />
   </Hero>
 </>

diff --git a/apps/docs/content/components/Image/react.mdx b/apps/docs/content/components/Image/react.mdx
@@ -23,8 +23,8 @@ This component uses the `img` element by default.
 
 ```jsx live
 <Image
-  src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
-  alt="placeholder, blank area with an off-white background color"
+  src="/brand/assets/placeholder.png"
+  alt="placeholder, blank area with a gray background color"
 />
 ```
 
@@ -35,8 +35,8 @@ The `as` prop can be used to set the container of the image to use `picture`.
 ```jsx live
 <Image
   as="picture"
-  src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
-  alt="placeholder, blank area with an off-white background color"
+  src="/brand/assets/placeholder.png"
+  alt="placeholder, blank area with a gray background color"
 />
 ```
 
@@ -47,15 +47,15 @@ The `sources` prop can be used to set the source elements within the `picture` c
 ```jsx live
 <Image
   as="picture"
-  src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
-  alt="placeholder, blank area with an off-white background color"
+  src="/brand/assets/placeholder.png"
+  alt="placeholder, blank area with a gray background color"
   sources={[
     {
-      srcset: 'https://via.placeholder.com/600x400/d3d9df/d3d9df.png',
+      srcset: '/brand/assets/placeholder.png',
       media: '(min-width: 600px)',
     },
     {
-      srcset: 'https://via.placeholder.com/900x600/d3d9df/d3d9df.png',
+      srcset: '/brand/assets/placeholder.png',
       media: '(min-width: 900px)',
     },
   ]}
@@ -68,9 +68,9 @@ The `srcSet` prop can be used to set the srcSet of the image. This can only be u
 
 ```jsx live
 <Image
-  src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
-  srcSet="https://via.placeholder.com/600x400/d3d9df/d3d9df.png, https://via.placeholder.com/900x600/d3d9df/d3d9df.png 1.5x"
-  alt="placeholder, blank area with an off-white background color"
+  src="/brand/assets/placeholder.png"
+  srcSet="/brand/assets/placeholder.png, /brand/assets/placeholder.png 1.5x"
+  alt="placeholder, blank area with a gray background color"
 />
 ```
 
@@ -80,8 +80,8 @@ The `aspectRatio` prop can be used to set the aspect ratio of the image. This is
 
 ```jsx live
 <Image
-  src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
-  alt="placeholder, blank area with an off-white background color"
+  src="/brand/assets/placeholder.png"
+  alt="placeholder, blank area with a gray background color"
   aspectRatio="16:9"
 />
 ```
@@ -92,8 +92,8 @@ The `height` prop can be used to set the height of the image. This can be used a
 
 ```jsx live
 <Image
-  src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
-  alt="placeholder, blank area with an off-white background color"
+  src="/brand/assets/placeholder.png"
+  alt="placeholder, blank area with a gray background color"
   height={200}
   aspectRatio="16:9"
 />
@@ -106,36 +106,36 @@ The `borderRadius` prop can be used to apply rounded corners to images using pre
 ```jsx live
 <Stack direction="horizontal">
   <Image
-    src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
-    alt="placeholder, blank area with an off-white background color"
+    src="/brand/assets/placeholder.png"
+    alt="placeholder, blank area with a gray background color"
     height={100}
     width={100}
     borderRadius="small"
   />
   <Image
-    src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
-    alt="placeholder, blank area with an off-white background color"
+    src="/brand/assets/placeholder.png"
+    alt="placeholder, blank area with a gray background color"
     height={100}
     width={100}
     borderRadius="medium"
   />
   <Image
-    src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
-    alt="placeholder, blank area with an off-white background color"
+    src="/brand/assets/placeholder.png"
+    alt="placeholder, blank area with a gray background color"
     height={100}
     width={100}
     borderRadius="large"
   />
   <Image
-    src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
-    alt="placeholder, blank area with an off-white background color"
+    src="/brand/assets/placeholder.png"
+    alt="placeholder, blank area with a gray background color"
     height={100}
     width={100}
     borderRadius="xlarge"
   />
   <Image
-    src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
-    alt="placeholder, blank area with an off-white background color"
+    src="/brand/assets/placeholder.png"
+    alt="placeholder, blank area with a gray background color"
     height={100}
     width={100}
     borderRadius="full"
@@ -149,8 +149,8 @@ The `width` prop can be used to set the width of the image. This can be used alo
 
 ```jsx live
 <Image
-  src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
-  alt="placeholder, blank area with an off-white background color"
+  src="/brand/assets/placeholder.png"
+  alt="placeholder, blank area with a gray background color"
   width={200}
   aspectRatio="16:9"
 />

diff --git a/apps/docs/content/components/Pillar/react.mdx b/apps/docs/content/components/Pillar/react.mdx
@@ -56,7 +56,7 @@ You can add an image to enhance the visual context.
 ```jsx live
 <Pillar>
   <Pillar.Image
-    src="https://via.placeholder.com/600x400/d3d9df/d3d9df.png"
+    src="/brand/assets/placeholder.png"
     alt="placeholder, blank area with an gray background color"
   />
   <Pillar.Heading>Code search & code view</Pillar.Heading>

diff --git a/apps/docs/content/components/Prose.mdx b/apps/docs/content/components/Prose.mdx
@@ -44,8 +44,8 @@ The `Prose` component renders native HTML elements with Primer Brand styling. `P
     <h3>Heading level 3</h3>
     <p>Pellentesque non ornare ligula. Suspendisse nibh purus, pretium id tortor sit amet, tincidunt gravida augue. Ut malesuada, nisl vel dignissim mollis</p>
     <img
-      src="https://via.placeholder.com/400x400/f5f5f5/f5f5f5.png"
-      alt="placeholder, blank area with an off-white background color"
+      src="/brand/assets/placeholder.png"
+      alt="placeholder, blank area with a gray background color"
       />
     <h4>Heading level  4</h4>
     <p>

diff --git a/apps/docs/content/components/River/react.mdx b/apps/docs/content/components/River/react.mdx
@@ -29,8 +29,8 @@ import {River, RiverBreakout} from '@primer/react-brand'
   <River>
     <River.Visual>
       <img
-        src="/brand/assets/placeholder-600x400.png"
-        alt="placeholder, blank area with an off-white background color"
+        src="/brand/assets/placeholder.png"
+        alt="placeholder, blank area with a gray background color"
       />
     </River.Visual>
     <River.Content>
@@ -46,8 +46,8 @@ import {River, RiverBreakout} from '@primer/react-brand'
   <River align="end">
     <River.Visual>
       <img
-        src="/brand/assets/placeholder-600x400.png"
-        alt="placeholder, blank area with an off-white background color"
+        src="/brand/assets/placeholder.png"
+        alt="placeholder, blank area with a gray background color"
       />
     </River.Visual>
     <River.Content>
@@ -63,8 +63,8 @@ import {River, RiverBreakout} from '@primer/react-brand'
   <River align="center">
     <River.Visual>
       <img
-        src="/brand/assets/placeholder-600x400.png"
-        alt="placeholder, blank area with an off-white background color"
+        src="/brand/assets/placeholder.png"
+        alt="placeholder, blank area with a gray background color"
       />
     </River.Visual>
     <River.Content>
@@ -89,8 +89,8 @@ import {River, RiverBreakout} from '@primer/react-brand'
   <River>
     <River.Visual>
       <img
-        src="/brand/assets/placeholder-600x400.png"
-        alt="placeholder, blank area with an off-white background color"
+        src="/brand/assets/placeholder.png"
+        alt="placeholder, blank area with a gray background color"
       />
     </River.Visual>
     <River.Content>
@@ -104,8 +104,8 @@ import {River, RiverBreakout} from '@primer/react-brand'
   <River imageTextRatio="60:40">
     <River.Visual>
       <img
-        src="/brand/assets/placeholder-600x400.png"
-        alt="placeholder, blank area with an off-white background color"
+        src="/brand/assets/placeholder.png"
+        alt="placeholder, blank area with a gray background color"
       />
     </River.Visual>
     <River.Content>
@@ -156,8 +156,8 @@ import {River, RiverBreakout} from '@primer/react-brand'
 <River imageTextRatio="60:40">
   <River.Visual>
     <img
-      src="/brand/assets/placeholder-600x400.png"
-      alt="placeholder with an off-white background color"
+      src="/brand/assets/placeholder.png"
+      alt="placeholder with a gray background color"
     />
   </River.Visual>
   <River.Content>
@@ -176,8 +176,8 @@ import {River, RiverBreakout} from '@primer/react-brand'
 <River>
   <River.Visual>
     <img
-      src="/brand/assets/placeholder-600x400.png"
-      alt="placeholder, blank area with an off-white background color"
+      src="/brand/assets/placeholder.png"
+      alt="placeholder, blank area with a gray background color"
     />
   </River.Visual>
   <River.Content>
@@ -197,8 +197,8 @@ import {River, RiverBreakout} from '@primer/react-brand'
   <RiverBreakout.A11yHeading>Accelerate workflows</RiverBreakout.A11yHeading>
   <RiverBreakout.Visual>
     <img
-      src="/brand/assets/placeholder-600x400.png"
-      alt="placeholder, blank area with an off-white background color"
+      src="/brand/assets/placeholder.png"
+      alt="placeholder, blank area with a gray background color"
     />
   </RiverBreakout.Visual>
   <RiverBreakout.Content

diff --git a/apps/docs/content/components/Stack/react.mdx b/apps/docs/content/components/Stack/react.mdx
@@ -68,16 +68,19 @@ const App = () => {
         style={{height: 400}}
       >
         <img
-          src="https://via.placeholder.com/150x75/D0D7DE/D0D7DE.png"
+          src="/brand/assets/placeholder.png"
           alt="placeholder with gray background and no foreground text"
+          style={{width: 150, height: 75}}
         />
         <img
-          src="https://via.placeholder.com/150x75/D0D7DE/D0D7DE.png"
+          src="/brand/assets/placeholder.png"
           alt="placeholder with gray background and no foreground text"
+          style={{width: 150, height: 75}}
         />
         <img
-          src="https://via.placeholder.com/150x75/D0D7DE/D0D7DE.png"
+          src="/brand/assets/placeholder.png"
           alt="placeholder with gray background and no foreground text"
+          style={{width: 150, height: 75}}
         />
       </Stack>
 
@@ -156,16 +159,19 @@ E.g. Providing only `narrow` will apply that value to all larger breakpoints, bu
   }}
 >
   <img
-    src="https://via.placeholder.com/150x75/D0D7DE/D0D7DE.png"
+    src="/brand/assets/placeholder.png"
     alt="placeholder with gray background and no foreground text"
+    style={{width: 150, height: 75}}
   />
   <img
-    src="https://via.placeholder.com/150x75/D0D7DE/D0D7DE.png"
+    src="/brand/assets/placeholder.png"
     alt="placeholder with gray background and no foreground text"
+    style={{width: 150, height: 75}}
   />
   <img
-    src="https://via.placeholder.com/150x75/D0D7DE/D0D7DE.png"
+    src="/brand/assets/placeholder.png"
     alt="placeholder with gray background and no foreground text"
+    style={{width: 150, height: 75}}
   />
 </Stack>
 ```