Replace holder.js with inline SVG

build/vnu-jar.js

@@ -25,9 +25,6 @@ childProcess.exec('java -version', (error, stdout, stderr) => {
     // Firefox's non-standard autocomplete behavior - see https://bugzilla.mozilla.org/show_bug.cgi?id=654072
     'Attribute “autocomplete” is only allowed when the input type is.*',
     'Attribute “autocomplete” not allowed on element “button” at this point.',
-    // We use holder.js with `data-src` and no `src` to avoid 404 errors;
-    // we could work around this, but I'm not sure it's worth it.
-    'Element “img” is missing required attribute “src”.',
     // Markup used in Components → Forms → Layout → Form grid → Horizontal form is currently invalid,
     // but used this way due to lack of support for flexbox layout on <fieldset> element in most browsers
     'Element “legend” not allowed as child of element “div” in this context.*',

js/tests/visual/toast.html

@@ -28,7 +28,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
     <div class="notifications">
       <div id="toastAutoHide" class="toast" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
         <div class="toast-header">
-          <img class="rounded mr-2" data-src="holder.js/20x20?size=1&text=.&bg=#007aff" alt="">
+          <span class="d-block bg-primary rounded mr-2" style="width: 20px; height: 20px;"></span>
           <strong class="mr-auto">Bootstrap</strong>
           <small>11 mins ago</small>
         </div>
@@ -39,7 +39,7 @@ <h1>Toast <small>Bootstrap Visual Test</small></h1>
 
       <div class="toast" data-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
         <div class="toast-header">
-          <img class="rounded mr-2" data-src="holder.js/20x20?size=1&text=.&bg=#007aff" alt="">
+          <span class="d-block bg-primary rounded mr-2" style="width: 20px; height: 20px;"></span>
           <strong class="mr-auto">Bootstrap</strong>
           <small class="text-muted">2 seconds ago</small>
           <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">

package.json

@@ -56,7 +56,7 @@
     "js-minify-main": "npm-run-all js-minify-standalone js-minify-bundle",
     "js-minify-standalone": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
     "js-minify-bundle": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
-    "js-minify-docs": "cross-env-shell uglifyjs --mangle --comments \\\"/^!/\\\" --output site/docs/$npm_package_version_short/assets/js/docs.min.js site/docs/$npm_package_version_short/assets/js/vendor/clipboard.min.js site/docs/$npm_package_version_short/assets/js/vendor/holder.min.js site/docs/$npm_package_version_short/assets/js/vendor/bs-custom-file-input.min.js \"site/docs/$npm_package_version_short/assets/js/src/*.js\"",
+    "js-minify-docs": "cross-env-shell uglifyjs --mangle --comments \\\"/^!/\\\" --output site/docs/$npm_package_version_short/assets/js/docs.min.js site/docs/$npm_package_version_short/assets/js/vendor/clipboard.min.js site/docs/$npm_package_version_short/assets/js/vendor/bs-custom-file-input.min.js \"site/docs/$npm_package_version_short/assets/js/src/*.js\"",
     "js-test": "npm-run-all js-test-karma*",
     "js-test-karma": "karma start js/tests/karma.conf.js",
     "js-test-karma-old": "cross-env USE_OLD_JQUERY=true npm run js-test-karma",

site/_includes/bugify.html

@@ -1,7 +1,7 @@
 {%- comment -%}
-Usage: {% include bugify.html content=text %},
-where content is a string that contains a bug reference name and id.
-e.g. Bootstrap#19984
+  Usage: include bugify.html content=text,
+  where content is a string that contains a bug reference name and id.
+  e.g. Bootstrap#19984
 {%- endcomment -%}
 
 {%- assign words = include.content | split: " " -%}

site/_includes/callout.html

@@ -1,7 +1,7 @@
 {%- comment -%}
-Usage: {% include callout.html content=callout type="type" %},
-where content is a capture with the content
-and type is one of: info (default), danger, warning
+  Usage: include callout.html content=callout type="type",
+  where content is a capture with the content
+  and type is one of: info (default), danger, warning
 {%- endcomment -%}
 {%- assign css_class = include.type | default: "info" -%}
 <div class="bd-callout bd-callout-{{ css_class }} no_toc_section">

site/_includes/docs-sidebar.html

@@ -35,20 +35,6 @@
             <a href="{{ site.baseurl }}/docs/{{ site.docs_version }}/{{ group_slug }}/{{ doc_slug }}/">
               {{ doc.title }}
             </a>
-
-            {%- comment -%}
-            {% unless doc.sections == nil %}
-              <ul class="nav">
-                {% for section in doc.sections %}
-                  <li>
-                    <a href="#{{ section.title | downcase | replace: ' ', '-' }}">
-                      {{ section.title }}
-                    </a>
-                  </li>
-                {% endfor %}
-              </ul>
-            {% endunless %}
-            {%- endcomment -%}
           </li>
         {%- endfor -%}
       </ul>

site/_includes/example.html

@@ -1,32 +1,51 @@
 {%- comment -%}
-Usage: {% include example.html content=markup %},
-where content is a capture with the HTML content
-id - null (default)
-class - "bd-example" (default)
-optional: hide_preview - disabled (default)
-optional: hide_markup - disabled (default)
+  Usage: include example.html content=markup [args],
+  where content is a capture with the HTML content
+
+  args can be one of the following:
+    id - null (default)
+    class - "bd-example" (default)
+    optional: hide_preview - disabled (default)
+    optional: hide_markup - disabled (default)
 {%- endcomment -%}
 
-{%- assign preview_id = include.id -%}
-{%- assign preview_class = include.class -%}
+{%- assign id = include.id -%}
+{%- assign class = include.class -%}
 
 {%- if include.hide_preview == null -%}
-<div{% if preview_id %} id="{{ preview_id }}"{% endif %} class="bd-example{% if preview_class %} {{ preview_class }}{% endif %}">
+<div{% if id %} id="{{ id }}"{% endif %} class="bd-example{% if class %} {{ class }}{% endif %}">
   {{- include.content -}}
 </div>
 {%- endif -%}
 
 {%- if include.hide_markup == null -%}
   {%- highlight html -%}
-    {%- if include.content contains 'data-src="holder.js' -%}
+    {%- if include.content contains '<svg class="bd-placeholder-img' -%}
       {%- assign modified_content = include.content
-        | replace: 'data-src="holder.js', 'src="✂️holder.js'
-        | replace: '" ', '✂️" '
+        | replace: '<svg class="bd-placeholder-img', '✂️<svg class="bd-placeholder-img'
+        | replace: '</svg>', '</svg>✂️'
+        | split: '✂️' -%}
+
+      {%- if include.content contains 'bd-placeholder-img ' -%}
+        {%- assign image_class = include.content
+          | replace_first: 'bd-placeholder-img', 'bd-placeholder-img ✂️'
+          | replace: '" width="', '✂️" width="'
+          | split: '✂️' -%}
+        {%- assign image_class = image_class[1] | replace: 'bd-placeholder-img-lg', '' | strip -%}
+      {%- endif -%}
+
+      {%- assign image_alt = include.content
+        | replace: '<title>', '<title>✂️'
+        | replace: '</title>', '✂️</title>'
         | split: '✂️' -%}
+      {%- assign image_alt = image_alt[1] -%}
 
       {%- for content_chunk in modified_content -%}
-        {%- if content_chunk contains 'holder.js' -%}
-          {{- "..." -}}
+        {%- if content_chunk contains '<svg class="bd-placeholder-img' -%}
+          {%- capture img_placeholder -%}
+            <img src="..." {% if image_class %}class="{{ image_class }}" {% endif %}alt="{{ image_alt }}">
+          {%- endcapture -%}
+          {{- img_placeholder -}}
         {%- else -%}
           {{- content_chunk -}}
         {%- endif -%}

site/_includes/scripts.html

@@ -15,7 +15,6 @@
   <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/docs.min.js"></script>
 {%- else -%}
   <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/clipboard.min.js"></script>
-  <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/holder.min.js"></script>
   <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/bs-custom-file-input.min.js"></script>
   <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/src/application.js"></script>
   <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/src/search.js"></script>

site/_layouts/examples.html

@@ -10,6 +10,19 @@
 
     {% include stylesheet.html %}
 
+    <style>
+      .bd-placeholder-img {
+        font-size: 1.125rem;
+        text-anchor: middle;
+      }
+
+      @media (min-width: 768px) {
+        .bd-placeholder-img-lg {
+          font-size: 3.5rem;
+        }
+      }
+    </style>
+
     {%- for css in page.extra_css %}
     <!-- Custom styles for this template -->
     <link href="{{ css }}" rel="stylesheet">
@@ -28,10 +41,6 @@
         <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/dist/js/bootstrap.bundle.js"></script>
       {%- endif -%}
 
-      {%- if page.include_holder == true -%}
-        <script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/holder.min.js"></script>
-      {%- endif -%}
-
       {%- for js in page.extra_js %}
         <script src="{{ js }}"></script>
       {%- endfor %}

site/docs/4.1/assets/js/src/application.js

@@ -10,7 +10,7 @@
  * details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-/* global ClipboardJS: false, Holder: false, bsCustomFileInput: false */
+/* global ClipboardJS: false, bsCustomFileInput: false */
 
 (function ($) {
   'use strict'
@@ -103,14 +103,6 @@
 
     $('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5').wrapInner('<div></div>')
 
-    // Holder
-    Holder.addTheme('gray', {
-      bg: '#777',
-      fg: 'rgba(255,255,255,.75)',
-      font: 'Helvetica',
-      fontweight: 'normal'
-    })
-
     bsCustomFileInput.init()
   })
 }(jQuery))

site/docs/4.1/assets/scss/_component-examples.scss

@@ -212,8 +212,9 @@
 }
 
 // Images
-.bd-example > img {
-  + img {
+.bd-example {
+  > svg + svg,
+  > img + img {
     margin-left: .5rem;
   }
 }

site/docs/4.1/assets/scss/_placeholder-img.scss

@@ -0,0 +1,16 @@
+//
+// Placeholder svg used in the docs.
+//
+
+// Remember to update `site/_layouts/examples.html` too if this changes!
+
+.bd-placeholder-img {
+  font-size: 1.125rem;
+  text-anchor: middle;
+}
+
+.bd-placeholder-img-lg {
+  @include media-breakpoint-up(md) {
+    font-size: 3.5rem;
+  }
+}

site/docs/4.1/assets/scss/docs.scss

@@ -44,6 +44,7 @@
 @import "brand";
 @import "colors";
 @import "clipboard-js";
+@import "placeholder-img";
 
 // Load docs dependencies
 @import "syntax";