Move inline JS outside of HTML. (#25140)

_includes/scripts.html

@@ -9,6 +9,10 @@
   <script src="{{ site.baseurl }}/dist/js/bootstrap.js"></script>
 {%- endif -%}
 
+{%- if page.layout == "docs" -%}
+<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+{%- endif -%}
+
 {%- if site.github -%}
   <script src="{{ site.baseurl }}/assets/js/docs.min.js"></script>
 {%- else -%}
@@ -19,36 +23,3 @@
   <script src="{{ site.baseurl }}/assets/js/src/ie-emulation-modes-warning.js"></script>
   <script src="{{ site.baseurl }}/assets/js/src/pwa.js"></script>
 {%- endif -%}
-
-{%- if page.layout == "docs" -%}
-<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
-<script>
-  docsearch({
-    apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
-    indexName: 'bootstrap-v4',
-    inputSelector: '#search-input',
-    handleSelected: function (input, event, suggestion) {
-      var url = suggestion.url;
-      url = suggestion.isLvl1 ? url.split('#')[0]: url;
-      // If it's a title we remove the anchor so it does not jump.
-      window.location.href = url;
-    },
-    transformData: function (hits) {
-      return hits.map(function (hit) {
-        hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0');
-        return hit;
-      });
-    },
-    debug: false // Set debug to true if you want to inspect the dropdown
-  });
-</script>
-{%- endif -%}
-
-<script>
-  Holder.addTheme('gray', {
-    bg: '#777',
-    fg: 'rgba(255,255,255,.75)',
-    font: 'Helvetica',
-    fontweight: 'normal'
-  });
-</script>

assets/js/src/application.js

@@ -10,7 +10,7 @@
  * details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-/* global Clipboard, anchors */
+/* global Clipboard: false, anchors: false, Holder: false */
 
 (function ($) {
   'use strict'
@@ -101,5 +101,35 @@
     }
     anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
     $('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5').wrapInner('<div></div>')
+
+    // Search
+    if (window.docsearch) {
+      window.docsearch({
+        apiKey: '48cb48b22351bc71ea5f12f4d1ede198',
+        indexName: 'bootstrap-v4',
+        inputSelector: '#search-input',
+        handleSelected: function (input, event, suggestion) {
+          var url = suggestion.url
+          url = suggestion.isLvl1 ? url.split('#')[0] : url
+          // If it's a title we remove the anchor so it does not jump.
+          window.location.href = url
+        },
+        transformData: function (hits) {
+          return hits.map(function (hit) {
+            hit.url = hit.url.replace('https://v4-alpha.getbootstrap.com', '/docs/4.0')
+            return hit
+          })
+        },
+        debug: false // Set debug to true if you want to inspect the dropdown
+      })
+    }
+
+    // Holder
+    Holder.addTheme('gray', {
+      bg: '#777',
+      fg: 'rgba(255,255,255,.75)',
+      font: 'Helvetica',
+      fontweight: 'normal'
+    })
   })
 }(jQuery))

docs/4.0/examples/album/index.html

@@ -65,41 +65,41 @@
 
           <div class="row">
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
 
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
 
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
             <div class="card">
-              <img data-src="holder.js/100px280?theme=thumb" alt="Card image cap">
+              <img data-src="holder.js/100px280?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
               <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
             </div>
           </div>
@@ -127,12 +127,5 @@
     <script src="../../../../assets/js/vendor/popper.min.js"></script>
     <script src="../../../../dist/js/bootstrap.min.js"></script>
     <script src="../../../../assets/js/vendor/holder.min.js"></script>
-    <script>
-      Holder.addTheme('thumb', {
-        bg: '#55595c',
-        fg: '#eceeef',
-        text: 'Thumbnail'
-      });
-    </script>
   </body>
 </html>