Merge pull request #86 from gregberge/various-fixes

various fixes
gregberge · Oct 5, 2022 · dedbc8c · dedbc8c
2 parents 1a2e93d + 2068779
commit dedbc8c
Show file tree

Hide file tree

Showing 8 changed files with 919 additions and 289 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/smooth-doc/gatsby-config.js b/smooth-doc/gatsby-config.js
@@ -77,6 +77,10 @@ module.exports = function config(options) {
  options: {
  extensions: [`.mdx`, `.md`],
  mdxOptions: {
+ remarkPlugins: [
+ // Add GitHub Flavored Markdown (GFM) support
+ require(`remark-gfm`),
+ ],
  rehypePlugins: [rehypeMetaAsAttributes],
  },
  gatsbyRemarkPlugins: [

diff --git a/smooth-doc/package.json b/smooth-doc/package.json
@@ -64,6 +64,7 @@
  "react-helmet": "^6.1.0",
  "react-icons": "^4.3.1",
  "react-live": "^2.4.1",
+ "remark-gfm": "^1.0.0",
  "styled-components": "^5.3.3",
  "unist-util-visit": "^2.0.3"
  },

diff --git a/smooth-doc/src/components/DocSearch.js b/smooth-doc/src/components/DocSearch.js
@@ -1,8 +1,7 @@
 import * as React from 'react'
-import { Link, navigate } from 'gatsby'
 import { createPortal } from 'react-dom'
 import styled, { x, createGlobalStyle } from '@xstyled/styled-components'
-import { useDocSearchKeyboardEvents } from '@docsearch/react'
+import { DocSearchModal, useDocSearchKeyboardEvents } from '@docsearch/react'
 import { RiSearchLine } from 'react-icons/ri'
 import { Input, InputGroup, InputGroupIcon } from './Input'
 
@@ -36,10 +35,6 @@ const GlobalStyle = createGlobalStyle`
  }
 `
 
-function Hit({ hit, children }) {
- return <Link to={hit.url}>{children}</Link>
-}
-
 const Kbd = styled.kbd`
  border: 1;
  border-color: control-border;
@@ -56,53 +51,29 @@ const Kbd = styled.kbd`
  min-width: 1.5em;
 `
 
-let DocSearchModal = null
-
 export function DocSearch({ apiKey, indexName, appId }) {
  const searchButtonRef = React.useRef(null)
- const [isShowing, setIsShowing] = React.useState(false)
+ const [isOpen, setIsOpen] = React.useState(false)
  const [initialQuery, setInitialQuery] = React.useState(null)
 
- const importDocSearchModalIfNeeded = React.useCallback(() => {
- if (DocSearchModal) {
- return Promise.resolve()
- }
-
- return Promise.resolve(import('@docsearch/react/modal')).then(
- ({ DocSearchModal: Modal }) => {
- DocSearchModal = Modal
- },
- )
- }, [])
-
  const onOpen = React.useCallback(() => {
- importDocSearchModalIfNeeded().then(() => {
- // We check that no other DocSearch modal is showing before opening this
- // one (we use one instance for desktop and one instance for mobile).
- if (document.body.classList.contains('DocSearch--active')) {
- return
- }
-
- setIsShowing(true)
- })
- }, [importDocSearchModalIfNeeded, setIsShowing])
+ setIsOpen(true)
+ }, [setIsOpen])
 
  const onClose = React.useCallback(() => {
- setIsShowing(false)
- }, [setIsShowing])
+ setIsOpen(false)
+ }, [setIsOpen])
 
  const onInput = React.useCallback(
  (event) => {
- importDocSearchModalIfNeeded().then(() => {
- setIsShowing(true)
- setInitialQuery(event.key)
- })
+ setIsOpen(true)
+ setInitialQuery(event.key)
  },
- [importDocSearchModalIfNeeded, setIsShowing, setInitialQuery],
+ [setIsOpen, setInitialQuery],
  )
 
  useDocSearchKeyboardEvents({
- isOpen: isShowing,
+ isOpen,
  onOpen,
  onClose,
  onInput,
@@ -113,16 +84,11 @@ export function DocSearch({ apiKey, indexName, appId }) {
  <>
  <GlobalStyle />
  <div>
- <InputGroup>
+ <InputGroup ref={searchButtonRef} as="button" onClick={() => onOpen()}>
  <InputGroupIcon>
  <RiSearchLine />
  </InputGroupIcon>
- <Input
- ref={searchButtonRef}
- onClick={onOpen}
- type="search"
- placeholder="Search..."
- />
+ <Input disabled type="search" placeholder="Search..." />
  <x.div
  position="absolute"
  top="50%"
@@ -138,29 +104,15 @@ export function DocSearch({ apiKey, indexName, appId }) {
  </InputGroup>
  </div>
 
- {isShowing &&
+ {isOpen &&
  createPortal(
  <DocSearchModal
  apiKey={apiKey}
  indexName={indexName}
- appId={appId ?? 'BH4D9OD16A'}
- initialQuery={initialQuery}
+ appId={appId}
  onClose={onClose}
- navigator={{
- navigate({ suggestionUrl }) {
- navigate(suggestionUrl)
- },
- }}
- transformItems={(items) => {
- return items.map((item) => {
- const url = new URL(item.url)
- return {
- ...item,
- url: item.url.replace(url.origin, ''),
- }
- })
- }}
- hitComponent={Hit}
+ initialScrollY={window.scrollY}
+ initialQuery={initialQuery}
  />,
  document.body,
  )}

diff --git a/smooth-doc/src/components/Input.js b/smooth-doc/src/components/Input.js
@@ -28,6 +28,9 @@ export const Input = styled.input`
 `
 
 export const InputGroup = styled.div`
+ appearance: none;
+ background-color: transparent;
+ padding: 0;
  display: inline-flex;
  color: control-placeholder;
  transition: control;

diff --git a/smooth-doc/src/components/MDX.js b/smooth-doc/src/components/MDX.js
@@ -5,7 +5,6 @@ import { CarbonAd } from './CarbonAd'
 import { Table, TableContainer } from './Table'
 
 function transformCode({ children, className, ...props }) {
- console.log(className)
  const lang = className && className.split('-')[1]
  return (
  <Code lang={lang} {...props}>

diff --git a/website/gatsby-config.js b/website/gatsby-config.js
@@ -17,7 +17,8 @@ module.exports = {
  carbonAdsURL:
  '//cdn.carbonads.com/carbon.js?serve=CE7IL2JN&placement=xstyleddev',
  docSearch: {
- apiKey: 'a0c23a738fe1cfffa923daba2eb185be',
+ appId: 'J2LYQ9877O',
+ apiKey: '9295224c1474afa9f75f7d4772a1f713',
  indexName: 'smooth-doc',
  },
  },

diff --git a/website/package.json b/website/package.json
@@ -17,7 +17,6 @@
  "react-helmet": "^6.1.0",
  "react-icons": "^4.3.1",
  "react-is": "^18.2.0",
- "smooth-doc": "^9.0.0",
  "styled-components": "^5.3.3"
  }
 }