Bundle Bootstrap JS and jQuery with Rollup

9 files changed, 25 insertions, 14 deletions

diff --git a/content/frontend/shared/global_imports.js b/content/frontend/shared/global_imports.js
new file mode 100644
index 00000000..e1f4e9aa
--- /dev/null
+++ b/content/frontend/shared/global_imports.js
@@ -0,0 +1,4 @@
+import jquery from 'jquery';
+import 'bootstrap';
+
+window.$ = jquery;
diff --git a/doc/development.md b/doc/development.md
index 144544c7..a41edb63 100644
--- a/doc/development.md
+++ b/doc/development.md
@@ -68,6 +68,12 @@ match to make it easier to find:
 You should replace `<bundle-name>` with whatever you'd like to call your
 bundle.
 
+### Add a global library
+
+Libraries that are not specific to individual components (e.g, jQuery) are bundled via `global_imports.js`. The resulting build is included on all pages.
+
+This is a pattern to avoid going forward -- ideally third-party libraries are only loaded from components that require them -- but this allows us to utilize yarn for package management and avoid external CDNs while the site is still only partially component-driven.
+
 ## Bump versions of CSS and JavaScript
 
 Whenever the custom CSS and JavaScript files under `content/assets/` change,
@@ -92,7 +98,7 @@ The links pointing to the files should be similar to:
 Nanoc then builds and renders those links correctly according with what's
 defined in [`Rules`](https://gitlab.com/gitlab-org/gitlab-docs/-/blob/main/Rules).
 
-##  Adding query strings to CTAs headed to about.gitlab.com/pricing
+## Adding query strings to CTAs headed to about.gitlab.com/pricing
 
 We've created [a Sisense dashboard that can only be seen by full-time team members](https://app.periscopedata.com/app/gitlab/950797/GitLab.com-SaaS-trials---no-SAFE-data)
 to track the number of SaaS free trials that start from a documentation page.
@@ -102,7 +108,7 @@ If you would like to track that information, add the following parameters to the
 - `glm_source` is `docs.gitlab.com`
 - `glm_content` set to anything that ends with `-docs`
 
-### Example: 
+### Example
 
 `https://about.gitlab.com/pricing?=glm_source=docs.gitlab.com&glm_content=name-of-item-docs`
 
diff --git a/layouts/404.html b/layouts/404.html
index 525641a4..6a844008 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -16,8 +16,7 @@
       </div>
     </div>
   </section>
-  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
+  <script src="/frontend/shared/global_imports.js"></script>
   <script src="<%= @items['/frontend/404/404.*'].path %>"></script>
   <%= render '/docsearch.*' %>
   <% if production? %>
diff --git a/layouts/archives.html b/layouts/archives.html
index aa721c63..ad3a6249 100644
--- a/layouts/archives.html
+++ b/layouts/archives.html
@@ -23,8 +23,7 @@
     </div>
     <div class="doc-nav"></div>
   </div>
-  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
+  <script src="/frontend/shared/global_imports.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
   <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
   <script type="application/javascript" src="<%= @items['/assets/javascripts/clipboardjs.*'].path %>"></script>
diff --git a/layouts/default.html b/layouts/default.html
index 9b2d91cc..e1550aec 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -93,12 +93,11 @@
         </div>
       </div>
     </section>
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
+    <script src="/frontend/shared/global_imports.js"></script>
     <script src="<%= @items['/assets/javascripts/toggle_popover.*'].path %>"></script>
     <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
-    <script type="application/javascript" src="<%= @items['/assets/javascripts/clipboardjs.*'].path %>"></script>
-    <script type="application/javascript" src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
+    <script src="<%= @items['/assets/javascripts/clipboardjs.*'].path %>"></script>
+    <script src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
     <%= render '/docsearch.*' %>
     <script src="<%= @items['/assets/javascripts/mermaid.*'].path %>"></script>
     <% if production? %>
diff --git a/layouts/home.html b/layouts/home.html
index 2966b363..7d442674 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -15,8 +15,7 @@
     <% end %>
     <%= render '/schema-microdata.*' %>
     <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
+    <script src="/frontend/shared/global_imports.js"></script>
     <script type="application/javascript" src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
   </body>
 </html>
diff --git a/layouts/instantsearch.html b/layouts/instantsearch.html
index 717cdb0a..b9a349cf 100644
--- a/layouts/instantsearch.html
+++ b/layouts/instantsearch.html
@@ -18,8 +18,7 @@
         </div>
       </div>
     </section>
-    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
+    <script src="/frontend/shared/global_imports.js"></script>
     <script type="application/javascript" src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
     <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
     <script src="<%= @items['/frontend/search/index.*'].path %>"></script>
diff --git a/package.json b/package.json
index 07ac9791..292fbcf7 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "bootstrap": "^4.6.1",
     "eslint-plugin-filenames": "^1.3.2",
     "instantsearch.js": "^4.40.6",
+    "jquery": "^3.6.0",
     "pikaday": "^1.8.2",
     "vue": "^2.6.14"
   }
diff --git a/yarn.lock b/yarn.lock
index be5de986..325edafc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4219,6 +4219,11 @@ jest@^28.1.0:
     import-local "^3.0.2"
     jest-cli "^28.1.0"
 
+jquery@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/jquery/-/jquery-3.6.0.tgz#c72a09f15c1bdce142f49dbf1170bdf8adac2470"
+  integrity sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==
+
 js-base64@^2.1.9:
   version "2.6.4"
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"