Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(search): update search to DocSearch v3 #2

Closed
wants to merge 18 commits into from
Closed

feat(search): update search to DocSearch v3 #2

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
e3e7614
deps: upgrade to docsearch v3
Aug 18, 2020
4e12083
feat: integrate DocSearch v3
Aug 24, 2020
1edb1aa
refactor: remove unused import
Aug 24, 2020
9b9442d
refactor: remove shadowing component
Aug 24, 2020
4337ff6
refactor: removing filtering on version
Aug 24, 2020
af4f0b6
Update src/components/Search.js
Aug 25, 2020
387157a
style(search): extend search Icon
Aug 25, 2020
8da678d
refactor(search): remove duplicate
Aug 25, 2020
9e1a9e1
style(search): override default styling on key controls
Aug 25, 2020
65f6460
style(search): keep constrast consistent within search button
Aug 25, 2020
3d5de3a
feat(search): preload page data when hits are hovered
Aug 25, 2020
9242d82
style(search): override default styling on li
Aug 25, 2020
4ce39b1
style(search): fix contrast on commands keys
Aug 25, 2020
9625f82
style(search): refactor rules
Aug 25, 2020
7345e92
style(search): center vertically center commands keys, should be remo…
Aug 25, 2020
e57c468
Revert "style(search): keep constrast consistent within search button"
Aug 25, 2020
1211cbc
style(search): increase contrast on search button
Aug 25, 2020
e7869df
style(search): refine searchbox shadow
Aug 25, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
"version": "0.1.0",
"author": "Kyle Mathews <mathews.kyle@gmail.com>",
"dependencies": {
"@docsearch/react": "^1.0.0-alpha.27",
"@emotion/core": "^10.0.22",
"@emotion/styled": "^10.0.23",
"@mdx-js/mdx": "^1.5.2",
"@mdx-js/react": "^1.5.2",
"@openfonts/luckiest-guy_latin": "^1.44.1",
"@pauliescanlon/gatsby-mdx-routes": "^0.0.4",
"@popperjs/core": "^2.2.2",
"docsearch.js": "^2.6.3",
"emotion": "^10.0.27",
"gatsby": "^2.18.13",
"gatsby-dynamical-navigation": "^0.4.1",
Expand Down
155 changes: 87 additions & 68 deletions src/components/Docsearch.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,96 @@
import React, { useEffect } from 'react';
s-pace marked this conversation as resolved.
Show resolved Hide resolved
import styled from '@emotion/styled';
import { css } from '@emotion/core';
import 'docsearch.js/dist/cdn/docsearch.css';
import { media } from './Framework';
import React, { Fragment } from 'react';
import { Global, css } from '@emotion/core';
import { DocSearch } from '@docsearch/react';

const canUseDOM = !!(
typeof window !== 'undefined' &&
window.document &&
window.document.createElement
);

const DocsearchContainer = styled.div`
padding-bottom: 10px;
display: none;
transition: box-shadow 0.4s ease-out;
flex-direction: column;
align-items: stretch;
padding: 10px;

${props =>
props.scrolled &&
css`
box-shadow: 0 10px 15px -4px rgba(100, 0, 0, 0.3);
`}

${media.lg} {
display: flex;
}
const DocSearch = () => {
return (
<Fragment>
<Global
styles={css`
:root {
a {
border-bottom-style: none;
}

.algolia-autocomplete,
input {
width: 100%;
}
--docsearch-primary-color: #ff6b81;
--docsearch-text-color: rgb(245, 246, 247);
--docsearch-container-background: rgba(9, 10, 17, 0.8);
--docsearch-modal-background: #281e36;
--docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64),
0 3px 8px 0 rgb(0, 3, 9);
--docsearch-searchbox-background: rgb(9, 10, 17);
--docsearch-searchbox-focus-background: #000;
--docsearch-hit-color: rgb(190, 195, 201);
--docsearch-hit-shadow: none;
--docsearch-hit-background: rgb(9, 10, 17);
--docsearch-key-gradient: linear-gradient(
-26.5deg,
rgb(114 86 111) 0%,
rgb(65 46 80) 100%
);
--docsearch-key-shadow: inset 0 -2px 0 0 rgb(81 31 82),
inset 0 0 1px 1px rgb(125 81 111), 0 2px 2px 0 rgba(3, 4, 9, 0.3);
--docsearch-footer-background: #2f263c;
--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: #fff;
--docsearch-muted-color: rgb(127, 132, 151);
--docsearch-key-shadow: inset 0 -2px 0 0 rgb(40, 45, 85),
inset 0 0 1px 1px rgb(81, 87, 125), 0 2px 2px 0 rgba(3, 4, 9, 0.3);
--docsearch-footer-background: #2f263c;
--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: rgb(255, 255, 255);
--docsearch-muted-color: rgb(127, 132, 151);

input {
border: 0;
border-radius: 20px;
padding: 10px 20px;
transition: box-shadow 0.2s ease-in-out;
&:focus {
outline: 0;
box-shadow: 0 0 0 5px #a93244;
}
}
.DocSearch-Button {
margin: 10px 10px;
height: 39px;
}

.algolia-autocomplete .ds-dropdown-menu:before {
left: 10px;
}
`;
.DocSearch-Button-Placeholder {
width: 100%;
text-align: left;
}
.DocSearch-Button {
--docsearch-searchbox-background: rgb(235, 237, 240);
--docsearch-searchbox-focus-background: #fff;
--docsearch-text-color: rgb(28, 30, 33);
--docsearch-muted-color: rgb(150, 159, 175);
--docsearch-key-gradient: linear-gradient(
-225deg,
rgb(213, 219, 228) 0%,
rgb(248, 248, 248) 100%
);
--docsearch-searchbox-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
--docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230),
inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
}

export default ({ name, className, scrolled }) => {
useEffect(() => {
if (canUseDOM) {
import('docsearch.js').then(
docsearch =>
document.querySelector('.algolia-autocomplete') == null &&
docsearch.default({
apiKey: 'd5fa05c4e33e776fbf2b8021cbc15b37',
indexName: 'popper',
inputSelector: `.docsearch-input-${name}`,
algoliaOptions: { facetFilters: ['tags:v2'] },
})
);
}
}, [name]);
@media (max-width: 750px) {
.DocSearch-Button-KeySeparator,
.DocSearch-Button-Key {
display: flex;
}

return (
<DocsearchContainer className={className} scrolled={scrolled}>
<input
type="search"
placeholder="Search the docs..."
className={`docsearch-input-${name}`}
.DocSearch-Button-Placeholder {
display: flex;
}
}
}
`}
/>
<DocSearch
apiKey="d5fa05c4e33e776fbf2b8021cbc15b37"
indexName="popper"
searchParameters={{
facetFilters: [
`tags:${document.location.pathname.includes('v1') ? 'v1' : 'v2'}`,
],
}}
/>
</DocsearchContainer>
</Fragment>
);
};

export default DocSearch;
4 changes: 2 additions & 2 deletions src/components/Navigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { MdxRoutes } from '@pauliescanlon/gatsby-mdx-routes';
import { createTree } from '../utils/createTree';
import processRoutes from '../utils/processRoutes';
import { media } from './Framework';
import Docsearch from './Docsearch';
import Search from './Search';
import popperText from '../images/popper-text.svg';
import { Menu } from 'react-feather';

Expand Down Expand Up @@ -251,7 +251,7 @@ export default function Navigation({ description, lang, meta, path }) {
</PopperTextLogoContainer>
<CloseMenuButton onClick={closeMenu}>Close Menu</CloseMenuButton>

<Docsearch scrolled={scrolled} name="docs" />
<Search />

<MenuContents ref={menuRef} onScroll={handleScroll}>
{createTree(processRoutes(routes, path)).map((route, index) => (
Expand Down
97 changes: 97 additions & 0 deletions src/components/Search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
import React, { Fragment } from 'react';
import { Global, css } from '@emotion/core';
import { DocSearch } from '@docsearch/react';
import '@docsearch/react/style';
s-pace marked this conversation as resolved.
Show resolved Hide resolved

const Search = () => {
return (
<Fragment>
<Global
styles={css`
:root {
a {
border-bottom-style: none;
s-pace marked this conversation as resolved.
Show resolved Hide resolved
}

--docsearch-primary-color: #ff6b81;
--docsearch-text-color: rgb(245, 246, 247);
--docsearch-container-background: rgba(9, 10, 17, 0.8);
--docsearch-modal-background: #281e36;
--docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64),
0 3px 8px 0 rgb(0, 3, 9);
--docsearch-searchbox-background: rgb(9, 10, 17);
--docsearch-searchbox-focus-background: #000;
--docsearch-hit-color: rgb(190, 195, 201);
--docsearch-hit-shadow: none;
--docsearch-hit-background: rgb(9, 10, 17);
--docsearch-key-gradient: linear-gradient(
-26.5deg,
rgb(114 86 111) 0%,
rgb(65 46 80) 100%
);
--docsearch-key-shadow: inset 0 -2px 0 0 rgb(81 31 82),
inset 0 0 1px 1px rgb(125 81 111), 0 2px 2px 0 rgba(3, 4, 9, 0.3);
--docsearch-footer-background: #2f263c;
--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: #fff;
--docsearch-muted-color: rgb(127, 132, 151);
--docsearch-key-shadow: inset 0 -2px 0 0 rgb(40, 45, 85),
inset 0 0 1px 1px rgb(81, 87, 125), 0 2px 2px 0 rgba(3, 4, 9, 0.3);
--docsearch-footer-background: #2f263c;
--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: rgb(255, 255, 255);
--docsearch-muted-color: rgb(127, 132, 151);

.DocSearch-Button {
s-pace marked this conversation as resolved.
Show resolved Hide resolved
margin: 10px 10px;
height: 39px;
}

.DocSearch-Button-Placeholder {
width: 100%;
text-align: left;
}
.DocSearch-Button {
--docsearch-searchbox-background: rgb(235, 237, 240);
--docsearch-searchbox-focus-background: #fff;
--docsearch-text-color: rgb(28, 30, 33);
--docsearch-muted-color: rgb(150, 159, 175);
--docsearch-key-gradient: linear-gradient(
-225deg,
rgb(213, 219, 228) 0%,
rgb(248, 248, 248) 100%
);
--docsearch-searchbox-shadow: 0 0 0 4px rgba(0, 0, 0, 0.3);
--docsearch-key-shadow: inset 0 -2px 0 0 rgb(205, 205, 230),
inset 0 0 1px 1px #fff, 0 1px 2px 1px rgba(30, 35, 90, 0.4);
}

@media (max-width: 750px) {
.DocSearch-Button-KeySeparator,
.DocSearch-Button-Key {
display: flex;
}

.DocSearch-Button-Placeholder {
display: flex;
}
}
}
`}
/>
<DocSearch
apiKey="d5fa05c4e33e776fbf2b8021cbc15b37"
indexName="popper"
searchParameters={{
facetFilters: [
`tags:${document.location.pathname.includes('v1') ? 'v1' : 'v2'}`,
],
}}
/>
</Fragment>
);
};

export default Search;
Loading