refactor: asjust few styling of algolia search box

docs/.vitepress/config.js

@@ -11,18 +11,17 @@ module.exports = {
     editLinkText: 'Edit this page on GitHub',
     lastUpdated: 'Last Updated',
 
+    algolia: {
+      apiKey: 'c57105e511faa5558547599f120ceeba',
+      indexName: 'vitepress'
+    },
+
     carbonAds: {
       carbon: 'CEBDT27Y',
       custom: 'CKYD62QM',
       placement: 'vuejsorg'
     },
 
-    algolia: {
-      apiKey: 'c57105e511faa5558547599f120ceeba',
-      indexName: 'vitepress'
-      // algoliaOptions: { facetFilters: ['tags:guide,api'] }
-    },
-
     nav: [
       { text: 'Guide', link: '/' },
       { text: 'Config Reference', link: '/config/basics' },

src/client/theme-default/Layout.vue

@@ -131,10 +131,3 @@ watch(route, hideSidebar)
 // TODO: route only changes when the pathname changes
 // listening to hashchange does nothing because it's prevented in router
 </script>
-
-<style>
-/* remove margin added by user agent */
-.DocSearch-SearchBar form {
-  margin-block-end: 0;
-}
-</style>

src/client/theme-default/components/AlgoliaSearchBox.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="docsearch"></div>
+  <div class="algolia-search-box" id="docsearch" />
 </template>
 
 <script setup lang="ts">
@@ -7,6 +7,20 @@ import type { AlgoliaSearchOptions } from 'algoliasearch'
 import { useRoute, useRouter } from 'vitepress'
 import { defineProps, getCurrentInstance, onMounted, watch } from 'vue'
 
+const { options } = defineProps<{
+  options: AlgoliaSearchOptions
+}>()
+
+const vm = getCurrentInstance()
+const route = useRoute()
+const router = useRouter()
+
+watch(() => options, (value) => { update(value) })
+
+onMounted(() => {
+  initialize(options)
+})
+
 function isSpecialClick(event: MouseEvent) {
   return (
     event.button === 1 ||
@@ -19,31 +33,13 @@ function isSpecialClick(event: MouseEvent) {
 
 function getRelativePath(absoluteUrl: string) {
   const { pathname, hash } = new URL(absoluteUrl)
-  // const url = pathname.replace(this.$site.base, '/') + hash
-  const url = pathname + hash
 
-  return url
+  return pathname + hash
 }
 
-const { options } = defineProps<{
-  // Using a regular import breaks at runtime
-  options: AlgoliaSearchOptions
-}>()
-
-const route = useRoute()
-const router = useRouter()
-const vm = getCurrentInstance()
-
-watch(
-  () => options,
-  (newValue) => {
-    update(newValue)
-  }
-)
-
 function update(options: any) {
   if (vm && vm.vnode.el) {
-    vm.vnode.el.innerHTML = '<div id="docsearch"></div>'
+    vm.vnode.el.innerHTML = '<div class="algolia-search-box" id="docsearch"></div>'
     initialize(options)
   }
 }
@@ -52,33 +48,21 @@ function initialize(userOptions: any) {
   Promise.all([
     import('@docsearch/js'),
     import('@docsearch/css')
-    // import(/* webpackChunkName: "docsearch" */ '@docsearch/js'),
-    // Promise.resolve(docsearch),
-    // import(/* webpackChunkName: "docsearch" */ '@docsearch/css'),
   ]).then(([docsearch]) => {
-    docsearch = docsearch.default
-
-    docsearch(
+    docsearch.default(
       Object.assign({}, userOptions, {
         container: '#docsearch',
-        // #697 Make DocSearch work well in i18n mode.
-        searchParameters: Object.assign(
-          {},
-          // lang && {
-          //   facetFilters: [`lang:${lang}`].concat(
-          //     userOptions.facetFilters || []
-          //   )
-          // },
-          userOptions.searchParameters
-        ),
+
+        searchParameters: Object.assign({}, userOptions.searchParameters),
+
         navigator: {
           navigate: ({ suggestionUrl }: { suggestionUrl: string }) => {
             const { pathname: hitPathname } = new URL(
               window.location.origin + suggestionUrl
             )
 
-            // Vue Router doesn't handle same-page navigation so we use
-            // the native browser location API for anchor navigation.
+            // Router doesn't handle same-page navigation so we use the native
+            // browser location API for anchor navigation
             if (route.path === hitPathname) {
               window.location.assign(window.location.origin + suggestionUrl)
             } else {
@@ -86,6 +70,7 @@ function initialize(userOptions: any) {
             }
           }
         },
+
         transformItems: (items) => {
           return items.map((item) => {
             return Object.assign({}, item, {
@@ -93,6 +78,7 @@ function initialize(userOptions: any) {
             })
           })
         },
+
         hitComponent: ({ hit, children }) => {
           const relativeHit = hit.url.startsWith('http')
             ? getRelativePath(hit.url as string)
@@ -110,15 +96,15 @@ function initialize(userOptions: any) {
                   return
                 }
 
-                // We rely on the native link scrolling when user is
-                // already on the right anchor because Vue Router doesn't
-                // support duplicated history entries.
+                // we rely on the native link scrolling when user is already on
+                // the right anchor because Router doesn't support duplicated
+                // history entries
                 if (route.path === relativeHit) {
                   return
                 }
 
-                // If the hits goes to another page, we prevent the native link behavior
-                // to leverage the Vue Router loading feature.
+                // if the hits goes to another page, we prevent the native link
+                // behavior to leverage the Router loading feature
                 if (route.path !== relativeHit) {
                   event.preventDefault()
                 }
@@ -133,16 +119,37 @@ function initialize(userOptions: any) {
     )
   })
 }
-
-onMounted(() => {
-  initialize(options)
-})
 </script>
 
 <style>
+.algolia-search-box {
+  padding-top: 1px;
+}
+
+@media (min-width: 720px) {
+  .algolia-search-box {
+    padding-left: 8px;
+  }
+}
+
+@media (min-width: 751px) {
+  .algolia-search-box {
+    padding-left: 8px;
+  }
+
+  .algolia-search-box .DocSearch-Button-Placeholder {
+    padding-left: 8px;
+    font-size: .9rem;
+    font-weight: 500;
+  }
+}
+
 .DocSearch {
   --docsearch-primary-color: #42b983;
   --docsearch-highlight-color: var(--docsearch-primary-color);
   --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
+  --docsearch-text-color: var(--c-text-light);
+  --docsearch-muted-color: var(--c-text-lighter);
+  --docsearch-searchbox-background: #f2f2f2;
 }
 </style>

src/client/theme-default/styles/layout.css

@@ -195,6 +195,10 @@ blockquote > p {
   margin: 0;
 }
 
+form {
+  margin: 0;
+}
+
 .theme {
   font-size: 16px;
   color: var(--c-text);

src/client/theme-default/styles/vars.css

@@ -26,8 +26,10 @@
   --font-family-mono: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 
   /**
-   * Z Indexes Algolia SearchBox has a z-index of 200, so make sure not to go
-   * above that value.
+   * Z Indexes
+   *
+   * Algolia SearchBox has a z-index of 200, so make sure not to go above
+   * that value.
    * --------------------------------------------------------------------- */
 
   --z-index-navbar: 10;