+
+
+
+
+ );
}
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 (
-
+ );
}
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"