lukechilds
/
docs
mirror of https://github.com/lukechilds/docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

feat: search

fix/enable-imgix
Thomas Osmonson 4 years ago
parent
74c1656b72
commit
60700df108
9 changed files with 63 additions and 97 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      package.json
  2. 1
      src/common/data/clarity-ref.ts
  3. 1
      src/common/hooks/use-active-heading.tsx
  4. 22
      src/components/header.tsx
  5. 83
      src/components/search.tsx
  6. 2
      src/pages/_app.tsx
  7. 12
      src/pages/android/tutorial.md
  8. 1
      src/pages/faqs/allFAQS.md
  9. 36
      yarn.lock

2
package.json
View File

@ -3,7 +3,7 @@
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"@blockstack/ui": "^2.12.2-beta.0", "@blockstack/ui": "^2.12.2-beta.0",
"@docsearch/react": "^1.0.0-alpha.14", "@docsearch/react": "^1.0.0-alpha.24",
"@hashicorp/remark-plugins": "^3.0.0", "@hashicorp/remark-plugins": "^3.0.0",
"@mapbox/rehype-prism": "^0.5.0", "@mapbox/rehype-prism": "^0.5.0",
"@mdx-js/loader": "1.6.13", "@mdx-js/loader": "1.6.13",

1
src/common/data/clarity-ref.ts
View File

@ -76,6 +76,7 @@ export const convertClarityRefToMdx = async () => {
content: _functions, content: _functions,
headings: getHeadings(CLARITY_REFERENCE.functions), headings: getHeadings(CLARITY_REFERENCE.functions),
}; };
const keywords = { const keywords = {
content: _keywords, content: _keywords,
headings: getHeadings(CLARITY_REFERENCE.keywords), headings: getHeadings(CLARITY_REFERENCE.keywords),

1
src/common/hooks/use-active-heading.tsx
View File

@ -15,6 +15,7 @@ export const useActiveHeading = (_slug: string): ActiveHeadingReturn => {
const asPath = router && router.asPath; const asPath = router && router.asPath;
const { activeSlug, slugInView, doChangeActiveSlug, doChangeSlugInView } = useAppState(); const { activeSlug, slugInView, doChangeActiveSlug, doChangeSlugInView } = useAppState();
const urlHash = asPath?.includes('#') && asPath.split('#')[1]; const urlHash = asPath?.includes('#') && asPath.split('#')[1];
const location = typeof window !== 'undefined' && window.location.href; const location = typeof window !== 'undefined' && window.location.href;
useEffect(() => { useEffect(() => {

22
src/components/header.tsx
View File

@ -24,6 +24,7 @@ import NextLink from 'next/link';
import MagnifyIcon from 'mdi-react/MagnifyIcon'; import MagnifyIcon from 'mdi-react/MagnifyIcon';
import { useRouter } from 'next/router'; import { useRouter } from 'next/router';
import { ColorModeButton } from '@components/color-mode-button'; import { ColorModeButton } from '@components/color-mode-button';
import Search from '@components/search';
const MenuButton = ({ ...rest }: any) => { const MenuButton = ({ ...rest }: any) => {
const { isOpen, handleOpen, handleClose } = useMobileMenuState(); const { isOpen, handleOpen, handleClose } = useMobileMenuState();
@ -40,6 +41,7 @@ const MenuButton = ({ ...rest }: any) => {
</Flex> </Flex>
); );
}; };
const BreadCrumbs: React.FC<any> = props => { const BreadCrumbs: React.FC<any> = props => {
const router = useRouter(); const router = useRouter();
const [route, setRoute] = React.useState(undefined); const [route, setRoute] = React.useState(undefined);
@ -149,25 +151,7 @@ const SubBar: React.FC<any> = props => (
}} }}
> >
<BreadCrumbs /> <BreadCrumbs />
<Flex <Search />
align="center"
justifyContent="flex-end"
bg={color('bg-alt')}
height="32px"
width="32px"
borderRadius="32px"
transition={transition}
px={space('tight')}
color={color('invert')}
_hover={{
bg: color('bg-light'),
width: ['32px', '32px', '225px', '225px'],
cursor: 'pointer',
justifyContent: 'flex-end',
}}
>
<MagnifyIcon size="16px" />
</Flex>
</Flex> </Flex>
); );

83
src/components/search.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { Box, Flex, Portal, space, Fade, themeColor, color } from '@blockstack/ui'; import { Box, Flex, Portal, space, Fade, themeColor, color } from '@blockstack/ui';
import { useDocSearchKeyboardEvents } from '@docsearch/react/dist/umd'; import { useDocSearchKeyboardEvents, DocSearchModal } from '@docsearch/react';
import { border } from '@common/utils'; import { border } from '@common/utils';
import { Text } from '@components/typography'; import { Text } from '@components/typography';
@ -8,44 +8,44 @@ import SearchIcon from 'mdi-react/SearchIcon';
import Router from 'next/router'; import Router from 'next/router';
import Link from 'next/link'; import Link from 'next/link';
const searchOptions = { const getLocalUrl = href => {
apiKey: '40753d06eed43b94e6fd1fe4342479b9', const _url = new URL(href);
indexName: 'blockstack_design', const url = href
.replace(_url.origin, '')
.replace('#__next', '')
.replace('.html', '')
.replace('storage/clidocs', 'core/cmdLineRef');
return url;
}; };
function Hit({ hit, children }: any) { function Hit({ hit, children }: any) {
const url = getLocalUrl(hit.url);
return ( return (
<Link href={hit.url.replace()}> <Link href={url} passHref>
<a>{children}</a> <a>{children}</a>
</Link> </Link>
); );
} }
let DocSearchModal: any = null; const navigator = {
navigate: async ({ suggestionUrl }: any) => {
const url = getLocalUrl(suggestionUrl);
return Router.push(url);
},
};
const searchOptions = {
apiKey: '9040ba6d60f5ecb36eafc26396288875',
indexName: 'blockstack',
navigator,
};
export const SearchBox: React.FC<any> = () => { export const SearchBox: React.FC<any> = () => {
const [isLoaded, setIsLoaded] = React.useState(false);
const [isOpen, setIsOpen] = React.useState(false); const [isOpen, setIsOpen] = React.useState(false);
const importDocSearchModalIfNeeded = React.useCallback(function importDocSearchModalIfNeeded() {
if (DocSearchModal) {
setIsLoaded(true);
return Promise.resolve();
}
return Promise.all([import('@docsearch/react/modal')]).then(([{ DocSearchModal: Modal }]) => {
setIsLoaded(true);
DocSearchModal = Modal;
});
}, []);
const onOpen = React.useCallback( const onOpen = React.useCallback(
function onOpen() { function onOpen() {
importDocSearchModalIfNeeded().then(() => { setIsOpen(true);
setIsOpen(true);
});
}, },
[importDocSearchModalIfNeeded, setIsOpen] [setIsOpen]
); );
const onClose = React.useCallback( const onClose = React.useCallback(
@ -55,49 +55,22 @@ export const SearchBox: React.FC<any> = () => {
[setIsOpen] [setIsOpen]
); );
React.useEffect(() => {
if (isOpen && typeof document !== 'undefined') {
const element = document.getElementById('docsearch-input');
if (document.activeElement !== element) {
element.focus();
}
}
}, [isOpen]);
useDocSearchKeyboardEvents({ isOpen, onOpen, onClose }); useDocSearchKeyboardEvents({ isOpen, onOpen, onClose });
return ( return (
<> <>
{isLoaded && ( {
<Portal> <Portal>
<Fade in={isOpen}> <Fade in={isOpen}>
{styles => ( {styles => (
<Box position="absolute" zIndex={9999} style={styles}> <Box position="absolute" zIndex={9999} style={styles}>
<DocSearchModal <DocSearchModal {...searchOptions} onClose={onClose} hitComponent={Hit} />
{...searchOptions}
onClose={onClose}
navigator={{
navigate({ suggestionUrl }: any) {
Router.push(suggestionUrl);
},
}}
transformItems={(items: any[]) => {
return items.map(item => {
const url = new URL(item.url);
return {
...item,
url: item.url.replace(url.origin, '').replace('#__next', ''),
};
});
}}
hitComponent={Hit}
/>
</Box> </Box>
)} )}
</Fade> </Fade>
</Portal> </Portal>
)} }
<Box pt={space('base-loose')} px={space('base')} display={['none', 'none', 'block', 'block']}> <Box minWidth="200px" display={['none', 'none', 'block', 'block']}>
<Flex <Flex
onClick={onOpen} onClick={onOpen}
border={border()} border={border()}

2
src/pages/_app.tsx
View File

@ -7,7 +7,7 @@ import { AppStateProvider } from '@components/app-state';
import { MdxOverrides } from '@components/mdx/styles'; import { MdxOverrides } from '@components/mdx/styles';
import { ProgressBar } from '@components/progress-bar'; import { ProgressBar } from '@components/progress-bar';
import GoogleFonts from 'next-google-fonts'; import GoogleFonts from 'next-google-fonts';
import '@docsearch/react/dist/style.css'; import '@docsearch/css';
import { BaseLayout } from '@components/layouts/base-layout'; import { BaseLayout } from '@components/layouts/base-layout';
import { THEME_STORAGE_KEY } from '@common/constants'; import { THEME_STORAGE_KEY } from '@common/constants';
import { ColorModes } from '@components/color-modes/styles'; import { ColorModes } from '@components/color-modes/styles';

12
src/pages/android/tutorial.md
View File

@ -11,8 +11,8 @@ content:
This tutorial was extensively tested using Android Studio 3.6 on a Dell XPS 13 This tutorial was extensively tested using Android Studio 3.6 on a Dell XPS 13
running Ubuntu 19. If your environment is different, you may encounter running Ubuntu 19. If your environment is different, you may encounter
slight or even major discrepancies when performing the procedures in this slight or even major discrepancies when performing the procedures in this
tutorial. Please [join the Blockstack discord server](https://chat.blockstack.org) and post questions or comments to tutorial. Please [join the Blockstack discord server](https://chat.blockstack.org)
the `#support` channel. and post questions or comments to the `#support` channel.
Finally, this tutorial is written for all levels from the beginner to the most Finally, this tutorial is written for all levels from the beginner to the most
experienced. For best results, beginners should follow the guide as written. It experienced. For best results, beginners should follow the guide as written. It
@ -39,7 +39,7 @@ application by doing the following:
## Set up your environment ## Set up your environment
This sample application has two code bases, a Blockstack `hello-blockstack` This sample application has two code bases, a Blockstack `hello-blockstack`
web application and a `hello-andriod` Android application. Before you start web application and a `hello-android` Android application. Before you start
developing the sample, there are a few elements you need in your environment. developing the sample, there are a few elements you need in your environment.
### Install Android Studio ### Install Android Studio
@ -57,7 +57,8 @@ Depending on your network connection, this can take between 15-30 minutes.
### Do you have Node.js? ### Do you have Node.js?
Node.js v10 or higher is recommended the minimum supported version is Node.js v8. Before you begin, verify you have the correct version of Node.js and its tools installed. Node.js v10 or higher is recommended the minimum supported version is Node.js v8. Before you begin,
verify you have the correct version of Node.js and its tools installed.
```bash ```bash
$ node -v $ node -v
@ -71,7 +72,8 @@ If you don't have these installed, take a moment to install or upgrade as needed
## Build the Blockstack hello-world web app ## Build the Blockstack hello-world web app
In this section, you build a Blockstack `hello-world` web application that acts as the companion site to your Android application. In this section, you build a Blockstack `hello-world` web application that acts as the companion site to
your Android application.
### Generate and launch your hello-blockstack application ### Generate and launch your hello-blockstack application

1
src/pages/faqs/allFAQS.md
View File

@ -1,6 +1,5 @@
--- ---
description: 'Blockstack Network documentation' description: 'Blockstack Network documentation'
redirect_from: /org/voucherholder redirect_from: /org/voucherholder
--- ---

36
yarn.lock
View File

@ -1439,13 +1439,19 @@
use-events "^1.4.1" use-events "^1.4.1"
use-onclickoutside "^0.3.1" use-onclickoutside "^0.3.1"
"@docsearch/react@^1.0.0-alpha.14": "@docsearch/css@^1.0.0-alpha.24":
version "1.0.0-alpha.14" version "1.0.0-alpha.24"
resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-1.0.0-alpha.14.tgz#13817445b50ec7ff387b23be4786d5b496d1e83f" resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-1.0.0-alpha.24.tgz#a2e8d7e7ac50ebea17f90e974c5174b0d1a5c855"
integrity sha512-I+JrJKZlRZIiIVefIY9AkC9OQegHfUCkdHmqGqsMu6suF+VtQNoTMCN0joAvMx4wid54RafWa/UnlEwEPMf5/w== integrity sha512-BCNomH+wdpg+hWTCczwQATS4hbztOvzU/6GXco+KIgVrvpTovtPsS7BYTQMCRhs2gPSk3p3DqgW95mwCoAvt0w==
dependencies:
"@francoischalifour/autocomplete-core" "^1.0.0-alpha.14" "@docsearch/react@^1.0.0-alpha.24":
"@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.14" version "1.0.0-alpha.24"
resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-1.0.0-alpha.24.tgz#c0fb18e0df9494b86e50588892a0b25e293aa0ac"
integrity sha512-abfYBMrZcxmUhyxjdYPCRqBCC5XMilKEmondjkjUQG0W1sYmpjrVOMYBiTq6ZTW+7urVvXPjD9bm0fBZnlI9ow==
dependencies:
"@docsearch/css" "^1.0.0-alpha.24"
"@francoischalifour/autocomplete-core" "^1.0.0-alpha.24"
"@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.24"
algoliasearch "^4.0.0" algoliasearch "^4.0.0"
"@emotion/is-prop-valid@^0.8.1", "@emotion/is-prop-valid@^0.8.8": "@emotion/is-prop-valid@^0.8.1", "@emotion/is-prop-valid@^0.8.8":
@ -1470,15 +1476,15 @@
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
"@francoischalifour/autocomplete-core@^1.0.0-alpha.14": "@francoischalifour/autocomplete-core@^1.0.0-alpha.24":
version "1.0.0-alpha.22" version "1.0.0-alpha.24"
resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-core/-/autocomplete-core-1.0.0-alpha.22.tgz#a4e24c6e6e4987353d934bf199cf9a002bec1472" resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-core/-/autocomplete-core-1.0.0-alpha.24.tgz#fc71704a17cf9326a66d97134508abdf02313181"
integrity sha512-jQqd8AaLY/UW/da8fqqSVnRJNVbcaJtOQ4JUbHXU4AFzGQ7i/LDsLGEEsFVRHEjwesnb1RvM6Kxx+vwJ6s9kAw== integrity sha512-rdWCKeIeDYjUXokdoyRNrFTreGZ8WLO/mhxAIWyLJ8ymdfXsortJqPL3fSDe57khXllGaZc/qxNsZi5RrpDRmQ==
"@francoischalifour/autocomplete-preset-algolia@^1.0.0-alpha.14": "@francoischalifour/autocomplete-preset-algolia@^1.0.0-alpha.24":
version "1.0.0-alpha.22" version "1.0.0-alpha.24"
resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.22.tgz#2a0c712e63ce4d81e15bcc4ff1f69617b2b1312e" resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.24.tgz#f305d529d9e6c31b7e14d7aff45e912a23b187e5"
integrity sha512-CEl7afHU9Jvva5lNvbCcdNhg+x3U+s8wj7PQNEtcIGc3zZ+/vo6YHCKjiyn7xAGa7Hn5jUu9g+5d7aeCEFEo+Q== integrity sha512-LHcbVKZaki42J30zg30ZoAuEJVysfIMSE91JT9YuOnpch+26hC8Vff9VlCs+6ACYxXGuGHdX7uuKYOx7GcoQ3A==
"@hashicorp/remark-plugins@^3.0.0": "@hashicorp/remark-plugins@^3.0.0":
version "3.0.0" version "3.0.0"

Write Preview
Loading…
Cancel
Save