diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js index 88c90f3..dafca35 100755 --- a/docs/docusaurus.config.js +++ b/docs/docusaurus.config.js @@ -2,7 +2,7 @@ const githubURL = "https://github.com/checktheroads/hyperglass"; const { googleTrackingId, algoliaKey } = process.env; -module.exports = { +const docusaurusConfig = { title: "hyperglass", tagline: "the network looking glass that tries to make the internet better.", url: "https://hyperglass.io", @@ -17,7 +17,7 @@ module.exports = { anonymizeIP: false, }, algolia: { - apiKey: algoliaKey, + apiKey: algoliaKey || "dev", indexName: "hyperglass", }, navbar: { @@ -48,7 +48,7 @@ module.exports = { }, { label: "Configuration", - to: "docs/configuration", + to: "docs/parameters", }, ], }, @@ -91,7 +91,7 @@ module.exports = { { docs: { sidebarPath: require.resolve("./sidebars.js"), - editUrl: githubURL + "/edit/master/docs/", + editUrl: githubURL + "/edit/v1.0.0/docs/", }, theme: { customCss: require.resolve("./src/css/custom.css"), @@ -99,8 +99,7 @@ module.exports = { }, ], ], - plugins: [ - "@docusaurus/plugin-google-analytics", - require("./generateSitemap"), - ], + plugins: ["@docusaurus/plugin-google-analytics"], }; + +module.exports = docusaurusConfig; diff --git a/docs/package.json b/docs/package.json index 55671f7..af7f7fa 100755 --- a/docs/package.json +++ b/docs/package.json @@ -9,9 +9,8 @@ "deploy": "docusaurus deploy" }, "dependencies": { - "@docusaurus/core": "^2.0.0-alpha.50", - "@docusaurus/plugin-sitemap": "^2.0.0-alpha.50", - "@docusaurus/preset-classic": "^2.0.0-alpha.50", + "@docusaurus/core": "^2.0.0-alpha.58", + "@docusaurus/preset-classic": "^2.0.0-alpha.58", "classnames": "^2.2.6", "globby": "^11.0.1", "prismjs": "^1.19.0", diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index f5e437f..77420c1 100755 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -44,29 +44,37 @@ :root { --ifm-menu-color-active: black; - --ra-color-link: var(--ifm-color-black); - --ra-color-caution: var(--ifm-color-warning-lightest); - --ra-color-tip: var(--ifm-color-success-lightest); - --ra-color-important: var(--ifm-color-info-lightest); - --ra-color-note: var(--ifm-color-gray-200); - --ra-color-warning: var(--ifm-color-danger-lighter); - --ra-admonition-color: var(--ifm-font-base-color); --ifm-alert-background-color: var(--ifm-color-gray-400); } html[data-theme="dark"]:root { + --ifm-background-color: #121212; + --ifm-background-surface-color: #1e2125; + --ifm-navbar-background-color: var(--ifm-background-color); --ifm-menu-color-active: var(--ifm-color-primary); - --ra-color-link: var(--ifm-color-black); - --ra-color-caution: var(--ifm-color-warning-darkest); - --ra-color-tip: var(--ifm-color-success-darkest); - --ra-color-important: var(--ifm-color-info-darkest); - --ra-color-note: var(--ifm-color-gray-600); - --ra-color-warning: var(--ifm-color-danger-darker); --ifm-blockquote-color: var(--ifm-color-emphasis-400); } .admonition.alert { --ra-admonition-icon-color: currentColor; + --ifm-alert-color: var(--ifm-font-color-base); + border-color: unset; + border-style: unset; + border-width: unset; + box-shadow: var(--ifm-global-shadow-md); +} + +html[data-theme="dark"] .admonition.alert--warning { + --ifm-alert-color: var(--ifm-color-black); +} +html[data-theme="dark"] .admonition.alert--critical { + --ifm-alert-color: var(--ifm-color-black); +} +html[data-theme="dark"] .admonition.alert--info { + --ifm-alert-color: var(--ifm-color-black); +} +html[data-theme=""] .admonition.alert--success { + --ifm-alert-color: white; } html[data-theme="dark"]:root .admonition.alert.admonition-note { @@ -78,6 +86,11 @@ html[data-theme="dark"]:root .admonition.alert.admonition-note { --ifm-alert-color: var(--ifm-color-black); } +.admonition.alert.admonition-note[class] .admonition-content[class] a { + color: var(--ifm-font-color-base); + 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); @@ -126,12 +139,16 @@ html[data-theme="dark"] { } .docusaurus-highlight-code-line { - background-color: rgb(72, 77, 91); + background-color: rgba(0, 0, 0, 0.1); display: block; margin: 0 calc(-1 * var(--ifm-pre-padding)); padding: 0 var(--ifm-pre-padding); } +html[data-theme="dark"] .docusaurus-highlight-code-line { + background-color: rgba(255, 255, 255, 0.1); +} + table { margin-top: var(--ifm-spacing-vertical); } @@ -215,6 +232,20 @@ html[data-theme="dark"] .navbar .navbar__items a.navbar__brand { } } -.menu .menu__link.menu__link--active { +.menu .menu__list .menu__list-item .menu__link.menu__link--active { font-weight: var(--ifm-font-weight-bold); + color: var(--ifm-color-secondary); +} + +html[data-theme="dark"] + .menu + .menu__list + .menu__list-item + .menu__link.menu__link--active { + color: var(--ifm-color-primary); +} + +.menu .menu__list .menu__list-item .menu__link, +.table-of-contents .table-of-contents__link { + color: var(--ifm-font-color-base); } diff --git a/docs/src/pages/styles.module.css b/docs/src/pages/styles.module.css index 10f6e04..b9726e7 100644 --- a/docs/src/pages/styles.module.css +++ b/docs/src/pages/styles.module.css @@ -53,7 +53,7 @@ h2.smallerTitle[class] { } .homeBtn:hover { - color: unset !important; + color: white !important; } .btnPrimary:hover { diff --git a/docs/src/theme/CodeBlock/dracula.js b/docs/src/theme/CodeBlock/dracula.js index 9f414e9..0a3dc3a 100644 --- a/docs/src/theme/CodeBlock/dracula.js +++ b/docs/src/theme/CodeBlock/dracula.js @@ -7,7 +7,7 @@ export default { }, styles: [ { - types: ["boolean", "number"], + types: ["boolean", "number", "null"], style: { color: "rgb(189, 147, 249)", }, @@ -88,5 +88,13 @@ export default { color: "rgb(241, 250, 140)", }, }, + { + types: ["important"], + style: { + color: "rgb(80, 250, 123)", + fontStyle: "italic", + textDecoration: "underline", + }, + }, ], }; diff --git a/docs/src/theme/CodeBlock/github.js b/docs/src/theme/CodeBlock/github.js new file mode 100644 index 0000000..acd0352 --- /dev/null +++ b/docs/src/theme/CodeBlock/github.js @@ -0,0 +1,84 @@ +// 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; diff --git a/docs/src/theme/CodeBlock/index.js b/docs/src/theme/CodeBlock/index.js index 1401bbe..d02cdd9 100644 --- a/docs/src/theme/CodeBlock/index.js +++ b/docs/src/theme/CodeBlock/index.js @@ -11,7 +11,8 @@ import React, { useEffect, useState, useRef } from "react"; import classnames from "classnames"; import Highlight, { defaultProps } from "prism-react-renderer"; import Prism from "prism-react-renderer/prism"; -import defaultTheme from "./dracula"; +import darkTheme from "./dracula"; +import lightTheme from "./github"; import Clipboard from "clipboard"; import rangeParser from "parse-numeric-range"; import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; @@ -118,8 +119,8 @@ export default ({ children, className: languageClassName, metastring }) => { let codeBlockTitle = ""; const { isDarkTheme } = useThemeContext(); - const lightModeTheme = prism.theme || defaultTheme; - const darkModeTheme = prism.darkTheme || lightModeTheme; + const lightModeTheme = prism.theme || lightTheme || darkTheme; + const darkModeTheme = prism.darkTheme || darkTheme || lightTheme; const prismTheme = isDarkTheme ? darkModeTheme : lightModeTheme; if (metastring && highlightLinesRangeRegex.test(metastring)) { diff --git a/docs/src/theme/Footer/index.js b/docs/src/theme/Footer/index.js index 900a499..0113f60 100644 --- a/docs/src/theme/Footer/index.js +++ b/docs/src/theme/Footer/index.js @@ -17,7 +17,7 @@ function FooterLink({ to, href, label, ...props }) { const toUrl = useBaseUrl(to); return ( - + - {/* TODO: Do not assume that it is in english language */} - {metaTitle && {metaTitle}} {metaTitle && } {favicon && } @@ -66,24 +57,25 @@ function Layout(props) { )} {metaImage && } + {metaImage && } + {metaImage && } {metaImage && ( )} {metaImage && ( )} - {metaImage && } - {metaImage && } {permalink && ( )} + {permalink && }
{children}
{!noFooter &&