-
-
- This site is currently under construction -
-
- {features.map((props, idx) => (
-
+
);
diff --git a/docs/src/pages/styles.module.css b/docs/src/pages/styles.module.css
old mode 100755
new mode 100644
index 4d6f613..984a396
--- a/docs/src/pages/styles.module.css
+++ b/docs/src/pages/styles.module.css
@@ -1,46 +1,69 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
/**
* CSS files with the .module.css suffix will be treated as CSS modules
* and scoped locally.
*/
-
-.heroBanner[class] {
- padding: 4rem 0;
+.heroBanner {
+ /* background-color: var(--neutron-color-dark); */
+ background-color: var(--ifm-background-color);
+ color: var(--neutron-color-lighter);
+ padding: 128px;
text-align: center;
position: relative;
overflow: hidden;
}
+.title[class] {
+ font-weight: 200;
+ font-size: 4rem;
+}
+
+.subTitle[class] {
+ font-weight: 200;
+ font-size: 2rem;
+ padding: 24px;
+}
+
+.getStarted {
+ color: unset !important;
+ font-size: 24px;
+ padding: 16px 36px;
+}
+
+.getStarted:hover {
+ color: unset !important;
+}
+
+.buttons {
+ margin-top: 4vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.content {
+ align-items: center;
+ display: flex;
+ padding: 36px 0;
+ width: 100%;
+}
+
@media screen and (max-width: 966px) {
.heroBanner {
padding: 2rem;
}
+
+ .title {
+ font-size: 2.5rem !important;
+ }
}
-.buttons {
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.features {
- display: flex;
- align-items: center;
- padding: 2rem 0;
- width: 100%;
-}
-
-.featureImage {
- height: 200px;
- width: 200px;
-}
-
-.getStarted[class][class]:not(.button--active):not(:hover) {
- color: white;
- border-color: white;
-}
-
-.getStarted[class]:hover {
- background-color: var(--ifm-color-secondary);
- color: white;
- border-color: none;
+.tag {
+ color: var(--ifm-color-primary);
}
diff --git a/docs/src/theme/CodeBlock/index.js b/docs/src/theme/CodeBlock/index.js
new file mode 100755
index 0000000..33c74a9
--- /dev/null
+++ b/docs/src/theme/CodeBlock/index.js
@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, { useEffect, useState, useRef } from "react";
+import classnames from "classnames";
+import Highlight, { defaultProps } from "prism-react-renderer";
+import Prism from "prism-react-renderer/prism";
+import defaultTheme from "prism-react-renderer/themes/dracula";
+import Clipboard from "clipboard";
+import rangeParser from "parse-numeric-range";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import styles from "./styles.module.css";
+
+const highlightLinesRangeRegex = /{([\d,-]+)}/;
+
+export default ({ children, className: languageClassName, metastring }) => {
+ (typeof global !== "undefined" ? global : window).Prism = Prism;
+ require("prismjs/components/prism-shell-session");
+ require("prismjs/components/prism-yaml");
+ const {
+ siteConfig: {
+ themeConfig: { prism = {} }
+ }
+ } = useDocusaurusContext();
+ const [showCopied, setShowCopied] = useState(false);
+ const target = useRef(null);
+ const button = useRef(null);
+ let highlightLines = [];
+
+ if (metastring && highlightLinesRangeRegex.test(metastring)) {
+ const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
+ highlightLines = rangeParser.parse(highlightLinesRange).filter(n => n > 0);
+ }
+
+ useEffect(() => {
+ let clipboard;
+
+ if (button.current) {
+ clipboard = new Clipboard(button.current, {
+ target: () => target.current
+ });
+ }
+
+ return () => {
+ if (clipboard) {
+ clipboard.destroy();
+ }
+ };
+ }, [button.current, target.current]);
+
+ let language = languageClassName && languageClassName.replace(/language-/, "");
+
+ if (!language && prism.defaultLanguage) {
+ language = prism.defaultLanguage;
+ }
+
+ const handleCopyCode = () => {
+ window.getSelection().empty();
+ setShowCopied(true);
+
+ setTimeout(() => setShowCopied(false), 2000);
+ };
+
+ return (
+
+ {({ className, style, tokens, getLineProps, getTokenProps }) => (
+
+ );
+};
diff --git a/docs/src/theme/CodeBlock/styles.module.css b/docs/src/theme/CodeBlock/styles.module.css
new file mode 100755
index 0000000..83c9e16
--- /dev/null
+++ b/docs/src/theme/CodeBlock/styles.module.css
@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) 2017-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.codeBlock {
+ margin-bottom: 0;
+ overflow: hidden;
+ overflow-wrap: break-word;
+ white-space: pre-wrap;
+}
+
+.codeBlockWrapper {
+ position: relative;
+}
+
+.codeBlockWrapper:hover > .copyButton {
+ visibility: visible;
+ opacity: 1;
+}
+
+.copyButton {
+ background: rgb(1, 22, 39);
+ border: 1px solid rgb(214, 222, 235);
+ border-radius: var(--ifm-global-radius);
+ color: rgb(214, 222, 235);
+ cursor: pointer;
+ line-height: 12px;
+ opacity: 0;
+ outline: none;
+ padding: 4px 8px;
+ position: absolute;
+ right: var(--ifm-pre-padding);
+ top: var(--ifm-pre-padding);
+ visibility: hidden;
+ transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out,
+ bottom 200ms ease-in-out;
+}
diff --git a/docs/src/theme/Navbar/index.js b/docs/src/theme/Navbar/index.js
index 5b6aa8e..a3bce1e 100644
--- a/docs/src/theme/Navbar/index.js
+++ b/docs/src/theme/Navbar/index.js
@@ -16,8 +16,9 @@ import Toggle from "@theme/Toggle";
import classnames from "classnames";
-import useTheme from "@theme/hooks/useTheme";
+import useThemeContext from "@theme/hooks/useThemeContext";
import useHideableNavbar from "@theme/hooks/useHideableNavbar";
+import useLockBodyScroll from "@theme/hooks/useLockBodyScroll";
import Logo from "../../components/Logo";
import styles from "./styles.module.css";
@@ -50,26 +51,39 @@ function Navbar() {
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 [theme, setTheme] = useTheme();
const { pathname } = useLocation();
+ const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext();
const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
+ useLockBodyScroll(sidebarShown);
+
const showSidebar = useCallback(() => {
- document.body.style.overflow = "hidden";
setSidebarShown(true);
}, [setSidebarShown]);
const hideSidebar = useCallback(() => {
- document.body.style.overflow = "visible";
setSidebarShown(false);
}, [setSidebarShown]);
- const onToggleChange = useCallback(e => setTheme(e.target.checked ? "dark" : ""), [setTheme]);
+ const onToggleChange = useCallback(e => (e.target.checked ? setDarkTheme() : setLightTheme()), [
+ setLightTheme,
+ setDarkTheme
+ ]);
+
+ 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 logoImageUrl = useBaseUrl(logoSrc);
- const logoUrl = useBaseUrl(logo.src);
- const logoDark = useBaseUrl(logo.dark);
return (
))}
-
+
+
+
-
- )}
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {tokens.map((line, i) => {
+ const lineProps = getLineProps({ line, key: i });
+
+ if (highlightLines.includes(i + 1)) {
+ lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
+ }
+
+ return (
+
+ {line.map((token, key) => (
+
+ ))}
+
+ );
+ })}
+
+ {/* */}
+
+
{!disableDarkMode && (
- )}
- {logoDark != null && (
- 
)}
+