mirror of
https://github.com/thatmattlove/hyperglass.git
synced 2026-01-17 08:48:05 +00:00
Update docs framework
This commit is contained in:
checktheroads
parent
abd192250c
commit
1aa08ccae8
38 changed files with 3977 additions and 7453 deletions
3
docs/.gitignore
vendored
3
docs/.gitignore
vendored
|
|
@ -1,3 +1,6 @@
|
||||||
|
# Project
|
||||||
|
theme-og
|
||||||
|
|
||||||
# Dependencies
|
# Dependencies
|
||||||
/node_modules
|
/node_modules
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@ description: Welcome to hyperglass
|
||||||
|
|
||||||
import Link from "@docusaurus/Link";
|
import Link from "@docusaurus/Link";
|
||||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||||
import classnames from "classnames";
|
import clsx from "clsx";
|
||||||
import styles from "./styles.module.css";
|
import styles from "./styles.module.css";
|
||||||
|
|
||||||
## What is hyperglass?
|
## What is hyperglass?
|
||||||
|
|
@ -44,7 +44,7 @@ hyperglass was created with the lofty goal of benefiting the internet community
|
||||||
- Browser-based DNS-over-HTTPS resolution of FQDN queries
|
- Browser-based DNS-over-HTTPS resolution of FQDN queries
|
||||||
|
|
||||||
<Link
|
<Link
|
||||||
className={classnames(
|
className={clsx(
|
||||||
"button button--outline button--secondary button--lg",
|
"button button--outline button--secondary button--lg",
|
||||||
styles.getStarted
|
styles.getStarted
|
||||||
)}
|
)}
|
||||||
|
|
|
||||||
|
|
@ -20,15 +20,23 @@ const docusaurusConfig = {
|
||||||
apiKey: algoliaKey || "dev",
|
apiKey: algoliaKey || "dev",
|
||||||
indexName: "hyperglass",
|
indexName: "hyperglass",
|
||||||
},
|
},
|
||||||
|
prism: {
|
||||||
|
additionalLanguages: ["shell-session", "ini", "nginx", "yaml"],
|
||||||
|
theme: require("./src/prism-dracula"),
|
||||||
|
},
|
||||||
navbar: {
|
navbar: {
|
||||||
links: [
|
items: [
|
||||||
{ to: "docs/introduction", label: "Docs", position: "left" },
|
{ to: "docs/introduction", label: "Docs", position: "left" },
|
||||||
{ to: "screenshots", label: "Screenshots", position: "left" },
|
|
||||||
{ href: "https://demo.hyperglass.io", label: "Demo", position: "left" },
|
{ href: "https://demo.hyperglass.io", label: "Demo", position: "left" },
|
||||||
|
{
|
||||||
|
href: githubURL,
|
||||||
|
position: "right",
|
||||||
|
className: "header-github-link",
|
||||||
|
"aria-label": "GitHub Repository",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
footer: {
|
footer: {
|
||||||
style: "dark",
|
|
||||||
links: [
|
links: [
|
||||||
{
|
{
|
||||||
title: "Docs",
|
title: "Docs",
|
||||||
|
|
@ -50,18 +58,14 @@ const docusaurusConfig = {
|
||||||
{
|
{
|
||||||
title: "Community",
|
title: "Community",
|
||||||
items: [
|
items: [
|
||||||
|
{
|
||||||
|
label: "Slack",
|
||||||
|
href: "https://netdev.chat",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
label: "Telegram",
|
label: "Telegram",
|
||||||
href: "https://t.me/hyperglasslg",
|
href: "https://t.me/hyperglasslg",
|
||||||
},
|
},
|
||||||
{
|
|
||||||
label: "Gitter",
|
|
||||||
href: "https://gitter.im/hyperglass",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: "Keybase",
|
|
||||||
href: "https://keybase.io/team/hyperglass",
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
@ -89,7 +93,7 @@ const docusaurusConfig = {
|
||||||
editUrl: githubURL + "/edit/v1.0.0/docs/",
|
editUrl: githubURL + "/edit/v1.0.0/docs/",
|
||||||
},
|
},
|
||||||
theme: {
|
theme: {
|
||||||
customCss: require.resolve("./src/css/custom.css"),
|
customCss: [require.resolve("./src/css/custom.css")],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|
|
||||||
|
|
@ -1,22 +1,30 @@
|
||||||
{
|
{
|
||||||
"name": "docs",
|
"name": "hyperglass-docs",
|
||||||
"version": "0.0.0",
|
"version": "1.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
"docusaurus": "docusaurus",
|
||||||
"start": "docusaurus start",
|
"start": "docusaurus start",
|
||||||
"build": "docusaurus build",
|
"build": "docusaurus build",
|
||||||
"swizzle": "docusaurus swizzle",
|
"swizzle": "docusaurus swizzle",
|
||||||
"deploy": "docusaurus deploy"
|
"deploy": "docusaurus deploy",
|
||||||
|
"clear": "docusaurus clear",
|
||||||
|
"serve": "docusaurus serve",
|
||||||
|
"write-translations": "docusaurus write-translations",
|
||||||
|
"write-heading-ids": "docusaurus write-heading-ids"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@docusaurus/core": "^2.0.0-alpha.58",
|
"@docusaurus/core": "^2.0.0-beta.0",
|
||||||
"@docusaurus/preset-classic": "^2.0.0-alpha.58",
|
"@docusaurus/preset-classic": "^2.0.0-beta.0",
|
||||||
"classnames": "^2.2.6",
|
"@mdx-js/react": "^1.6.22",
|
||||||
|
"@svgr/webpack": "^5.5.0",
|
||||||
|
"clsx": "^1.1.1",
|
||||||
"globby": "^11.0.1",
|
"globby": "^11.0.1",
|
||||||
"prismjs": "^1.19.0",
|
"prismjs": "^1.19.0",
|
||||||
"prop-types": "^15.7.2",
|
"prop-types": "^15.7.2",
|
||||||
"react": "^16.8.4",
|
"react": "^17.0.2",
|
||||||
"react-dom": "^16.8.4",
|
"react-dom": "^17.0.2",
|
||||||
|
"url-loader": "^4.1.1",
|
||||||
"use-media": "^1.4.0"
|
"use-media": "^1.4.0"
|
||||||
},
|
},
|
||||||
"browserslist": {
|
"browserslist": {
|
||||||
|
|
@ -32,7 +40,13 @@
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"prettier": "^2.0.5"
|
"@docusaurus/module-type-aliases": "^2.0.0-beta.0",
|
||||||
|
"@tsconfig/docusaurus": "^1.0.2",
|
||||||
|
"@types/react": "^17.0.8",
|
||||||
|
"@types/react-helmet": "^6.1.1",
|
||||||
|
"@types/react-router-dom": "^5.1.7",
|
||||||
|
"prettier": "^2.0.5",
|
||||||
|
"typescript": "^4.3.2"
|
||||||
},
|
},
|
||||||
"prettier": {
|
"prettier": {
|
||||||
"[yaml]": {
|
"[yaml]": {
|
||||||
|
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
|
|
||||||
export const Moon = ({ color, size = "1.5rem", ...props }) => (
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
style={{
|
|
||||||
height: size,
|
|
||||||
width: size,
|
|
||||||
}}
|
|
||||||
strokeWidth={0}
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="currentColor"
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M14.53 10.53a7 7 0 01-9.058-9.058A7.003 7.003 0 008 15a7.002 7.002 0 006.53-4.47z"
|
|
||||||
fill={color || "currentColor"}
|
|
||||||
fillRule="evenodd"
|
|
||||||
clipRule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
@ -1,21 +0,0 @@
|
||||||
import * as React from "react";
|
|
||||||
|
|
||||||
export const Sun = ({ color, size = "1.5rem", ...props }) => (
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 512 512"
|
|
||||||
style={{
|
|
||||||
height: size,
|
|
||||||
width: size,
|
|
||||||
}}
|
|
||||||
strokeWidth={0}
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="currentColor"
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M256 32a224 224 0 00-161.393 69.035h323.045A224 224 0 00256 32zM79.148 118.965a224 224 0 00-16.976 25.16H449.74a224 224 0 00-16.699-25.16H79.148zm-27.222 45.16A224 224 0 0043.3 186.25h425.271a224 224 0 00-8.586-22.125H51.926zM36.783 210.25a224 224 0 00-3.02 19.125h444.368a224 224 0 00-3.113-19.125H36.783zm-4.752 45.125A224 224 0 0032 256a224 224 0 00.64 16.5h446.534A224 224 0 00480 256a224 224 0 00-.021-.625H32.03zm4.67 45.125a224 224 0 003.395 15.125h431.578a224 224 0 003.861-15.125H36.701zm14.307 45.125a224 224 0 006.017 13.125H454.82a224 224 0 006.342-13.125H51.008zm26.316 45.125a224 224 0 009.04 11.125H425.86a224 224 0 008.727-11.125H77.324zm45.62 45.125A224 224 0 00136.247 445h239.89a224 224 0 0012.936-9.125h-266.13z"
|
|
||||||
fill={color || "currentColor"}
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
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 (
|
|
||||||
<button
|
|
||||||
aria-label={label}
|
|
||||||
title={label}
|
|
||||||
className={classnames(styles.colorModeToggle)}
|
|
||||||
onClick={handleToggle}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<Icon />
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
.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);
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +1,12 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import classnames from "classnames";
|
import clsx from "clsx";
|
||||||
import styles from "./fonts.module.css";
|
import styles from "./fonts.module.css";
|
||||||
|
|
||||||
export default ({ name }) => {
|
export default ({ name }) => {
|
||||||
const fontClass = { Nunito: "fontBody", "Fira Code": "fontMono" };
|
const fontClass = { Nunito: "fontBody", "Fira Code": "fontMono" };
|
||||||
return (
|
return (
|
||||||
<a href={`https://fonts.google.com/specimen/${name.split(" ").join("+")}`}>
|
<a href={`https://fonts.google.com/specimen/${name.split(" ").join("+")}`}>
|
||||||
<span className={classnames(styles.font, styles[fontClass[name]])}>{name}</span>
|
<span className={clsx(styles.font, styles[fontClass[name]])}>{name}</span>
|
||||||
</a>
|
</a>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,47 +0,0 @@
|
||||||
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 }) => (
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 16 16"
|
|
||||||
style={{
|
|
||||||
height: size,
|
|
||||||
width: size,
|
|
||||||
}}
|
|
||||||
strokeWidth={0}
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="currentColor"
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
|
|
||||||
fill={color || "currentColor"}
|
|
||||||
fillRule="evenodd"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
|
||||||
export const GithubButton = ({ href, ...props }) => {
|
|
||||||
const { isDarkTheme } = useThemeContext();
|
|
||||||
return (
|
|
||||||
<a
|
|
||||||
href={href}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className={classnames(
|
|
||||||
styles.githubButton,
|
|
||||||
isDarkTheme ? "button--secondary" : "button--primary",
|
|
||||||
"button button--outline"
|
|
||||||
)}
|
|
||||||
aria-label="Github"
|
|
||||||
title="Github"
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<Icon />
|
|
||||||
</a>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
/* @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);
|
|
||||||
}
|
|
||||||
|
|
@ -32,6 +32,9 @@
|
||||||
--ifm-font-family-monospace: "Fira Code", SFMono-Regular, Menlo, Monaco,
|
--ifm-font-family-monospace: "Fira Code", SFMono-Regular, Menlo, Monaco,
|
||||||
Consolas, "Liberation Mono", "Courier New", monospace;
|
Consolas, "Liberation Mono", "Courier New", monospace;
|
||||||
--ifm-code-padding-vertical: 0.05rem;
|
--ifm-code-padding-vertical: 0.05rem;
|
||||||
|
--hgd-footer-link-color: var(--ifm-color-emphasis-700);
|
||||||
|
--hgd-link-hover-color: var(--ifm-color-secondary-darker);
|
||||||
|
--ifm-link-color: var(--ifm-color-secondary);
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
|
|
@ -54,6 +57,12 @@ html[data-theme="dark"]:root {
|
||||||
--ifm-navbar-background-color: var(--ifm-background-color);
|
--ifm-navbar-background-color: var(--ifm-background-color);
|
||||||
--ifm-menu-color-active: var(--ifm-color-primary);
|
--ifm-menu-color-active: var(--ifm-color-primary);
|
||||||
--ifm-blockquote-color: var(--ifm-color-emphasis-400);
|
--ifm-blockquote-color: var(--ifm-color-emphasis-400);
|
||||||
|
--ifm-link-color: var(--ifm-color-primary);
|
||||||
|
--hgd-footer-link-color: var(--ifm-color-emphasis-400);
|
||||||
|
--hgd-link-hover-color: var(--ifm-color-primary-darker);
|
||||||
|
--ifm-code-background: rgba(255, 255, 255, 0.08);
|
||||||
|
--ifm-code-color: var(--ifm-color-secondary-lightest);
|
||||||
|
--ifm-footer-link-color: ;
|
||||||
}
|
}
|
||||||
|
|
||||||
.admonition.alert {
|
.admonition.alert {
|
||||||
|
|
@ -92,11 +101,6 @@ html[data-theme="dark"]:root .admonition.alert.admonition-note {
|
||||||
opacity: 0.9;
|
opacity: 0.9;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme="dark"] .footer.footer--dark {
|
|
||||||
--ifm-footer-color: var(--ifm-color-emphasis-400);
|
|
||||||
--ifm-navbar-background-color: var(--ifm-background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer.footer--dark {
|
.footer.footer--dark {
|
||||||
--ifm-footer-color: var(--ifm-color-emphasis-600);
|
--ifm-footer-color: var(--ifm-color-emphasis-600);
|
||||||
--ifm-footer-link-color: var(--ifm-footer-color);
|
--ifm-footer-link-color: var(--ifm-footer-color);
|
||||||
|
|
@ -108,14 +112,8 @@ html[data-theme="dark"] .footer.footer--dark {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme="dark"] {
|
.footer .footer__items .footer__item .footer__link-item {
|
||||||
--ifm-code-background: rgba(255, 255, 255, 0.08);
|
color: var(--hgd-footer-link-color);
|
||||||
--ifm-code-color: var(--ifm-color-secondary-lightest);
|
|
||||||
--ifm-footer-link-color: ;
|
|
||||||
/* #ace8cd
|
|
||||||
#b6a7e2
|
|
||||||
#dc7381
|
|
||||||
*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.admonition {
|
.admonition {
|
||||||
|
|
@ -167,20 +165,13 @@ h6 code {
|
||||||
color: var(--ifm-color-primary);
|
color: var(--ifm-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--ifm-color-secondary);
|
|
||||||
}
|
|
||||||
.contents a.contents__link--active[class] {
|
.contents a.contents__link--active[class] {
|
||||||
color: var(--ifm-color-secondary);
|
color: var(--ifm-color-secondary);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
a:hover {
|
a:hover {
|
||||||
color: var(--ifm-color-secondary-darker);
|
color: var(--hgd-link-hover-color);
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme="dark"] a {
|
|
||||||
color: var(--ifm-color-primary);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme="dark"] .contents a.contents__link--active[class] {
|
html[data-theme="dark"] .contents a.contents__link--active[class] {
|
||||||
|
|
@ -188,14 +179,14 @@ html[data-theme="dark"] .contents a.contents__link--active[class] {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[data-theme="dark"] a:hover {
|
|
||||||
color: var(--ifm-color-primary-light);
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme="dark"] .navbar .navbar__items a.navbar__brand {
|
html[data-theme="dark"] .navbar .navbar__items a.navbar__brand {
|
||||||
color: var(--ifm-color-primary);
|
color: var(--ifm-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
nav.navbar.navbar--fixed-top {
|
||||||
|
border-bottom: 1px solid var(--ifm-toc-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
.navbar .navbar__items a.navbar__brand {
|
.navbar .navbar__items a.navbar__brand {
|
||||||
color: var(--ifm-color-black);
|
color: var(--ifm-color-black);
|
||||||
}
|
}
|
||||||
|
|
@ -211,6 +202,9 @@ html[data-theme="dark"] .navbar .navbar__items a.navbar__brand {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
.navbar .navbar__inner .navbar__items a.navbar__brand img.logo-at-home {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navbar .navbar__search .navbar__search-input {
|
.navbar .navbar__search .navbar__search-input {
|
||||||
|
|
@ -250,3 +244,41 @@ html[data-theme="dark"]
|
||||||
.table-of-contents .table-of-contents__link {
|
.table-of-contents .table-of-contents__link {
|
||||||
color: var(--ifm-font-color-base);
|
color: var(--ifm-font-color-base);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.table-of-contents .table-of-contents__link:hover {
|
||||||
|
color: var(--hgd-link-hover-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer__col:first-child {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer__col:not(:first-child):not(:last-child) {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer .footer__col:last-child {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-github-link {
|
||||||
|
transition: opacity 0.2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-github-link:hover {
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-github-link:before {
|
||||||
|
content: "";
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
display: flex;
|
||||||
|
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||||
|
no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
html[data-theme="dark"] .header-github-link:before {
|
||||||
|
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
|
||||||
|
no-repeat;
|
||||||
|
}
|
||||||
|
|
|
||||||
1
docs/src/hooks/index.ts
Normal file
1
docs/src/hooks/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
export * from "./useLogoSrc";
|
||||||
38
docs/src/hooks/useLogoSrc.ts
Normal file
38
docs/src/hooks/useLogoSrc.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import { useMemo } from "react";
|
||||||
|
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||||
|
import { useLocation } from "@docusaurus/router";
|
||||||
|
import useMedia from "use-media";
|
||||||
|
|
||||||
|
type UseLogoSrc = {
|
||||||
|
sources: { light: string; dark: string };
|
||||||
|
className: string | null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function useLogoSrc(): UseLogoSrc {
|
||||||
|
let className = null;
|
||||||
|
const { pathname } = useLocation();
|
||||||
|
const isSmall = useMedia({ maxWidth: "997px" });
|
||||||
|
if (pathname === "/") {
|
||||||
|
className = "logo-at-home";
|
||||||
|
}
|
||||||
|
const sourcesIcon = {
|
||||||
|
light: useBaseUrl("/static/hyperglass-icon-light.svg"),
|
||||||
|
dark: useBaseUrl("/static/hyperglass-icon-dark.svg"),
|
||||||
|
};
|
||||||
|
|
||||||
|
const sourcesFull = {
|
||||||
|
light: useBaseUrl("/static/hyperglass-light.svg"),
|
||||||
|
dark: useBaseUrl("/static/hyperglass-dark.svg"),
|
||||||
|
};
|
||||||
|
|
||||||
|
const sources = useMemo(() => {
|
||||||
|
if (isSmall) {
|
||||||
|
return sourcesFull;
|
||||||
|
}
|
||||||
|
if (!isSmall && pathname === "/") {
|
||||||
|
return sourcesIcon;
|
||||||
|
}
|
||||||
|
return sourcesFull;
|
||||||
|
}, [isSmall, pathname]);
|
||||||
|
return { sources, className };
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import classnames from "classnames";
|
import clsx from "clsx";
|
||||||
import Layout from "@theme/Layout";
|
import Layout from "@theme/Layout";
|
||||||
import Link from "@docusaurus/Link";
|
import Link from "@docusaurus/Link";
|
||||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||||
|
|
@ -27,12 +27,10 @@ function Home() {
|
||||||
"reactjs",
|
"reactjs",
|
||||||
]}
|
]}
|
||||||
>
|
>
|
||||||
<header className={classnames("hero", styles.heroBanner)}>
|
<header className={clsx("hero", styles.heroBanner)}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<h1 className={classnames("hero__title", styles.title)}>
|
<h1 className={clsx("hero__title", styles.title)}>hyperglass</h1>
|
||||||
hyperglass
|
<h2 className={clsx("hero__subtitle", styles.subTitle)}>
|
||||||
</h1>
|
|
||||||
<h2 className={classnames("hero__subtitle", styles.subTitle)}>
|
|
||||||
the <span className={styles.tagPrimary}>network looking glass</span>{" "}
|
the <span className={styles.tagPrimary}>network looking glass</span>{" "}
|
||||||
that tries to
|
that tries to
|
||||||
<span className={styles.tagSecondary}>
|
<span className={styles.tagSecondary}>
|
||||||
|
|
@ -43,7 +41,7 @@ function Home() {
|
||||||
</h2>
|
</h2>
|
||||||
<div className={styles.buttons}>
|
<div className={styles.buttons}>
|
||||||
<Link
|
<Link
|
||||||
className={classnames(
|
className={clsx(
|
||||||
"button button--outline button--secondary button--lg",
|
"button button--outline button--secondary button--lg",
|
||||||
styles.homeBtn,
|
styles.homeBtn,
|
||||||
styles.btnSecondary
|
styles.btnSecondary
|
||||||
|
|
@ -53,7 +51,7 @@ function Home() {
|
||||||
Set up your Looking Glass
|
Set up your Looking Glass
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
className={classnames(
|
className={clsx(
|
||||||
"button button--outline button--primary button--lg",
|
"button button--outline button--primary button--lg",
|
||||||
styles.homeBtn,
|
styles.homeBtn,
|
||||||
styles.btnPrimary
|
styles.btnPrimary
|
||||||
|
|
@ -69,16 +67,16 @@ function Home() {
|
||||||
<section className={styles.content}>
|
<section className={styles.content}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className={classnames("col col--4")}>
|
<div className={clsx("col col--4")}>
|
||||||
<section className={styles.content}>
|
<section className={styles.content}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className={classnames("col col--12")}></div>
|
<div className={clsx("col col--12")}></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<div className={classnames("col col--8")}></div>
|
<div className={clsx("col col--8")}></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import classnames from "classnames";
|
import clsx from "clsx";
|
||||||
import Layout from "@theme/Layout";
|
import Layout from "@theme/Layout";
|
||||||
import Link from "@docusaurus/Link";
|
import Link from "@docusaurus/Link";
|
||||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||||
|
|
@ -11,13 +11,11 @@ function Screenshots() {
|
||||||
description="hyperglass screenshots"
|
description="hyperglass screenshots"
|
||||||
keywords={["hyperglass", "screenshots"]}
|
keywords={["hyperglass", "screenshots"]}
|
||||||
>
|
>
|
||||||
<header className={classnames("hero", styles.heroBanner)}>
|
<header className={clsx("hero", styles.heroBanner)}>
|
||||||
<div className={classnames("container", styles.smallerTitleContainer)}>
|
<div className={clsx("container", styles.smallerTitleContainer)}>
|
||||||
<h1 className={classnames("hero__title", styles.title)}>
|
<h1 className={clsx("hero__title", styles.title)}>Coming Soon!</h1>
|
||||||
Coming Soon!
|
|
||||||
</h1>
|
|
||||||
<h2
|
<h2
|
||||||
className={classnames(
|
className={clsx(
|
||||||
"hero__subtitle",
|
"hero__subtitle",
|
||||||
styles.subTitle,
|
styles.subTitle,
|
||||||
styles.smallerTitle
|
styles.smallerTitle
|
||||||
|
|
@ -29,7 +27,7 @@ function Screenshots() {
|
||||||
</h2>
|
</h2>
|
||||||
<div className={styles.buttons}>
|
<div className={styles.buttons}>
|
||||||
<Link
|
<Link
|
||||||
className={classnames(
|
className={clsx(
|
||||||
"button button--outline button--secondary button--lg",
|
"button button--outline button--secondary button--lg",
|
||||||
styles.homeBtn,
|
styles.homeBtn,
|
||||||
styles.btnSecondary
|
styles.btnSecondary
|
||||||
|
|
@ -45,16 +43,16 @@ function Screenshots() {
|
||||||
<section className={styles.content}>
|
<section className={styles.content}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className={classnames("col col--4")}>
|
<div className={clsx("col col--4")}>
|
||||||
<section className={styles.content}>
|
<section className={styles.content}>
|
||||||
<div className="container">
|
<div className="container">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className={classnames("col col--12")}></div>
|
<div className={clsx("col col--12")}></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
<div className={classnames("col col--8")}></div>
|
<div className={clsx("col col--8")}></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
export default {
|
module.exports = {
|
||||||
plain: {
|
plain: {
|
||||||
color: "rgb(241, 250, 140)",
|
color: "rgb(241, 250, 140)",
|
||||||
backgroundColor: "#282A36",
|
backgroundColor: "#282A36",
|
||||||
|
|
@ -1,84 +0,0 @@
|
||||||
// Original: https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-ghcolors.css
|
|
||||||
var theme = {
|
|
||||||
plain: {
|
|
||||||
color: "#393A34",
|
|
||||||
backgroundColor: "#f6f8fa",
|
|
||||||
},
|
|
||||||
styles: [
|
|
||||||
{
|
|
||||||
types: ["comment", "prolog", "doctype", "cdata"],
|
|
||||||
style: {
|
|
||||||
color: "#999988",
|
|
||||||
fontStyle: "italic",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
types: ["namespace"],
|
|
||||||
style: {
|
|
||||||
opacity: 0.7,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
types: ["string", "attr-value"],
|
|
||||||
style: {
|
|
||||||
color: "#e3116c",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
types: ["punctuation", "operator"],
|
|
||||||
style: {
|
|
||||||
color: "#393A34",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
types: [
|
|
||||||
"entity",
|
|
||||||
"url",
|
|
||||||
"symbol",
|
|
||||||
"number",
|
|
||||||
"boolean",
|
|
||||||
"variable",
|
|
||||||
"constant",
|
|
||||||
"property",
|
|
||||||
"regex",
|
|
||||||
"inserted",
|
|
||||||
],
|
|
||||||
style: {
|
|
||||||
color: "#36acaa",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
types: ["atrule", "keyword", "attr-name", "selector"],
|
|
||||||
style: {
|
|
||||||
color: "#00a4db",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
types: ["function", "deleted", "tag"],
|
|
||||||
style: {
|
|
||||||
color: "#d73a49",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
types: ["function-variable"],
|
|
||||||
style: {
|
|
||||||
color: "#6f42c1",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
types: ["tag", "selector", "keyword"],
|
|
||||||
style: {
|
|
||||||
color: "#00009f",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
types: ["important"],
|
|
||||||
style: {
|
|
||||||
color: "#d73a49",
|
|
||||||
fontStyle: "italic",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
export default theme;
|
|
||||||
|
|
@ -1,277 +0,0 @@
|
||||||
/**
|
|
||||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the MIT license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree.
|
|
||||||
*/
|
|
||||||
|
|
||||||
/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
|
|
||||||
|
|
||||||
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 darkTheme from "./dracula";
|
|
||||||
import lightTheme from "./github";
|
|
||||||
import Clipboard from "clipboard";
|
|
||||||
import rangeParser from "parse-numeric-range";
|
|
||||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
|
||||||
import useThemeContext from "@theme/hooks/useThemeContext";
|
|
||||||
|
|
||||||
import styles from "./styles.module.css";
|
|
||||||
|
|
||||||
const highlightLinesRangeRegex = /{([\d,-]+)}/;
|
|
||||||
const getHighlightDirectiveRegex = (
|
|
||||||
languages = ["js", "jsBlock", "jsx", "python", "html", "ini"]
|
|
||||||
) => {
|
|
||||||
// supported types of comments
|
|
||||||
const comments = {
|
|
||||||
js: {
|
|
||||||
start: "\\/\\/",
|
|
||||||
end: "",
|
|
||||||
},
|
|
||||||
jsBlock: {
|
|
||||||
start: "\\/\\*",
|
|
||||||
end: "\\*\\/",
|
|
||||||
},
|
|
||||||
jsx: {
|
|
||||||
start: "\\{\\s*\\/\\*",
|
|
||||||
end: "\\*\\/\\s*\\}",
|
|
||||||
},
|
|
||||||
python: {
|
|
||||||
start: "#",
|
|
||||||
end: "",
|
|
||||||
},
|
|
||||||
html: {
|
|
||||||
start: "<!--",
|
|
||||||
end: "-->",
|
|
||||||
},
|
|
||||||
ini: { start: "#", end: "" },
|
|
||||||
};
|
|
||||||
// supported directives
|
|
||||||
const directives = [
|
|
||||||
"highlight-next-line",
|
|
||||||
"highlight-start",
|
|
||||||
"highlight-end",
|
|
||||||
].join("|");
|
|
||||||
// to be more reliable, the opening and closing comment must match
|
|
||||||
const commentPattern = languages
|
|
||||||
.map(
|
|
||||||
(lang) =>
|
|
||||||
`(?:${comments[lang].start}\\s*(${directives})\\s*${comments[lang].end})`
|
|
||||||
)
|
|
||||||
.join("|");
|
|
||||||
// white space is allowed, but otherwise it should be on it's own line
|
|
||||||
return new RegExp(`^\\s*(?:${commentPattern})\\s*$`);
|
|
||||||
};
|
|
||||||
// select comment styles based on language
|
|
||||||
const highlightDirectiveRegex = (lang) => {
|
|
||||||
switch (lang) {
|
|
||||||
case "js":
|
|
||||||
case "javascript":
|
|
||||||
case "ts":
|
|
||||||
case "typescript":
|
|
||||||
return getHighlightDirectiveRegex(["js", "jsBlock"]);
|
|
||||||
|
|
||||||
case "jsx":
|
|
||||||
case "tsx":
|
|
||||||
return getHighlightDirectiveRegex(["js", "jsBlock", "jsx"]);
|
|
||||||
|
|
||||||
case "html":
|
|
||||||
return getHighlightDirectiveRegex(["js", "jsBlock", "html"]);
|
|
||||||
|
|
||||||
case "python":
|
|
||||||
case "py":
|
|
||||||
return getHighlightDirectiveRegex(["python"]);
|
|
||||||
case "ini":
|
|
||||||
return getHighlightDirectiveRegex(["ini"]);
|
|
||||||
|
|
||||||
default:
|
|
||||||
// all comment types
|
|
||||||
return getHighlightDirectiveRegex();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
const codeBlockTitleRegex = /title=".*"/;
|
|
||||||
|
|
||||||
export default ({ children, className: languageClassName, metastring }) => {
|
|
||||||
(typeof global !== "undefined" ? global : window).Prism = Prism;
|
|
||||||
require("prismjs/components/prism-shell-session");
|
|
||||||
require("prismjs/components/prism-nginx");
|
|
||||||
require("prismjs/components/prism-ini");
|
|
||||||
const {
|
|
||||||
siteConfig: {
|
|
||||||
themeConfig: { prism = {} },
|
|
||||||
},
|
|
||||||
} = useDocusaurusContext();
|
|
||||||
|
|
||||||
const [showCopied, setShowCopied] = useState(false);
|
|
||||||
const [mounted, setMounted] = useState(false);
|
|
||||||
// The Prism theme on SSR is always the default theme but the site theme
|
|
||||||
// can be in a different mode. React hydration doesn't update DOM styles
|
|
||||||
// that come from SSR. Hence force a re-render after mounting to apply the
|
|
||||||
// current relevant styles. There will be a flash seen of the original
|
|
||||||
// styles seen using this current approach but that's probably ok. Fixing
|
|
||||||
// the flash will require changing the theming approach and is not worth it
|
|
||||||
// at this point.
|
|
||||||
useEffect(() => {
|
|
||||||
setMounted(true);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const target = useRef(null);
|
|
||||||
const button = useRef(null);
|
|
||||||
let highlightLines = [];
|
|
||||||
let codeBlockTitle = "";
|
|
||||||
|
|
||||||
const { isDarkTheme } = useThemeContext();
|
|
||||||
const lightModeTheme = prism.theme || lightTheme || darkTheme;
|
|
||||||
const darkModeTheme = prism.darkTheme || darkTheme || lightTheme;
|
|
||||||
const prismTheme = isDarkTheme ? darkModeTheme : lightModeTheme;
|
|
||||||
|
|
||||||
if (metastring && highlightLinesRangeRegex.test(metastring)) {
|
|
||||||
const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
|
|
||||||
highlightLines = rangeParser
|
|
||||||
.parse(highlightLinesRange)
|
|
||||||
.filter((n) => n > 0);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (metastring && codeBlockTitleRegex.test(metastring)) {
|
|
||||||
codeBlockTitle = metastring
|
|
||||||
.match(codeBlockTitleRegex)[0]
|
|
||||||
.split("title=")[1]
|
|
||||||
.replace(/"+/g, "");
|
|
||||||
}
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
// only declaration OR directive highlight can be used for a block
|
|
||||||
let code = children.replace(/\n$/, "");
|
|
||||||
if (highlightLines.length === 0 && language !== undefined) {
|
|
||||||
let range = "";
|
|
||||||
const directiveRegex = highlightDirectiveRegex(language);
|
|
||||||
// go through line by line
|
|
||||||
const lines = children.replace(/\n$/, "").split("\n");
|
|
||||||
let blockStart;
|
|
||||||
// loop through lines
|
|
||||||
for (let index = 0; index < lines.length; ) {
|
|
||||||
const line = lines[index];
|
|
||||||
// adjust for 0-index
|
|
||||||
const lineNumber = index + 1;
|
|
||||||
const match = line.match(directiveRegex);
|
|
||||||
if (match !== null) {
|
|
||||||
const directive = match
|
|
||||||
.slice(1)
|
|
||||||
.reduce((final, item) => final || item, undefined);
|
|
||||||
switch (directive) {
|
|
||||||
case "highlight-next-line":
|
|
||||||
range += `${lineNumber},`;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "highlight-start":
|
|
||||||
blockStart = lineNumber;
|
|
||||||
break;
|
|
||||||
|
|
||||||
case "highlight-end":
|
|
||||||
range += `${blockStart}-${lineNumber - 1},`;
|
|
||||||
break;
|
|
||||||
|
|
||||||
default:
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
lines.splice(index, 1);
|
|
||||||
} else {
|
|
||||||
// lines without directives are unchanged
|
|
||||||
index += 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
highlightLines = rangeParser.parse(range);
|
|
||||||
code = lines.join("\n");
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCopyCode = () => {
|
|
||||||
window.getSelection().empty();
|
|
||||||
setShowCopied(true);
|
|
||||||
|
|
||||||
setTimeout(() => setShowCopied(false), 2000);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Highlight
|
|
||||||
{...defaultProps}
|
|
||||||
key={mounted}
|
|
||||||
theme={prismTheme}
|
|
||||||
code={code}
|
|
||||||
language={language}
|
|
||||||
>
|
|
||||||
{({ className, style, tokens, getLineProps, getTokenProps }) => (
|
|
||||||
<>
|
|
||||||
{codeBlockTitle && (
|
|
||||||
<div style={style} className={styles.codeBlockTitle}>
|
|
||||||
{codeBlockTitle}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<div className={styles.codeBlockContent}>
|
|
||||||
{/* <button
|
|
||||||
ref={button}
|
|
||||||
type="button"
|
|
||||||
aria-label="Copy code to clipboard"
|
|
||||||
className={classnames(styles.copyButton, {
|
|
||||||
[styles.copyButtonWithTitle]: codeBlockTitle,
|
|
||||||
})}
|
|
||||||
onClick={handleCopyCode}>
|
|
||||||
{showCopied ? 'Copied' : 'Copy'}
|
|
||||||
</button> */}
|
|
||||||
<div
|
|
||||||
tabIndex="0"
|
|
||||||
className={classnames(className, styles.codeBlock, {
|
|
||||||
[styles.codeBlockWithTitle]: codeBlockTitle,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<div ref={target} className={styles.codeBlockLines} style={style}>
|
|
||||||
{tokens.map((line, i) => {
|
|
||||||
if (line.length === 1 && line[0].content === "") {
|
|
||||||
line[0].content = "\n"; // eslint-disable-line no-param-reassign
|
|
||||||
}
|
|
||||||
|
|
||||||
const lineProps = getLineProps({ line, key: i });
|
|
||||||
|
|
||||||
if (highlightLines.includes(i + 1)) {
|
|
||||||
lineProps.className = `${lineProps.className} docusaurus-highlight-code-line`;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div key={i} {...lineProps}>
|
|
||||||
{line.map((token, key) => (
|
|
||||||
<span key={key} {...getTokenProps({ token, key })} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</Highlight>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
@ -1,70 +0,0 @@
|
||||||
/**
|
|
||||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the MIT license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree.
|
|
||||||
*/
|
|
||||||
|
|
||||||
.codeBlockContent {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.codeBlockTitle {
|
|
||||||
font-family: var(--ifm-font-family-monospace);
|
|
||||||
font-weight: bold;
|
|
||||||
padding: var(--ifm-pre-padding);
|
|
||||||
border-bottom: 1px solid var(--ifm-color-emphasis-200);
|
|
||||||
width: 100%;
|
|
||||||
border-top-left-radius: var(--ifm-global-radius);
|
|
||||||
border-top-right-radius: var(--ifm-global-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.codeBlock {
|
|
||||||
overflow: auto;
|
|
||||||
border-radius: var(--ifm-global-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.codeBlockWithTitle {
|
|
||||||
border-top-left-radius: 0;
|
|
||||||
border-top-right-radius: 0;
|
|
||||||
border-bottom-left-radius: var(--ifm-global-radius);
|
|
||||||
border-bottom-right-radius: var(--ifm-global-radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyButton {
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
border: none;
|
|
||||||
border-radius: var(--ifm-global-radius);
|
|
||||||
color: var(--ifm-color-content);
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
.copyButtonWithTitle {
|
|
||||||
top: calc(var(--ifm-pre-padding));
|
|
||||||
}
|
|
||||||
|
|
||||||
.codeBlockTitle:hover + .codeBlockContent .copyButton,
|
|
||||||
.codeBlockContent:hover > .copyButton {
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.codeBlockLines {
|
|
||||||
font-family: var(--ifm-font-family-monospace);
|
|
||||||
font-size: inherit;
|
|
||||||
line-height: var(--ifm-pre-line-height);
|
|
||||||
white-space: pre;
|
|
||||||
float: left;
|
|
||||||
min-width: 100%;
|
|
||||||
padding: var(--ifm-pre-padding);
|
|
||||||
}
|
|
||||||
|
|
@ -1,122 +0,0 @@
|
||||||
/**
|
|
||||||
* 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 from "react";
|
|
||||||
import classnames from "classnames";
|
|
||||||
|
|
||||||
import Link from "@docusaurus/Link";
|
|
||||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
|
||||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
|
||||||
import styles from "./styles.module.css";
|
|
||||||
|
|
||||||
function FooterLink({ to, href, label, ...props }) {
|
|
||||||
const toUrl = useBaseUrl(to);
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
className={classnames(styles.footerLink, "footer__link-item")}
|
|
||||||
{...(href
|
|
||||||
? {
|
|
||||||
target: "_blank",
|
|
||||||
rel: "noopener noreferrer",
|
|
||||||
href,
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
to: toUrl,
|
|
||||||
})}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{label}
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const FooterLogo = ({ url, alt }) => (
|
|
||||||
<img className="footer__logo" alt={alt} src={url} />
|
|
||||||
);
|
|
||||||
|
|
||||||
function Footer() {
|
|
||||||
const context = useDocusaurusContext();
|
|
||||||
const { siteConfig = {} } = context;
|
|
||||||
const { themeConfig = {} } = siteConfig;
|
|
||||||
const { footer } = themeConfig;
|
|
||||||
|
|
||||||
const { copyright, links = [], logo = {} } = footer || {};
|
|
||||||
const logoUrl = useBaseUrl(logo.src);
|
|
||||||
|
|
||||||
if (!footer) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<footer
|
|
||||||
className={classnames("footer", {
|
|
||||||
"footer--dark": footer.style === "dark",
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<div className="container">
|
|
||||||
{links && links.length > 0 && (
|
|
||||||
<div className="row footer__links">
|
|
||||||
{links.map((linkItem, i) => (
|
|
||||||
<div
|
|
||||||
key={i}
|
|
||||||
className={classnames("col footer__col", styles.footerCol)}
|
|
||||||
>
|
|
||||||
{linkItem.title != null ? (
|
|
||||||
<h4 className="footer__title">{linkItem.title}</h4>
|
|
||||||
) : null}
|
|
||||||
{linkItem.items != null &&
|
|
||||||
Array.isArray(linkItem.items) &&
|
|
||||||
linkItem.items.length > 0 ? (
|
|
||||||
<ul className="footer__items">
|
|
||||||
{linkItem.items.map((item, key) =>
|
|
||||||
item.html ? (
|
|
||||||
<li
|
|
||||||
key={key}
|
|
||||||
className="footer__item"
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: item.html,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<li key={item.href || item.to} className="footer__item">
|
|
||||||
<FooterLink {...item} />
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</ul>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{(logo || copyright) && (
|
|
||||||
<div className="text--center">
|
|
||||||
{logo && logo.src && (
|
|
||||||
<div className="margin-bottom--sm">
|
|
||||||
{logo.href ? (
|
|
||||||
<a
|
|
||||||
href={logo.href}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className={styles.footerLogoLink}
|
|
||||||
>
|
|
||||||
<FooterLogo alt={logo.alt} url={logoUrl} />
|
|
||||||
</a>
|
|
||||||
) : (
|
|
||||||
<FooterLogo alt={logo.alt} url={logoUrl} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
{copyright}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Footer;
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
.footerLogoLink {
|
|
||||||
opacity: 0.5;
|
|
||||||
transition: opacity 0.15s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footerLogoLink:hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footerCol:first-child {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footerCol:not(:first-child):not(:last-child) {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footerCol:last-child {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme="dark"] .footerLink[class] {
|
|
||||||
color: var(--ifm-color-emphasis-400);
|
|
||||||
}
|
|
||||||
|
|
||||||
.footerLink[class] {
|
|
||||||
color: var(--ifm-color-emphasis-700);
|
|
||||||
}
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
/**
|
|
||||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the MIT license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React from "react";
|
|
||||||
import Head from "@docusaurus/Head";
|
|
||||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
|
||||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
|
||||||
|
|
||||||
import ThemeProvider from "@theme/ThemeProvider";
|
|
||||||
import UserPreferencesProvider from "@theme/UserPreferencesProvider";
|
|
||||||
import AnnouncementBar from "@theme/AnnouncementBar";
|
|
||||||
import Navbar from "../Navbar";
|
|
||||||
import Footer from "../Footer";
|
|
||||||
|
|
||||||
import "./styles.css";
|
|
||||||
|
|
||||||
function Layout(props) {
|
|
||||||
const { siteConfig = {} } = useDocusaurusContext();
|
|
||||||
const {
|
|
||||||
favicon,
|
|
||||||
title: siteTitle,
|
|
||||||
themeConfig: { image: defaultImage },
|
|
||||||
url: siteUrl,
|
|
||||||
} = siteConfig;
|
|
||||||
const {
|
|
||||||
children,
|
|
||||||
title,
|
|
||||||
noFooter,
|
|
||||||
description,
|
|
||||||
image,
|
|
||||||
keywords,
|
|
||||||
permalink,
|
|
||||||
version,
|
|
||||||
} = props;
|
|
||||||
const metaTitle = title ? `${title} | ${siteTitle}` : siteTitle;
|
|
||||||
const metaImage = image || defaultImage;
|
|
||||||
const metaImageUrl = useBaseUrl(metaImage, { absolute: true });
|
|
||||||
const faviconUrl = useBaseUrl(favicon);
|
|
||||||
return (
|
|
||||||
<ThemeProvider>
|
|
||||||
<UserPreferencesProvider>
|
|
||||||
<Head>
|
|
||||||
<html lang="en" />
|
|
||||||
{metaTitle && <title>{metaTitle}</title>}
|
|
||||||
{metaTitle && <meta property="og:title" content={metaTitle} />}
|
|
||||||
{favicon && <link rel="shortcut icon" href={faviconUrl} />}
|
|
||||||
{description && <meta name="description" content={description} />}
|
|
||||||
{description && (
|
|
||||||
<meta property="og:description" content={description} />
|
|
||||||
)}
|
|
||||||
{version && <meta name="docsearch:version" content={version} />}
|
|
||||||
{keywords && keywords.length && (
|
|
||||||
<meta name="keywords" content={keywords.join(",")} />
|
|
||||||
)}
|
|
||||||
{metaImage && <meta property="og:image" content={metaImageUrl} />}
|
|
||||||
{metaImage && <meta property="og:image:width" content="1200" />}
|
|
||||||
{metaImage && <meta property="og:image:height" content="630" />}
|
|
||||||
{metaImage && (
|
|
||||||
<meta property="twitter:image" content={metaImageUrl} />
|
|
||||||
)}
|
|
||||||
{metaImage && (
|
|
||||||
<meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
|
|
||||||
)}
|
|
||||||
{permalink && (
|
|
||||||
<meta property="og:url" content={siteUrl + permalink} />
|
|
||||||
)}
|
|
||||||
{permalink && <link rel="canonical" href={siteUrl + permalink} />}
|
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
|
||||||
</Head>
|
|
||||||
<AnnouncementBar />
|
|
||||||
<Navbar />
|
|
||||||
<div className="main-wrapper">{children}</div>
|
|
||||||
{!noFooter && <Footer />}
|
|
||||||
</UserPreferencesProvider>
|
|
||||||
</ThemeProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Layout;
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
/**
|
|
||||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the MIT license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree.
|
|
||||||
*/
|
|
||||||
|
|
||||||
html,
|
|
||||||
body {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
transition: var(--ifm-transition-fast) ease color;
|
|
||||||
}
|
|
||||||
|
|
||||||
#__docusaurus {
|
|
||||||
min-height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-wrapper {
|
|
||||||
flex: 1 0 auto;
|
|
||||||
}
|
|
||||||
49
docs/src/theme/Logo/index.tsx
Normal file
49
docs/src/theme/Logo/index.tsx
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
/**
|
||||||
|
* Copyright (c) Facebook, Inc. and its affiliates.
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from "react";
|
||||||
|
import type { Props } from "@theme/Logo";
|
||||||
|
|
||||||
|
import clsx from "clsx";
|
||||||
|
import Link from "@docusaurus/Link";
|
||||||
|
import ThemedImage from "@theme/ThemedImage";
|
||||||
|
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||||
|
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||||
|
import { useThemeConfig } from "@docusaurus/theme-common";
|
||||||
|
import { useLogoSrc } from "../../hooks";
|
||||||
|
|
||||||
|
const Logo = (props: Props): JSX.Element => {
|
||||||
|
const { sources, className } = useLogoSrc();
|
||||||
|
|
||||||
|
const { isClient } = useDocusaurusContext();
|
||||||
|
const {
|
||||||
|
navbar: { title, logo = { src: "" } },
|
||||||
|
} = useThemeConfig();
|
||||||
|
|
||||||
|
const { imageClassName, titleClassName, ...propsRest } = props;
|
||||||
|
const logoLink = useBaseUrl(logo.href || "/");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Link
|
||||||
|
to={logoLink}
|
||||||
|
{...propsRest}
|
||||||
|
{...(logo.target && { target: logo.target })}
|
||||||
|
>
|
||||||
|
{sources.light && (
|
||||||
|
<ThemedImage
|
||||||
|
key={isClient}
|
||||||
|
className={clsx(imageClassName, className)}
|
||||||
|
sources={sources}
|
||||||
|
alt={logo.alt || title || "Logo"}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
{title != null && <strong className={titleClassName}>{title}</strong>}
|
||||||
|
</Link>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Logo;
|
||||||
|
|
@ -1,386 +0,0 @@
|
||||||
/**
|
|
||||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the MIT license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree.
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React, { useCallback, useState, useEffect } from "react";
|
|
||||||
import clsx from "clsx";
|
|
||||||
import Link from "@docusaurus/Link";
|
|
||||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
|
||||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
|
||||||
|
|
||||||
import SearchBar from "../SearchBar";
|
|
||||||
import useThemeContext from "@theme/hooks/useThemeContext";
|
|
||||||
import useHideableNavbar from "@theme/hooks/useHideableNavbar";
|
|
||||||
import useLockBodyScroll from "@theme/hooks/useLockBodyScroll";
|
|
||||||
import useWindowSize, { windowSizes } from "@theme/hooks/useWindowSize";
|
|
||||||
import useLogo from "@theme/hooks/useLogo";
|
|
||||||
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";
|
|
||||||
|
|
||||||
// retrocompatible with v1
|
|
||||||
const DefaultNavItemPosition = "right";
|
|
||||||
|
|
||||||
function NavLink({
|
|
||||||
activeBasePath,
|
|
||||||
activeBaseRegex,
|
|
||||||
to,
|
|
||||||
href,
|
|
||||||
label,
|
|
||||||
activeClassName = "navbar__link--active",
|
|
||||||
prependBaseUrlToHref,
|
|
||||||
...props
|
|
||||||
}) {
|
|
||||||
const toUrl = useBaseUrl(to);
|
|
||||||
const activeBaseUrl = useBaseUrl(activeBasePath);
|
|
||||||
const normalizedHref = useBaseUrl(href, { forcePrependBaseUrl: true });
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
{...(href
|
|
||||||
? {
|
|
||||||
target: "_blank",
|
|
||||||
rel: "noopener noreferrer",
|
|
||||||
href: prependBaseUrlToHref ? normalizedHref : href,
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
isNavLink: true,
|
|
||||||
activeClassName,
|
|
||||||
to: toUrl,
|
|
||||||
...(activeBasePath || activeBaseRegex
|
|
||||||
? {
|
|
||||||
isActive: (_match, location) =>
|
|
||||||
activeBaseRegex
|
|
||||||
? new RegExp(activeBaseRegex).test(location.pathname)
|
|
||||||
: location.pathname.startsWith(activeBaseUrl),
|
|
||||||
}
|
|
||||||
: null),
|
|
||||||
})}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{label}
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function NavItem({
|
|
||||||
items,
|
|
||||||
position = DefaultNavItemPosition,
|
|
||||||
className,
|
|
||||||
...props
|
|
||||||
}) {
|
|
||||||
const navLinkClassNames = (extraClassName, isDropdownItem = false) =>
|
|
||||||
clsx(
|
|
||||||
styles.navLink,
|
|
||||||
{
|
|
||||||
"navbar__item navbar__link": !isDropdownItem,
|
|
||||||
dropdown__link: isDropdownItem,
|
|
||||||
},
|
|
||||||
extraClassName
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!items) {
|
|
||||||
return <NavLink className={navLinkClassNames(className)} {...props} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div
|
|
||||||
className={clsx("navbar__item", "dropdown", "dropdown--hoverable", {
|
|
||||||
"dropdown--left": position === "left",
|
|
||||||
"dropdown--right": position === "right",
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<NavLink
|
|
||||||
className={navLinkClassNames(className)}
|
|
||||||
{...props}
|
|
||||||
onClick={(e) => e.preventDefault()}
|
|
||||||
onKeyDown={(e) => {
|
|
||||||
if (e.key === "Enter") {
|
|
||||||
e.target.parentNode.classList.toggle("dropdown--show");
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{props.label}
|
|
||||||
</NavLink>
|
|
||||||
<ul className="dropdown__menu">
|
|
||||||
{items.map(
|
|
||||||
({ className: childItemClassName, ...childItemProps }, i) => (
|
|
||||||
<li key={i}>
|
|
||||||
<NavLink
|
|
||||||
activeClassName="dropdown__link--active"
|
|
||||||
className={navLinkClassNames(childItemClassName, true)}
|
|
||||||
{...childItemProps}
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function MobileNavItem({ items, position: _position, className, ...props }) {
|
|
||||||
// Need to destructure position from props so that it doesn't get passed on.
|
|
||||||
const navLinkClassNames = (extraClassName, isSubList = false) =>
|
|
||||||
clsx(
|
|
||||||
"menu__link",
|
|
||||||
{
|
|
||||||
"menu__link--sublist": isSubList,
|
|
||||||
},
|
|
||||||
extraClassName
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!items) {
|
|
||||||
return (
|
|
||||||
<li className="menu__list-item">
|
|
||||||
<NavLink className={navLinkClassNames(className)} {...props} />
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<li className="menu__list-item">
|
|
||||||
<NavLink className={navLinkClassNames(className, true)} {...props}>
|
|
||||||
{props.label}
|
|
||||||
</NavLink>
|
|
||||||
<ul className="menu__list">
|
|
||||||
{items.map(
|
|
||||||
({ className: childItemClassName, ...childItemProps }, i) => (
|
|
||||||
<li className="menu__list-item" key={i}>
|
|
||||||
<NavLink
|
|
||||||
activeClassName="menu__link--active"
|
|
||||||
className={navLinkClassNames(childItemClassName)}
|
|
||||||
{...childItemProps}
|
|
||||||
onClick={props.onClick}
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
)
|
|
||||||
)}
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
// If split links by left/right
|
|
||||||
// if position is unspecified, fallback to right (as v1)
|
|
||||||
function splitLinks(links) {
|
|
||||||
const leftLinks = links.filter(
|
|
||||||
(linkItem) => (linkItem.position ?? DefaultNavItemPosition) === "left"
|
|
||||||
);
|
|
||||||
const rightLinks = links.filter(
|
|
||||||
(linkItem) => (linkItem.position ?? DefaultNavItemPosition) === "right"
|
|
||||||
);
|
|
||||||
return {
|
|
||||||
leftLinks,
|
|
||||||
rightLinks,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function Navbar() {
|
|
||||||
const {
|
|
||||||
siteConfig: {
|
|
||||||
themeConfig: {
|
|
||||||
navbar: { title, links = [], hideOnScroll = false } = {},
|
|
||||||
disableDarkMode = false,
|
|
||||||
},
|
|
||||||
organizationName,
|
|
||||||
projectName,
|
|
||||||
baseUrl,
|
|
||||||
},
|
|
||||||
} = useDocusaurusContext();
|
|
||||||
const [sidebarShown, setSidebarShown] = useState(false);
|
|
||||||
const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
|
|
||||||
|
|
||||||
const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext();
|
|
||||||
const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
|
|
||||||
const { logoLink, logoLinkProps, logoImageUrl, logoAlt } = useLogo();
|
|
||||||
|
|
||||||
useLockBodyScroll(sidebarShown);
|
|
||||||
|
|
||||||
const showSidebar = useCallback(() => {
|
|
||||||
setSidebarShown(true);
|
|
||||||
}, [setSidebarShown]);
|
|
||||||
const hideSidebar = useCallback(() => {
|
|
||||||
setSidebarShown(false);
|
|
||||||
}, [setSidebarShown]);
|
|
||||||
|
|
||||||
const onToggleChange = useCallback(
|
|
||||||
(checked) => {
|
|
||||||
checked ? setDarkTheme() : setLightTheme();
|
|
||||||
},
|
|
||||||
[setLightTheme, setDarkTheme]
|
|
||||||
);
|
|
||||||
|
|
||||||
const windowSize = useWindowSize();
|
|
||||||
|
|
||||||
const isMobile = useMedia({ maxWidth: 997 });
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (windowSize === windowSizes.desktop) {
|
|
||||||
setSidebarShown(false);
|
|
||||||
}
|
|
||||||
}, [windowSize]);
|
|
||||||
|
|
||||||
const { leftLinks, rightLinks } = splitLinks(links);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<nav
|
|
||||||
ref={navbarRef}
|
|
||||||
className={clsx("navbar", "navbar--light", "navbar--fixed-top", {
|
|
||||||
"navbar-sidebar--show": sidebarShown,
|
|
||||||
[styles.navbarHideable]: hideOnScroll,
|
|
||||||
[styles.navbarHidden]: !isNavbarVisible,
|
|
||||||
[styles.navBarBorder]: !isMobile,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<div className="navbar__inner">
|
|
||||||
<div className="navbar__items">
|
|
||||||
{!isMobile && (
|
|
||||||
<Link
|
|
||||||
className="navbar__brand"
|
|
||||||
to={baseUrl}
|
|
||||||
aria-label="Home"
|
|
||||||
title="Home"
|
|
||||||
>
|
|
||||||
<Logo size={32} className={styles.logo} />
|
|
||||||
{title != null && (
|
|
||||||
<strong
|
|
||||||
className={isSearchBarExpanded ? styles.hideLogoText : ""}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</strong>
|
|
||||||
)}
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
{links != null && links.length !== 0 && (
|
|
||||||
<div
|
|
||||||
aria-label="Navigation bar toggle"
|
|
||||||
className="navbar__toggle"
|
|
||||||
role="button"
|
|
||||||
tabIndex={0}
|
|
||||||
onClick={showSidebar}
|
|
||||||
onKeyDown={showSidebar}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="30"
|
|
||||||
height="30"
|
|
||||||
viewBox="0 0 30 30"
|
|
||||||
role="img"
|
|
||||||
focusable="false"
|
|
||||||
>
|
|
||||||
<title>Menu</title>
|
|
||||||
<path
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeMiterlimit="10"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M4 7h22M4 15h22M4 23h22"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{leftLinks.map((linkItem, i) => (
|
|
||||||
<NavItem {...linkItem} key={i} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="navbar__items navbar__items--right">
|
|
||||||
{isMobile && (
|
|
||||||
<Link
|
|
||||||
className="navbar__brand"
|
|
||||||
to={baseUrl}
|
|
||||||
aria-label="Home"
|
|
||||||
title="Home"
|
|
||||||
>
|
|
||||||
<Logo size={32} className={styles.logo} />
|
|
||||||
{title != null && (
|
|
||||||
<strong
|
|
||||||
className={isSearchBarExpanded ? styles.hideLogoText : ""}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</strong>
|
|
||||||
)}
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!isMobile && (
|
|
||||||
<SearchBar
|
|
||||||
handleSearchBarToggle={setIsSearchBarExpanded}
|
|
||||||
isSearchBarExpanded={isSearchBarExpanded}
|
|
||||||
style={{ marginLeft: "0.5rem", marginRight: "0.5rem" }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!disableDarkMode && !isMobile && (
|
|
||||||
<ColorModeToggle
|
|
||||||
toggle={onToggleChange}
|
|
||||||
isDark={isDarkTheme}
|
|
||||||
style={{ marginLeft: "0.5rem", marginRight: "0.5rem" }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{!isMobile && (
|
|
||||||
<GithubButton
|
|
||||||
href={`https://github.com/${organizationName}/${projectName}`}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
role="presentation"
|
|
||||||
className="navbar-sidebar__backdrop"
|
|
||||||
onClick={hideSidebar}
|
|
||||||
/>
|
|
||||||
<div className="navbar-sidebar">
|
|
||||||
<div className="navbar-sidebar__brand">
|
|
||||||
<Link
|
|
||||||
className="navbar__brand"
|
|
||||||
onClick={hideSidebar}
|
|
||||||
to={logoLink}
|
|
||||||
{...logoLinkProps}
|
|
||||||
>
|
|
||||||
<Logo size={32} className={styles.logo} />
|
|
||||||
{title != null && (
|
|
||||||
<strong
|
|
||||||
className={
|
|
||||||
isSearchBarExpanded ? styles.hideLogoText : "navbar__title"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</strong>
|
|
||||||
)}
|
|
||||||
</Link>
|
|
||||||
{sidebarShown && (
|
|
||||||
<GithubButton
|
|
||||||
href={`https://github.com/${organizationName}/${projectName}`}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{!disableDarkMode && sidebarShown && (
|
|
||||||
<ColorModeToggle toggle={onToggleChange} isDark={isDarkTheme} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="navbar-sidebar__items">
|
|
||||||
<div className="menu">
|
|
||||||
<ul className="menu__list">
|
|
||||||
{links.map((linkItem, i) => (
|
|
||||||
<MobileNavItem {...linkItem} onClick={hideSidebar} key={i} />
|
|
||||||
))}
|
|
||||||
<div style={{ margin: 5, marginTop: 15 }} />
|
|
||||||
<SearchBar
|
|
||||||
handleSearchBarToggle={setIsSearchBarExpanded}
|
|
||||||
isSearchBarExpanded={isSearchBarExpanded}
|
|
||||||
/>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Navbar;
|
|
||||||
|
|
@ -1,89 +0,0 @@
|
||||||
/**
|
|
||||||
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
||||||
*
|
|
||||||
* This source code is licensed under the MIT license found in the
|
|
||||||
* LICENSE file in the root directory of this source tree.
|
|
||||||
*/
|
|
||||||
|
|
||||||
@media screen and (max-width: 997px) {
|
|
||||||
.displayOnlyInLargeViewport {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 360px) {
|
|
||||||
.hideLogoText {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbarHideable {
|
|
||||||
transition: top 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbarHidden {
|
|
||||||
top: calc(var(--ifm-navbar-height) * -1) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbarItems {
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbarItemsRight[class] {
|
|
||||||
flex: 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navLink[class] {
|
|
||||||
position: relative;
|
|
||||||
margin-left: 2rem;
|
|
||||||
margin-right: 2rem;
|
|
||||||
color: var(--ifm-font-color-base);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navLink[class]:hover {
|
|
||||||
color: var(--ifm-color-emphasis-700);
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme="dark"] .navLink[class]:hover {
|
|
||||||
color: var(--ifm-color-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navLink[class]:global(.navbar__link--active) {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbarMain {
|
|
||||||
background-color: var(--ifm-background-color);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
margin: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme="dark"] .navbarOther {
|
|
||||||
background-color: var(--ifm-background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbarOther {
|
|
||||||
background-color: var(--ifm-color-white);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navBarBorder {
|
|
||||||
border-bottom: 1px solid var(--ifm-toc-border-color);
|
|
||||||
}
|
|
||||||
|
|
@ -1,250 +0,0 @@
|
||||||
/**
|
|
||||||
* 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, { 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 useThemeContext from "@theme/hooks/useThemeContext";
|
|
||||||
import useHideableNavbar from "@theme/hooks/useHideableNavbar";
|
|
||||||
import useLockBodyScroll from "@theme/hooks/useLockBodyScroll";
|
|
||||||
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 (
|
|
||||||
<Link
|
|
||||||
className={classnames(styles.navLink, "navbar__item navbar__link")}
|
|
||||||
{...(href
|
|
||||||
? {
|
|
||||||
target: "_blank",
|
|
||||||
rel: "noopener noreferrer",
|
|
||||||
href,
|
|
||||||
}
|
|
||||||
: {
|
|
||||||
activeClassName: "navbar__link--active",
|
|
||||||
to: toUrl,
|
|
||||||
})}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{label}
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
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 [sidebarShown, setSidebarShown] = useState(false);
|
|
||||||
const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
|
|
||||||
const { pathname } = useLocation();
|
|
||||||
|
|
||||||
const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext();
|
|
||||||
const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
|
|
||||||
|
|
||||||
const isMobile = useMedia({ maxWidth: 997 });
|
|
||||||
|
|
||||||
useLockBodyScroll(sidebarShown);
|
|
||||||
|
|
||||||
const showSidebar = useCallback(() => {
|
|
||||||
setSidebarShown(true);
|
|
||||||
}, [setSidebarShown]);
|
|
||||||
const hideSidebar = useCallback(() => {
|
|
||||||
setSidebarShown(false);
|
|
||||||
}, [setSidebarShown]);
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<nav
|
|
||||||
ref={navbarRef}
|
|
||||||
className={classnames("navbar", "navbar--light", "navbar--fixed-top", {
|
|
||||||
[styles.navbarMain]: pathname === "/",
|
|
||||||
[styles.navbarOther]: pathname !== "/",
|
|
||||||
"navbar-sidebar--show": sidebarShown,
|
|
||||||
[styles.navbarHideable]: hideOnScroll,
|
|
||||||
[styles.navbarHidden]: !isNavbarVisible,
|
|
||||||
})}
|
|
||||||
>
|
|
||||||
<div className="navbar__inner">
|
|
||||||
<div className={classnames("navbar__items", styles.navbarItems)}>
|
|
||||||
{!isMobile && (
|
|
||||||
<Link
|
|
||||||
className="navbar__brand"
|
|
||||||
to={baseUrl}
|
|
||||||
aria-label="Home"
|
|
||||||
title="Home"
|
|
||||||
>
|
|
||||||
<Logo size={32} className={styles.logo} />
|
|
||||||
{title != null && (
|
|
||||||
<strong
|
|
||||||
className={isSearchBarExpanded ? styles.hideLogoText : ""}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</strong>
|
|
||||||
)}
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
<div
|
|
||||||
aria-label="Navigation bar toggle"
|
|
||||||
className="navbar__toggle"
|
|
||||||
role="button"
|
|
||||||
tabIndex={0}
|
|
||||||
onClick={showSidebar}
|
|
||||||
onKeyDown={showSidebar}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="30"
|
|
||||||
height="30"
|
|
||||||
viewBox="0 0 30 30"
|
|
||||||
role="img"
|
|
||||||
focusable="false"
|
|
||||||
>
|
|
||||||
<title>Menu</title>
|
|
||||||
<path
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeMiterlimit="10"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M4 7h22M4 15h22M4 23h22"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
{links
|
|
||||||
.filter((linkItem) => linkItem.position !== "right")
|
|
||||||
.map((linkItem, i) => (
|
|
||||||
<NavLink {...linkItem} key={i} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className={classnames(
|
|
||||||
"navbar__items",
|
|
||||||
"navbar__items--right",
|
|
||||||
styles.navbarItemsRight
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{isMobile && (
|
|
||||||
<Link
|
|
||||||
className="navbar__brand"
|
|
||||||
to={baseUrl}
|
|
||||||
aria-label="Home"
|
|
||||||
title="Home"
|
|
||||||
>
|
|
||||||
<Logo size={32} className={styles.logo} />
|
|
||||||
{title != null && (
|
|
||||||
<strong
|
|
||||||
className={isSearchBarExpanded ? styles.hideLogoText : ""}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</strong>
|
|
||||||
)}
|
|
||||||
</Link>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!isMobile && (
|
|
||||||
<SearchBar
|
|
||||||
handleSearchBarToggle={setIsSearchBarExpanded}
|
|
||||||
isSearchBarExpanded={isSearchBarExpanded}
|
|
||||||
style={{ marginLeft: "0.5rem", marginRight: "0.5rem" }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{!disableDarkMode && !isMobile && (
|
|
||||||
<ColorModeToggle
|
|
||||||
toggle={onToggleChange}
|
|
||||||
isDark={isDarkTheme}
|
|
||||||
style={{ marginLeft: "0.5rem", marginRight: "0.5rem" }}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{!isMobile && (
|
|
||||||
<GithubButton
|
|
||||||
href={`https://github.com/${siteConfig.organizationName}/${siteConfig.projectName}`}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
role="presentation"
|
|
||||||
className="navbar-sidebar__backdrop"
|
|
||||||
onClick={hideSidebar}
|
|
||||||
/>
|
|
||||||
<div className="navbar-sidebar">
|
|
||||||
<div className="navbar-sidebar__brand">
|
|
||||||
<Link
|
|
||||||
className="navbar__brand"
|
|
||||||
to={baseUrl}
|
|
||||||
aria-label="Home"
|
|
||||||
title="Home"
|
|
||||||
>
|
|
||||||
<Logo size={32} className={styles.logo} />
|
|
||||||
{title != null && (
|
|
||||||
<strong
|
|
||||||
className={isSearchBarExpanded ? styles.hideLogoText : ""}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</strong>
|
|
||||||
)}
|
|
||||||
</Link>
|
|
||||||
{sidebarShown && (
|
|
||||||
<GithubButton
|
|
||||||
href={`https://github.com/${siteConfig.organizationName}/${siteConfig.projectName}`}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{!disableDarkMode && sidebarShown && (
|
|
||||||
<ColorModeToggle toggle={onToggleChange} isDark={isDarkTheme} />
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div className="navbar-sidebar__items">
|
|
||||||
<div className="menu">
|
|
||||||
<ul className="menu__list">
|
|
||||||
{links.map((linkItem, i) => (
|
|
||||||
<li className="menu__list-item" key={i}>
|
|
||||||
<NavLink
|
|
||||||
className="menu__link"
|
|
||||||
{...linkItem}
|
|
||||||
onClick={hideSidebar}
|
|
||||||
/>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
<div style={{ margin: 5, marginTop: 15 }} />
|
|
||||||
<SearchBar
|
|
||||||
handleSearchBarToggle={setIsSearchBarExpanded}
|
|
||||||
isSearchBarExpanded={isSearchBarExpanded}
|
|
||||||
/>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Navbar;
|
|
||||||
|
|
@ -1,76 +0,0 @@
|
||||||
@media screen and (max-width: 997px) {
|
|
||||||
.displayOnlyInLargeViewport {
|
|
||||||
display: none !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 360px) {
|
|
||||||
.hideLogoText {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbarHideable {
|
|
||||||
transition: top 0.2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbarHidden {
|
|
||||||
top: calc(var(--ifm-navbar-height) * -1) !important;
|
|
||||||
}
|
|
||||||
.navbarItems {
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbarItemsRight[class] {
|
|
||||||
flex: 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navLink[class] {
|
|
||||||
position: relative;
|
|
||||||
margin-left: 2rem;
|
|
||||||
margin-right: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navLink[class]:hover {
|
|
||||||
color: var(--ifm-color-white);
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme="dark"] .navLink[class]:hover {
|
|
||||||
color: var(--ifm-color-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navLink[class]:global(.navbar__link--active) {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbarMain {
|
|
||||||
background-color: var(--ifm-background-color);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
margin: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
html[data-theme="dark"] .navbarOther {
|
|
||||||
background-color: var(--ifm-background-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbarOther {
|
|
||||||
background-color: var(--ifm-color-white);
|
|
||||||
}
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,120 +0,0 @@
|
||||||
/**
|
|
||||||
* 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, { useState, useRef, useCallback } from "react";
|
|
||||||
import classnames from "classnames";
|
|
||||||
|
|
||||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
|
||||||
import { useHistory } from "@docusaurus/router";
|
|
||||||
|
|
||||||
import "./styles.css";
|
|
||||||
|
|
||||||
const Search = ({ handleSearchBarToggle, isSearchBarExpanded, ...props }) => {
|
|
||||||
const [algoliaLoaded, setAlgoliaLoaded] = useState(false);
|
|
||||||
const searchBarRef = useRef(null);
|
|
||||||
const { siteConfig = {} } = useDocusaurusContext();
|
|
||||||
const {
|
|
||||||
themeConfig: { algolia },
|
|
||||||
} = siteConfig;
|
|
||||||
const history = useHistory();
|
|
||||||
|
|
||||||
function initAlgolia(focus) {
|
|
||||||
window.docsearch({
|
|
||||||
appId: algolia.appId,
|
|
||||||
apiKey: algolia.apiKey,
|
|
||||||
indexName: algolia.indexName,
|
|
||||||
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");
|
|
||||||
a.href = suggestion.url;
|
|
||||||
|
|
||||||
// Algolia use closest parent element id #__docusaurus when a h1 page title does not have an id
|
|
||||||
// So, we can safely remove it. See https://github.com/facebook/docusaurus/issues/1828 for more details.
|
|
||||||
const routePath =
|
|
||||||
`#__docusaurus` === a.hash
|
|
||||||
? `${a.pathname}`
|
|
||||||
: `${a.pathname}${a.hash}`;
|
|
||||||
history.push(routePath);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
if (focus) {
|
|
||||||
searchBarRef.current.focus();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const loadAlgolia = (focus = true) => {
|
|
||||||
if (algoliaLoaded) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
Promise.all([import("docsearch.js"), import("./algolia.css")]).then(
|
|
||||||
([{ default: docsearch }]) => {
|
|
||||||
setAlgoliaLoaded(true);
|
|
||||||
window.docsearch = docsearch;
|
|
||||||
initAlgolia(focus);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSearchIcon = useCallback(() => {
|
|
||||||
loadAlgolia();
|
|
||||||
|
|
||||||
if (algoliaLoaded) {
|
|
||||||
searchBarRef.current.focus();
|
|
||||||
}
|
|
||||||
|
|
||||||
handleSearchBarToggle(!isSearchBarExpanded);
|
|
||||||
}, [isSearchBarExpanded]);
|
|
||||||
|
|
||||||
const handleSearchInputBlur = useCallback(() => {
|
|
||||||
handleSearchBarToggle(!isSearchBarExpanded);
|
|
||||||
}, [isSearchBarExpanded]);
|
|
||||||
|
|
||||||
const handleSearchInput = useCallback((e) => {
|
|
||||||
const needFocus = e.type !== "mouseover";
|
|
||||||
|
|
||||||
loadAlgolia(needFocus);
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="navbar__search" key="search-box" {...props}>
|
|
||||||
<span
|
|
||||||
aria-label="expand searchbar"
|
|
||||||
role="button"
|
|
||||||
className={classnames("search-icon", {
|
|
||||||
"search-icon-hidden": isSearchBarExpanded,
|
|
||||||
})}
|
|
||||||
onClick={handleSearchIcon}
|
|
||||||
onKeyDown={handleSearchIcon}
|
|
||||||
tabIndex={0}
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
id="search_input_react"
|
|
||||||
type="search"
|
|
||||||
placeholder="Search"
|
|
||||||
aria-label="Search"
|
|
||||||
className={classnames(
|
|
||||||
"navbar__search-input",
|
|
||||||
{ "search-bar-expanded": isSearchBarExpanded },
|
|
||||||
{ "search-bar": !isSearchBarExpanded }
|
|
||||||
)}
|
|
||||||
onMouseOver={handleSearchInput}
|
|
||||||
onFocus={handleSearchInput}
|
|
||||||
onBlur={handleSearchInputBlur}
|
|
||||||
ref={searchBarRef}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Search;
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
/**
|
|
||||||
* 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.
|
|
||||||
*/
|
|
||||||
|
|
||||||
.search-icon {
|
|
||||||
background-image: var(--ifm-navbar-search-input-icon);
|
|
||||||
height: auto;
|
|
||||||
width: 24px;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 8px;
|
|
||||||
line-height: 32px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-icon-hidden {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 360px) {
|
|
||||||
.search-bar {
|
|
||||||
width: 0 !important;
|
|
||||||
background: none !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
transition: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-bar-expanded {
|
|
||||||
width: 9rem !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-icon {
|
|
||||||
display: inline;
|
|
||||||
vertical-align: sub;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
2
docs/static/hyperglass-dark.svg
vendored
2
docs/static/hyperglass-dark.svg
vendored
|
|
@ -1,5 +1,5 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2759.9 544.87">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2759.9 544.87">
|
||||||
<g fill="#40798C">
|
<g fill="#ff5e5b">
|
||||||
<g>
|
<g>
|
||||||
<path d="M931.39,683.15q20.28,21.23,20.28,62.74l0,134.13c0,3.35-.85,5.94-2.51,7.76a10.52,10.52,0,0,1-14.15,0c-1.67-1.82-2.51-4.4-2.5-7.75l0-131.86q0-35.58-14.12-51.79t-45.62-16.21q-35.13,0-56.35,21.65t-21.24,57.71l0,120.44q0,5-2.51,7.76a9.12,9.12,0,0,1-7.07,2.74,9,9,0,0,1-6.84-3A10.66,10.66,0,0,1,776,880l.12-305.23q0-5,2.51-7.76a10.52,10.52,0,0,1,14.15,0c1.66,1.83,2.5,4.41,2.5,7.76l0,131.39a71.74,71.74,0,0,1,30.13-32.83q20.07-11.4,46.08-11.39Q911.09,661.93,931.39,683.15Z" transform="translate(-102 -476.45)" />
|
<path d="M931.39,683.15q20.28,21.23,20.28,62.74l0,134.13c0,3.35-.85,5.94-2.51,7.76a10.52,10.52,0,0,1-14.15,0c-1.67-1.82-2.51-4.4-2.5-7.75l0-131.86q0-35.58-14.12-51.79t-45.62-16.21q-35.13,0-56.35,21.65t-21.24,57.71l0,120.44q0,5-2.51,7.76a9.12,9.12,0,0,1-7.07,2.74,9,9,0,0,1-6.84-3A10.66,10.66,0,0,1,776,880l.12-305.23q0-5,2.51-7.76a10.52,10.52,0,0,1,14.15,0c1.66,1.83,2.5,4.41,2.5,7.76l0,131.39a71.74,71.74,0,0,1,30.13-32.83q20.07-11.4,46.08-11.39Q911.09,661.93,931.39,683.15Z" transform="translate(-102 -476.45)" />
|
||||||
<path d="M1201.26,663a9.19,9.19,0,0,1,6.39,2.51,8.56,8.56,0,0,1,2.73,6.62,14.35,14.35,0,0,1-.91,4.1l-131,290.12q-2.75,5.48-8.22,5.47a8.83,8.83,0,0,1-6.16-2.28,7.66,7.66,0,0,1-2.5-5.93l.91-3.65,32.88-72.08L999.6,676.1a14.33,14.33,0,0,1-.91-4.11,8.65,8.65,0,0,1,3.19-6.84,10.93,10.93,0,0,1,7.3-2.73q5,0,7.76,5.48l88,198.49.91-2.28,86.76-194.78C1194.42,665.08,1197.31,662.94,1201.26,663Z" transform="translate(-102 -476.45)" />
|
<path d="M1201.26,663a9.19,9.19,0,0,1,6.39,2.51,8.56,8.56,0,0,1,2.73,6.62,14.35,14.35,0,0,1-.91,4.1l-131,290.12q-2.75,5.48-8.22,5.47a8.83,8.83,0,0,1-6.16-2.28,7.66,7.66,0,0,1-2.5-5.93l.91-3.65,32.88-72.08L999.6,676.1a14.33,14.33,0,0,1-.91-4.11,8.65,8.65,0,0,1,3.19-6.84,10.93,10.93,0,0,1,7.3-2.73q5,0,7.76,5.48l88,198.49.91-2.28,86.76-194.78C1194.42,665.08,1197.31,662.94,1201.26,663Z" transform="translate(-102 -476.45)" />
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 7 KiB After Width: | Height: | Size: 7 KiB |
|
|
@ -1,25 +1,7 @@
|
||||||
import * as React from "react";
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1072 1072">
|
||||||
|
<g fill="#ff5e5b">
|
||||||
export default ({ color = "currentColor", size = 32, ...props }) => (
|
<path d="M1464,1000a515,515,0,0,1-4.41,66.71l1.28-9.57a502,502,0,0,1-34.62,127.3l3.63-8.6a504.73,504.73,0,0,1-65,111.35l5.63-7.28a508.39,508.39,0,0,1-90.59,90.59l7.28-5.63a504.73,504.73,0,0,1-111.35,65l8.6-3.63a502,502,0,0,1-127.3,34.62l9.57-1.28a510.21,510.21,0,0,1-133.42,0l9.57,1.28a502,502,0,0,1-127.3-34.62l8.6,3.63a504.73,504.73,0,0,1-111.35-65l7.28,5.63a508.39,508.39,0,0,1-90.59-90.59l5.63,7.28a504.73,504.73,0,0,1-65-111.35l3.63,8.6a502,502,0,0,1-34.62-127.3l1.28,9.57a510.21,510.21,0,0,1,0-133.42l-1.28,9.57a502,502,0,0,1,34.62-127.3l-3.63,8.6a504.73,504.73,0,0,1,65-111.35l-5.63,7.28a508.39,508.39,0,0,1,90.59-90.59l-7.28,5.63a504.73,504.73,0,0,1,111.35-65l-8.6,3.63a502,502,0,0,1,127.3-34.62l-9.57,1.28a510.21,510.21,0,0,1,133.42,0l-9.57-1.28a502,502,0,0,1,127.3,34.62l-8.6-3.63a504.73,504.73,0,0,1,111.35,65l-7.28-5.63a508.39,508.39,0,0,1,90.59,90.59l-5.63-7.28a504.73,504.73,0,0,1,65,111.35l-3.63-8.6a502,502,0,0,1,34.62,127.3l-1.28-9.57A515,515,0,0,1,1464,1000c0,18.83,16.54,36.87,36,36s36-15.82,36-36c-.08-55.42-8.52-111.43-25.65-164.17-16.55-51-40.5-99.86-71.58-143.54a557.67,557.67,0,0,0-116.28-120.13c-42.63-32.66-90.23-57.89-140.61-76.39-51.82-19-107.06-29.25-162.18-31.39a533.2,533.2,0,0,0-312.23,86.46c-44.52,29.28-85.17,64.88-119.06,106A563.88,563.88,0,0,0,540,724.75c-14.59,24.29-26.7,49.77-37.45,76-20.92,51-32.75,105.19-37,160.07a534.52,534.52,0,0,0,177.42,438.88C682.81,1435,727.64,1465,776.25,1487a556.45,556.45,0,0,0,79.53,29.37c28.09,7.84,56.76,12.87,85.71,16.24,55.9,6.52,112.74,3.31,167.85-7.85a534.41,534.41,0,0,0,277.91-154.19c36.66-38.42,68.14-82.48,91.8-130,24.24-48.73,41.65-100.88,49.89-154.72A572.24,572.24,0,0,0,1536,1000c0-18.83-16.58-36.87-36-36S1464,979.82,1464,1000Z" transform="translate(-463.99 -463.99)" />
|
||||||
<svg
|
<path d="M807.35,1347.71a396.14,396.14,0,0,0,193.6,51c12.55,0,24.58-11.06,24-24s-10.55-24-24-24c-15.93,0-32.51-.36-48.23-3.13,6.6,1.17.54,0-.61-.12q-3-.46-6.09-1-5.61-.94-11.21-2.06-11.52-2.3-22.89-5.34a365.56,365.56,0,0,1-43.22-14.52c-1.06-.42-2.11-.86-3.16-1.3l2.58,1.09a64.07,64.07,0,0,1-6.25-2.75q-4.65-2.1-9.25-4.33c-7.14-3.46-14.15-7.17-21-11.07-10.93-6.17-26.72-3-32.83,8.61-6,11.37-3.07,26.25,8.61,32.84Z" transform="translate(-463.99 -463.99)" />
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<path d="M723.68,729.37c-55.5,55.73-94.41,128.21-108.25,205.78A398.38,398.38,0,0,0,647.77,1177a391.15,391.15,0,0,0,75.91,106.88c8.87,8.91,25.18,9.54,33.94,0s9.47-24.43,0-33.94q-9.81-9.85-18.91-20.38-4-4.68-7.9-9.51c-.65-.8-1.29-1.61-1.93-2.41s-2.5-4.54-1-1.24c1.37,3,.22.27-.47-.64s-1.55-2.07-2.31-3.11a367.19,367.19,0,0,1-29.26-46.63Q689.5,1154,684,1141.42c-.41-1-.8-1.93-1.23-2.88,2.49,5.5,1.11,2.65.6,1.39-.78-1.94-1.57-3.88-2.33-5.83q-2.73-7-5.16-14a367.36,367.36,0,0,1-14-53.89c-.81-4.51-1.52-9-2.18-13.55-.63-4.26.16,1,.2,1.56-.08-1.07-.27-2.16-.4-3.22q-.5-4.05-.88-8.1-1.4-14.33-1.69-28.74t.55-29q.39-7,1.06-13.89.35-3.66.77-7.3c.12-1.08.26-2.15.38-3.23.59-4.9-.79,5.22,0-.05A386.85,386.85,0,0,1,671.76,906q4-13.21,9-26.09c.76-2,1.53-3.9,2.32-5.84l.3-.73c1-2.4.79-1.93-.6,1.39a14,14,0,0,1,1.23-2.88q2.82-6.45,5.87-12.79a367.61,367.61,0,0,1,30.71-52.19q2.24-3.17,4.53-6.28c1-1.43,6.28-8,1.84-2.55,3.24-4,6.41-8.07,9.74-12q10-11.79,20.91-22.73c8.87-8.91,9.56-25.16,0-33.94s-24.48-9.51-33.94,0Z" transform="translate(-463.99 -463.99)" />
|
||||||
viewBox="0 0 1072 1072"
|
</g>
|
||||||
width={size}
|
</svg>
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<g fill={color}>
|
|
||||||
<path
|
|
||||||
d="M1464,1000a515,515,0,0,1-4.41,66.71l1.28-9.57a502,502,0,0,1-34.62,127.3l3.63-8.6a504.73,504.73,0,0,1-65,111.35l5.63-7.28a508.39,508.39,0,0,1-90.59,90.59l7.28-5.63a504.73,504.73,0,0,1-111.35,65l8.6-3.63a502,502,0,0,1-127.3,34.62l9.57-1.28a510.21,510.21,0,0,1-133.42,0l9.57,1.28a502,502,0,0,1-127.3-34.62l8.6,3.63a504.73,504.73,0,0,1-111.35-65l7.28,5.63a508.39,508.39,0,0,1-90.59-90.59l5.63,7.28a504.73,504.73,0,0,1-65-111.35l3.63,8.6a502,502,0,0,1-34.62-127.3l1.28,9.57a510.21,510.21,0,0,1,0-133.42l-1.28,9.57a502,502,0,0,1,34.62-127.3l-3.63,8.6a504.73,504.73,0,0,1,65-111.35l-5.63,7.28a508.39,508.39,0,0,1,90.59-90.59l-7.28,5.63a504.73,504.73,0,0,1,111.35-65l-8.6,3.63a502,502,0,0,1,127.3-34.62l-9.57,1.28a510.21,510.21,0,0,1,133.42,0l-9.57-1.28a502,502,0,0,1,127.3,34.62l-8.6-3.63a504.73,504.73,0,0,1,111.35,65l-7.28-5.63a508.39,508.39,0,0,1,90.59,90.59l-5.63-7.28a504.73,504.73,0,0,1,65,111.35l-3.63-8.6a502,502,0,0,1,34.62,127.3l-1.28-9.57A515,515,0,0,1,1464,1000c0,18.83,16.54,36.87,36,36s36-15.82,36-36c-.08-55.42-8.52-111.43-25.65-164.17-16.55-51-40.5-99.86-71.58-143.54a557.67,557.67,0,0,0-116.28-120.13c-42.63-32.66-90.23-57.89-140.61-76.39-51.82-19-107.06-29.25-162.18-31.39a533.2,533.2,0,0,0-312.23,86.46c-44.52,29.28-85.17,64.88-119.06,106A563.88,563.88,0,0,0,540,724.75c-14.59,24.29-26.7,49.77-37.45,76-20.92,51-32.75,105.19-37,160.07a534.52,534.52,0,0,0,177.42,438.88C682.81,1435,727.64,1465,776.25,1487a556.45,556.45,0,0,0,79.53,29.37c28.09,7.84,56.76,12.87,85.71,16.24,55.9,6.52,112.74,3.31,167.85-7.85a534.41,534.41,0,0,0,277.91-154.19c36.66-38.42,68.14-82.48,91.8-130,24.24-48.73,41.65-100.88,49.89-154.72A572.24,572.24,0,0,0,1536,1000c0-18.83-16.58-36.87-36-36S1464,979.82,1464,1000Z"
|
|
||||||
transform="translate(-463.99 -463.99)"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M807.35,1347.71a396.14,396.14,0,0,0,193.6,51c12.55,0,24.58-11.06,24-24s-10.55-24-24-24c-15.93,0-32.51-.36-48.23-3.13,6.6,1.17.54,0-.61-.12q-3-.46-6.09-1-5.61-.94-11.21-2.06-11.52-2.3-22.89-5.34a365.56,365.56,0,0,1-43.22-14.52c-1.06-.42-2.11-.86-3.16-1.3l2.58,1.09a64.07,64.07,0,0,1-6.25-2.75q-4.65-2.1-9.25-4.33c-7.14-3.46-14.15-7.17-21-11.07-10.93-6.17-26.72-3-32.83,8.61-6,11.37-3.07,26.25,8.61,32.84Z"
|
|
||||||
transform="translate(-463.99 -463.99)"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M723.68,729.37c-55.5,55.73-94.41,128.21-108.25,205.78A398.38,398.38,0,0,0,647.77,1177a391.15,391.15,0,0,0,75.91,106.88c8.87,8.91,25.18,9.54,33.94,0s9.47-24.43,0-33.94q-9.81-9.85-18.91-20.38-4-4.68-7.9-9.51c-.65-.8-1.29-1.61-1.93-2.41s-2.5-4.54-1-1.24c1.37,3,.22.27-.47-.64s-1.55-2.07-2.31-3.11a367.19,367.19,0,0,1-29.26-46.63Q689.5,1154,684,1141.42c-.41-1-.8-1.93-1.23-2.88,2.49,5.5,1.11,2.65.6,1.39-.78-1.94-1.57-3.88-2.33-5.83q-2.73-7-5.16-14a367.36,367.36,0,0,1-14-53.89c-.81-4.51-1.52-9-2.18-13.55-.63-4.26.16,1,.2,1.56-.08-1.07-.27-2.16-.4-3.22q-.5-4.05-.88-8.1-1.4-14.33-1.69-28.74t.55-29q.39-7,1.06-13.89.35-3.66.77-7.3c.12-1.08.26-2.15.38-3.23.59-4.9-.79,5.22,0-.05A386.85,386.85,0,0,1,671.76,906q4-13.21,9-26.09c.76-2,1.53-3.9,2.32-5.84l.3-.73c1-2.4.79-1.93-.6,1.39a14,14,0,0,1,1.23-2.88q2.82-6.45,5.87-12.79a367.61,367.61,0,0,1,30.71-52.19q2.24-3.17,4.53-6.28c1-1.43,6.28-8,1.84-2.55,3.24-4,6.41-8.07,9.74-12q10-11.79,20.91-22.73c8.87-8.91,9.56-25.16,0-33.94s-24.48-9.51-33.94,0Z"
|
|
||||||
transform="translate(-463.99 -463.99)"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
|
Before Width: | Height: | Size: 3.5 KiB After Width: | Height: | Size: 3.3 KiB |
7
docs/static/hyperglass-icon-light.svg
vendored
Normal file
7
docs/static/hyperglass-icon-light.svg
vendored
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1072 1072">
|
||||||
|
<g fill="#40798C">
|
||||||
|
<path d="M1464,1000a515,515,0,0,1-4.41,66.71l1.28-9.57a502,502,0,0,1-34.62,127.3l3.63-8.6a504.73,504.73,0,0,1-65,111.35l5.63-7.28a508.39,508.39,0,0,1-90.59,90.59l7.28-5.63a504.73,504.73,0,0,1-111.35,65l8.6-3.63a502,502,0,0,1-127.3,34.62l9.57-1.28a510.21,510.21,0,0,1-133.42,0l9.57,1.28a502,502,0,0,1-127.3-34.62l8.6,3.63a504.73,504.73,0,0,1-111.35-65l7.28,5.63a508.39,508.39,0,0,1-90.59-90.59l5.63,7.28a504.73,504.73,0,0,1-65-111.35l3.63,8.6a502,502,0,0,1-34.62-127.3l1.28,9.57a510.21,510.21,0,0,1,0-133.42l-1.28,9.57a502,502,0,0,1,34.62-127.3l-3.63,8.6a504.73,504.73,0,0,1,65-111.35l-5.63,7.28a508.39,508.39,0,0,1,90.59-90.59l-7.28,5.63a504.73,504.73,0,0,1,111.35-65l-8.6,3.63a502,502,0,0,1,127.3-34.62l-9.57,1.28a510.21,510.21,0,0,1,133.42,0l-9.57-1.28a502,502,0,0,1,127.3,34.62l-8.6-3.63a504.73,504.73,0,0,1,111.35,65l-7.28-5.63a508.39,508.39,0,0,1,90.59,90.59l-5.63-7.28a504.73,504.73,0,0,1,65,111.35l-3.63-8.6a502,502,0,0,1,34.62,127.3l-1.28-9.57A515,515,0,0,1,1464,1000c0,18.83,16.54,36.87,36,36s36-15.82,36-36c-.08-55.42-8.52-111.43-25.65-164.17-16.55-51-40.5-99.86-71.58-143.54a557.67,557.67,0,0,0-116.28-120.13c-42.63-32.66-90.23-57.89-140.61-76.39-51.82-19-107.06-29.25-162.18-31.39a533.2,533.2,0,0,0-312.23,86.46c-44.52,29.28-85.17,64.88-119.06,106A563.88,563.88,0,0,0,540,724.75c-14.59,24.29-26.7,49.77-37.45,76-20.92,51-32.75,105.19-37,160.07a534.52,534.52,0,0,0,177.42,438.88C682.81,1435,727.64,1465,776.25,1487a556.45,556.45,0,0,0,79.53,29.37c28.09,7.84,56.76,12.87,85.71,16.24,55.9,6.52,112.74,3.31,167.85-7.85a534.41,534.41,0,0,0,277.91-154.19c36.66-38.42,68.14-82.48,91.8-130,24.24-48.73,41.65-100.88,49.89-154.72A572.24,572.24,0,0,0,1536,1000c0-18.83-16.58-36.87-36-36S1464,979.82,1464,1000Z" transform="translate(-463.99 -463.99)" />
|
||||||
|
<path d="M807.35,1347.71a396.14,396.14,0,0,0,193.6,51c12.55,0,24.58-11.06,24-24s-10.55-24-24-24c-15.93,0-32.51-.36-48.23-3.13,6.6,1.17.54,0-.61-.12q-3-.46-6.09-1-5.61-.94-11.21-2.06-11.52-2.3-22.89-5.34a365.56,365.56,0,0,1-43.22-14.52c-1.06-.42-2.11-.86-3.16-1.3l2.58,1.09a64.07,64.07,0,0,1-6.25-2.75q-4.65-2.1-9.25-4.33c-7.14-3.46-14.15-7.17-21-11.07-10.93-6.17-26.72-3-32.83,8.61-6,11.37-3.07,26.25,8.61,32.84Z" transform="translate(-463.99 -463.99)" />
|
||||||
|
<path d="M723.68,729.37c-55.5,55.73-94.41,128.21-108.25,205.78A398.38,398.38,0,0,0,647.77,1177a391.15,391.15,0,0,0,75.91,106.88c8.87,8.91,25.18,9.54,33.94,0s9.47-24.43,0-33.94q-9.81-9.85-18.91-20.38-4-4.68-7.9-9.51c-.65-.8-1.29-1.61-1.93-2.41s-2.5-4.54-1-1.24c1.37,3,.22.27-.47-.64s-1.55-2.07-2.31-3.11a367.19,367.19,0,0,1-29.26-46.63Q689.5,1154,684,1141.42c-.41-1-.8-1.93-1.23-2.88,2.49,5.5,1.11,2.65.6,1.39-.78-1.94-1.57-3.88-2.33-5.83q-2.73-7-5.16-14a367.36,367.36,0,0,1-14-53.89c-.81-4.51-1.52-9-2.18-13.55-.63-4.26.16,1,.2,1.56-.08-1.07-.27-2.16-.4-3.22q-.5-4.05-.88-8.1-1.4-14.33-1.69-28.74t.55-29q.39-7,1.06-13.89.35-3.66.77-7.3c.12-1.08.26-2.15.38-3.23.59-4.9-.79,5.22,0-.05A386.85,386.85,0,0,1,671.76,906q4-13.21,9-26.09c.76-2,1.53-3.9,2.32-5.84l.3-.73c1-2.4.79-1.93-.6,1.39a14,14,0,0,1,1.23-2.88q2.82-6.45,5.87-12.79a367.61,367.61,0,0,1,30.71-52.19q2.24-3.17,4.53-6.28c1-1.43,6.28-8,1.84-2.55,3.24-4,6.41-8.07,9.74-12q10-11.79,20.91-22.73c8.87-8.91,9.56-25.16,0-33.94s-24.48-9.51-33.94,0Z" transform="translate(-463.99 -463.99)" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.3 KiB |
2
docs/static/hyperglass-light.svg
vendored
2
docs/static/hyperglass-light.svg
vendored
|
|
@ -1,5 +1,5 @@
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2759.9 544.87">
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2759.9 544.87">
|
||||||
<g fill="#ff5e5b">
|
<g fill="#40798C">
|
||||||
<g>
|
<g>
|
||||||
<path d="M931.39,683.15q20.28,21.23,20.28,62.74l0,134.13c0,3.35-.85,5.94-2.51,7.76a10.52,10.52,0,0,1-14.15,0c-1.67-1.82-2.51-4.4-2.5-7.75l0-131.86q0-35.58-14.12-51.79t-45.62-16.21q-35.13,0-56.35,21.65t-21.24,57.71l0,120.44q0,5-2.51,7.76a9.12,9.12,0,0,1-7.07,2.74,9,9,0,0,1-6.84-3A10.66,10.66,0,0,1,776,880l.12-305.23q0-5,2.51-7.76a10.52,10.52,0,0,1,14.15,0c1.66,1.83,2.5,4.41,2.5,7.76l0,131.39a71.74,71.74,0,0,1,30.13-32.83q20.07-11.4,46.08-11.39Q911.09,661.93,931.39,683.15Z" transform="translate(-102 -476.45)" />
|
<path d="M931.39,683.15q20.28,21.23,20.28,62.74l0,134.13c0,3.35-.85,5.94-2.51,7.76a10.52,10.52,0,0,1-14.15,0c-1.67-1.82-2.51-4.4-2.5-7.75l0-131.86q0-35.58-14.12-51.79t-45.62-16.21q-35.13,0-56.35,21.65t-21.24,57.71l0,120.44q0,5-2.51,7.76a9.12,9.12,0,0,1-7.07,2.74,9,9,0,0,1-6.84-3A10.66,10.66,0,0,1,776,880l.12-305.23q0-5,2.51-7.76a10.52,10.52,0,0,1,14.15,0c1.66,1.83,2.5,4.41,2.5,7.76l0,131.39a71.74,71.74,0,0,1,30.13-32.83q20.07-11.4,46.08-11.39Q911.09,661.93,931.39,683.15Z" transform="translate(-102 -476.45)" />
|
||||||
<path d="M1201.26,663a9.19,9.19,0,0,1,6.39,2.51,8.56,8.56,0,0,1,2.73,6.62,14.35,14.35,0,0,1-.91,4.1l-131,290.12q-2.75,5.48-8.22,5.47a8.83,8.83,0,0,1-6.16-2.28,7.66,7.66,0,0,1-2.5-5.93l.91-3.65,32.88-72.08L999.6,676.1a14.33,14.33,0,0,1-.91-4.11,8.65,8.65,0,0,1,3.19-6.84,10.93,10.93,0,0,1,7.3-2.73q5,0,7.76,5.48l88,198.49.91-2.28,86.76-194.78C1194.42,665.08,1197.31,662.94,1201.26,663Z" transform="translate(-102 -476.45)" />
|
<path d="M1201.26,663a9.19,9.19,0,0,1,6.39,2.51,8.56,8.56,0,0,1,2.73,6.62,14.35,14.35,0,0,1-.91,4.1l-131,290.12q-2.75,5.48-8.22,5.47a8.83,8.83,0,0,1-6.16-2.28,7.66,7.66,0,0,1-2.5-5.93l.91-3.65,32.88-72.08L999.6,676.1a14.33,14.33,0,0,1-.91-4.11,8.65,8.65,0,0,1,3.19-6.84,10.93,10.93,0,0,1,7.3-2.73q5,0,7.76,5.48l88,198.49.91-2.28,86.76-194.78C1194.42,665.08,1197.31,662.94,1201.26,663Z" transform="translate(-102 -476.45)" />
|
||||||
|
|
|
||||||
|
Before Width: | Height: | Size: 7 KiB After Width: | Height: | Size: 7 KiB |
4
docs/tsconfig.json
Normal file
4
docs/tsconfig.json
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
{
|
||||||
|
"extends": "@tsconfig/docusaurus/tsconfig.json",
|
||||||
|
"include": ["src/"]
|
||||||
|
}
|
||||||
8692
docs/yarn.lock
8692
docs/yarn.lock
File diff suppressed because it is too large
Load diff
Loading…
Add table
Reference in a new issue