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
Split 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. 81
      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",
"dependencies": {
"@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",
"@mapbox/rehype-prism": "^0.5.0",
"@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,
headings: getHeadings(CLARITY_REFERENCE.functions),
};
const keywords = {
content: _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 { activeSlug, slugInView, doChangeActiveSlug, doChangeSlugInView } = useAppState();
const urlHash = asPath?.includes('#') && asPath.split('#')[1];
const location = typeof window !== 'undefined' && window.location.href;
useEffect(() => {

22
src/components/header.tsx
View File

@ -24,6 +24,7 @@ import NextLink from 'next/link';
import MagnifyIcon from 'mdi-react/MagnifyIcon';
import { useRouter } from 'next/router';
import { ColorModeButton } from '@components/color-mode-button';
import Search from '@components/search';
const MenuButton = ({ ...rest }: any) => {
const { isOpen, handleOpen, handleClose } = useMobileMenuState();
@ -40,6 +41,7 @@ const MenuButton = ({ ...rest }: any) => {
</Flex>
);
};
const BreadCrumbs: React.FC<any> = props => {
const router = useRouter();
const [route, setRoute] = React.useState(undefined);
@ -149,25 +151,7 @@ const SubBar: React.FC<any> = props => (
}}
>
<BreadCrumbs />
<Flex
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>
<Search />
</Flex>
);

81
src/components/search.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
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 { Text } from '@components/typography';
@ -8,44 +8,44 @@ import SearchIcon from 'mdi-react/SearchIcon';
import Router from 'next/router';
import Link from 'next/link';
const searchOptions = {
apiKey: '40753d06eed43b94e6fd1fe4342479b9',
indexName: 'blockstack_design',
const getLocalUrl = href => {
const _url = new URL(href);
const url = href
.replace(_url.origin, '')
.replace('#__next', '')
.replace('.html', '')
.replace('storage/clidocs', 'core/cmdLineRef');
return url;
};
function Hit({ hit, children }: any) {
const url = getLocalUrl(hit.url);
return (
<Link href={hit.url.replace()}>
<Link href={url} passHref>
<a>{children}</a>
</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> = () => {
const [isLoaded, setIsLoaded] = 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(
function onOpen() {
importDocSearchModalIfNeeded().then(() => {
setIsOpen(true);
});
},
[importDocSearchModalIfNeeded, setIsOpen]
[setIsOpen]
);
const onClose = React.useCallback(
@ -55,49 +55,22 @@ export const SearchBox: React.FC<any> = () => {
[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 });
return (
<>
{isLoaded && (
{
<Portal>
<Fade in={isOpen}>
{styles => (
<Box position="absolute" zIndex={9999} style={styles}>
<DocSearchModal
{...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}
/>
<DocSearchModal {...searchOptions} onClose={onClose} hitComponent={Hit} />
</Box>
)}
</Fade>
</Portal>
)}
<Box pt={space('base-loose')} px={space('base')} display={['none', 'none', 'block', 'block']}>
}
<Box minWidth="200px" display={['none', 'none', 'block', 'block']}>
<Flex
onClick={onOpen}
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 { ProgressBar } from '@components/progress-bar';
import GoogleFonts from 'next-google-fonts';
import '@docsearch/react/dist/style.css';
import '@docsearch/css';
import { BaseLayout } from '@components/layouts/base-layout';
import { THEME_STORAGE_KEY } from '@common/constants';
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
running Ubuntu 19. If your environment is different, you may encounter
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
the `#support` channel.
tutorial. Please [join the Blockstack discord server](https://chat.blockstack.org)
and post questions or comments to the `#support` channel.
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
@ -39,7 +39,7 @@ application by doing the following:
## Set up your environment
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.
### Install Android Studio
@ -57,7 +57,8 @@ Depending on your network connection, this can take between 15-30 minutes.
### 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
$ 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
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

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

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

36
yarn.lock
View File

@ -1439,13 +1439,19 @@
use-events "^1.4.1"
use-onclickoutside "^0.3.1"
"@docsearch/react@^1.0.0-alpha.14":
version "1.0.0-alpha.14"
resolved "https://registry.yarnpkg.com/@docsearch/react/-/react-1.0.0-alpha.14.tgz#13817445b50ec7ff387b23be4786d5b496d1e83f"
integrity sha512-I+JrJKZlRZIiIVefIY9AkC9OQegHfUCkdHmqGqsMu6suF+VtQNoTMCN0joAvMx4wid54RafWa/UnlEwEPMf5/w==
dependencies:
"@francoischalifour/autocomplete-core" "^1.0.0-alpha.14"
"@francoischalifour/autocomplete-preset-algolia" "^1.0.0-alpha.14"
"@docsearch/css@^1.0.0-alpha.24":
version "1.0.0-alpha.24"
resolved "https://registry.yarnpkg.com/@docsearch/css/-/css-1.0.0-alpha.24.tgz#a2e8d7e7ac50ebea17f90e974c5174b0d1a5c855"
integrity sha512-BCNomH+wdpg+hWTCczwQATS4hbztOvzU/6GXco+KIgVrvpTovtPsS7BYTQMCRhs2gPSk3p3DqgW95mwCoAvt0w==
"@docsearch/react@^1.0.0-alpha.24":
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"
"@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"
integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
"@francoischalifour/autocomplete-core@^1.0.0-alpha.14":
version "1.0.0-alpha.22"
resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-core/-/autocomplete-core-1.0.0-alpha.22.tgz#a4e24c6e6e4987353d934bf199cf9a002bec1472"
integrity sha512-jQqd8AaLY/UW/da8fqqSVnRJNVbcaJtOQ4JUbHXU4AFzGQ7i/LDsLGEEsFVRHEjwesnb1RvM6Kxx+vwJ6s9kAw==
"@francoischalifour/autocomplete-core@^1.0.0-alpha.24":
version "1.0.0-alpha.24"
resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-core/-/autocomplete-core-1.0.0-alpha.24.tgz#fc71704a17cf9326a66d97134508abdf02313181"
integrity sha512-rdWCKeIeDYjUXokdoyRNrFTreGZ8WLO/mhxAIWyLJ8ymdfXsortJqPL3fSDe57khXllGaZc/qxNsZi5RrpDRmQ==
"@francoischalifour/autocomplete-preset-algolia@^1.0.0-alpha.14":
version "1.0.0-alpha.22"
resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.22.tgz#2a0c712e63ce4d81e15bcc4ff1f69617b2b1312e"
integrity sha512-CEl7afHU9Jvva5lNvbCcdNhg+x3U+s8wj7PQNEtcIGc3zZ+/vo6YHCKjiyn7xAGa7Hn5jUu9g+5d7aeCEFEo+Q==
"@francoischalifour/autocomplete-preset-algolia@^1.0.0-alpha.24":
version "1.0.0-alpha.24"
resolved "https://registry.yarnpkg.com/@francoischalifour/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.0.0-alpha.24.tgz#f305d529d9e6c31b7e14d7aff45e912a23b187e5"
integrity sha512-LHcbVKZaki42J30zg30ZoAuEJVysfIMSE91JT9YuOnpch+26hC8Vff9VlCs+6ACYxXGuGHdX7uuKYOx7GcoQ3A==
"@hashicorp/remark-plugins@^3.0.0":
version "3.0.0"

Write Preview
Loading…
Cancel
Save