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
|
||||
/node_modules
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ description: Welcome to hyperglass
|
|||
|
||||
import Link from "@docusaurus/Link";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import classnames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
## 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
|
||||
|
||||
<Link
|
||||
className={classnames(
|
||||
className={clsx(
|
||||
"button button--outline button--secondary button--lg",
|
||||
styles.getStarted
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -20,15 +20,23 @@ const docusaurusConfig = {
|
|||
apiKey: algoliaKey || "dev",
|
||||
indexName: "hyperglass",
|
||||
},
|
||||
prism: {
|
||||
additionalLanguages: ["shell-session", "ini", "nginx", "yaml"],
|
||||
theme: require("./src/prism-dracula"),
|
||||
},
|
||||
navbar: {
|
||||
links: [
|
||||
items: [
|
||||
{ to: "docs/introduction", label: "Docs", position: "left" },
|
||||
{ to: "screenshots", label: "Screenshots", position: "left" },
|
||||
{ href: "https://demo.hyperglass.io", label: "Demo", position: "left" },
|
||||
{
|
||||
href: githubURL,
|
||||
position: "right",
|
||||
className: "header-github-link",
|
||||
"aria-label": "GitHub Repository",
|
||||
},
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
style: "dark",
|
||||
links: [
|
||||
{
|
||||
title: "Docs",
|
||||
|
|
@ -50,18 +58,14 @@ const docusaurusConfig = {
|
|||
{
|
||||
title: "Community",
|
||||
items: [
|
||||
{
|
||||
label: "Slack",
|
||||
href: "https://netdev.chat",
|
||||
},
|
||||
{
|
||||
label: "Telegram",
|
||||
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/",
|
||||
},
|
||||
theme: {
|
||||
customCss: require.resolve("./src/css/custom.css"),
|
||||
customCss: [require.resolve("./src/css/custom.css")],
|
||||
},
|
||||
},
|
||||
],
|
||||
|
|
|
|||
|
|
@ -1,22 +1,30 @@
|
|||
{
|
||||
"name": "docs",
|
||||
"version": "0.0.0",
|
||||
"name": "hyperglass-docs",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"docusaurus": "docusaurus",
|
||||
"start": "docusaurus start",
|
||||
"build": "docusaurus build",
|
||||
"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": {
|
||||
"@docusaurus/core": "^2.0.0-alpha.58",
|
||||
"@docusaurus/preset-classic": "^2.0.0-alpha.58",
|
||||
"classnames": "^2.2.6",
|
||||
"@docusaurus/core": "^2.0.0-beta.0",
|
||||
"@docusaurus/preset-classic": "^2.0.0-beta.0",
|
||||
"@mdx-js/react": "^1.6.22",
|
||||
"@svgr/webpack": "^5.5.0",
|
||||
"clsx": "^1.1.1",
|
||||
"globby": "^11.0.1",
|
||||
"prismjs": "^1.19.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.4",
|
||||
"react-dom": "^16.8.4",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"url-loader": "^4.1.1",
|
||||
"use-media": "^1.4.0"
|
||||
},
|
||||
"browserslist": {
|
||||
|
|
@ -32,7 +40,13 @@
|
|||
]
|
||||
},
|
||||
"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": {
|
||||
"[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 classnames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import styles from "./fonts.module.css";
|
||||
|
||||
export default ({ name }) => {
|
||||
const fontClass = { Nunito: "fontBody", "Fira Code": "fontMono" };
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
Consolas, "Liberation Mono", "Courier New", monospace;
|
||||
--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 {
|
||||
|
|
@ -54,6 +57,12 @@ html[data-theme="dark"]:root {
|
|||
--ifm-navbar-background-color: var(--ifm-background-color);
|
||||
--ifm-menu-color-active: var(--ifm-color-primary);
|
||||
--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 {
|
||||
|
|
@ -92,11 +101,6 @@ html[data-theme="dark"]:root .admonition.alert.admonition-note {
|
|||
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 {
|
||||
--ifm-footer-color: var(--ifm-color-emphasis-600);
|
||||
--ifm-footer-link-color: var(--ifm-footer-color);
|
||||
|
|
@ -108,14 +112,8 @@ html[data-theme="dark"] .footer.footer--dark {
|
|||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--ifm-code-background: rgba(255, 255, 255, 0.08);
|
||||
--ifm-code-color: var(--ifm-color-secondary-lightest);
|
||||
--ifm-footer-link-color: ;
|
||||
/* #ace8cd
|
||||
#b6a7e2
|
||||
#dc7381
|
||||
*/
|
||||
.footer .footer__items .footer__item .footer__link-item {
|
||||
color: var(--hgd-footer-link-color);
|
||||
}
|
||||
|
||||
.admonition {
|
||||
|
|
@ -167,20 +165,13 @@ h6 code {
|
|||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--ifm-color-secondary);
|
||||
}
|
||||
.contents a.contents__link--active[class] {
|
||||
color: var(--ifm-color-secondary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--ifm-color-secondary-darker);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] a {
|
||||
color: var(--ifm-color-primary);
|
||||
color: var(--hgd-link-hover-color);
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] a:hover {
|
||||
color: var(--ifm-color-primary-light);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .navbar .navbar__items a.navbar__brand {
|
||||
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 {
|
||||
color: var(--ifm-color-black);
|
||||
}
|
||||
|
|
@ -211,6 +202,9 @@ html[data-theme="dark"] .navbar .navbar__items a.navbar__brand {
|
|||
width: 100%;
|
||||
display: block;
|
||||
}
|
||||
.navbar .navbar__inner .navbar__items a.navbar__brand img.logo-at-home {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar .navbar__search .navbar__search-input {
|
||||
|
|
@ -250,3 +244,41 @@ html[data-theme="dark"]
|
|||
.table-of-contents .table-of-contents__link {
|
||||
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 classnames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import Layout from "@theme/Layout";
|
||||
import Link from "@docusaurus/Link";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
|
|
@ -27,12 +27,10 @@ function Home() {
|
|||
"reactjs",
|
||||
]}
|
||||
>
|
||||
<header className={classnames("hero", styles.heroBanner)}>
|
||||
<header className={clsx("hero", styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<h1 className={classnames("hero__title", styles.title)}>
|
||||
hyperglass
|
||||
</h1>
|
||||
<h2 className={classnames("hero__subtitle", styles.subTitle)}>
|
||||
<h1 className={clsx("hero__title", styles.title)}>hyperglass</h1>
|
||||
<h2 className={clsx("hero__subtitle", styles.subTitle)}>
|
||||
the <span className={styles.tagPrimary}>network looking glass</span>{" "}
|
||||
that tries to
|
||||
<span className={styles.tagSecondary}>
|
||||
|
|
@ -43,7 +41,7 @@ function Home() {
|
|||
</h2>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className={classnames(
|
||||
className={clsx(
|
||||
"button button--outline button--secondary button--lg",
|
||||
styles.homeBtn,
|
||||
styles.btnSecondary
|
||||
|
|
@ -53,7 +51,7 @@ function Home() {
|
|||
Set up your Looking Glass
|
||||
</Link>
|
||||
<Link
|
||||
className={classnames(
|
||||
className={clsx(
|
||||
"button button--outline button--primary button--lg",
|
||||
styles.homeBtn,
|
||||
styles.btnPrimary
|
||||
|
|
@ -69,16 +67,16 @@ function Home() {
|
|||
<section className={styles.content}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className={classnames("col col--4")}>
|
||||
<div className={clsx("col col--4")}>
|
||||
<section className={styles.content}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className={classnames("col col--12")}></div>
|
||||
<div className={clsx("col col--12")}></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div className={classnames("col col--8")}></div>
|
||||
<div className={clsx("col col--8")}></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import * as React from "react";
|
||||
import classnames from "classnames";
|
||||
import clsx from "clsx";
|
||||
import Layout from "@theme/Layout";
|
||||
import Link from "@docusaurus/Link";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
|
|
@ -11,13 +11,11 @@ function Screenshots() {
|
|||
description="hyperglass screenshots"
|
||||
keywords={["hyperglass", "screenshots"]}
|
||||
>
|
||||
<header className={classnames("hero", styles.heroBanner)}>
|
||||
<div className={classnames("container", styles.smallerTitleContainer)}>
|
||||
<h1 className={classnames("hero__title", styles.title)}>
|
||||
Coming Soon!
|
||||
</h1>
|
||||
<header className={clsx("hero", styles.heroBanner)}>
|
||||
<div className={clsx("container", styles.smallerTitleContainer)}>
|
||||
<h1 className={clsx("hero__title", styles.title)}>Coming Soon!</h1>
|
||||
<h2
|
||||
className={classnames(
|
||||
className={clsx(
|
||||
"hero__subtitle",
|
||||
styles.subTitle,
|
||||
styles.smallerTitle
|
||||
|
|
@ -29,7 +27,7 @@ function Screenshots() {
|
|||
</h2>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className={classnames(
|
||||
className={clsx(
|
||||
"button button--outline button--secondary button--lg",
|
||||
styles.homeBtn,
|
||||
styles.btnSecondary
|
||||
|
|
@ -45,16 +43,16 @@ function Screenshots() {
|
|||
<section className={styles.content}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className={classnames("col col--4")}>
|
||||
<div className={clsx("col col--4")}>
|
||||
<section className={styles.content}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className={classnames("col col--12")}></div>
|
||||
<div className={clsx("col col--12")}></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div className={classnames("col col--8")}></div>
|
||||
<div className={clsx("col col--8")}></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// @flow
|
||||
|
||||
export default {
|
||||
module.exports = {
|
||||
plain: {
|
||||
color: "rgb(241, 250, 140)",
|
||||
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">
|
||||
<g fill="#40798C">
|
||||
<g fill="#ff5e5b">
|
||||
<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="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";
|
||||
|
||||
export default ({ color = "currentColor", size = 32, ...props }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1072 1072"
|
||||
width={size}
|
||||
{...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)"
|
||||
/>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1072 1072">
|
||||
<g fill="#ff5e5b">
|
||||
<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>
|
||||
);
|
||||
</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">
|
||||
<g fill="#ff5e5b">
|
||||
<g fill="#40798C">
|
||||
<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="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