site: Add search (#1006)

Author: askoufis

pnpm-lock.yaml

@@ -10,6 +10,8 @@
   },
   "dependencies": {
     "@capsizecss/vanilla-extract": "^1.0.0",
+    "@docsearch/css": "3.3.3",
+    "@docsearch/react": "3.3.3",
     "@mdx-js/react": "^1.6.22",
     "classnames": "^2.2.6",
     "lodash": "^4.17.21",
@@ -55,6 +57,7 @@
     "mdx-loader": "^3.0.2",
     "mini-css-extract-plugin": "^1.5.1",
     "netlify-cli": "^11.8.3",
+    "null-loader": "^4.0.1",
     "remove-markdown": "^0.3.0",
     "tailwindcss": "^2.1.2",
     "webpack": "^5.36.1",

site/package.json

@@ -20,6 +20,7 @@ import Link from '../Typography/Link';
 import Text from '../Typography/Text';
 
 import mapKeys from 'lodash/mapKeys';
+import { SearchInput } from '../SearchInput/SearchInput';
 
 interface DocsRouteProps {
   component: (props: any) => JSX.Element;
@@ -413,10 +414,20 @@ export const DocsPage = ({ location }: RouteChildrenProps) => {
       <SecondaryNav onClick={closeMenu} pathname={normalisedPath} />
 
       <Box zIndex={1} position="fixed" top={0} right={0} padding="large">
-        <Box display={{ mobile: 'none', desktop: 'block' }}>
+        <Box display={{ mobile: 'none', desktop: 'flex' }} alignItems="center">
+          <Box paddingRight="medium">
+            <SearchInput />
+          </Box>
           <ColorModeToggle />
         </Box>
-        <Box display={{ desktop: 'none' }}>
+        <Box
+          display={{ mobile: 'flex', desktop: 'none' }}
+          alignItems="center"
+          justifyContent="space-between"
+        >
+          <Box display={menuOpen ? 'none' : undefined} paddingRight="medium">
+            <SearchInput />
+          </Box>
           <Fab open={menuOpen} onClick={toggleMenu} />
         </Box>
       </Box>

site/src/DocsPage/DocsPage.tsx

@@ -10,7 +10,7 @@ export const fab = style({
   height: fabSize,
   width: fabSize,
   zIndex: 3,
-  boxShadow: `0px 0px 0px 5px ${fallbackVar(focusColorVar, 'transparent')}`,
+  boxShadow: `0px 0px 0px 3px ${fallbackVar(focusColorVar, 'transparent')}`,
   WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
   ':focus-visible': {
     vars: {

site/src/Fab/Fab.css.ts

@@ -1,17 +1,11 @@
 import { createVar, style } from '@vanilla-extract/css';
-import { darkMode } from '../system/styles/sprinkles.css';
 import { vars } from '../themes.css';
 import { responsiveStyle } from '../themeUtils';
 
-export const shadowColorVar = createVar();
+// Used for overridding search box background
+export const homePage = style({});
 
-export const installBlock = style({
-  selectors: {
-    [`:not(.${darkMode}) &`]: {
-      filter: 'saturate(0.6)',
-    },
-  },
-});
+export const shadowColorVar = createVar();
 
 export const featureKeyLine = style({
   transform: 'skew(15deg)',