From f54fd5df5064cd77e7286b11d16cd5fa7465faf7 Mon Sep 17 00:00:00 2001 From: checktheroads Date: Wed, 3 Jun 2020 08:32:12 -0700 Subject: [PATCH] improve site accessibility; add new parsing_error docs --- docs/docs/messages.mdx | 8 +- docs/src/components/GithubButton/index.js | 2 + docs/src/css/custom.css | 18 +- docs/src/theme/Footer/index.js | 191 +++++++++++----------- docs/src/theme/Navbar/index.js | 21 ++- 5 files changed, 135 insertions(+), 105 deletions(-) diff --git a/docs/docs/messages.mdx b/docs/docs/messages.mdx index 19df58c..126ff28 100644 --- a/docs/docs/messages.mdx +++ b/docs/docs/messages.mdx @@ -24,11 +24,12 @@ All user-facing status messages can be customized if needed. | `invalid_field` | String | `'{input} is an invalid {field}.'` | Displayed when a query field contains an invalid or unsupported value. `{input}` and `{field}` will be replaced with the invalid input value and corresponding field name. | | `invalid_input` | String | `'{target} is not a valid {query_type} target.'` | Displayed when a query target's value is invalid in relation to the corresponding query type. `{target}` and `{query_type}` will be replaced with the invalid target and corresponding query type. | | `no_input` | String | `'{field} must be specified.'` | Displayed when no a required field is not specified. `{field}` will be replaced with the `display_name` of the field that was omitted. | -| `no_output` | String | `'No output.'` | Displayed when hyperglass can connect to a device and execute a query, but the response is empty. | +| `no_output` | String | `'The query completed, but no matching results were found.'` | Displayed when hyperglass can connect to a device and execute a query, but the response is empty. | | `no_response` | String | `'No response.'` | Displayed when hyperglass can connect to a device, but no output is able to be read. Seeing this error may indicate a bug in hyperglass or one of its dependencies. If you see this in the wild, try enabling debug mode and review the logs to pinpoint the source of the error. | +| `parsing_error` | String | `'An error occurred while parsing the query output.'` | Displayed when hyperglass can connect to a device and execute a query, but the response cannot be parsed. | | `request_timeout` | String | `'Request timed out.'` | Displayed when the request_timeout time expires. | | `vrf_not_associated` | String | `'VRF {vrf_name} is not associated with {device_name}.'` | Displayed when a query request's VRF field value contains a VRF that is not configured or associated with the corresponding location/device. The UI automatically filters out VRFs that are not configured on a selected device, so this error is most likely to appear when using the hyperglass API. `{vrf_name}` and `{device_name}` will be replaced with the VRF in question and corresponding device. | -| `vrf_not_found` | String | `'RF {vrf_name} is not defined.'` | Displayed when a query VRF is not configured on any devices. The UI only shows configured VRFs, so this error is most likely to appear when using the hyperglass API. `{vrf_name}` will be replaced with the VRF in question. | +| `vrf_not_found` | String | `'VRF {vrf_name} is not defined.'` | Displayed when a query VRF is not configured on any devices. The UI only shows configured VRFs, so this error is most likely to appear when using the hyperglass API. `{vrf_name}` will be replaced with the VRF in question. | ## Example @@ -43,8 +44,9 @@ messages: invalid_field: "{input} is an invalid {field}." invalid_input: "{target} is not a valid {query_type} target." no_input: "{field} must be specified." - no_output: No output. + no_output: The query completed, but no matching results were found. no_response: No response. + parsing_error: An error occurred while parsing the query output. request_timeout: Request timed out. vrf_not_associated: VRF {vrf_name} is not associated with {device_name}. vrf_not_found: VRF {vrf_name} is not defined. diff --git a/docs/src/components/GithubButton/index.js b/docs/src/components/GithubButton/index.js index 12acc40..120b75d 100644 --- a/docs/src/components/GithubButton/index.js +++ b/docs/src/components/GithubButton/index.js @@ -37,6 +37,8 @@ export const GithubButton = ({ href, ...props }) => { isDarkTheme ? "button--secondary" : "button--primary", "button button--outline" )} + aria-label="Github" + title="Github" {...props} > diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css index 1bd6c68..e755ec7 100755 --- a/docs/src/css/custom.css +++ b/docs/src/css/custom.css @@ -35,7 +35,7 @@ :root { --ifm-code-background: rgba(0, 0, 0, 0.04); - --ifm-code-color: var(--ifm-color-secondary-darker); + --ifm-code-color: var(--ifm-color-secondary-darkest); --ifm-footer-color: var(--ifm-secondary-lightest); --ifm-footer-link-color: var(--ifm-secondary-lightest); --ifm-footer-title-color: var(--ifm-color-emphasis-800); @@ -57,10 +57,11 @@ html[data-theme="dark"]:root { --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); } html[data-theme="dark"] .footer.footer--dark { - --ifm-footer-color: var(--ifm-color-emphasis-300); + --ifm-footer-color: var(--ifm-color-emphasis-400); --ifm-navbar-background-color: var(--ifm-background-color); } @@ -78,6 +79,7 @@ html[data-theme="dark"] .footer.footer--dark { 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 @@ -86,10 +88,20 @@ html[data-theme="dark"] { .admonition { --ifm-code-background: rgba(255, 255, 255, 0.5); - --ifm-code-color: var(--ifm-color-secondary-darker); + --ifm-code-color: var(--ifm-color-secondary-darkest); --ifm-link-color: rgba(0, 0, 0, 0.5); } +.admonition.alert--success .admonition-content a, +.admonition.alert--warning .admonition-content a, +.admonition.alert--critical .admonition-content a { + color: var(--ifm-color-black); +} + +.admonition.admonition-note .admonition-content code { + --ifm-code-color: var(--ifm-color-gray-900); +} + .admonition a:hover { color: rgba(0, 0, 0, 0.5); } diff --git a/docs/src/theme/Footer/index.js b/docs/src/theme/Footer/index.js index bf56195..900a499 100644 --- a/docs/src/theme/Footer/index.js +++ b/docs/src/theme/Footer/index.js @@ -14,110 +14,109 @@ import useBaseUrl from "@docusaurus/useBaseUrl"; import styles from "./styles.module.css"; function FooterLink({ to, href, label, ...props }) { - const toUrl = useBaseUrl(to); - return ( - - {label} - - ); + const toUrl = useBaseUrl(to); + return ( + + {label} + + ); } -const FooterLogo = ({ url, alt }) => {alt}; +const FooterLogo = ({ url, alt }) => ( + {alt} +); function Footer() { - const context = useDocusaurusContext(); - const { siteConfig = {} } = context; - const { themeConfig = {} } = siteConfig; - const { footer } = themeConfig; + const context = useDocusaurusContext(); + const { siteConfig = {} } = context; + const { themeConfig = {} } = siteConfig; + const { footer } = themeConfig; - const { copyright, links = [], logo = {} } = footer || {}; - const logoUrl = useBaseUrl(logo.src); + const { copyright, links = [], logo = {} } = footer || {}; + const logoUrl = useBaseUrl(logo.src); - if (!footer) { - return null; - } + if (!footer) { + return null; + } - return ( -
-
- {links && links.length > 0 && ( -
- {links.map((linkItem, i) => ( -
- {linkItem.title != null ? ( -

{linkItem.title}

- ) : null} - {linkItem.items != null && - Array.isArray(linkItem.items) && - linkItem.items.length > 0 ? ( -
    - {linkItem.items.map((item, key) => - item.html ? ( -
  • - ) : ( -
  • - -
    • - ) - )} -
- ) : null} -
- ))} -
+ return ( +
+
+ {links && links.length > 0 && ( +
+ {links.map((linkItem, i) => ( +
+ {linkItem.title != null ? ( +

{linkItem.title}

+ ) : null} + {linkItem.items != null && + Array.isArray(linkItem.items) && + linkItem.items.length > 0 ? ( +
    + {linkItem.items.map((item, key) => + item.html ? ( +
  • + ) : ( +
  • + +
    • + ) + )} +
+ ) : null} +
+ ))} +
+ )} + {(logo || copyright) && ( +
+ {logo && logo.src && ( +
+ {logo.href ? ( + + + + ) : ( + )} - {(logo || copyright) && ( -
- {logo && logo.src && ( -
- {logo.href ? ( - - - - ) : ( - - )} -
- )} - {copyright} -
- )} -
-
- ); +
+ )} + {copyright} + + )} + +
+ ); } export default Footer; diff --git a/docs/src/theme/Navbar/index.js b/docs/src/theme/Navbar/index.js index 643a26b..c2b4265 100644 --- a/docs/src/theme/Navbar/index.js +++ b/docs/src/theme/Navbar/index.js @@ -98,7 +98,12 @@ function Navbar() {
{!isMobile && ( - + {title != null && ( {isMobile && ( - + {title != null && (
- + {title != null && (