Improve bundling for global assets

16 files changed, 79 insertions, 62 deletions

diff --git a/Makefile b/Makefile
index f732599f..9d527e28 100644
--- a/Makefile
+++ b/Makefile
@@ -237,11 +237,6 @@ check-danger:
 	@printf "\n$(INFO)INFO: Checking for Danger errors and warnings...$(END)\n"
 	@scripts/check-danger.sh ; exit $$?
 
-add-gitlab-fonts:
-	@printf "\n$(INFO)INFO: Copying GitLab fonts...$(END)\n"
-	@cp -v node_modules/@gitlab/fonts/gitlab-sans/GitLabSans.woff2 public/assets/fonts
-	@cp -v node_modules/@gitlab/fonts/jetbrains-mono/JetBrainsMono* public/assets/fonts
-
 create-stable-branch:
 	@printf "\n$(INFO)INFO: Creating stable branch...$(END)\n"
 	@bundle exec rake release:single
diff --git a/Rules b/Rules
index f52129f9..56fbecc7 100644
--- a/Rules
+++ b/Rules
@@ -186,6 +186,5 @@ postprocess do
   # Skip the frontend compilation if NANOC_ENV=skip_frontend is set
   # See doc/development.md
   next if ENV['NANOC_ENV'] == 'skip_frontend'
-  raise "Failed to copy GitLab fonts. Run 'yarn install' and try again." unless system('make --no-print-directory add-gitlab-fonts')
   raise "postprocessing error" unless system('nanoc frontend')
 end
diff --git a/commands/frontend.rb b/commands/frontend.rb
index ec2911c5..98b27d08 100644
--- a/commands/frontend.rb
+++ b/commands/frontend.rb
@@ -30,19 +30,4 @@ run do |_opts, _args, _cmd|
 
     ERROR
   end
-
-  puts "\n#{COLOR_CODE_GREEN}INFO: Copying GitLab UI CSS sourcemaps...#{COLOR_CODE_RESET}"
-  root = File.expand_path('../', __dir__)
-  gl_ui_src = 'node_modules/@gitlab/ui/dist'
-  gl_ui_dest = 'public/frontend/shared'
-
-  Dir.children(gl_ui_src).each do |filename|
-    puts "- Copied #{gl_ui_src}/#{filename}" if filename.include?("map") && File.write("#{gl_ui_dest}/#{filename}", File.read("#{root}/#{gl_ui_src}/#{filename}"))
-  end
-
-  if ENV['SEARCH_BACKEND'] == "lunr"
-    lunr_src = "node_modules/lunr/lunr.min.js"
-    puts "\n#{COLOR_CODE_GREEN}INFO: Copying Lunr.js...#{COLOR_CODE_RESET}"
-    puts "- Copied #{lunr_src}" if File.write('public/assets/javascripts/lunr.min.js', File.read("#{root}/#{lunr_src}"))
-  end
 end
diff --git a/content/assets/stylesheets/_typography.scss b/content/assets/stylesheets/_typography.scss
index 473bc288..6ab346e6 100644
--- a/content/assets/stylesheets/_typography.scss
+++ b/content/assets/stylesheets/_typography.scss
@@ -12,33 +12,33 @@
   font-weight: 100 900;
   font-style: normal;
   font-named-instance: 'Regular'; /* stylelint-disable property-no-unknown */
-  src: url('../fonts/GitLabSans.woff2') format('woff2');
+  src: url('../vendor/GitLabSans.woff2') format('woff2');
 }
 @font-face {
   font-family: 'JetBrains Mono';
   font-display: swap;
   font-style: normal;
-  src: url('../fonts/JetBrainsMono.woff2') format('woff2');
+  src: url('../vendor/JetBrainsMono.woff2') format('woff2');
 }
 @font-face {
   font-family: 'JetBrains Mono';
   font-display: swap;
   font-weight: bold;
-  src: url('../fonts/JetBrainsMono-Bold.woff2') format('woff2');
+  src: url('../vendor/JetBrainsMono-Bold.woff2') format('woff2');
 }
 @font-face {
   font-family: 'JetBrains Mono';
   font-display: swap;
   font-weight: normal;
   font-style: italic;
-  src: url('../fonts/JetBrainsMono-Italic.woff2') format('woff2');
+  src: url('../vendor/JetBrainsMono-Italic.woff2') format('woff2');
 }
 @font-face {
   font-family: 'JetBrains Mono';
   font-display: swap;
   font-weight: bold;
   font-style: italic;
-  src: url('../fonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
+  src: url('../vendor/JetBrainsMono-BoldItalic.woff2') format('woff2');
 }
 
 /* https://gitlab.com/gitlab-org/gitlab/-/merge_requests/107592/ */
diff --git a/content/frontend/default/default.js b/content/frontend/default/default.js
index 10a82fb7..987f062b 100644
--- a/content/frontend/default/default.js
+++ b/content/frontend/default/default.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+/* global Vue */
 import { getNextUntil } from '../shared/dom';
 import NavigationToggle from './components/navigation_toggle.vue';
 import VersionBanner from './components/version_banner.vue';
@@ -6,8 +6,6 @@ import { setupTableOfContents } from './setup_table_of_contents';
 import VersionsMenu from './components/versions_menu.vue';
 import TabsSection from './components/tabs_section.vue';
 
-window.Vue = Vue;
-
 function fixScrollPosition() {
   if (!window.location.hash || !document.querySelector(window.location.hash)) return;
   const contentBody = document.querySelector('.gl-docs main');
diff --git a/content/frontend/search/google_results.js b/content/frontend/search/google_results.js
index 1a6f455f..8b0d1459 100644
--- a/content/frontend/search/google_results.js
+++ b/content/frontend/search/google_results.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+/* global Vue */
 import GoogleResults from './components/google_results.vue';
 import { activateKeyboardShortcut } from './search_helpers';
 
diff --git a/content/frontend/search/lunrsearch.js b/content/frontend/search/lunrsearch.js
index 542ae48f..5ca9229a 100644
--- a/content/frontend/search/lunrsearch.js
+++ b/content/frontend/search/lunrsearch.js
@@ -1,4 +1,4 @@
-import Vue from 'vue';
+/* global Vue */
 import LunrResults from './components/lunr_results.vue';
 import SearchForm from './components/lunr_search_form.vue';
 
diff --git a/content/frontend/shared/global_imports.js b/content/frontend/shared/global_imports.js
deleted file mode 100644
index 968cf2c2..00000000
--- a/content/frontend/shared/global_imports.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import jquery from 'jquery';
-import 'bootstrap';
-
-import '@gitlab/ui/dist/index.css';
-import '@gitlab/ui/dist/utility_classes.css';
-
-window.$ = jquery;
diff --git a/doc/development.md b/doc/development.md
index 105c32ad..089f2702 100644
--- a/doc/development.md
+++ b/doc/development.md
@@ -82,12 +82,6 @@ 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 JavaScript
 
 Whenever the JavaScript files under `content/assets/` change,
@@ -262,7 +256,6 @@ To avoid this, you can use the following workaround:
 1. Compile the frontend files once:
 
    ```shell
-   make add-gitlab-fonts
    bin/nanoc frontend
    ```
 
diff --git a/layouts/404.html b/layouts/404.html
index f8d91e43..925b6c17 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -17,7 +17,6 @@
       </div>
     </section>
 
-    <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script>
   <% if production? %>
   <%# Add analytics only in production %>
     <%= render '/analytics.*' %>
diff --git a/layouts/default.html b/layouts/default.html
index ba2b26c6..521fcbdb 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -69,8 +69,11 @@
         </div>
       </div>
     </section>
+    <script src="/assets/vendor/vue.min.js"></script>
+    <script src="/assets/vendor/jquery.slim.min.js"></script>
+    <script src="/assets/vendor/bootstrap.bundle.min.js"></script>
+
     <script src="<%= @items['/frontend/default/default.*'].path %>"></script>
-    <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script>
     <% if @config[:search_backend] == "google" %>
     <script src="<%= @items['/frontend/search/google.*'].path %>"></script>
     <% elsif @config[:search_backend] == "lunr" %>
@@ -81,7 +84,7 @@
     <script src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
 
     <% if @item.compiled_content.include? "load-mermaid" %>
-      <script src="/assets/javascripts/vendor/mermaid.min.js"></script>
+      <script src="/assets/vendor/mermaid.min.js"></script>
       <script src="<%= @items['/assets/javascripts/mermaid.*'].path %>"></script>
     <% end %>
 
diff --git a/layouts/head.html b/layouts/head.html
index b582bddf..e199cbbe 100644
--- a/layouts/head.html
+++ b/layouts/head.html
@@ -28,17 +28,20 @@
 <% end %>
 <!-- End of CSP headers -->
 
-<link rel="preload" href="/assets/fonts/GitLabSans.woff2" as="font" crossorigin />
-<link rel="prefetch" href="/assets/fonts/JetBrainsMono.woff2" as="font" crossorigin />
+<!-- GitLab Fonts and UI -->
+<link rel="preload" href="/assets/vendor/GitLabSans.woff2" as="font" crossorigin />
+<link rel="prefetch" href="/assets/vendor/JetBrainsMono.woff2" as="font" crossorigin />
+<link rel="stylesheet" href="/assets/vendor/index.css">
+<link rel="stylesheet" href="/assets/vendor/utility_classes.css">
 
-<link rel="stylesheet" href="/frontend/shared/global_imports.css">
+<!-- Custom -->
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/stylesheet.*'].path %>">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/highlight.*'].path %>">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/footer.*'].path %>">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/toc.*'].path %>">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/help.*'].path %>">
-<link rel="stylesheet" href="<%= @items['/assets/stylesheets/font-awesome.min.*'].path %>">
 
+<link rel="stylesheet" href="<%= @items['/assets/stylesheets/font-awesome.min.*'].path %>">
 <% if production? %>
   <%# Adds GTM only in production %>
   <!-- OneTrust Cookies Consent Notice start -->
diff --git a/layouts/home.html b/layouts/home.html
index 02f7ce5b..291d798f 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -13,8 +13,11 @@
       <%= render '/analytics.*' %>
     <% end %>
     <%= render '/schema-microdata.*' %>
+    <script src="/assets/vendor/vue.min.js"></script>
+    <script src="/assets/vendor/jquery.slim.min.js"></script>
+    <script src="/assets/vendor/bootstrap.bundle.min.js"></script>
+
     <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
-    <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script>
     <script src="<%= @items['/frontend/default/default.*'].path %>"></script>
     <script src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
     <% if @config[:search_backend] == "google" %>
diff --git a/layouts/redirect.html b/layouts/redirect.html
index c8285d19..b81aae60 100644
--- a/layouts/redirect.html
+++ b/layouts/redirect.html
@@ -6,7 +6,12 @@
     <meta name="robots" content="noindex">
     <link rel="canonical" href="<%= @item[:redirect_to] %>">
     <meta http-equiv="refresh" content="0; url=<%= @item[:redirect_to] %>">
-    <link rel="stylesheet" href="/frontend/shared/global_imports.css">
+    <!-- GitLab Fonts and UI -->
+    <link rel="preload" href="/assets/vendor/GitLabSans.woff2" as="font" crossorigin />
+    <link rel="prefetch" href="/assets/vendor/JetBrainsMono.woff2" as="font" crossorigin />
+    <link rel="stylesheet" href="/assets/vendor/index.css">
+    <link rel="stylesheet" href="/assets/vendor/utility_classes.css">
+
     <link rel="stylesheet" href="<%= @items['/assets/stylesheets/stylesheet.*'].path %>">
     <link rel="stylesheet" href="<%= @items['/assets/stylesheets/footer.*'].path %>">
     <meta name="viewport" content="width=device-width, initial-scale=1">
diff --git a/layouts/search.html b/layouts/search.html
index 5360aac7..d28b494b 100644
--- a/layouts/search.html
+++ b/layouts/search.html
@@ -3,12 +3,6 @@
   <head>
     <%= render '/head.*' %>
     <link rel="canonical" href="<%= @config[:base_url] %>/search/">
-    <% if @config[:search_backend] == "google" %>
-    <script src="<%= @items['/frontend/search/google_results.*'].path %>"></script>
-    <% else %>
-    <script src="/assets/javascripts/lunr.min.js"></script>
-    <script src="<%= @items['/frontend/search/lunrsearch.*'].path %>"></script>
-    <% end %>
   </head>
   <body>
     <%= render '/gtm.*' %>
@@ -27,7 +21,14 @@
         </div>
       </div>
     </section>
-    <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script>
+    <script src="/assets/vendor/vue.min.js"></script>
+    <script src="/assets/vendor/jquery.slim.min.js"></script>
+    <% if @config[:search_backend] == "google" %>
+    <script src="<%= @items['/frontend/search/google_results.*'].path %>"></script>
+    <% else %>
+    <script src="/assets/vendor/lunr.min.js"></script>
+    <script src="<%= @items['/frontend/search/lunrsearch.*'].path %>"></script>
+    <% end %>
     <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
 
     <% if production? %>
diff --git a/rollup.config.js b/rollup.config.js
index 72666db3..50f5a052 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -14,6 +14,9 @@ function mapDirectory(file) {
   return file.replace('content/', 'public/');
 }
 
+// Global assets are copied here.
+const vendorDir = './public/assets/vendor';
+
 module.exports = globSync('content/frontend/**/*.js').map((file) => ({
   input: file,
   output: {
@@ -21,7 +24,12 @@ module.exports = globSync('content/frontend/**/*.js').map((file) => ({
     format: 'iife',
     name: file,
     inlineDynamicImports: true,
+    globals: {
+      vue: 'Vue',
+      jquery: '$',
+    },
   },
+  external: ['vue', 'jquery'],
   cache: true,
   plugins: [
     nodeResolve({ browser: true, preferBuiltins: false }),
@@ -49,7 +57,39 @@ module.exports = globSync('content/frontend/**/*.js').map((file) => ({
       targets: [
         {
           src: './node_modules/mermaid/dist/mermaid.min.js*',
-          dest: './public/assets/javascripts/vendor',
+          dest: vendorDir,
+        },
+        {
+          src: './node_modules/vue/dist/vue.min.js',
+          dest: vendorDir,
+        },
+        {
+          src: './node_modules/lunr/lunr.min.js',
+          dest: vendorDir,
+        },
+        {
+          src: './node_modules/jquery/dist/jquery.slim.min.js',
+          dest: vendorDir,
+        },
+        {
+          src: './node_modules/bootstrap/dist/js/bootstrap.bundle.min.js*',
+          dest: vendorDir,
+        },
+        {
+          src: './node_modules/@gitlab/ui/dist/utility_classes.css*',
+          dest: vendorDir,
+        },
+        {
+          src: './node_modules/@gitlab/ui/dist/index.css*',
+          dest: vendorDir,
+        },
+        {
+          src: './node_modules/@gitlab/fonts/gitlab-sans/GitLabSans.woff2',
+          dest: vendorDir,
+        },
+        {
+          src: './node_modules/@gitlab/fonts/jetbrains-mono/JetBrainsMono*',
+          dest: vendorDir,
         },
       ],
     }),