docs: add search

diff --git a/docs/.vitepress/config.js b/docs/.vitepress/config.js
index 9dc971e6173bf3b9c8dba507c1bf5ff31fcf08e0..d84133eb9bdbeb835e4eacf4ff613a46e50f9106 100644 (file)
--- a/docs/.vitepress/config.js
+++ b/docs/.vitepress/config.js
@@ -120,11 +120,15 @@ module.exports = {
     editLinks: true,
     editLinkText: 'Suggest changes to this page',
 
-    // TODO: get keys once ready
-    // algolia: {
-    //   apiKey: 'b573aa848fd57fb47d693b531297403c',
-    //   indexName: 'vitejs',
-    // },
+    algolia: {
+      apiKey: 'd526df143dcebc3c6de61189345348d1',
+      indexName: 'pinia',
+      algoliaOptions: {
+        facetFilters: [
+          'tags:introduction,getting-started,core-concepts,ssr,cookbook',
+        ],
+      },
+    },
 
     carbonAds: {
       carbon: 'CEBICK3I',

diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index 7edf33c8305c5f9b027c5dd69529a1c301f11b14..ecdc9392b41c71a79a975ba551e02419921e3eaa 100644 (file)
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -61,6 +61,12 @@
   --c-yellow: #ffd859;
   --c-yellow-light: #f7d336;
   --c-white-dark: #f8f8f8;
+  --c-black: #111827;
+  --c-black-light: #161f32;
+  --c-black-lighter: #262a44;
+  --c-text-dark-1: #d9e6eb;
+  --c-text-dark-2: #c4dde6;
+  --c-text-dark-3: #abc4cc;
   /* #f9fafb */
 
   --c-brand: #086367;
@@ -89,20 +95,11 @@
   background-color: var(--c-bg-accent) !important;
 }
 
-.DocSearch {
-  --docsearch-primary-color: var(--c-brand) !important;
-}
-
 html:not(.light):root {
   /* --c-black: #ffffff;
   --c-white: #000000; */
   /* --c-divider-light: rgba(60, 60, 67, 0.12);
   --c-divider-dark: rgba(84, 84, 88, 0.48); */
-  --c-black: #111827;
-  --c-black-light: #161f32;
-  --c-text-dark-1: #d9e6eb;
-  --c-text-dark-2: #c4dde6;
-  --c-text-dark-3: #abc4cc;
   --c-brand: var(--c-yellow);
   --c-brand-light: var(--c-yellow-light);
 
@@ -116,6 +113,27 @@ html:not(.light):root {
   --code-inline-bg-color: var(--c-black-light);
 }
 
+html:not(.light) .DocSearch {
+  --docsearch-text-color: var(--c-white-dark);
+  --docsearch-container-background: rgba(9, 10, 17, 0.8);
+  --docsearch-modal-background: var(--c-black);
+  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
+  --docsearch-searchbox-background: var(--c-black-lighter);
+  --docsearch-searchbox-focus-background: var(--c-black-light);
+  --docsearch-hit-color: var(--c-text-dark-1);
+  --docsearch-hit-active-color: var(--c-brand-text);
+  --docsearch-hit-shadow: none;
+  --docsearch-hit-background: var(--c-black-light);
+  --docsearch-key-gradient: linear-gradient(-26.5deg, #565872, #31355b);
+  --docsearch-key-shadow: inset 0 -2px 0 0 #282d55, inset 0 0 1px 1px #51577d,
+    0 2px 2px 0 rgba(3, 4, 9, 0.3);
+  --docsearch-footer-background: var(--c-black-light);
+  --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
+    0 -4px 8px 0 rgba(0, 0, 0, 0.2);
+  --docsearch-logo-color: var(--c-white-dark);
+  --docsearch-muted-color: var(--c-text-dark-1);
+}
+
 body,
 .nav-bar,
 .carbon-ads,