This commit is contained in:
Paul Wackerow 2022-11-30 12:05:47 -08:00
parent ab06e6456b
commit 8ad35ea5b4
No known key found for this signature in database
GPG Key ID: BB63E296FE9CAB8D
4 changed files with 26 additions and 21 deletions

View File

@ -2,7 +2,7 @@ import { FC } from 'react';
import { Box, Flex, Link, Stack, Text, useColorMode } from '@chakra-ui/react';
import NextLink from 'next/link';
import { Search } from '../UI'
import { Search } from '../UI';
import { MoonIcon, SunIcon } from '../UI/icons';
import { HeaderButtons } from './';

View File

@ -3,16 +3,12 @@ import { DocSearch } from '@docsearch/react';
import '@docsearch/css';
export const Search: React.FC = () => {
const appId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || ''
const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || ''
const indexName = process.env.NEXT_PUBLIC_ALGOLIA_BASE_SEARCH_INDEX_NAME || ''
const appId = process.env.NEXT_PUBLIC_ALGOLIA_APP_ID || '';
const apiKey = process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY || '';
const indexName = process.env.NEXT_PUBLIC_ALGOLIA_BASE_SEARCH_INDEX_NAME || '';
// TODO: Replace Algolia test keys with above env vars when ready
return (
<DocSearch
appId="R2IYF7ETH7"
apiKey="599cec31baffa4868cae4e79f180729b"
indexName="docsearch"
/>
<DocSearch appId='R2IYF7ETH7' apiKey='599cec31baffa4868cae4e79f180729b' indexName='docsearch' />
);
}
};

View File

@ -1,4 +1,12 @@
import { Box, Flex, Modal, ModalContent, ModalOverlay, Stack, useDisclosure } from '@chakra-ui/react';
import {
Box,
Flex,
Modal,
ModalContent,
ModalOverlay,
Stack,
useDisclosure
} from '@chakra-ui/react';
import { CloseIcon } from '@chakra-ui/icons';
import { HamburgerIcon } from '../UI/icons';

View File

@ -76,7 +76,7 @@
background: var(--chakra-colors-bg);
}
svg[aria-label="Algolia"] * {
svg[aria-label='Algolia'] * {
fill: var(--chakra-colors-body);
}
@ -86,16 +86,16 @@ svg[aria-label="Algolia"] * {
border-radius: 0;
}
.DocSearch-Hit[aria-selected="true"] a {
.DocSearch-Hit[aria-selected='true'] a {
background: var(--chakra-colors-secondary);
color: var(--chakra-colors-button-bg);
}
.DocSearch-Hit[aria-selected="false"] a {
.DocSearch-Hit[aria-selected='false'] a {
background: var(--chakra-colors-button-bg);
}
.DocSearch-Hit[aria-selected="false"] > a > div > div.DocSearch-Hit-icon > svg > path {
.DocSearch-Hit[aria-selected='false'] > a > div > div.DocSearch-Hit-icon > svg > path {
color: var(--chakra-colors-body);
}
@ -120,8 +120,8 @@ svg[aria-label="Algolia"] * {
border-radius: 0;
}
.DocSearch-Hit[aria-selected="true"] > a > div > div.DocSearch-Hit-content-wrapper svg,
.DocSearch-Hit[aria-selected="true"] > a > div > div.DocSearch-Hit-content-wrapper span,
.DocSearch-Hit[aria-selected='true'] > a > div > div.DocSearch-Hit-content-wrapper svg,
.DocSearch-Hit[aria-selected='true'] > a > div > div.DocSearch-Hit-content-wrapper span,
.DocSearch-Hit-title mark,
.DocSearch-Hit-path mark,
.DocSearch-Prefill {
@ -137,7 +137,7 @@ svg[aria-label="Algolia"] * {
.DocSearch-Input::placeholder {
font-style: italic;
font-size: var(--chakra-fontSizes-md)
font-size: var(--chakra-fontSizes-md);
}
.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,
@ -155,7 +155,7 @@ svg[aria-label="Algolia"] * {
.DocSearch-Button::before {
position: absolute;
content: "search";
content: 'search';
font-size: var(--chakra-fontSizes-md);
color: var(--chakra-colors-bg);
inset: 0;
@ -168,7 +168,8 @@ svg[aria-label="Algolia"] * {
}
/* Mobile modal styling */
.DocSearch-Container, .DocSearch-Modal {
.DocSearch-Container,
.DocSearch-Modal {
position: fixed;
inset: 1rem;
max-width: calc(100vw - 2rem);