mirror of
https://github.com/checktheroads/hyperglass
synced 2024-05-11 05:55:08 +00:00
ui improvements
This commit is contained in:
checktheroads
@@ -3,100 +3,108 @@ const githubURL = "https://github.com/checktheroads/hyperglass";
|
||||
const { googleTrackingId, algoliaKey } = process.env;
|
||||
|
||||
module.exports = {
|
||||
title: "hyperglass",
|
||||
tagline: "the network looking glass that tries to make the internet better.",
|
||||
url: "https://hyperglass.io",
|
||||
baseUrl: "/",
|
||||
favicon: "img/favicon.ico",
|
||||
organizationName: "checktheroads",
|
||||
projectName: "hyperglass",
|
||||
themeConfig: {
|
||||
googleAnalytics: { trackingID: googleTrackingId || " ", anonymizeIP: false },
|
||||
gtag: {
|
||||
trackingID: googleTrackingId || " ",
|
||||
anonymizeIP: false,
|
||||
},
|
||||
algolia: {
|
||||
apiKey: algoliaKey,
|
||||
indexName: "hyperglass",
|
||||
},
|
||||
navbar: {
|
||||
links: [
|
||||
{ to: "docs/introduction", label: "Docs", position: "left" },
|
||||
{ to: "screenshots", label: "Screenshots", position: "left" },
|
||||
{
|
||||
href: "https://demo.hyperglass.io",
|
||||
label: "Demo",
|
||||
position: "left",
|
||||
},
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
style: "dark",
|
||||
links: [
|
||||
{
|
||||
title: "Docs",
|
||||
items: [
|
||||
{
|
||||
label: "Introduction",
|
||||
to: "docs/introduction",
|
||||
},
|
||||
{
|
||||
label: "Getting Started",
|
||||
to: "docs/getting-started",
|
||||
},
|
||||
{
|
||||
label: "Configuration",
|
||||
to: "docs/configuration",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community",
|
||||
items: [
|
||||
{
|
||||
label: "Gitter",
|
||||
href: "https://gitter.im/hyperglass",
|
||||
},
|
||||
{
|
||||
label: "Keybase",
|
||||
href: "https://keybase.io/team/hyperglass",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "GitHub",
|
||||
href: githubURL,
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "https://twitter.com/checktheroads",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
title: "hyperglass",
|
||||
tagline: "the network looking glass that tries to make the internet better.",
|
||||
url: "https://hyperglass.io",
|
||||
baseUrl: "/",
|
||||
favicon: "img/favicon.ico",
|
||||
organizationName: "checktheroads",
|
||||
projectName: "hyperglass",
|
||||
themeConfig: {
|
||||
googleAnalytics: {
|
||||
trackingID: googleTrackingId || " ",
|
||||
anonymizeIP: false,
|
||||
},
|
||||
presets: [
|
||||
[
|
||||
"@docusaurus/preset-classic",
|
||||
gtag: {
|
||||
trackingID: googleTrackingId || " ",
|
||||
anonymizeIP: false,
|
||||
},
|
||||
algolia: {
|
||||
apiKey: algoliaKey,
|
||||
indexName: "hyperglass",
|
||||
},
|
||||
navbar: {
|
||||
links: [
|
||||
{ to: "docs/introduction", label: "Docs", position: "left" },
|
||||
{ to: "screenshots", label: "Screenshots", position: "left" },
|
||||
{ to: "demo", label: "Demo", position: "left" },
|
||||
// {
|
||||
// href: "https://demo.hyperglass.io",
|
||||
// label: "Demo",
|
||||
// position: "left",
|
||||
// },
|
||||
],
|
||||
},
|
||||
footer: {
|
||||
style: "dark",
|
||||
links: [
|
||||
{
|
||||
title: "Docs",
|
||||
items: [
|
||||
{
|
||||
docs: {
|
||||
sidebarPath: require.resolve("./sidebars.js"),
|
||||
editUrl: githubURL + "/edit/master/docs/",
|
||||
},
|
||||
theme: {
|
||||
customCss: require.resolve("./src/css/custom.css"),
|
||||
},
|
||||
label: "Introduction",
|
||||
to: "docs/introduction",
|
||||
},
|
||||
],
|
||||
],
|
||||
plugins: [
|
||||
"@docusaurus/plugin-google-analytics",
|
||||
"@docusaurus/plugin-google-gtag",
|
||||
"@docusaurus/plugin-sitemap",
|
||||
{
|
||||
label: "Getting Started",
|
||||
to: "docs/getting-started",
|
||||
},
|
||||
{
|
||||
label: "Configuration",
|
||||
to: "docs/configuration",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Community",
|
||||
items: [
|
||||
{
|
||||
label: "Telegram",
|
||||
href: "https://t.me/hyperglasslg",
|
||||
},
|
||||
{
|
||||
label: "Gitter",
|
||||
href: "https://gitter.im/hyperglass",
|
||||
},
|
||||
{
|
||||
label: "Keybase",
|
||||
href: "https://keybase.io/team/hyperglass",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Social",
|
||||
items: [
|
||||
{
|
||||
label: "GitHub",
|
||||
href: githubURL,
|
||||
},
|
||||
{
|
||||
label: "Twitter",
|
||||
href: "https://twitter.com/checktheroads",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
presets: [
|
||||
[
|
||||
"@docusaurus/preset-classic",
|
||||
{
|
||||
docs: {
|
||||
sidebarPath: require.resolve("./sidebars.js"),
|
||||
editUrl: githubURL + "/edit/master/docs/",
|
||||
},
|
||||
theme: {
|
||||
customCss: require.resolve("./src/css/custom.css"),
|
||||
},
|
||||
},
|
||||
],
|
||||
],
|
||||
plugins: [
|
||||
"@docusaurus/plugin-google-analytics",
|
||||
"@docusaurus/plugin-google-gtag",
|
||||
"@docusaurus/plugin-sitemap",
|
||||
],
|
||||
};
|
||||
|
||||
@@ -16,7 +16,6 @@
|
||||
"prismjs": "^1.19.0",
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.8.4",
|
||||
"react-dark-mode-toggle": "^0.0.3",
|
||||
"react-dom": "^16.8.4",
|
||||
"use-media": "^1.4.0"
|
||||
},
|
||||
|
||||
23
docs/src/components/ColorModeToggle/Moon.js
Normal file
23
docs/src/components/ColorModeToggle/Moon.js
Normal file
@@ -0,0 +1,23 @@
|
||||
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>
|
||||
);
|
||||
21
docs/src/components/ColorModeToggle/Sun.js
Normal file
21
docs/src/components/ColorModeToggle/Sun.js
Normal file
@@ -0,0 +1,21 @@
|
||||
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>
|
||||
);
|
||||
30
docs/src/components/ColorModeToggle/index.js
Normal file
30
docs/src/components/ColorModeToggle/index.js
Normal file
@@ -0,0 +1,30 @@
|
||||
import * as React from "react";
|
||||
import classnames from "classnames";
|
||||
import { Sun } from "./Sun";
|
||||
import { Moon } from "./Moon";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
const iconMap = { true: Moon, false: Sun };
|
||||
|
||||
export const ColorModeToggle = ({ isDark, toggle, ...props }) => {
|
||||
const Icon = iconMap[isDark];
|
||||
const handleToggle = () => {
|
||||
if (isDark) {
|
||||
return toggle(false);
|
||||
} else {
|
||||
return toggle(true);
|
||||
}
|
||||
};
|
||||
const label = `${isDark ? "Hurt" : "Rest"} your eyes`;
|
||||
return (
|
||||
<button
|
||||
aria-label={label}
|
||||
title={label}
|
||||
className={classnames(styles.colorModeToggle)}
|
||||
onClick={handleToggle}
|
||||
{...props}
|
||||
>
|
||||
<Icon />
|
||||
</button>
|
||||
);
|
||||
};
|
||||
40
docs/src/components/ColorModeToggle/styles.module.css
Normal file
40
docs/src/components/ColorModeToggle/styles.module.css
Normal file
@@ -0,0 +1,40 @@
|
||||
.colorModeToggle {
|
||||
color: var(--ifm-color-black);
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
border-radius: var(--ifm-button-border-radius);
|
||||
border: 1px solid transparent;
|
||||
transition: color var(--ifm-button-transition-duration)
|
||||
cubic-bezier(0.08, 0.52, 0.52, 1),
|
||||
background var(--ifm-button-transition-duration)
|
||||
cubic-bezier(0.08, 0.52, 0.52, 1),
|
||||
border-color var(--ifm-button-transition-duration)
|
||||
cubic-bezier(0.08, 0.52, 0.52, 1);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-size: calc(0.875rem * var(--ifm-button-size-multiplier));
|
||||
line-height: 1.5;
|
||||
outline: 0;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
padding: 6px 12px;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.colorModeToggle:hover {
|
||||
border: 1px solid var(--ifm-color-black);
|
||||
color: var(--ifm-color-gray-700);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .colorModeToggle {
|
||||
color: var(--ifm-color-white);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .colorModeToggle:hover {
|
||||
border: 1px solid var(--ifm-color-gray-500);
|
||||
color: var(--ifm-color-gray-500);
|
||||
}
|
||||
45
docs/src/components/GithubButton/index.js
Normal file
45
docs/src/components/GithubButton/index.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import * as React from "react";
|
||||
import classnames from "classnames";
|
||||
import useThemeContext from "@theme/hooks/useThemeContext";
|
||||
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
const Icon = ({ color, size = "1.5rem", ...props }) => (
|
||||
<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"
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<Icon />
|
||||
</a>
|
||||
);
|
||||
};
|
||||
46
docs/src/components/GithubButton/styles.module.css
Normal file
46
docs/src/components/GithubButton/styles.module.css
Normal file
@@ -0,0 +1,46 @@
|
||||
/* @media screen and (max-width: 997px) {
|
||||
.githubButton {
|
||||
display: none !important;
|
||||
}
|
||||
} */
|
||||
|
||||
.githubButton {
|
||||
color: var(--ifm-color-black);
|
||||
box-sizing: border-box;
|
||||
background-color: transparent;
|
||||
border-radius: var(--ifm-button-border-radius);
|
||||
border: 1px solid transparent;
|
||||
transition: color var(--ifm-button-transition-duration)
|
||||
cubic-bezier(0.08, 0.52, 0.52, 1),
|
||||
background var(--ifm-button-transition-duration)
|
||||
cubic-bezier(0.08, 0.52, 0.52, 1),
|
||||
border-color var(--ifm-button-transition-duration)
|
||||
cubic-bezier(0.08, 0.52, 0.52, 1);
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
font-size: calc(0.875rem * var(--ifm-button-size-multiplier));
|
||||
line-height: 1.5;
|
||||
outline: 0;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
padding: 6px 12px;
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.githubButton:hover {
|
||||
border: 1px solid var(--ifm-color-black);
|
||||
color: var(--ifm-color-gray-700);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .githubButton {
|
||||
color: var(--ifm-color-white);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .githubButton:hover {
|
||||
border: 1px solid var(--ifm-color-gray-500);
|
||||
color: var(--ifm-color-gray-500);
|
||||
}
|
||||
@@ -1,18 +1,18 @@
|
||||
import React from "react";
|
||||
import * as React from "react";
|
||||
|
||||
export default ({ color = "#ff5e5b", size = 32, className }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
width={size}
|
||||
viewBox="0 0 1014 1014"
|
||||
xmlSpace="preserve"
|
||||
fill={color}
|
||||
className={className}
|
||||
>
|
||||
<g transform="translate(0.000000,1014.000000) scale(0.100000,-0.100000)">
|
||||
<path
|
||||
d="M4809,10126c-2-2-51-7-109-10c-92-6-211-18-305-30c-16-3-52-8-80-11c-27-4-138-24-245-46
|
||||
export default ({ color = "currentColor", size = 32, ...props }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||
width={size}
|
||||
viewBox="0 0 1014 1014"
|
||||
xmlSpace="preserve"
|
||||
fill={color}
|
||||
{...props}
|
||||
>
|
||||
<g transform="translate(0.000000,1014.000000) scale(0.100000,-0.100000)">
|
||||
<path
|
||||
d="M4809,10126c-2-2-51-7-109-10c-92-6-211-18-305-30c-16-3-52-8-80-11c-27-4-138-24-245-46
|
||||
c-516-102-1052-302-1491-556c-48-27-93-53-100-56c-30-14-217-138-333-220c-432-307-811-676-1130-1102c-213-283-391-582-540-905
|
||||
c-145-311-255-631-331-956c-19-82-37-167-41-189c-3-22-7-42-9-45s-6-24-9-46c-4-22-8-51-11-64c-3-14-14-92-24-175
|
||||
c-18-134-24-193-37-380c-5-75-5-429,1-520c11-199,29-383,45-470c5-27,11-69,14-92c16-128,97-477,156-668c133-435,341-881,591-1267
|
||||
@@ -35,18 +35,18 @@ export default ({ color = "#ff5e5b", size = 32, className }) => (
|
||||
c-25,188-25,664,0,840c3,17,7,53,10,80c29,264,110,602,211,880c292,808,844,1513,1560,1993c194,130,481,286,654,356
|
||||
c36,15,74,31,85,36c110,52,496,172,662,205c133,27,269,49,374,61c30,3,65,8,79,10s86,7,160,10c74,4,136,8,138,9
|
||||
C4972,9128,5212,9122,5336,9116z"
|
||||
/>
|
||||
<path
|
||||
d="M3445,8398c-84-32-397-246-566-388c-223-187-442-415-652-680c-123-155-312-465-420-690
|
||||
/>
|
||||
<path
|
||||
d="M3445,8398c-84-32-397-246-566-388c-223-187-442-415-652-680c-123-155-312-465-420-690
|
||||
c-74-154-190-440-202-500c-1-3-15-50-32-105c-30-96-77-280-87-337c-3-15-11-63-20-105c-15-79-20-108-31-198c-4-27-8-60-10-73
|
||||
c-13-79-20-239-20-457c0-280,5-309,70-377c55-60,102-79,191-79c88-1,173,52,217,135c20,38,22,56,23,261c2,262,11,413,34,555
|
||||
c5,30,12,73,15,94s7,48,10,60s7,33,10,49c12,64,17,88,46,197c124,482,347,931,658,1325c151,191,360,403,534,543c40,31,74,59,77,63
|
||||
c12,13,222,159,300,208c103,65,136,94,162,145c60,117,16,265-97,332C3602,8407,3497,8418,3445,8398z"
|
||||
/>
|
||||
<path
|
||||
d="M1691,4003c-91-33-161-138-161-241c0-74,135-389,275-641c107-195,164-243,285-244c138-1,246,98,254,232
|
||||
/>
|
||||
<path
|
||||
d="M1691,4003c-91-33-161-138-161-241c0-74,135-389,275-641c107-195,164-243,285-244c138-1,246,98,254,232
|
||||
c4,63-12,111-73,216c-68,117-166,320-226,467c-50,124-86,172-153,204C1842,4020,1745,4023,1691,4003z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
@@ -10,13 +10,6 @@
|
||||
|
||||
:root {
|
||||
--ifm-font-size-sm: 12px;
|
||||
/* --ifm-color-secondary: #314cb6;
|
||||
--ifm-color-secondary-dark: #2c44a4;
|
||||
--ifm-color-secondary-darker: #2a419b;
|
||||
--ifm-color-secondary-darkest: #22357f;
|
||||
--ifm-color-secondary-light: #3654c8;
|
||||
--ifm-color-secondary-lighter: #3e5bcb;
|
||||
--ifm-color-secondary-lightest: #5a72d3; */
|
||||
--ifm-color-secondary: #69a2b0;
|
||||
--ifm-color-secondary-dark: #5796a6;
|
||||
--ifm-color-secondary-darker: #528e9c;
|
||||
@@ -125,6 +118,31 @@ h6 code {
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--ifm-color-secondary);
|
||||
}
|
||||
.contents a.contents__link--active[class] {
|
||||
color: var(--ifm-color-secondary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--ifm-color-secondary-darker);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] a {
|
||||
color: var(--ifm-color-primary);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .contents a.contents__link--active[class] {
|
||||
color: var(--ifm-color-primary);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] a:hover {
|
||||
color: var(--ifm-color-primary-light);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 997px) {
|
||||
.col.footer__col[class][class] {
|
||||
text-align: left;
|
||||
|
||||
62
docs/src/pages/demo.js
Normal file
62
docs/src/pages/demo.js
Normal file
@@ -0,0 +1,62 @@
|
||||
import * as React from "react";
|
||||
import classnames from "classnames";
|
||||
import Layout from "@theme/Layout";
|
||||
import Link from "@docusaurus/Link";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
function Demo() {
|
||||
return (
|
||||
<Layout description="hyperglass demo" keywords={["hyperglass", "demo"]}>
|
||||
<header className={classnames("hero", styles.heroBanner)}>
|
||||
<div className={classnames("container", styles.smallerTitleContainer)}>
|
||||
<h1 className={classnames("hero__title", styles.title)}>
|
||||
Coming Soon!
|
||||
</h1>
|
||||
<h2
|
||||
className={classnames(
|
||||
"hero__subtitle",
|
||||
styles.subTitle,
|
||||
styles.smallerTitle
|
||||
)}
|
||||
>
|
||||
<span className={styles.tagPrimary}>hyperglass 1.0</span> is still
|
||||
in progress, but the demo will be made available soon.
|
||||
</h2>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className={classnames(
|
||||
"button button--outline button--secondary button--lg",
|
||||
styles.homeBtn,
|
||||
styles.btnSecondary
|
||||
)}
|
||||
to={useBaseUrl("docs/getting-started")}
|
||||
>
|
||||
Back to the Docs
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section className={styles.content}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className={classnames("col col--4")}>
|
||||
<section className={styles.content}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className={classnames("col col--12")}></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div className={classnames("col col--8")}></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Demo;
|
||||
@@ -6,79 +6,85 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
function Home() {
|
||||
return (
|
||||
<Layout
|
||||
description="hyperglass is the network looking glass that tries to make the internet better."
|
||||
keywords={[
|
||||
"hyperglass",
|
||||
"documentation",
|
||||
"docs",
|
||||
"bgp",
|
||||
"lg",
|
||||
"looking",
|
||||
"glass",
|
||||
"looking glass",
|
||||
"ping",
|
||||
"traceroute",
|
||||
"matt love",
|
||||
"python",
|
||||
"python3",
|
||||
"react",
|
||||
"reactjs"
|
||||
]}
|
||||
>
|
||||
<header className={classnames("hero", styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<h1 className={classnames("hero__title", styles.title)}>hyperglass</h1>
|
||||
<h3 className={classnames("hero__subtitle", styles.subTitle)}>
|
||||
the <span className={styles.tagPrimary}>network looking glass</span> that
|
||||
tries to
|
||||
<span className={styles.tagSecondary}> make the internet better</span>.
|
||||
</h3>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className={classnames(
|
||||
"button button--outline button--secondary button--lg",
|
||||
styles.homeBtn,
|
||||
styles.btnSecondary
|
||||
)}
|
||||
to={useBaseUrl("docs/getting-started")}
|
||||
>
|
||||
Get a looking glass
|
||||
</Link>
|
||||
<Link
|
||||
className={classnames(
|
||||
"button button--outline button--primary button--lg",
|
||||
styles.homeBtn,
|
||||
styles.btnPrimary
|
||||
)}
|
||||
to={useBaseUrl("docs/introduction")}
|
||||
>
|
||||
Why hyperglass?
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
return (
|
||||
<Layout
|
||||
description="hyperglass is the network looking glass that tries to make the internet better."
|
||||
keywords={[
|
||||
"hyperglass",
|
||||
"documentation",
|
||||
"docs",
|
||||
"bgp",
|
||||
"lg",
|
||||
"looking",
|
||||
"glass",
|
||||
"looking glass",
|
||||
"ping",
|
||||
"traceroute",
|
||||
"matt love",
|
||||
"python",
|
||||
"python3",
|
||||
"react",
|
||||
"reactjs",
|
||||
]}
|
||||
>
|
||||
<header className={classnames("hero", styles.heroBanner)}>
|
||||
<div className="container">
|
||||
<h1 className={classnames("hero__title", styles.title)}>
|
||||
hyperglass
|
||||
</h1>
|
||||
<h2 className={classnames("hero__subtitle", styles.subTitle)}>
|
||||
the <span className={styles.tagPrimary}>network looking glass</span>{" "}
|
||||
that tries to
|
||||
<span className={styles.tagSecondary}>
|
||||
{" "}
|
||||
make the internet better
|
||||
</span>
|
||||
.
|
||||
</h2>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className={classnames(
|
||||
"button button--outline button--secondary button--lg",
|
||||
styles.homeBtn,
|
||||
styles.btnSecondary
|
||||
)}
|
||||
to={useBaseUrl("docs/getting-started")}
|
||||
>
|
||||
Get your looking glass
|
||||
</Link>
|
||||
<Link
|
||||
className={classnames(
|
||||
"button button--outline button--primary button--lg",
|
||||
styles.homeBtn,
|
||||
styles.btnPrimary
|
||||
)}
|
||||
to={useBaseUrl("docs/introduction")}
|
||||
>
|
||||
Why hyperglass?
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section className={styles.content}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className={classnames("col col--4")}>
|
||||
<section className={styles.content}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className={classnames("col col--4")}>
|
||||
<section className={styles.content}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className={classnames("col col--12")}></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div className={classnames("col col--8")}></div>
|
||||
</div>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className={classnames("col col--12")}></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
</div>
|
||||
<div className={classnames("col col--8")}></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Home;
|
||||
|
||||
66
docs/src/pages/screenshots.js
Normal file
66
docs/src/pages/screenshots.js
Normal file
@@ -0,0 +1,66 @@
|
||||
import * as React from "react";
|
||||
import classnames from "classnames";
|
||||
import Layout from "@theme/Layout";
|
||||
import Link from "@docusaurus/Link";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
function Screenshots() {
|
||||
return (
|
||||
<Layout
|
||||
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>
|
||||
<h2
|
||||
className={classnames(
|
||||
"hero__subtitle",
|
||||
styles.subTitle,
|
||||
styles.smallerTitle
|
||||
)}
|
||||
>
|
||||
<span className={styles.tagPrimary}>hyperglass 1.0</span> is still
|
||||
in progress, so screenshots may not be made available until shortly
|
||||
before the release.
|
||||
</h2>
|
||||
<div className={styles.buttons}>
|
||||
<Link
|
||||
className={classnames(
|
||||
"button button--outline button--secondary button--lg",
|
||||
styles.homeBtn,
|
||||
styles.btnSecondary
|
||||
)}
|
||||
to={useBaseUrl("docs/getting-started")}
|
||||
>
|
||||
Back to the Docs
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<main>
|
||||
<section className={styles.content}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className={classnames("col col--4")}>
|
||||
<section className={styles.content}>
|
||||
<div className="container">
|
||||
<div className="row">
|
||||
<div className={classnames("col col--12")}></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<div className={classnames("col col--8")}></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
|
||||
export default Screenshots;
|
||||
@@ -6,249 +6,246 @@
|
||||
*/
|
||||
|
||||
import React, { useCallback, useState } from "react";
|
||||
import classnames from "classnames";
|
||||
import Link from "@docusaurus/Link";
|
||||
import { useLocation } from "react-router-dom";
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
import useBaseUrl from "@docusaurus/useBaseUrl";
|
||||
|
||||
import SearchBar from "@theme/SearchBar";
|
||||
import Toggle from "@theme/Toggle";
|
||||
|
||||
import classnames from "classnames";
|
||||
|
||||
import useThemeContext from "@theme/hooks/useThemeContext";
|
||||
import useHideableNavbar from "@theme/hooks/useHideableNavbar";
|
||||
import useLockBodyScroll from "@theme/hooks/useLockBodyScroll";
|
||||
|
||||
import DarkModeToggle from "react-dark-mode-toggle";
|
||||
import useMedia from "use-media";
|
||||
|
||||
import { ColorModeToggle } from "../../components/ColorModeToggle";
|
||||
import { GithubButton } from "../../components/GithubButton";
|
||||
import Logo from "../../components/Logo";
|
||||
import styles from "./styles.module.css";
|
||||
|
||||
function NavLink({ to, href, label, position, ...props }) {
|
||||
const toUrl = useBaseUrl(to);
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
const logoColor = { true: "#ff5e5b", false: "#000" };
|
||||
|
||||
function Navbar() {
|
||||
const context = useDocusaurusContext();
|
||||
const { siteConfig = {} } = context;
|
||||
const { baseUrl, themeConfig = {} } = siteConfig;
|
||||
const { navbar = {}, disableDarkMode = false } = themeConfig;
|
||||
const { title, logo = {}, links = [], hideOnScroll = false } = navbar;
|
||||
const context = useDocusaurusContext();
|
||||
const { siteConfig = {} } = context;
|
||||
const { baseUrl, themeConfig = {} } = siteConfig;
|
||||
const { navbar = {}, disableDarkMode = false } = themeConfig;
|
||||
const { title, logo = {}, links = [], hideOnScroll = false } = navbar;
|
||||
|
||||
const [sidebarShown, setSidebarShown] = useState(false);
|
||||
const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
|
||||
const { pathname } = useLocation();
|
||||
const [sidebarShown, setSidebarShown] = useState(false);
|
||||
const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
|
||||
const { pathname } = useLocation();
|
||||
|
||||
const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext();
|
||||
const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
|
||||
const { isDarkTheme, setLightTheme, setDarkTheme } = useThemeContext();
|
||||
const { navbarRef, isNavbarVisible } = useHideableNavbar(hideOnScroll);
|
||||
|
||||
const isMobile = useMedia({ maxWidth: 997 });
|
||||
const isMobile = useMedia({ maxWidth: 997 });
|
||||
|
||||
useLockBodyScroll(sidebarShown);
|
||||
useLockBodyScroll(sidebarShown);
|
||||
|
||||
const showSidebar = useCallback(() => {
|
||||
setSidebarShown(true);
|
||||
}, [setSidebarShown]);
|
||||
const hideSidebar = useCallback(() => {
|
||||
setSidebarShown(false);
|
||||
}, [setSidebarShown]);
|
||||
const showSidebar = useCallback(() => {
|
||||
setSidebarShown(true);
|
||||
}, [setSidebarShown]);
|
||||
const hideSidebar = useCallback(() => {
|
||||
setSidebarShown(false);
|
||||
}, [setSidebarShown]);
|
||||
|
||||
const onToggleChange = (checked) => {
|
||||
checked ? setDarkTheme() : setLightTheme();
|
||||
};
|
||||
const onToggleChange = (checked) => {
|
||||
checked ? setDarkTheme() : setLightTheme();
|
||||
};
|
||||
|
||||
const logoLink = logo.href || baseUrl;
|
||||
const isExternalLogoLink = /http/.test(logoLink);
|
||||
const logoLinkProps = isExternalLogoLink
|
||||
? {
|
||||
rel: "noopener noreferrer",
|
||||
target: "_blank",
|
||||
}
|
||||
: null;
|
||||
const logoSrc = logo.srcDark && isDarkTheme ? logo.srcDark : logo.src;
|
||||
const logoLink = logo.href || baseUrl;
|
||||
const isExternalLogoLink = /http/.test(logoLink);
|
||||
const logoLinkProps = isExternalLogoLink
|
||||
? {
|
||||
rel: "noopener noreferrer",
|
||||
target: "_blank",
|
||||
}
|
||||
: null;
|
||||
const logoSrc = logo.srcDark && isDarkTheme ? logo.srcDark : logo.src;
|
||||
|
||||
// const logoColor = isDarkTheme ? "#ff5e5b" : "#000";
|
||||
|
||||
return (
|
||||
<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}>
|
||||
<Logo
|
||||
color={logoColor[isDarkTheme]}
|
||||
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
|
||||
)}
|
||||
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}>
|
||||
<Logo
|
||||
color={logoColor[isDarkTheme]}
|
||||
size={32}
|
||||
className={styles.logo}
|
||||
/>
|
||||
{title != null && (
|
||||
<strong
|
||||
className={isSearchBarExpanded ? styles.hideLogoText : ""}
|
||||
>
|
||||
{isMobile && (
|
||||
<Link className="navbar__brand" to={baseUrl}>
|
||||
<Logo
|
||||
color={logoColor[isDarkTheme]}
|
||||
size={32}
|
||||
className={styles.logo}
|
||||
/>
|
||||
{title != null && (
|
||||
<strong className={isSearchBarExpanded ? styles.hideLogoText : ""}>
|
||||
{title}
|
||||
</strong>
|
||||
)}
|
||||
</Link>
|
||||
)}
|
||||
{!disableDarkMode && !isMobile && (
|
||||
<DarkModeToggle
|
||||
speed={2.5}
|
||||
onChange={onToggleChange}
|
||||
checked={isDarkTheme}
|
||||
/>
|
||||
)}
|
||||
{!isMobile && (
|
||||
<SearchBar
|
||||
handleSearchBarToggle={setIsSearchBarExpanded}
|
||||
isSearchBarExpanded={isSearchBarExpanded}
|
||||
/>
|
||||
)}
|
||||
<a
|
||||
className={classnames(
|
||||
styles.displayOnlyInLargeViewport,
|
||||
"button button--primary",
|
||||
styles.button
|
||||
)}
|
||||
href={`https://github.com/${siteConfig.organizationName}/${siteConfig.projectName}`}
|
||||
style={{ margin: 0, marginLeft: 15 }}
|
||||
>
|
||||
GITHUB →
|
||||
</a>
|
||||
</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}>
|
||||
<Logo color={logoColor[isDarkTheme]} size={32} className={styles.logo} />
|
||||
{title != null && (
|
||||
<strong className={isSearchBarExpanded ? styles.hideLogoText : ""}>
|
||||
{title}
|
||||
</strong>
|
||||
)}
|
||||
</Link>
|
||||
{!disableDarkMode && sidebarShown && (
|
||||
<DarkModeToggle
|
||||
speed={2.5}
|
||||
onChange={onToggleChange}
|
||||
checked={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}
|
||||
/>
|
||||
<div style={{ margin: 5, marginTop: 15 }} />
|
||||
<a
|
||||
className={classnames(
|
||||
"button button--block button--primary",
|
||||
styles.button
|
||||
)}
|
||||
href={siteConfig.url}
|
||||
>
|
||||
GITHUB →
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
{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}>
|
||||
<Logo
|
||||
color={logoColor[isDarkTheme]}
|
||||
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}>
|
||||
<Logo
|
||||
color={logoColor[isDarkTheme]}
|
||||
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 +1,76 @@
|
||||
@media screen and (max-width: 997px) {
|
||||
.displayOnlyInLargeViewport {
|
||||
display: none !important;
|
||||
}
|
||||
.displayOnlyInLargeViewport {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.hideLogoText {
|
||||
display: none;
|
||||
}
|
||||
.hideLogoText {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.navbarHideable {
|
||||
transition: top 0.2s ease-in-out;
|
||||
transition: top 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.navbarHidden {
|
||||
top: calc(var(--ifm-navbar-height) * -1) !important;
|
||||
top: calc(var(--ifm-navbar-height) * -1) !important;
|
||||
}
|
||||
.navbarItems {
|
||||
justify-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.navbarItemsRight[class] {
|
||||
flex: 0 0;
|
||||
flex: 0 0;
|
||||
}
|
||||
|
||||
.navLink[class] {
|
||||
position: relative;
|
||||
margin-left: 2rem;
|
||||
margin-right: 2rem;
|
||||
position: relative;
|
||||
margin-left: 2rem;
|
||||
margin-right: 2rem;
|
||||
}
|
||||
|
||||
.navLink[class]:hover {
|
||||
color: var(--ifm-color-white);
|
||||
color: var(--ifm-color-white);
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .navLink[class]:hover {
|
||||
color: var(--ifm-color-secondary);
|
||||
color: var(--ifm-color-secondary);
|
||||
}
|
||||
|
||||
.navLink[class]:global(.navbar__link--active) {
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
font-weight: bold;
|
||||
}
|
||||
.navLink[class]:global(.navbar__link--active)::after {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--ifm-color-content);
|
||||
content: "";
|
||||
transition: width 0.5s, opacity 0.5s, transform 0.5s;
|
||||
transform: translateY(-6px);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--ifm-color-content);
|
||||
content: "";
|
||||
transition: width 0.5s, opacity 0.5s, transform 0.5s;
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
|
||||
.toggle {
|
||||
margin-right: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.navbarMain {
|
||||
background-color: var(--ifm-background-color);
|
||||
box-shadow: none;
|
||||
background-color: var(--ifm-background-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 4px;
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] .navbarOther {
|
||||
background-color: var(--ifm-background-color);
|
||||
background-color: var(--ifm-background-color);
|
||||
}
|
||||
|
||||
.navbarOther {
|
||||
background-color: var(--ifm-color-white);
|
||||
background-color: var(--ifm-color-white);
|
||||
}
|
||||
|
||||
@@ -5,20 +5,20 @@
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React, {useState, useRef, useCallback} from 'react';
|
||||
import classnames from 'classnames';
|
||||
import React, { useState, useRef, useCallback } from "react";
|
||||
import classnames from "classnames";
|
||||
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import {useHistory} from '@docusaurus/router';
|
||||
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
||||
import { useHistory } from "@docusaurus/router";
|
||||
|
||||
import './styles.css';
|
||||
import "./styles.css";
|
||||
|
||||
const Search = props => {
|
||||
const Search = ({ handleSearchBarToggle, isSearchBarExpanded, ...props }) => {
|
||||
const [algoliaLoaded, setAlgoliaLoaded] = useState(false);
|
||||
const searchBarRef = useRef(null);
|
||||
const {siteConfig = {}} = useDocusaurusContext();
|
||||
const { siteConfig = {} } = useDocusaurusContext();
|
||||
const {
|
||||
themeConfig: {algolia},
|
||||
themeConfig: { algolia },
|
||||
} = siteConfig;
|
||||
const history = useHistory();
|
||||
|
||||
@@ -27,14 +27,14 @@ const Search = props => {
|
||||
appId: algolia.appId,
|
||||
apiKey: algolia.apiKey,
|
||||
indexName: algolia.indexName,
|
||||
inputSelector: '#search_input_react',
|
||||
inputSelector: "#search_input_react",
|
||||
algoliaOptions: algolia.algoliaOptions,
|
||||
// Override algolia's default selection event, allowing us to do client-side
|
||||
// navigation and avoiding a full page refresh.
|
||||
handleSelected: (_input, _event, suggestion) => {
|
||||
// Use an anchor tag to parse the absolute url into a relative url
|
||||
// Alternatively, we can use new URL(suggestion.url) but its not supported in IE
|
||||
const a = document.createElement('a');
|
||||
const a = document.createElement("a");
|
||||
a.href = suggestion.url;
|
||||
|
||||
// Algolia use closest parent element id #__docusaurus when a h1 page title does not have an id
|
||||
@@ -57,12 +57,12 @@ const Search = props => {
|
||||
return;
|
||||
}
|
||||
|
||||
Promise.all([import('docsearch.js'), import('./algolia.css')]).then(
|
||||
([{default: docsearch}]) => {
|
||||
Promise.all([import("docsearch.js"), import("./algolia.css")]).then(
|
||||
([{ default: docsearch }]) => {
|
||||
setAlgoliaLoaded(true);
|
||||
window.docsearch = docsearch;
|
||||
initAlgolia(focus);
|
||||
},
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
@@ -73,26 +73,26 @@ const Search = props => {
|
||||
searchBarRef.current.focus();
|
||||
}
|
||||
|
||||
props.handleSearchBarToggle(!props.isSearchBarExpanded);
|
||||
}, [props.isSearchBarExpanded]);
|
||||
handleSearchBarToggle(!isSearchBarExpanded);
|
||||
}, [isSearchBarExpanded]);
|
||||
|
||||
const handleSearchInputBlur = useCallback(() => {
|
||||
props.handleSearchBarToggle(!props.isSearchBarExpanded);
|
||||
}, [props.isSearchBarExpanded]);
|
||||
handleSearchBarToggle(!isSearchBarExpanded);
|
||||
}, [isSearchBarExpanded]);
|
||||
|
||||
const handleSearchInput = useCallback(e => {
|
||||
const needFocus = e.type !== 'mouseover';
|
||||
const handleSearchInput = useCallback((e) => {
|
||||
const needFocus = e.type !== "mouseover";
|
||||
|
||||
loadAlgolia(needFocus);
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="navbar__search" key="search-box">
|
||||
<div className="navbar__search" key="search-box" {...props}>
|
||||
<span
|
||||
aria-label="expand searchbar"
|
||||
role="button"
|
||||
className={classnames('search-icon', {
|
||||
'search-icon-hidden': props.isSearchBarExpanded,
|
||||
className={classnames("search-icon", {
|
||||
"search-icon-hidden": isSearchBarExpanded,
|
||||
})}
|
||||
onClick={handleSearchIcon}
|
||||
onKeyDown={handleSearchIcon}
|
||||
@@ -104,9 +104,9 @@ const Search = props => {
|
||||
placeholder="Search"
|
||||
aria-label="Search"
|
||||
className={classnames(
|
||||
'navbar__search-input',
|
||||
{'search-bar-expanded': props.isSearchBarExpanded},
|
||||
{'search-bar': !props.isSearchBarExpanded},
|
||||
"navbar__search-input",
|
||||
{ "search-bar-expanded": isSearchBarExpanded },
|
||||
{ "search-bar": !isSearchBarExpanded }
|
||||
)}
|
||||
onMouseOver={handleSearchInput}
|
||||
onFocus={handleSearchInput}
|
||||
|
||||
@@ -1807,14 +1807,6 @@ babel-plugin-extract-import-names@^1.5.8:
|
||||
dependencies:
|
||||
"@babel/helper-plugin-utils" "7.8.3"
|
||||
|
||||
babel-runtime@^6.26.0:
|
||||
version "6.26.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
|
||||
integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
|
||||
dependencies:
|
||||
core-js "^2.4.0"
|
||||
regenerator-runtime "^0.11.0"
|
||||
|
||||
bail@^1.0.0:
|
||||
version "1.0.5"
|
||||
resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776"
|
||||
@@ -2650,7 +2642,7 @@ core-js-compat@^3.6.2:
|
||||
browserslist "^4.8.5"
|
||||
semver "7.0.0"
|
||||
|
||||
core-js@^2.4.0, core-js@^2.6.5:
|
||||
core-js@^2.6.5:
|
||||
version "2.6.11"
|
||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
|
||||
integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
|
||||
@@ -5404,24 +5396,6 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3
|
||||
dependencies:
|
||||
js-tokens "^3.0.0 || ^4.0.0"
|
||||
|
||||
lottie-api@bodymovin/lottie-api#master:
|
||||
version "1.0.3"
|
||||
resolved "https://codeload.github.com/bodymovin/lottie-api/tar.gz/3878f3acb1466a012553a08b929a12b11937c855"
|
||||
|
||||
lottie-react-web@^2.1.4:
|
||||
version "2.1.4"
|
||||
resolved "https://registry.yarnpkg.com/lottie-react-web/-/lottie-react-web-2.1.4.tgz#3159b4600b6baa858175a1c97daa595f85903d6e"
|
||||
integrity sha512-/wcAxckdTo1uKUgv3hvUktDeeTQByNdRda+1iBQcteV3PyaIikCV0LleSOkBJccYA+v0mM/OZvoSbmQdWxt4+w==
|
||||
dependencies:
|
||||
babel-runtime "^6.26.0"
|
||||
lottie-api bodymovin/lottie-api#master
|
||||
lottie-web "^5.2.1"
|
||||
|
||||
lottie-web@^5.2.1:
|
||||
version "5.6.8"
|
||||
resolved "https://registry.yarnpkg.com/lottie-web/-/lottie-web-5.6.8.tgz#4e19c4985076368ace3e2140ba599fdc4d927c52"
|
||||
integrity sha512-2b7KDEIzpp3Y+u9BtFMHBkUFWe6TFgVdYvXvpfmbbxAL9XiwHUywAoWH1GhCCMmGqWqkxw8v4IxnOq/3hiOtJg==
|
||||
|
||||
lower-case@^2.0.1:
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.1.tgz#39eeb36e396115cc05e29422eaea9e692c9408c7"
|
||||
@@ -7303,13 +7277,6 @@ raw-body@2.4.0:
|
||||
iconv-lite "0.4.24"
|
||||
unpipe "1.0.0"
|
||||
|
||||
react-dark-mode-toggle@^0.0.3:
|
||||
version "0.0.3"
|
||||
resolved "https://registry.yarnpkg.com/react-dark-mode-toggle/-/react-dark-mode-toggle-0.0.3.tgz#9725357c19674fca93a7e00b9126d474b50d8126"
|
||||
integrity sha512-DMdd/ClnVs+i0iV5u0UdLwUHHbUzg2TQCqQB9HFypftfo+S5MU6jtFzqo6gDGl8kIISYqMDAkdmw6nszAUQs7w==
|
||||
dependencies:
|
||||
lottie-react-web "^2.1.4"
|
||||
|
||||
react-dev-utils@^10.2.1:
|
||||
version "10.2.1"
|
||||
resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"
|
||||
@@ -7515,11 +7482,6 @@ regenerate@^1.4.0:
|
||||
resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
|
||||
integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
|
||||
|
||||
regenerator-runtime@^0.11.0:
|
||||
version "0.11.1"
|
||||
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
|
||||
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
|
||||
|
||||
regenerator-runtime@^0.13.4:
|
||||
version "0.13.5"
|
||||
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697"
|
||||
|
||||
Reference in New Issue
Block a user