From b53d61b1d7b92054f8c88392e38ac108d342eff7 Mon Sep 17 00:00:00 2001 From: checktheroads Date: Tue, 2 Jun 2020 01:37:26 -0700 Subject: [PATCH] ui improvements --- docs/docusaurus.config.js | 192 ++++---- docs/package.json | 1 - docs/src/components/ColorModeToggle/Moon.js | 23 + docs/src/components/ColorModeToggle/Sun.js | 21 + docs/src/components/ColorModeToggle/index.js | 30 ++ .../ColorModeToggle/styles.module.css | 40 ++ docs/src/components/GithubButton/index.js | 45 ++ .../components/GithubButton/styles.module.css | 46 ++ docs/src/components/Logo.js | 46 +- docs/src/css/custom.css | 32 +- docs/src/pages/demo.js | 62 +++ docs/src/pages/index.js | 146 +++--- docs/src/pages/screenshots.js | 66 +++ docs/src/theme/Navbar/index.js | 425 +++++++++--------- docs/src/theme/Navbar/styles.module.css | 62 +-- docs/src/theme/SearchBar/index.js | 50 +-- docs/yarn.lock | 40 +- 17 files changed, 825 insertions(+), 502 deletions(-) create mode 100644 docs/src/components/ColorModeToggle/Moon.js create mode 100644 docs/src/components/ColorModeToggle/Sun.js create mode 100644 docs/src/components/ColorModeToggle/index.js create mode 100644 docs/src/components/ColorModeToggle/styles.module.css create mode 100644 docs/src/components/GithubButton/index.js create mode 100644 docs/src/components/GithubButton/styles.module.css create mode 100644 docs/src/pages/demo.js create mode 100644 docs/src/pages/screenshots.js diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 63234a6..22a86e9 100755 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -3,100 +3,108 @@ const githubURL = "https://github.com/checktheroads/hyperglass"; const { googleTrackingId, algoliaKey } = process.env; module.exports = { - title: "hyperglass", - tagline: "the network looking glass that tries to make the internet better.", - url: "https://hyperglass.io", - baseUrl: "/", - favicon: "img/favicon.ico", - organizationName: "checktheroads", - projectName: "hyperglass", - themeConfig: { - googleAnalytics: { trackingID: googleTrackingId || " ", anonymizeIP: false }, - gtag: { - trackingID: googleTrackingId || " ", - anonymizeIP: false, - }, - algolia: { - apiKey: algoliaKey, - indexName: "hyperglass", - }, - navbar: { - links: [ - { to: "docs/introduction", label: "Docs", position: "left" }, - { to: "screenshots", label: "Screenshots", position: "left" }, - { - href: "https://demo.hyperglass.io", - label: "Demo", - position: "left", - }, - ], - }, - footer: { - style: "dark", - links: [ - { - title: "Docs", - items: [ - { - label: "Introduction", - to: "docs/introduction", - }, - { - label: "Getting Started", - to: "docs/getting-started", - }, - { - label: "Configuration", - to: "docs/configuration", - }, - ], - }, - { - title: "Community", - items: [ - { - label: "Gitter", - href: "https://gitter.im/hyperglass", - }, - { - label: "Keybase", - href: "https://keybase.io/team/hyperglass", - }, - ], - }, - { - title: "Social", - items: [ - { - label: "GitHub", - href: githubURL, - }, - { - label: "Twitter", - href: "https://twitter.com/checktheroads", - }, - ], - }, - ], - }, + title: "hyperglass", + tagline: "the network looking glass that tries to make the internet better.", + url: "https://hyperglass.io", + baseUrl: "/", + favicon: "img/favicon.ico", + organizationName: "checktheroads", + projectName: "hyperglass", + themeConfig: { + googleAnalytics: { + trackingID: googleTrackingId || " ", + anonymizeIP: false, }, - presets: [ - [ - "@docusaurus/preset-classic", + gtag: { + trackingID: googleTrackingId || " ", + anonymizeIP: false, + }, + algolia: { + apiKey: algoliaKey, + indexName: "hyperglass", + }, + navbar: { + links: [ + { to: "docs/introduction", label: "Docs", position: "left" }, + { to: "screenshots", label: "Screenshots", position: "left" }, + { to: "demo", label: "Demo", position: "left" }, + // { + // href: "https://demo.hyperglass.io", + // label: "Demo", + // position: "left", + // }, + ], + }, + footer: { + style: "dark", + links: [ + { + title: "Docs", + items: [ { - docs: { - sidebarPath: require.resolve("./sidebars.js"), - editUrl: githubURL + "/edit/master/docs/", - }, - theme: { - customCss: require.resolve("./src/css/custom.css"), - }, + label: "Introduction", + to: "docs/introduction", }, - ], - ], - plugins: [ - "@docusaurus/plugin-google-analytics", - "@docusaurus/plugin-google-gtag", - "@docusaurus/plugin-sitemap", + { + label: "Getting Started", + to: "docs/getting-started", + }, + { + label: "Configuration", + to: "docs/configuration", + }, + ], + }, + { + title: "Community", + items: [ + { + label: "Telegram", + href: "https://t.me/hyperglasslg", + }, + { + label: "Gitter", + href: "https://gitter.im/hyperglass", + }, + { + label: "Keybase", + href: "https://keybase.io/team/hyperglass", + }, + ], + }, + { + title: "Social", + items: [ + { + label: "GitHub", + href: githubURL, + }, + { + label: "Twitter", + href: "https://twitter.com/checktheroads", + }, + ], + }, + ], + }, + }, + presets: [ + [ + "@docusaurus/preset-classic", + { + docs: { + sidebarPath: require.resolve("./sidebars.js"), + editUrl: githubURL + "/edit/master/docs/", + }, + theme: { + customCss: require.resolve("./src/css/custom.css"), + }, + }, ], + ], + plugins: [ + "@docusaurus/plugin-google-analytics", + "@docusaurus/plugin-google-gtag", + "@docusaurus/plugin-sitemap", + ], }; diff --git a/docs/package.json b/docs/package.json index d61019e..bb52565 100755 --- a/docs/package.json +++ b/docs/package.json @@ -16,7 +16,6 @@ "prismjs": "^1.19.0", "prop-types": "^15.7.2", "react": "^16.8.4", - "react-dark-mode-toggle": "^0.0.3", "react-dom": "^16.8.4", "use-media": "^1.4.0" }, diff --git a/docs/src/components/ColorModeToggle/Moon.js b/docs/src/components/ColorModeToggle/Moon.js new file mode 100644 index 0000000..cbb86f4 --- /dev/null +++ b/docs/src/components/ColorModeToggle/Moon.js @@ -0,0 +1,23 @@ +import * as React from "react"; + +export const Moon = ({ color, size = "1.5rem", ...props }) => ( + + + +); diff --git a/docs/src/components/ColorModeToggle/Sun.js b/docs/src/components/ColorModeToggle/Sun.js new file mode 100644 index 0000000..f2c0231 --- /dev/null +++ b/docs/src/components/ColorModeToggle/Sun.js @@ -0,0 +1,21 @@ +import * as React from "react"; + +export const Sun = ({ color, size = "1.5rem", ...props }) => ( + + + +); diff --git a/docs/src/components/ColorModeToggle/index.js b/docs/src/components/ColorModeToggle/index.js new file mode 100644 index 0000000..dd698a8 --- /dev/null +++ b/docs/src/components/ColorModeToggle/index.js @@ -0,0 +1,30 @@ +import * as React from "react"; +import classnames from "classnames"; +import { Sun } from "./Sun"; +import { Moon } from "./Moon"; +import styles from "./styles.module.css"; + +const iconMap = { true: Moon, false: Sun }; + +export const ColorModeToggle = ({ isDark, toggle, ...props }) => { + const Icon = iconMap[isDark]; + const handleToggle = () => { + if (isDark) { + return toggle(false); + } else { + return toggle(true); + } + }; + const label = `${isDark ? "Hurt" : "Rest"} your eyes`; + return ( + + ); +}; diff --git a/docs/src/components/ColorModeToggle/styles.module.css b/docs/src/components/ColorModeToggle/styles.module.css new file mode 100644 index 0000000..d7a3d90 --- /dev/null +++ b/docs/src/components/ColorModeToggle/styles.module.css @@ -0,0 +1,40 @@ +.colorModeToggle { + color: var(--ifm-color-black); + box-sizing: border-box; + background-color: transparent; + border-radius: var(--ifm-button-border-radius); + border: 1px solid transparent; + transition: color var(--ifm-button-transition-duration) + cubic-bezier(0.08, 0.52, 0.52, 1), + background var(--ifm-button-transition-duration) + cubic-bezier(0.08, 0.52, 0.52, 1), + border-color var(--ifm-button-transition-duration) + cubic-bezier(0.08, 0.52, 0.52, 1); + cursor: pointer; + display: inline-flex; + font-size: calc(0.875rem * var(--ifm-button-size-multiplier)); + line-height: 1.5; + outline: 0; + text-align: center; + text-decoration: none; + user-select: none; + vertical-align: middle; + white-space: nowrap; + padding: 6px 12px; + margin-left: 0.5rem; + margin-right: 0.5rem; +} + +.colorModeToggle:hover { + border: 1px solid var(--ifm-color-black); + color: var(--ifm-color-gray-700); +} + +html[data-theme="dark"] .colorModeToggle { + color: var(--ifm-color-white); +} + +html[data-theme="dark"] .colorModeToggle:hover { + border: 1px solid var(--ifm-color-gray-500); + color: var(--ifm-color-gray-500); +} diff --git a/docs/src/components/GithubButton/index.js b/docs/src/components/GithubButton/index.js new file mode 100644 index 0000000..12acc40 --- /dev/null +++ b/docs/src/components/GithubButton/index.js @@ -0,0 +1,45 @@ +import * as React from "react"; +import classnames from "classnames"; +import useThemeContext from "@theme/hooks/useThemeContext"; + +import styles from "./styles.module.css"; + +const Icon = ({ color, size = "1.5rem", ...props }) => ( + + + +); + +export const GithubButton = ({ href, ...props }) => { + const { isDarkTheme } = useThemeContext(); + return ( + + + + ); +}; diff --git a/docs/src/components/GithubButton/styles.module.css b/docs/src/components/GithubButton/styles.module.css new file mode 100644 index 0000000..f9494d9 --- /dev/null +++ b/docs/src/components/GithubButton/styles.module.css @@ -0,0 +1,46 @@ +/* @media screen and (max-width: 997px) { + .githubButton { + display: none !important; + } +} */ + +.githubButton { + color: var(--ifm-color-black); + box-sizing: border-box; + background-color: transparent; + border-radius: var(--ifm-button-border-radius); + border: 1px solid transparent; + transition: color var(--ifm-button-transition-duration) + cubic-bezier(0.08, 0.52, 0.52, 1), + background var(--ifm-button-transition-duration) + cubic-bezier(0.08, 0.52, 0.52, 1), + border-color var(--ifm-button-transition-duration) + cubic-bezier(0.08, 0.52, 0.52, 1); + cursor: pointer; + display: inline-flex; + font-size: calc(0.875rem * var(--ifm-button-size-multiplier)); + line-height: 1.5; + outline: 0; + text-align: center; + text-decoration: none; + user-select: none; + vertical-align: middle; + white-space: nowrap; + padding: 6px 12px; + margin-left: 0.5rem; + margin-right: 0.5rem; +} + +.githubButton:hover { + border: 1px solid var(--ifm-color-black); + color: var(--ifm-color-gray-700); +} + +html[data-theme="dark"] .githubButton { + color: var(--ifm-color-white); +} + +html[data-theme="dark"] .githubButton:hover { + border: 1px solid var(--ifm-color-gray-500); + color: var(--ifm-color-gray-500); +} diff --git a/docs/src/components/Logo.js b/docs/src/components/Logo.js index db35706..f1966a0 100644 --- a/docs/src/components/Logo.js +++ b/docs/src/components/Logo.js @@ -1,18 +1,18 @@ -import React from "react"; +import * as React from "react"; -export default ({ color = "#ff5e5b", size = 32, className }) => ( - - - ( + + + ( c-25,188-25,664,0,840c3,17,7,53,10,80c29,264,110,602,211,880c292,808,844,1513,1560,1993c194,130,481,286,654,356 c36,15,74,31,85,36c110,52,496,172,662,205c133,27,269,49,374,61c30,3,65,8,79,10s86,7,160,10c74,4,136,8,138,9 C4972,9128,5212,9122,5336,9116z" - /> - - - - + /> + + ); diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index f6cc9d8..1835ab3 100755 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -10,13 +10,6 @@ :root { --ifm-font-size-sm: 12px; - /* --ifm-color-secondary: #314cb6; - --ifm-color-secondary-dark: #2c44a4; - --ifm-color-secondary-darker: #2a419b; - --ifm-color-secondary-darkest: #22357f; - --ifm-color-secondary-light: #3654c8; - --ifm-color-secondary-lighter: #3e5bcb; - --ifm-color-secondary-lightest: #5a72d3; */ --ifm-color-secondary: #69a2b0; --ifm-color-secondary-dark: #5796a6; --ifm-color-secondary-darker: #528e9c; @@ -125,6 +118,31 @@ h6 code { color: var(--ifm-color-primary); } +a { + color: var(--ifm-color-secondary); +} +.contents a.contents__link--active[class] { + color: var(--ifm-color-secondary); + font-weight: bold; +} + +a:hover { + color: var(--ifm-color-secondary-darker); +} + +html[data-theme="dark"] a { + color: var(--ifm-color-primary); +} + +html[data-theme="dark"] .contents a.contents__link--active[class] { + color: var(--ifm-color-primary); + font-weight: bold; +} + +html[data-theme="dark"] a:hover { + color: var(--ifm-color-primary-light); +} + @media screen and (max-width: 997px) { .col.footer__col[class][class] { text-align: left; diff --git a/docs/src/pages/demo.js b/docs/src/pages/demo.js new file mode 100644 index 0000000..2d28f87 --- /dev/null +++ b/docs/src/pages/demo.js @@ -0,0 +1,62 @@ +import * as React from "react"; +import classnames from "classnames"; +import Layout from "@theme/Layout"; +import Link from "@docusaurus/Link"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import styles from "./styles.module.css"; + +function Demo() { + return ( + +
+
+

+ Coming Soon! +

+

+ hyperglass 1.0 is still + in progress, but the demo will be made available soon. +

+
+ + Back to the Docs + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + ); +} + +export default Demo; diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index 7daae8e..af5e481 100644 --- a/docs/src/pages/index.js +++ b/docs/src/pages/index.js @@ -6,79 +6,85 @@ import useBaseUrl from "@docusaurus/useBaseUrl"; import styles from "./styles.module.css"; function Home() { - return ( - -
-
-

hyperglass

-

- the network looking glass that - tries to - make the internet better. -

-
- - Get a looking glass - - - Why hyperglass? - -
-
-
-
+ return ( + +
+
+

+ hyperglass +

+

+ the network looking glass{" "} + that tries to + + {" "} + make the internet better + + . +

+
+ + Get your looking glass + + + Why hyperglass? + +
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
-
- - ); + +
+ + + +
+ + ); } export default Home; diff --git a/docs/src/pages/screenshots.js b/docs/src/pages/screenshots.js new file mode 100644 index 0000000..1730a97 --- /dev/null +++ b/docs/src/pages/screenshots.js @@ -0,0 +1,66 @@ +import * as React from "react"; +import classnames from "classnames"; +import Layout from "@theme/Layout"; +import Link from "@docusaurus/Link"; +import useBaseUrl from "@docusaurus/useBaseUrl"; +import styles from "./styles.module.css"; + +function Screenshots() { + return ( + +
+
+

+ Coming Soon! +

+

+ hyperglass 1.0 is still + in progress, so screenshots may not be made available until shortly + before the release. +

+
+ + Back to the Docs + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + ); +} + +export default Screenshots; diff --git a/docs/src/theme/Navbar/index.js b/docs/src/theme/Navbar/index.js index 605b670..f7bb795 100644 --- a/docs/src/theme/Navbar/index.js +++ b/docs/src/theme/Navbar/index.js @@ -6,249 +6,246 @@ */ import React, { useCallback, useState } from "react"; +import classnames from "classnames"; import Link from "@docusaurus/Link"; import { useLocation } from "react-router-dom"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; import useBaseUrl from "@docusaurus/useBaseUrl"; - import SearchBar from "@theme/SearchBar"; -import Toggle from "@theme/Toggle"; - -import classnames from "classnames"; - import useThemeContext from "@theme/hooks/useThemeContext"; import useHideableNavbar from "@theme/hooks/useHideableNavbar"; import useLockBodyScroll from "@theme/hooks/useLockBodyScroll"; -import DarkModeToggle from "react-dark-mode-toggle"; import useMedia from "use-media"; +import { ColorModeToggle } from "../../components/ColorModeToggle"; +import { GithubButton } from "../../components/GithubButton"; import Logo from "../../components/Logo"; import styles from "./styles.module.css"; function NavLink({ to, href, label, position, ...props }) { - const toUrl = useBaseUrl(to); - return ( - - {label} - - ); + const toUrl = useBaseUrl(to); + return ( + + {label} + + ); } const logoColor = { true: "#ff5e5b", false: "#000" }; function Navbar() { - const context = useDocusaurusContext(); - const { siteConfig = {} } = context; - const { baseUrl, themeConfig = {} } = siteConfig; - const { navbar = {}, disableDarkMode = false } = themeConfig; - const { title, logo = {}, links = [], hideOnScroll = false } = navbar; + const context = useDocusaurusContext(); + const { siteConfig = {} } = context; + const { baseUrl, themeConfig = {} } = siteConfig; + const { navbar = {}, disableDarkMode = false } = themeConfig; + const { title, logo = {}, links = [], hideOnScroll = false } = navbar; - const [sidebarShown, setSidebarShown] = useState(false); - const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false); - const { pathname } = useLocation(); + const [sidebarShown, setSidebarShown] = useState(false); + const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false); + const { pathname } = useLocation(); - const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext(); - const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll); + const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext(); + const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll); - const isMobile = useMedia({ maxWidth: 997 }); + const isMobile = useMedia({ maxWidth: 997 }); - useLockBodyScroll(sidebarShown); + useLockBodyScroll(sidebarShown); - const showSidebar = useCallback(() => { - setSidebarShown(true); - }, [setSidebarShown]); - const hideSidebar = useCallback(() => { - setSidebarShown(false); - }, [setSidebarShown]); + const showSidebar = useCallback(() => { + setSidebarShown(true); + }, [setSidebarShown]); + const hideSidebar = useCallback(() => { + setSidebarShown(false); + }, [setSidebarShown]); - const onToggleChange = (checked) => { - checked ? setDarkTheme() : setLightTheme(); - }; + const onToggleChange = (checked) => { + checked ? setDarkTheme() : setLightTheme(); + }; - const logoLink = logo.href || baseUrl; - const isExternalLogoLink = /http/.test(logoLink); - const logoLinkProps = isExternalLogoLink - ? { - rel: "noopener noreferrer", - target: "_blank", - } - : null; - const logoSrc = logo.srcDark && isDarkTheme ? logo.srcDark : logo.src; + const logoLink = logo.href || baseUrl; + const isExternalLogoLink = /http/.test(logoLink); + const logoLinkProps = isExternalLogoLink + ? { + rel: "noopener noreferrer", + target: "_blank", + } + : null; + const logoSrc = logo.srcDark && isDarkTheme ? logo.srcDark : logo.src; - // const logoColor = isDarkTheme ? "#ff5e5b" : "#000"; - - return ( - - ); + {title} + + )} + + )} +
+ + Menu + + +
+ {links + .filter((linkItem) => linkItem.position !== "right") + .map((linkItem, i) => ( + + ))} + +
+ {isMobile && ( + + + {title != null && ( + + {title} + + )} + + )} + + {!isMobile && ( + + )} + + {!disableDarkMode && !isMobile && ( + + )} + {!isMobile && ( + + )} +
+ +
+
+
+ + + {title != null && ( + + {title} + + )} + + {sidebarShown && ( + + )} + {!disableDarkMode && sidebarShown && ( + + )} +
+
+
+
    + {links.map((linkItem, i) => ( +
  • + +
    • + ))} +
    + +
+
+
+
+ + ); } export default Navbar; diff --git a/docs/src/theme/Navbar/styles.module.css b/docs/src/theme/Navbar/styles.module.css index 6a12929..92fdd57 100644 --- a/docs/src/theme/Navbar/styles.module.css +++ b/docs/src/theme/Navbar/styles.module.css @@ -1,76 +1,76 @@ @media screen and (max-width: 997px) { - .displayOnlyInLargeViewport { - display: none !important; - } + .displayOnlyInLargeViewport { + display: none !important; + } } @media (max-width: 360px) { - .hideLogoText { - display: none; - } + .hideLogoText { + display: none; + } } .navbarHideable { - transition: top 0.2s ease-in-out; + transition: top 0.2s ease-in-out; } .navbarHidden { - top: calc(var(--ifm-navbar-height) * -1) !important; + top: calc(var(--ifm-navbar-height) * -1) !important; } .navbarItems { - justify-content: flex-start; + justify-content: flex-start; } .navbarItemsRight[class] { - flex: 0 0; + flex: 0 0; } .navLink[class] { - position: relative; - margin-left: 2rem; - margin-right: 2rem; + position: relative; + margin-left: 2rem; + margin-right: 2rem; } .navLink[class]:hover { - color: var(--ifm-color-white); + color: var(--ifm-color-white); } html[data-theme="dark"] .navLink[class]:hover { - color: var(--ifm-color-secondary); + color: var(--ifm-color-secondary); } .navLink[class]:global(.navbar__link--active) { - color: inherit; - font-weight: bold; + color: inherit; + font-weight: bold; } .navLink[class]:global(.navbar__link--active)::after { - position: absolute; - left: 0; - width: 100%; - height: 1px; - background: var(--ifm-color-content); - content: ""; - transition: width 0.5s, opacity 0.5s, transform 0.5s; - transform: translateY(-6px); + position: absolute; + left: 0; + width: 100%; + height: 1px; + background: var(--ifm-color-content); + content: ""; + transition: width 0.5s, opacity 0.5s, transform 0.5s; + transform: translateY(-6px); } .toggle { - margin-right: 20px; + margin-right: 20px; } .navbarMain { - background-color: var(--ifm-background-color); - box-shadow: none; + background-color: var(--ifm-background-color); + box-shadow: none; } .logo { - margin: 4px; + margin: 4px; } html[data-theme="dark"] .navbarOther { - background-color: var(--ifm-background-color); + background-color: var(--ifm-background-color); } .navbarOther { - background-color: var(--ifm-color-white); + background-color: var(--ifm-color-white); } diff --git a/docs/src/theme/SearchBar/index.js b/docs/src/theme/SearchBar/index.js index 3c9bd3b..027b3fc 100644 --- a/docs/src/theme/SearchBar/index.js +++ b/docs/src/theme/SearchBar/index.js @@ -5,20 +5,20 @@ * LICENSE file in the root directory of this source tree. */ -import React, {useState, useRef, useCallback} from 'react'; -import classnames from 'classnames'; +import React, { useState, useRef, useCallback } from "react"; +import classnames from "classnames"; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import {useHistory} from '@docusaurus/router'; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import { useHistory } from "@docusaurus/router"; -import './styles.css'; +import "./styles.css"; -const Search = props => { +const Search = ({ handleSearchBarToggle, isSearchBarExpanded, ...props }) => { const [algoliaLoaded, setAlgoliaLoaded] = useState(false); const searchBarRef = useRef(null); - const {siteConfig = {}} = useDocusaurusContext(); + const { siteConfig = {} } = useDocusaurusContext(); const { - themeConfig: {algolia}, + themeConfig: { algolia }, } = siteConfig; const history = useHistory(); @@ -27,14 +27,14 @@ const Search = props => { appId: algolia.appId, apiKey: algolia.apiKey, indexName: algolia.indexName, - inputSelector: '#search_input_react', + inputSelector: "#search_input_react", algoliaOptions: algolia.algoliaOptions, // Override algolia's default selection event, allowing us to do client-side // navigation and avoiding a full page refresh. handleSelected: (_input, _event, suggestion) => { // Use an anchor tag to parse the absolute url into a relative url // Alternatively, we can use new URL(suggestion.url) but its not supported in IE - const a = document.createElement('a'); + const a = document.createElement("a"); a.href = suggestion.url; // Algolia use closest parent element id #__docusaurus when a h1 page title does not have an id @@ -57,12 +57,12 @@ const Search = props => { return; } - Promise.all([import('docsearch.js'), import('./algolia.css')]).then( - ([{default: docsearch}]) => { + Promise.all([import("docsearch.js"), import("./algolia.css")]).then( + ([{ default: docsearch }]) => { setAlgoliaLoaded(true); window.docsearch = docsearch; initAlgolia(focus); - }, + } ); }; @@ -73,26 +73,26 @@ const Search = props => { searchBarRef.current.focus(); } - props.handleSearchBarToggle(!props.isSearchBarExpanded); - }, [props.isSearchBarExpanded]); + handleSearchBarToggle(!isSearchBarExpanded); + }, [isSearchBarExpanded]); const handleSearchInputBlur = useCallback(() => { - props.handleSearchBarToggle(!props.isSearchBarExpanded); - }, [props.isSearchBarExpanded]); + handleSearchBarToggle(!isSearchBarExpanded); + }, [isSearchBarExpanded]); - const handleSearchInput = useCallback(e => { - const needFocus = e.type !== 'mouseover'; + const handleSearchInput = useCallback((e) => { + const needFocus = e.type !== "mouseover"; loadAlgolia(needFocus); }); return ( -
+
{ placeholder="Search" aria-label="Search" className={classnames( - 'navbar__search-input', - {'search-bar-expanded': props.isSearchBarExpanded}, - {'search-bar': !props.isSearchBarExpanded}, + "navbar__search-input", + { "search-bar-expanded": isSearchBarExpanded }, + { "search-bar": !isSearchBarExpanded } )} onMouseOver={handleSearchInput} onFocus={handleSearchInput} diff --git a/docs/yarn.lock b/docs/yarn.lock index df214ca..e3ee57c 100644 --- a/docs/yarn.lock +++ b/docs/yarn.lock @@ -1807,14 +1807,6 @@ babel-plugin-extract-import-names@^1.5.8: dependencies: "@babel/helper-plugin-utils" "7.8.3" -babel-runtime@^6.26.0: - version "6.26.0" - resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" - integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4= - dependencies: - core-js "^2.4.0" - regenerator-runtime "^0.11.0" - bail@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776" @@ -2650,7 +2642,7 @@ core-js-compat@^3.6.2: browserslist "^4.8.5" semver "7.0.0" -core-js@^2.4.0, core-js@^2.6.5: +core-js@^2.6.5: version "2.6.11" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c" integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg== @@ -5404,24 +5396,6 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3 dependencies: js-tokens "^3.0.0 || ^4.0.0" -lottie-api@bodymovin/lottie-api#master: - version "1.0.3" - resolved "https://codeload.github.com/bodymovin/lottie-api/tar.gz/3878f3acb1466a012553a08b929a12b11937c855" - -lottie-react-web@^2.1.4: - version "2.1.4" - resolved "https://registry.yarnpkg.com/lottie-react-web/-/lottie-react-web-2.1.4.tgz#3159b4600b6baa858175a1c97daa595f85903d6e" - integrity sha512-/wcAxckdTo1uKUgv3hvUktDeeTQByNdRda+1iBQcteV3PyaIikCV0LleSOkBJccYA+v0mM/OZvoSbmQdWxt4+w== - dependencies: - babel-runtime "^6.26.0" - lottie-api bodymovin/lottie-api#master - lottie-web "^5.2.1" - -lottie-web@^5.2.1: - version "5.6.8" - resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.6.8.tgz#4e19c4985076368ace3e2140ba599fdc4d927c52" - integrity sha512-2b7KDEIzpp3Y+u9BtFMHBkUFWe6TFgVdYvXvpfmbbxAL9XiwHUywAoWH1GhCCMmGqWqkxw8v4IxnOq/3hiOtJg== - lower-case@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7" @@ -7303,13 +7277,6 @@ raw-body@2.4.0: iconv-lite "0.4.24" unpipe "1.0.0" -react-dark-mode-toggle@^0.0.3: - version "0.0.3" - resolved "https://registry.yarnpkg.com/react-dark-mode-toggle/-/react-dark-mode-toggle-0.0.3.tgz#9725357c19674fca93a7e00b9126d474b50d8126" - integrity sha512-DMdd/ClnVs+i0iV5u0UdLwUHHbUzg2TQCqQB9HFypftfo+S5MU6jtFzqo6gDGl8kIISYqMDAkdmw6nszAUQs7w== - dependencies: - lottie-react-web "^2.1.4" - react-dev-utils@^10.2.1: version "10.2.1" resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19" @@ -7515,11 +7482,6 @@ regenerate@^1.4.0: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11" integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg== -regenerator-runtime@^0.11.0: - version "0.11.1" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" - integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== - regenerator-runtime@^0.13.4: version "0.13.5" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"