chore: use local placeholder image in html files (#9392)

**Related Issue:** None ## Summary - Use local placeholder image for images - Remove duplicate links for `https://webapps-cdn.esri.com/CDN/fonts/v1.4.1/fonts.css` - Update Maps SDK url to use the `next` version so it is always up to date. - Update links to external URLs to use `http://www.esri.com` - Update input value's that are links to be `http://www.esri.com`
Esri · May 22, 2024 · 4e23c10 · 4e23c10
1 parent a5c3e68
commit 4e23c10
Show file tree

Hide file tree

Showing 38 changed files with 723 additions and 305 deletions.
diff --git a/packages/calcite-components/src/demos/_assets/images/placeholder.svg b/packages/calcite-components/src/demos/_assets/images/placeholder.svg
diff --git a/packages/calcite-components/src/demos/accordion.html b/packages/calcite-components/src/demos/accordion.html
diff --git a/packages/calcite-components/src/demos/avatar.html b/packages/calcite-components/src/demos/avatar.html
@@ -52,15 +52,15 @@ <h1 style="margin: 0 auto; text-align: center">Avatar</h1>
         <div class="child right-aligned-text">Image With Label</div>
 
         <div class="child">
-          <calcite-avatar thumbnail="http://placekitten.com/105/105" scale="s" label="kitten"> </calcite-avatar>
+          <calcite-avatar thumbnail="./_assets/images/placeholder.svg" scale="s" label="kitten"> </calcite-avatar>
         </div>
 
         <div class="child">
-          <calcite-avatar thumbnail="http://placekitten.com/40/40" scale="m" label="kitten"></calcite-avatar>
+          <calcite-avatar thumbnail="./_assets/images/placeholder.svg" scale="m" label="kitten"></calcite-avatar>
         </div>
 
         <div class="child">
-          <calcite-avatar thumbnail="http://placekitten.com/120/120" scale="l" label="kitten"></calcite-avatar>
+          <calcite-avatar thumbnail="./_assets/images/placeholder.svg" scale="l" label="kitten"></calcite-avatar>
         </div>
       </div>
 
@@ -261,21 +261,21 @@ <h1 style="margin: 0 auto; text-align: center">Avatar</h1>
         <div class="child">
           <calcite-avatar scale="s" user-id="9de33a713bd84690bbc618e98ecf7567" username="sm"></calcite-avatar>
           <calcite-avatar scale="s" user-id="9de33a713bd84690bbc618e98ecf7567"></calcite-avatar>
-          <calcite-avatar scale="s" thumbnail="http://placekitten.com/40/40"></calcite-avatar>
+          <calcite-avatar scale="s" thumbnail="./_assets/images/placeholder.svg"></calcite-avatar>
           <calcite-avatar scale="s" user-id="9de33a713bd84690bbc618e98ecf7567" username="sm"></calcite-avatar>
         </div>
 
         <div class="child">
           <calcite-avatar scale="m" user-id="9de33a713bd84690bbc618e98ecf7567" username="sm"></calcite-avatar>
           <calcite-avatar scale="m" user-id="9de33a713bd84690bbc618e98ecf7567"></calcite-avatar>
-          <calcite-avatar scale="m" thumbnail="http://placekitten.com/40/40"></calcite-avatar>
+          <calcite-avatar scale="m" thumbnail="./_assets/images/placeholder.svg"></calcite-avatar>
           <calcite-avatar scale="m" user-id="9de33a713bd84690bbc618e98ecf7567" username="sm"></calcite-avatar>
         </div>
 
         <div class="child">
           <calcite-avatar scale="l" user-id="9de33a713bd84690bbc618e98ecf7567" username="sm"></calcite-avatar>
           <calcite-avatar scale="l" user-id="9de33a713bd84690bbc618e98ecf7567"></calcite-avatar>
-          <calcite-avatar scale="l" thumbnail="http://placekitten.com/40/40"></calcite-avatar>
+          <calcite-avatar scale="l" thumbnail="./_assets/images/placeholder.svg"></calcite-avatar>
           <calcite-avatar scale="l" user-id="9de33a713bd84690bbc618e98ecf7567" username="sm"></calcite-avatar>
         </div>
       </div>

diff --git a/packages/calcite-components/src/demos/card.html b/packages/calcite-components/src/demos/card.html
@@ -241,7 +241,13 @@ <h3 slot="heading">ArcGIS Online: Gallery and Organization pages</h3>
         <div class="child">
           <calcite-card-group label="label">
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Portland Businesses</h3>
               <span slot="description"
                 >by
@@ -279,7 +285,13 @@ <h3 slot="heading">Portland Businesses</h3>
               </div>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Portland Businesses</h3>
               <span slot="description"
                 >by
@@ -313,7 +325,13 @@ <h3 slot="heading">Portland Businesses</h3>
               </div>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <span slot="description"
                 >by
                 <calcite-link href="">example_user</calcite-link>
@@ -346,7 +364,13 @@ <h3 slot="heading">Portland Businesses</h3>
               </div>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Portland Businesses</h3>
               <div>
                 Created: Apr 22, 2019
@@ -381,7 +405,13 @@ <h3 slot="heading">Portland Businesses</h3>
         <div class="child">
           <calcite-card-group label="label">
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Portland Businesses</h3>
 
               <div>
@@ -449,7 +479,13 @@ <h3 slot="heading">Portland Businesses</h3>
               </div>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <span slot="description"
                 >by
                 <calcite-link href="">example_user</calcite-link>
@@ -482,7 +518,13 @@ <h3 slot="heading">Portland Businesses</h3>
               </div>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Portland Businesses</h3>
               <calcite-button
                 type="button"
@@ -510,7 +552,13 @@ <h3 slot="heading">Portland Businesses</h3>
         <div class="child">
           <calcite-card-group label="label">
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">My great Workforce project that might wrap two lines</h3>
               <span slot="description">Johnathan Smith</span>
               <span slot="footer-start">Nov 25, 2018</span>
@@ -534,7 +582,13 @@ <h3 slot="heading">My great Workforce project that might wrap two lines</h3>
               </div>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">My great Workforce project that might wrap two lines</h3>
               <span slot="description">Johnathan Smith</span>
               <span slot="footer-start">Nov 25, 2018</span>
@@ -558,7 +612,13 @@ <h3 slot="heading">My great Workforce project that might wrap two lines</h3>
               </div>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">My great Workforce project that might wrap two lines</h3>
               <span slot="description">Johnathan Smith</span>
               <span slot="footer-start">Nov 25, 2018</span>
@@ -588,7 +648,13 @@ <h3 slot="heading">My great Workforce project that might wrap two lines</h3>
         <div class="child">
           <calcite-card-group label="label">
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">ArcGIS Online Sign In and Sign Up</h3>
               <span slot="description"
                 >A great example of a study description that might wrap to a line or two, but isn't overly
@@ -598,7 +664,13 @@ <h3 slot="heading">ArcGIS Online Sign In and Sign Up</h3>
               <calcite-link slot="footer-end">Trail füt</calcite-link>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
 
               <h3 slot="heading">ArcGIS Online Sign In and Sign Up</h3>
               <span slot="description"
@@ -615,7 +687,13 @@ <h3 slot="heading">ArcGIS Online Sign In and Sign Up</h3>
         <div class="child">
           <calcite-card-group label="label">
             <calcite-card loading>
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
 
               <h3 slot="heading">Loading example</h3>
               <span slot="description"
@@ -626,7 +704,13 @@ <h3 slot="heading">Loading example</h3>
               <calcite-link slot="footer-end">Trail füt</calcite-link>
             </calcite-card>
             <calcite-card loading>
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
 
               <h3 slot="heading">Loading example</h3>
               <span slot="description"
@@ -637,7 +721,13 @@ <h3 slot="heading">Loading example</h3>
               <calcite-link slot="footer-end">Trail füt</calcite-link>
             </calcite-card>
             <calcite-card loading>
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
 
               <h3 slot="heading">Loading example</h3>
               <span slot="description"
@@ -648,7 +738,13 @@ <h3 slot="heading">Loading example</h3>
               <calcite-link slot="footer-end">Trail füt</calcite-link>
             </calcite-card>
             <calcite-card loading>
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
 
               <h3 slot="heading">Loading example</h3>
               <span slot="description"
@@ -665,13 +761,25 @@ <h3 slot="heading">Loading example</h3>
         <div class="child">
           <calcite-card-group label="label">
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Untitled experience</h3>
               <span slot="description">Subtext</span>
               <calcite-button slot="footer-start" width="full">Go</calcite-button>
             </calcite-card>
             <calcite-card label="test card">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Untitled experience</h3>
               <span slot="description">Subtext</span>
               <calcite-button slot="footer-start" width="full">Go</calcite-button>
@@ -682,7 +790,13 @@ <h3 slot="heading">Untitled experience</h3>
         <div class="child">thumbnail-position="block-start"</div>
         <div class="child">
           <calcite-card thumbnail-position="block-start">
-            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+            <img
+              slot="thumbnail"
+              alt="Sample image alt"
+              width="200"
+              height="150"
+              src="./_assets/images/placeholder.svg"
+            />
             <h3 slot="heading">Portland Businesses</h3>
             <span slot="description"
               >by
@@ -724,7 +838,13 @@ <h3 slot="heading">Portland Businesses</h3>
         <div class="child">thumbnail-position="block-end"</div>
         <div class="child">
           <calcite-card thumbnail-position="block-end">
-            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+            <img
+              slot="thumbnail"
+              alt="Sample image alt"
+              width="200"
+              height="150"
+              src="./_assets/images/placeholder.svg"
+            />
             <h3 slot="heading">Portland Businesses</h3>
             <span slot="description"
               >by
@@ -767,7 +887,13 @@ <h3 slot="heading">Portland Businesses</h3>
         <div class="child">
           <calcite-card-group label="label">
             <calcite-card thumbnail-position="inline-start">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Portland Businesses</h3>
               <span slot="description"
                 >by
@@ -805,7 +931,13 @@ <h3 slot="heading">Portland Businesses</h3>
               </div>
             </calcite-card>
             <calcite-card thumbnail-position="inline-start">
-              <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+              <img
+                slot="thumbnail"
+                alt="Sample image alt"
+                width="200"
+                height="150"
+                src="./_assets/images/placeholder.svg"
+              />
               <h3 slot="heading">Portland Businesses</h3>
               <span slot="description"
                 >by
@@ -848,7 +980,13 @@ <h3 slot="heading">Portland Businesses</h3>
         <div class="child">thumbnail-position="inline-end"</div>
         <div class="child">
           <calcite-card thumbnail-position="inline-end">
-            <img slot="thumbnail" alt="Sample image alt" src="https://placebear.com/250/150" />
+            <img
+              slot="thumbnail"
+              alt="Sample image alt"
+              width="200"
+              height="150"
+              src="./_assets/images/placeholder.svg"
+            />
             <h3 slot="heading">Portland Businesses</h3>
             <span slot="description"
               >by