Don't use outside images in docs examples (#1416)

* Don't use outside images

* move things

* Urls here is fine

* Disable for now

* Installing webmock to disable outside calls in tests

* allow localhost

.changeset/nasty-houses-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Don't use outside images in docs examples

Gemfile

@@ -37,3 +37,7 @@ gem "bootsnap", ">= 1.4.2", require: false
 
 gem "lookbook", "~> 1" unless rails_version.to_f < 7
 gem "view_component", path: ENV["VIEW_COMPONENT_PATH"] if ENV["VIEW_COMPONENT_PATH"]
+
+group :test do
+  gem "webmock"
+end

Gemfile.lock

@@ -77,6 +77,8 @@ GEM
     coercible (1.0.0)
       descendants_tracker (~> 0.0.1)
     concurrent-ruby (1.1.10)
+    crack (0.4.5)
+      rexml
     crass (1.0.6)
     css_parser (1.12.0)
       addressable
@@ -102,6 +104,7 @@ GEM
       concurrent-ruby (~> 1.1)
       websocket-driver (>= 0.6, < 0.8)
     ffi (1.15.5)
+    hashdiff (1.0.1)
     htmlbeautifier (1.4.2)
     htmlentities (4.3.4)
     i18n (1.12.0)
@@ -241,6 +244,10 @@ GEM
     watir (7.1.0)
       regexp_parser (>= 1.2, < 3)
       selenium-webdriver (~> 4.0)
+    webmock (3.18.1)
+      addressable (>= 2.8.0)
+      crack (>= 0.3.2)
+      hashdiff (>= 0.4.0, < 2.0.0)
     webpacker (5.4.3)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
@@ -294,6 +301,7 @@ DEPENDENCIES
   sprockets-rails
   thor
   timecop
+  webmock
   webpacker (~> 5.0)
   yard (~> 0.9.25)
 

app/components/primer/beta/avatar.rb

@@ -28,22 +28,22 @@ class Avatar < Primer::Component
       SIZE_OPTIONS = [16, DEFAULT_SIZE, SMALL_THRESHOLD, 32, 40, 48, 80].freeze
 
       # @example Default
-      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser")) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")) %>
       #
       # @example Square
-      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", shape: :square)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", shape: :square)) %>
       #
       # @example Link
-      #   <%= render(Primer::Beta::Avatar.new(href: "#", src: "http://placekitten.com/200/200", alt: "@kittenuser profile")) %>
+      #   <%= render(Primer::Beta::Avatar.new(href: "#", src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser profile")) %>
       #
       # @example With size
-      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 16)) %>
-      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 20)) %>
-      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 24)) %>
-      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 32)) %>
-      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 40)) %>
-      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 48)) %>
-      #   <%= render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: 80)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 16)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 20)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 24)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 32)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 40)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 48)) %>
+      #   <%= render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: 80)) %>
       #
       # @param src [String] The source url of the avatar image.
       # @param alt [String] Passed through to alt on img tag.

app/components/primer/beta/avatar_stack.rb

@@ -21,23 +21,23 @@ class AvatarStack < Primer::Component
 
       # @example Default
       #   <%= render(Primer::Beta::AvatarStack.new) do |c| %>
-      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @example Align right
       #   <%= render(Primer::Beta::AvatarStack.new(align: :right)) do |c| %>
-      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @example With tooltip
       #   <%= render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |c| %>
-      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
-      #     <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
+      #     <% c.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser") %>
       #   <% end  %>
       #
       # @param tag [Symbol] <%= one_of(Primer::Beta::AvatarStack::TAG_OPTIONS) %>

app/components/primer/beta/blankslate.rb

@@ -83,7 +83,7 @@ class Blankslate < Primer::Component
         system_arguments[:size] = :medium
         system_arguments[:scheme] ||= :primary
 
-        Primer::ButtonComponent.new(**system_arguments)
+        Primer::ButtonComponent.new(**system_arguments) # rubocop:disable Primer/ComponentNameMigration
       }
 
       # Optional secondary action
@@ -130,7 +130,7 @@ class Blankslate < Primer::Component
       #     Add an `image` to give context that an Octicon couldn't.
       #   @code
       #     <%= render Primer::Beta::Blankslate.new do |c| %>
-      #       <% c.visual_image(src: "https://assets.fantasygmm.top/images/modules/site/features/security-icon.svg", alt: "Security - secure vault") %>
+      #       <% c.visual_image(src: Primer::ExampleImage::BASE64_SRC, alt: "Security - secure vault") %>
       #       <% c.heading(tag: :h2).with_content("Title") %>
       #       <% c.description { "Description"} %>
       #     <% end %>

app/components/primer/image.rb

@@ -8,19 +8,19 @@ module Primer
   class Image < Primer::Component
     # @example Default
     #
-    #   <%= render(Primer::Image.new(src: "https://github.com/github.png", alt: "GitHub")) %>
+    #   <%= render(Primer::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub")) %>
     #
     # @example Helper
     #
-    #   <%= primer_image(src: "https://github.com/github.png", alt: "GitHub") %>
+    #   <%= primer_image(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub") %>
     #
     # @example Lazy loading
     #
-    #   <%= render(Primer::Image.new(src: "https://github.com/github.png", alt: "GitHub", lazy: true)) %>
+    #   <%= render(Primer::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub", lazy: true)) %>
     #
     # @example Custom size
     #
-    #   <%= render(Primer::Image.new(src: "https://github.com/github.png", alt: "GitHub", height: 100, width: 100)) %>
+    #   <%= render(Primer::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub", height: 100, width: 100)) %>
     #
     # @param src [String] The source url of the image.
     # @param alt [String] Specifies an alternate text for the image.

app/components/primer/image_crop.rb

@@ -14,13 +14,13 @@ class ImageCrop < Primer::Component
     }
 
     # @example Simple cropper
-    #   <%= render(Primer::ImageCrop.new(src: "https://github.com/koddsson.png")) %>
+    #   <%= render(Primer::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC)) %>
     #
     # @example Square cropper
-    #   <%= render(Primer::ImageCrop.new(src: "https://github.com/koddsson.png", rounded: false)) %>
+    #   <%= render(Primer::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: false)) %>
     #
     # @example Cropper with a custom loader
-    #   <%= render(Primer::ImageCrop.new(src: "https://github.com/koddsson.png", rounded: false)) do |cropper| %>
+    #   <%= render(Primer::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: false)) do |cropper| %>
     #     <% cropper.with_loading(style: "width: 120px").with_content("Loading...") %>
     #   <% end %>
     #

app/components/primer/timeline_item_component.rb

@@ -40,7 +40,7 @@ class TimelineItemComponent < Primer::Component
     # @example Default
     #   <div style="padding-left: 60px">
     #     <%= render(Primer::TimelineItemComponent.new) do |component| %>
-    #       <% component.with_avatar(src: "https://github.com/github.png", alt: "github") %>
+    #       <% component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "github") %>
     #       <% component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check) %>
     #       <% component.with_body { "Success!" } %>
     #     <% end %>

previews/primer/beta/avatar_preview.rb

@@ -10,7 +10,7 @@ class AvatarPreview < ViewComponent::Preview
       # @param shape [Symbol] select [circle, square]
       # @param href [String] text
       def default(size: 24, shape: :circle, href: nil)
-        render(Primer::Beta::Avatar.new(src: "http://placekitten.com/200/200", alt: "@kittenuser", size: size, shape: shape, href: href))
+        render(Primer::Beta::Avatar.new(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", size: size, shape: shape, href: href))
       end
     end
   end

previews/primer/beta/avatar_stack_preview.rb

@@ -14,7 +14,7 @@ class AvatarStackPreview < ViewComponent::Preview
       def default(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false, tooltip_label: "This is a tooltip!")
         render(Primer::Beta::AvatarStack.new(tag: tag, align: align, tooltipped: tooltipped, body_arguments: { label: tooltip_label })) do |c|
           Array.new(number_of_avatars || 1) do
-            c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser")
+            c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
           end
         end
       end
@@ -24,18 +24,18 @@ def default(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false, to
       # @label Align right
       def align_right
         render(Primer::Beta::AvatarStack.new(align: :right)) do |c|
-          c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser")
-          c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser")
-          c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
 
       # @label With tooltip
       def with_tooltip
         render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: "This is a tooltip!" })) do |c|
-          c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser")
-          c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser")
-          c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
+          c.avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
         end
       end
       # @!endgroup

previews/primer/beta/blankslate_preview.rb

@@ -32,7 +32,7 @@ def with_icon(narrow: false, spacious: false, border: false)
       def with_image(narrow: false, spacious: false, border: false)
         render Primer::Beta::Blankslate.new(narrow: narrow, spacious: spacious, border: border) do |c|
           c.heading(tag: :h2).with_content("Millions of teams trust GitHub to keep their work safe")
-          c.visual_image(src: "https://assets.fantasygmm.top/images/modules/site/features/security-icon.svg", alt: "Security - secure vault")
+          c.visual_image(src: Primer::ExampleImage::BASE64_SRC, alt: "Security - secure vault")
         end
       end
 

previews/primer/image_crop_preview.rb

@@ -7,14 +7,14 @@ class ImageCropPreview < ViewComponent::Preview
     #
     # @param rounded [Boolean]
     def default(rounded: false)
-      render(Primer::ImageCrop.new(src: "https://github.com/octocat.png", rounded: rounded))
+      render(Primer::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: rounded))
     end
 
     # @label Custom loading slot
     #
     # @param rounded [Boolean]
     def loading(rounded: false)
-      render(Primer::ImageCrop.new(src: "https://github.com/octocat.png", rounded: rounded)) do |c|
+      render(Primer::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: rounded)) do |c|
         c.with_loading { "Loading..." }
       end
     end

previews/primer/markdown_preview.rb

@@ -267,11 +267,11 @@ def default
 
         <p>Small images should be shown at their actual size.</p>
 
-        <p><img src=\"http://placekitten.com/g/300/200/\"></p>
+        <!-- p><img src=\"http://placekitten.com/g/300/200/\"></!-->
 
         <p>Large images should always scale down and fit in the content container.</p>
 
-        <p><img src=\"http://placekitten.com/g/1200/800/\"></p>
+        <!-- p><img src=\"http://placekitten.com/g/1200/800/\"></!-->
 
         <pre><code>This is the final element on the page and there should be no margin below this.</code></pre>".html_safe # rubocop:disable Rails/OutputSafety
       end

previews/primer/timeline_item_component_preview.rb

@@ -8,7 +8,7 @@ class TimelineItemComponentPreview < ViewComponent::Preview
     # @param condensed [Boolean]
     def default(condensed: false)
       render(Primer::TimelineItemComponent.new(condensed: condensed)) do |component|
-        component.with_avatar(src: "https://github.com/octocat.png", alt: "octocat")
+        component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "octocat")
         component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check)
         component.with_body { "Success!" }
       end

test/test_helper.rb

@@ -28,8 +28,11 @@
 require "action_controller/railtie"
 require "rails/test_unit/railtie"
 require "active_model/railtie"
+require "webmock/minitest"
 
 require "primer/view_components"
 require "primer/view_components/linters"
 
 require File.expand_path("../demo/config/environment.rb", __dir__)
+
+WebMock.disable_net_connect!(allow_localhost: true)