Merge branch 'docsearch-yarn' into 'main'

Bundle DocSearch with yarn

See merge request gitlab-org/gitlab-docs!2771

12 files changed, 81 insertions, 33 deletions

diff --git a/content/assets/javascripts/docsearch.js b/content/frontend/search/docsearch.js
index d908b69d..0e12f398 100644
--- a/content/assets/javascripts/docsearch.js
+++ b/content/frontend/search/docsearch.js
@@ -1,9 +1,8 @@
----
-version: 4
----
+import docsearch from '@docsearch/js';
+import '@docsearch/css';
 
 document.addEventListener('DOMContentLoaded', () => {
-  let version = "main"
+  let version = 'main';
   if (document.querySelector('meta[name="docsearch:version"]').content.length > 0) {
     version = document.querySelector('meta[name="docsearch:version"]').content;
   }
@@ -13,23 +12,23 @@ document.addEventListener('DOMContentLoaded', () => {
     apiKey: '89b85ffae982a7f1adeeed4a90bb0ab1',
     indexName: 'gitlab',
     container: '#docsearch',
-    appId: "3PNCFOU757",
+    appId: '3PNCFOU757',
     placeholder: 'Search the docs',
     searchParameters: {
       facetFilters: [`version:${version}`],
     },
     resultsFooterComponent({ state }) {
       return {
-        type: "a",
+        type: 'a',
         ref: undefined,
         constructor: undefined,
         key: state.query,
         props: {
           href: `/search/?query=${state.query}`,
-          children: `See all results`
+          children: `See all results`,
         },
-        __v: null
-      }
-    }
+        __v: null,
+      };
+    },
   });
 });
diff --git a/doc/docsearch.md b/doc/docsearch.md
index d1e66f71..38c1d032 100644
--- a/doc/docsearch.md
+++ b/doc/docsearch.md
@@ -14,13 +14,13 @@ DocSearch layouts are defined in various places:
 
 - Home page: [`content/index.erb`](../content/index.erb)
 - Dedicated search page under `/search`: [`layouts/instantsearch.html`](../layouts/instantsearch.html)
-- Every other page: [`layouts/docsearch.html`](../layouts/docsearch.html)
+- Every other page: [`layouts/header.html`](../layouts/header.html)
 
 A Javascript snippet initiates docsearch by using an API key, app ID,
 and an index name that are needed for Algolia to show the results:
 
 - Dedicated search page under `/search`: [`content/frontend/search/index.js`](../content/frontend/search/index.js)
-- Every other page: [`content/assets/javascripts/docsearch.js`](../content/assets/javascripts/docsearch.js)
+- Every other page: [`content/frontend/search/docsearch.js`](../content/frontend/search/docsearch.js)
 
 ## Override DocSearch CSS
 
diff --git a/layouts/404.html b/layouts/404.html
index 6a844008..eaf565d8 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -16,9 +16,9 @@
       </div>
     </div>
   </section>
-  <script src="/frontend/shared/global_imports.js"></script>
+  <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script>
+  <script src="<%= @items['/frontend/search/docsearch.*'].path %>"></script>
   <script src="<%= @items['/frontend/404/404.*'].path %>"></script>
-  <%= render '/docsearch.*' %>
   <% if production? %>
   <%# Add analytics only in production %>
     <%= render '/analytics.*' %>
diff --git a/layouts/archives.html b/layouts/archives.html
index ad3a6249..fb9eaaaa 100644
--- a/layouts/archives.html
+++ b/layouts/archives.html
@@ -23,12 +23,12 @@
     </div>
     <div class="doc-nav"></div>
   </div>
-  <script src="/frontend/shared/global_imports.js"></script>
+  <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script>
   <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
+  <script src="<%= @items['/frontend/search/docsearch.*'].path %>"></script>
   <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
   <script type="application/javascript" src="<%= @items['/assets/javascripts/clipboardjs.*'].path %>"></script>
   <script type="application/javascript" src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
-  <%= render '/docsearch.*' %>
   <% if production? %>
   <%# Add analytics only in production %>
     <%= render '/analytics.*' %>
diff --git a/layouts/default.html b/layouts/default.html
index c216fdc4..320a8f87 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -93,12 +93,12 @@
         </div>
       </div>
     </section>
-    <script src="/frontend/shared/global_imports.js"></script>
+    <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script>
+    <script src="<%= @items['/frontend/search/docsearch.*'].path %>"></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 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? %>
     <%# Add analytics only in production %>
diff --git a/layouts/docsearch.html b/layouts/docsearch.html
deleted file mode 100644
index 71a89ceb..00000000
--- a/layouts/docsearch.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<!-- Algolia docsearch https://community.algolia.com/docsearch/ -->
-<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3.0.0/dist/umd/index.min.js"></script>
-<script src="<%= @items['/assets/javascripts/docsearch.*'].path %>"></script>
diff --git a/layouts/head.html b/layouts/head.html
index 753bdf08..9a0d1fdf 100644
--- a/layouts/head.html
+++ b/layouts/head.html
@@ -31,6 +31,7 @@
 
 <link rel="stylesheet" href="/assets/stylesheets/gitlab-ui/index.css">
 <link rel="stylesheet" href="/assets/stylesheets/gitlab-ui/utility_classes.css">
+<link rel="stylesheet" href="/frontend/search/docsearch.css">
 <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 %>">
@@ -38,10 +39,6 @@
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/help.*'].path %>">
 <link rel="stylesheet" href="<%= @items['/assets/stylesheets/font-awesome.min.*'].path %>">
 
-<!-- Docsearch https://community.algolia.com/docsearch/ - via CDN -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3.0.0/dist/style.css" />
-<!-- end of docsearch -->
-
 <% if production? %>
   <%# Adds GTM only in production %>
   <!-- add cookie consent  -->
diff --git a/layouts/home.html b/layouts/home.html
index 7d442674..6c5bb728 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -8,14 +8,14 @@
     <%= render '/gtm.*' %>
     <%= render '/header.*' %>
     <%= yield %>
-    <%= render '/docsearch.*' %>
     <% if production? and ENV['CI_COMMIT_REF_NAME'] == ENV['CI_DEFAULT_BRANCH'] %>
     <%# Add analytics only in production %>
       <%= render '/analytics.*' %>
     <% end %>
     <%= render '/schema-microdata.*' %>
     <script src="<%= @items['/frontend/header/index.*'].path %>"></script>
-    <script src="/frontend/shared/global_imports.js"></script>
-    <script type="application/javascript" src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
+    <script src="<%= @items['/frontend/shared/global_imports.*'].path %>"></script>
+    <script src="<%= @items['/frontend/search/docsearch.*'].path %>"></script>
+    <script src="<%= @items['/assets/javascripts/badges.*'].path %>"></script>
   </body>
 </html>
diff --git a/layouts/redirect.html b/layouts/redirect.html
index 7cd451fb..0d64c3e0 100644
--- a/layouts/redirect.html
+++ b/layouts/redirect.html
@@ -9,9 +9,6 @@
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
     <link rel="stylesheet" href="<%= @items['/assets/stylesheets/stylesheet.*'].path %>">
     <link rel="stylesheet" href="<%= @items['/assets/stylesheets/footer.*'].path %>">
-    <!-- Docsearch https://community.algolia.com/docsearch/ - via CDN -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3.0.0/dist/style.css" />
-    <!-- end of docsearch -->
     <script async src="<%= @items['/assets/javascripts/docs.*'].path %>"></script>
     <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic' rel='stylesheet' type='text/css'>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
@@ -27,6 +24,5 @@
         <%= render '/footer.*' %>
       </div>
     </div>
-    <%= render '/docsearch.*' %>
   </body>
 </html>
diff --git a/package.json b/package.json
index 0fbd1f96..56405a20 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,8 @@
     "vue-template-compiler": "^2.6.14"
   },
   "dependencies": {
+    "@docsearch/css": "^3.1.0",
+    "@docsearch/js": "3",
     "@gitlab/svgs": "^2.18.0",
     "@gitlab/ui": "^41.5.0",
     "@popperjs/core": "^2.11.5",
@@ -50,6 +52,7 @@
     "instantsearch.js": "^4.41.0",
     "jquery": "^3.6.0",
     "pikaday": "^1.8.2",
+    "rollup-plugin-import-css": "^3.0.3",
     "vue": "^2.6.14"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
index 43c0942e..fa0a7112 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -6,6 +6,7 @@ const glob = require('glob');
 const commonjs = require('@rollup/plugin-commonjs');
 const { babel } = require('@rollup/plugin-babel');
 const importResolver = require('rollup-plugin-import-resolver');
+const css = require('rollup-plugin-import-css');
 const svg = require('rollup-plugin-svg');
 const vue = require('rollup-plugin-vue');
 
@@ -35,6 +36,7 @@ module.exports = glob.sync('content/frontend/**/*.js').map((file) => ({
       babelHelpers: 'bundled',
     }),
     json(),
+    css(),
     importResolver({
       alias: {
         vue: './node_modules/vue/dist/vue.esm.browser.min.js',
diff --git a/yarn.lock b/yarn.lock
index cf5f4e11..fbe3addf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2,6 +2,18 @@
 # yarn lockfile v1
 
 
+"@algolia/autocomplete-core@1.6.3":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-core/-/autocomplete-core-1.6.3.tgz#76832fffb6405ac2c87bac5a040b8a31a1cdef80"
+  integrity sha512-dqQqRt01fX3YuVFrkceHsoCnzX0bLhrrg8itJI1NM68KjrPYQPYsE+kY8EZTCM4y8VDnhqJErR73xe/ZsV+qAA==
+  dependencies:
+    "@algolia/autocomplete-shared" "1.6.3"
+
+"@algolia/autocomplete-shared@1.6.3":
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/@algolia/autocomplete-shared/-/autocomplete-shared-1.6.3.tgz#52085ce89a755977841ed0a463aa31ce8f1dea97"
+  integrity sha512-UV46bnkTztyADFaETfzFC5ryIdGVb2zpAoYgu0tfcuYWjhg1KbLXveFffZIrGVoboqmAk1b+jMrl6iCja1i3lg==
+
 "@algolia/cache-browser-local-storage@4.13.1":
   version "4.13.1"
   resolved "https://registry.yarnpkg.com/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.13.1.tgz#ffacb9230119f77de1a6f163b83680be999110e4"
@@ -1057,6 +1069,28 @@
   resolved "https://registry.yarnpkg.com/@csstools/selector-specificity/-/selector-specificity-2.0.1.tgz#b6b8d81780b9a9f6459f4bfe9226ac6aefaefe87"
   integrity sha512-aG20vknL4/YjQF9BSV7ts4EWm/yrjagAN7OWBNmlbEOUiu0llj4OGrFoOKK3g2vey4/p2omKCoHrWtPxSwV3HA==
 
+"@docsearch/css@3.1.0", "@docsearch/css@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-3.1.0.tgz#6781cad43fc2e034d012ee44beddf8f93ba21f19"
+  integrity sha512-bh5IskwkkodbvC0FzSg1AxMykfDl95hebEKwxNoq4e5QaGzOXSBgW8+jnMFZ7JU4sTBiB04vZWoUSzNrPboLZA==
+
+"@docsearch/js@3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@docsearch/js/-/js-3.1.0.tgz#f01f203885898b27fd292a215dd5b76bafa9aeb1"
+  integrity sha512-5XSK+xbP0hcTIp54MECqxkWLs6kf7Ug4nWdxWNtx8cUpLiFNFnKXDxCb35wnyNpjukmrx7Q9DkO5tFFsmNVxng==
+  dependencies:
+    "@docsearch/react" "3.1.0"
+    preact "^10.0.0"
+
+"@docsearch/react@3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-3.1.0.tgz#da943a64c01ee82b04e53b691806469272f943f7"
+  integrity sha512-bjB6ExnZzf++5B7Tfoi6UXgNwoUnNOfZ1NyvnvPhWgCMy5V/biAtLL4o7owmZSYdAKeFSvZ5Lxm0is4su/dBWg==
+  dependencies:
+    "@algolia/autocomplete-core" "1.6.3"
+    "@docsearch/css" "3.1.0"
+    algoliasearch "^4.0.0"
+
 "@eslint/eslintrc@^1.3.0":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.3.0.tgz#29f92c30bb3e771e4a2048c95fa6855392dfac4f"
@@ -1482,6 +1516,14 @@
     estree-walker "^1.0.1"
     picomatch "^2.2.2"
 
+"@rollup/pluginutils@^4.2.0":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.2.1.tgz#e6c6c3aba0744edce3fb2074922d3776c0af2a6d"
+  integrity sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==
+  dependencies:
+    estree-walker "^2.0.1"
+    picomatch "^2.2.2"
+
 "@sinclair/typebox@^0.23.3":
   version "0.23.5"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.23.5.tgz#93f7b9f4e3285a7a9ade7557d9a8d36809cbc47d"
@@ -1810,7 +1852,7 @@ algoliasearch-helper@^3.8.2:
   dependencies:
     "@algolia/events" "^4.0.1"
 
-algoliasearch@4.13.1:
+algoliasearch@4.13.1, algoliasearch@^4.0.0:
   version "4.13.1"
   resolved "https://registry.yarnpkg.com/algoliasearch/-/algoliasearch-4.13.1.tgz#54195c41c9e4bd13ed64982248cf49d4576974fe"
   integrity sha512-dtHUSE0caWTCE7liE1xaL+19AFf6kWEcyn76uhcitWpntqvicFHXKFoZe5JJcv9whQOTRM6+B8qJz6sFj+rDJA==
@@ -5178,6 +5220,11 @@ postcss@^8.4.14:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+preact@^10.0.0:
+  version "10.7.3"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.7.3.tgz#f98c09a29cb8dbb22e5fc824a1edcc377fc42b5a"
+  integrity sha512-giqJXP8VbtA1tyGa3f1n9wiN7PrHtONrDyE3T+ifjr/tTkg+2N4d/6sjC9WyJKv8wM7rOYDveqy5ZoFmYlwo4w==
+
 preact@^10.6.0:
   version "10.7.2"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.7.2.tgz#5c632ba194b87345dcaee6598b3b6529b58e6a12"
@@ -5544,6 +5591,13 @@ rimraf@^3.0.0, rimraf@^3.0.2:
   dependencies:
     glob "^7.1.3"
 
+rollup-plugin-import-css@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-import-css/-/rollup-plugin-import-css-3.0.3.tgz#603c96e5ca55a8b1a1fda94221189f3224532fcf"
+  integrity sha512-0JE1UVigYqhbbbwNalxcYCnYAD70JgJIqnaSYeBgCOO60ASx9hpJubfA8toxEv6ceZrRPnLF1cnr0vsskH1Uiw==
+  dependencies:
+    "@rollup/pluginutils" "^4.2.0"
+
 rollup-plugin-import-resolver@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/rollup-plugin-import-resolver/-/rollup-plugin-import-resolver-1.2.1.tgz#164c9f7c8a721cacbfea32a664b69f2e60d843b2"