diff --git a/docs/docs/agent/installation.mdx b/docs/docs/agent/installation.mdx
index d517199..88562b7 100644
--- a/docs/docs/agent/installation.mdx
+++ b/docs/docs/agent/installation.mdx
@@ -6,8 +6,8 @@ keywords: [configuration, linux, frr, frrouting, bird, agent]
description: hyperglass agent configuration
---
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
+import Tabs from "@theme/Tabs";
+import TabItem from "@theme/TabItem";
:::important In Progress
Documentation for [hyperglass-agent](https://github.com/checktheroads/hyperglass-agent) is in progress!
@@ -83,8 +83,9 @@ Options:
--force Force regeneration of config file
-h, --help Show this message and exit.
```
+
:::
:::important More coming soon
Documentation for [hyperglass-agent](https://github.com/checktheroads/hyperglass-agent) is in progress!
-:::
\ No newline at end of file
+:::
diff --git a/docs/docs/api.mdx b/docs/docs/api.mdx
index fdb9da3..4b5c581 100644
--- a/docs/docs/api.mdx
+++ b/docs/docs/api.mdx
@@ -58,26 +58,27 @@ FastAPI provides built in support for both [Swagger UI](https://swagger.io/tools
```yaml
docs:
- base_url: https://lg.example.net
- description: ""
- devices:
- description: List of all devices/locations with associated identifiers, display
- names, networks, & VRFs.
- summary: Devices List
- title: Devices
- enable: true
- mode: redoc
- openapi_uri: /openapi.json
- queries:
- description: List of supported query types.
- summary: Query Types
- title: Supported Queries
- query:
- description: Request a query response per-location.
- summary: Query the Looking Glass
- title: Submit Query
- title: "{site_title} API Documentation"
- uri: /api/docs
+ base_url: https://lg.example.net
+ description: ""
+ devices:
+ description:
+ List of all devices/locations with associated identifiers, display
+ names, networks, & VRFs.
+ summary: Devices List
+ title: Devices
+ enable: true
+ mode: redoc
+ openapi_uri: /openapi.json
+ queries:
+ description: List of supported query types.
+ summary: Query Types
+ title: Supported Queries
+ query:
+ description: Request a query response per-location.
+ summary: Query the Looking Glass
+ title: Submit Query
+ title: "{site_title} API Documentation"
+ uri: /api/docs
```
:::note From the developer
diff --git a/docs/docs/cache.mdx b/docs/docs/cache.mdx
index 102b515..4145b2c 100644
--- a/docs/docs/cache.mdx
+++ b/docs/docs/cache.mdx
@@ -6,8 +6,6 @@ keywords: [configuration, cache, timeout]
description: hyperglass caching configuration
---
-import Link from "@docusaurus/Link";
-
hyperglass uses [Redis](https://redis.io/) for cache storage. Every query is cached and automatically expired from the cache after a configurable timeout period.
Common Redis parameters are configurable, in case you already have a dedicated Redis server you'd prefer to use, instead of running it on the same server as hyperglass:
@@ -28,9 +26,9 @@ hyperglass caches every query response to a Redis database, and always responds
```yaml
cache:
- database: 0
- host: localhost
- port: 6379
- show_text: true
- timeout: 120
+ database: 0
+ host: localhost
+ port: 6379
+ show_text: true
+ timeout: 120
```
diff --git a/docs/docs/commands.mdx b/docs/docs/commands.mdx
index 1516055..e3ff59f 100644
--- a/docs/docs/commands.mdx
+++ b/docs/docs/commands.mdx
@@ -3,39 +3,39 @@ id: commands
title: Commands
sidebar_label: Commands
keywords:
- [
- hyperglass,
- commands,
- customize,
- cisco,
- ios,
- ios-xe,
- ios-xr,
- juniper,
- junos,
- arista,
- eos,
- huawei,
- vrp,
- ]
+ [
+ hyperglass,
+ commands,
+ customize,
+ cisco,
+ ios,
+ ios-xe,
+ ios-xr,
+ juniper,
+ junos,
+ arista,
+ eos,
+ huawei,
+ vrp,
+ ]
description: Custom Commands
---
hyperglass comes with built in support for the following platforms:
-- Cisco IOS & IOS-XE
-- Cisco IOS-XR
-- Juniper JunOS
-- Arista EOS
-- Huawei VRP
+- Cisco IOS & IOS-XE
+- Cisco IOS-XR
+- Juniper JunOS
+- Arista EOS
+- Huawei VRP
Default commands for each of these network operating systems are built into hyperglass. However, you may override any of them or even add commands for another Network Operating System (NOS), as long as it's [supported](platforms.mdx). To define custom commands, add a `commands.yaml` file to your installation directory (`/etc/hyperglass`,
`~/hyperglass`). As an example, you could override the default Juniper `bgp_route` command for the default routing table like this:
```yaml
juniper:
- ipv4_default:
- bgp_route: "show route protocol bgp {target} terse"
+ ipv4_default:
+ bgp_route: "show route protocol bgp {target} terse"
```
Only the command you specify will be overridden.
@@ -87,10 +87,10 @@ You can also define your own arbitrary command groups, and reference them in you
# commands.yaml
---
special_commands:
- ipv4_default:
- bgp_route: "show ip route {target}"
- ipv4_vpn:
- bgp_route: "show ip route {target} vrf {vrf}"
+ ipv4_default:
+ bgp_route: "show ip route {target}"
+ ipv4_vpn:
+ bgp_route: "show ip route {target} vrf {vrf}"
```
The above example defines the command set.
@@ -105,6 +105,6 @@ Then, in the device's definition in `devices.yaml`, reference the command set:
# devices.yaml
---
routers:
- - name: specialrouter01
- commands: special_commands
+ - name: specialrouter01
+ commands: special_commands
```
diff --git a/docs/docs/configuration.mdx b/docs/docs/configuration.mdx
index 1153dce..14a6059 100644
--- a/docs/docs/configuration.mdx
+++ b/docs/docs/configuration.mdx
@@ -6,7 +6,6 @@ keywords: [configuration]
description: Configuring hyperglass
---
-import Link from "@docusaurus/Link";
import MiniNote from "../src/components/MiniNote";
import PageLink from "../src/components/PageLink";
@@ -20,22 +19,22 @@ On the back end, hyperglass uses strict configuration schema validation, so it's
hyperglass configuration consists of three separate [YAML](https://yaml.org/) configuration files:
-- `hyperglass.yaml`
- - Defines configuration parameters for the application and UI
- This file is not required for hyperglass to run
-- `devices.yaml`
- - Defines devices (routers), SSH proxy servers, and credentials
-
- This file is required for hyperglass to run
-
-- `commands.yaml`
- - Defines commands for custom network operating systems, or overrides default hyperglass command sets.
- This file is not required for hyperglass to run
+- `hyperglass.yaml`
+ - Defines configuration parameters for the application and UI
+ This file is not required for hyperglass to run
+- `devices.yaml`
+ - Defines devices (routers), SSH proxy servers, and credentials
+
+ This file is required for hyperglass to run
+
+- `commands.yaml`
+ - Defines commands for custom network operating systems, or overrides default hyperglass command sets.
+ This file is not required for hyperglass to run
Configuration files may be located in one of the following directories:
-- `/etc/hyperglass`
-- `~/hyperglass`
+- `/etc/hyperglass`
+- `~/hyperglass`
## Global Settings
@@ -95,25 +94,25 @@ To add, as an example, a Cisco router, add the following to your `devices.yaml`,
```yaml
routers:
- - name: router01.pop01
- address: 10.0.0.1
- network: AS65000
- credential:
- username: username
- password: password
- location: pop01
- display_name: Phoenix, AZ
- port: 22
- nos: cisco_ios
- vrfs:
- - name: default
- ipv4:
- source_address: 192.0.2.1
- ipv6:
- source_address: 2001:db8::1
+ - name: router01.pop01
+ address: 10.0.0.1
+ network: AS65000
+ credential:
+ username: username
+ password: password
+ location: pop01
+ display_name: Phoenix, AZ
+ port: 22
+ nos: cisco_ios
+ vrfs:
+ - name: default
+ ipv4:
+ source_address: 192.0.2.1
+ ipv6:
+ source_address: 2001:db8::1
```
-There are a lot more options, but this is enough to get started. For all device configuration options, see here.
+There are a lot more options, but this is enough to get started. For all device configuration options, [see here](devices.mdx).
:::tip YAML
If you have a lot of devices with shared configuration parameters, you may want to look into **YAML Anchors and Aliases**. If you've never used them before, they can be pretty weird looking at first read. Atlassian [has a pretty decent guide](https://confluence.atlassian.com/bitbucket/yaml-anchors-960154027.html).
diff --git a/docs/docs/devices.mdx b/docs/docs/devices.mdx
index fe65439..3a804a3 100644
--- a/docs/docs/devices.mdx
+++ b/docs/docs/devices.mdx
@@ -2,7 +2,8 @@
id: devices
title: Devices
sidebar_label: Devices
-keywords: [hyperglass, authentication, ssl, proxy, access list, prefix list, acl, help]
+keywords:
+ [hyperglass, authentication, ssl, proxy, access list, prefix list, acl, help]
description: Adding devices to hyperglass
---
@@ -11,6 +12,8 @@ import R from "../src/components/Required";
import MiniNote from "../src/components/MiniNote";
import Code from "../src/components/JSXCode";
+
+
## All Device Parameters
| Parameter | Type | Description |
@@ -49,7 +52,7 @@ While all devices require a credential mapping, the credential values themselves
For HTTP devices (i.e. devices using [hyperglass-agent](https://github.com/checktheroads/hyperglass-agent)), the username is ignored and the password is used as a secret for [JSON Web Token](https://tools.ietf.org/html/rfc7519) encoding/decoding.
| Parameter | Type | Description |
-| --------------- | ------ | ------------------------------------------------------------ |
+| :-------------- | :----- | :----------------------------------------------------------- |
| `username` | String | Username |
| `password` | String | Password Passwords will never be logged |
@@ -59,8 +62,8 @@ HTTP devices may optionally use SSL for the connection between hyperglass and th
If SSL is enabled, the public key of the device must be provided in the form of an accessible absolute file path. With SSL enabled and a valid certificate specified, every connection to the device will use HTTPS in addition to payload encoding with [JSON Web Tokens](https://tools.ietf.org/html/rfc7519).
-| Parameter | Type | Description |
-| :---------- | :-----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Parameter | Type | Description |
+| :---------- | :------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `enable` | Boolean | Enable or disable the use of SSL. If enabled, a certificate file must be specified (hyperglass does not support connecting to a device over an unverified SSL session). |
| `cert` | String | Absolute path to agent's public RSA key. |
@@ -68,8 +71,8 @@ If SSL is enabled, the public key of the device must be provided in the form of
The VRFs section is a list of available VRFs for a given device. Each VRF may be configured with the following fields:
-| Parameter | Type | Description |
-| :------------- | :----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Parameter | Type | Description |
+| :------------- | :----- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `name` | String | The VRF's name, as known **by the device**. hyperglass sends this field to the device for queries, so it needs to match the device's configuration. |
| `display_name` | String | The VRF's user-facing name. This field's value is visible in the UI. If this is not specified, hyperglass will try to create a "pretty" display name based on the `name` field. |
| `info` | | Per-VRF Contextual Help Configuration |
@@ -80,8 +83,8 @@ The VRFs section is a list of available VRFs for a given device. Each VRF may be
May be set to `null` to disable IPv4 for this VRF, on the parent device.
-| Parameter | Type | Description |
-| :-------------------- | :-----: | :-------------------------------------------------------------------- |
+| Parameter | Type | Description |
+| :-------------------- | :------ | :-------------------------------------------------------------------- |
| `source_address` | String | Device's source IPv4 address for directed queries (ping, traceroute). |
| `force_cidr` | Boolean | `true` | Convert IP host queries to actual advertised containing prefix length |
| `access_list` | | IPv4 Access List Configuration |
@@ -90,8 +93,8 @@ May be set to `null` to disable IPv4 for this VRF, on the parent device.
May be set to `null` to disable IPv6 for this VRF, on the parent device.
-| Parameter | Type | Default | Description |
-| :-------------------- | :-----: | :------ | :-------------------------------------------------------------------- |
+| Parameter | Type | Default | Description |
+| :-------------------- | :------ | :------ | :-------------------------------------------------------------------- |
| `source_address` | String | | Device's source IPv6 address for directed queries (ping, traceroute). |
| `force_cidr` | Boolean | `true` | Convert IP host queries to actual advertised containing prefix length |
| `access_list` | | | [IPv6 Access List Configuration](#access_list) |
@@ -106,8 +109,8 @@ When `force_cidr`is set to `true`, hyperglass will perform a lookup via the [RIP
The `access_list` block can be thought of like a prefix-list from Cisco IOS. It is a list of rules, where the first matching rule is the action executed.
-| Parameter | Type | Default | Description |
-| :------------- | :-----: | :-----------: | :-------------------------------------------------------------------------- |
+| Parameter | Type | Default | Description |
+| :------------- | :------ | :-----------: | :-------------------------------------------------------------------------- |
| `network` | String | | This rule's IPv4 or IPv6 base prefix |
| `action` | String | `'permit'` | This rule's action. Must be `permit` or `deny` |
| `ge` | Integer | `0` | To match this rule, the target prefix must be greater than or equal to `ge` |
@@ -117,8 +120,8 @@ The `access_list` block can be thought of like a prefix-list from Cisco IOS. It
Each VRF may enable, disable, or customize the contextual help menu for each enabled query type. The following parameters may be defined under any query type:
-| Parameter | Type | Default | Description |
-| :-------- | :-----: | :-----: | :-------------------------------------------------------------------------------------------------------------------------- |
+| Parameter | Type | Default | Description |
+| :-------- | :------ | :-----: | :-------------------------------------------------------------------------------------------------------------------------- |
| `enable` | Boolean | `true` | Enable or disable the help menu for this command. |
| `file` | String | | Path to a plain text or markdown file containing customized help information for this command. |
| `params` | Object | | Any arbitrary key/value pairs where the value will replace any occurrences of the key when wrapped in braces (e.g. `{key}`) |
@@ -127,19 +130,19 @@ For example:
```yaml
info:
- bgp_route:
- enable: true
- file: /etc/hyperglass/customer_bgp_route.md
- params:
- vrf_name: Customer A
- ping:
- enable: false
- bgp_community:
- enable: true
- file: /etc/hyperglass/customer_bgp_community.md
- params:
- vrf_name: Customer A
- community: "65000"
+ bgp_route:
+ enable: true
+ file: /etc/hyperglass/customer_bgp_route.md
+ params:
+ vrf_name: Customer A
+ ping:
+ enable: false
+ bgp_community:
+ enable: true
+ file: /etc/hyperglass/customer_bgp_community.md
+ params:
+ vrf_name: Customer A
+ community: "65000"
```
## Telnet
@@ -162,88 +165,88 @@ Below is a full example with nearly every available knob turned:
```yaml
routers:
- # HTTP/hyperglass-agent device
- - name: router01
- display_name: HTTP Router
- address: 192.0.2.1
- network:
- - name: primary
- display_name: AS65000
- credential:
- username: madeup
- password: txeTTIqwhKSJi4V3tefXQASf5AyGZ6cPsycS9nYLpKk
- ssl:
- enable: true
- cert: /etc/hyperglass/certs/router01.pem
- port: 8080
- nos: frr
- vrfs:
- - name: default
- ipv4:
- source_address: 192.0.2.1
- access_list:
- - network: 10.0.0.0/8
- action: deny
- ge: 8
- le: 32
- - network: 0.0.0.0/0
- action: permit
- le: 24 # Only allow /24 or smaller prefixes
- ipv6:
- source_address: 2001:db8::1
- access_list:
- - network: ::/0
- action: permit
- proxy: null
+ # HTTP/hyperglass-agent device
+ - name: router01
+ display_name: HTTP Router
+ address: 192.0.2.1
+ network:
+ - name: primary
+ display_name: AS65000
+ credential:
+ username: madeup
+ password: txeTTIqwhKSJi4V3tefXQASf5AyGZ6cPsycS9nYLpKk
+ ssl:
+ enable: true
+ cert: /etc/hyperglass/certs/router01.pem
+ port: 8080
+ nos: frr
+ vrfs:
+ - name: default
+ ipv4:
+ source_address: 192.0.2.1
+ access_list:
+ - network: 10.0.0.0/8
+ action: deny
+ ge: 8
+ le: 32
+ - network: 0.0.0.0/0
+ action: permit
+ le: 24 # Only allow /24 or smaller prefixes
+ ipv6:
+ source_address: 2001:db8::1
+ access_list:
+ - network: ::/0
+ action: permit
+ proxy: null
- # SSH/netmiko device
- - name: router02
- address: 10.0.0.1
- network:
- name: primary
- display_name: AS65000
- credential:
- username: user
- password: pass
- display_name: SSH Router
+ # SSH/netmiko device
+ - name: router02
+ address: 10.0.0.1
+ network:
+ name: primary
+ display_name: AS65000
+ credential:
+ username: user
+ password: pass
+ display_name: SSH Router
+ port: 22
+ nos: cisco_ios
+ vrfs:
+ - name: default
+ ipv4:
+ source_address: 192.0.2.2
+ access_list:
+ - network: 10.0.0.0/8
+ action: deny
+ ge: 8
+ le: 32
+ - network: 0.0.0.0/0
+ action: permit
+ ipv6:
+ source_address: 2001:db8::2
+ access_list:
+ - network: ::/0
+ action: permit
+ le: 64 # Only allow /64 or smaller prefixes
+ - name: special_customer
+ display_name: Customer Name
+ ipv4:
+ source_address: 172.16.0.1
+ access_list:
+ - network: 172.16.0.0/16
+ action: allow
+ ipv6: null # disable IPv6 for this VRF
+ info:
+ bgp_route:
+ file: /etc/hyperglass/help/customer_bgp_route.md
+ params:
+ customer_name: Customer Name
+ proxy:
+ name: jump_server
+ address: 10.0.1.100
port: 22
- nos: cisco_ios
- vrfs:
- - name: default
- ipv4:
- source_address: 192.0.2.2
- access_list:
- - network: 10.0.0.0/8
- action: deny
- ge: 8
- le: 32
- - network: 0.0.0.0/0
- action: permit
- ipv6:
- source_address: 2001:db8::2
- access_list:
- - network: ::/0
- action: permit
- le: 64 # Only allow /64 or smaller prefixes
- - name: special_customer
- display_name: Customer Name
- ipv4:
- source_address: 172.16.0.1
- access_list:
- - network: 172.16.0.0/16
- action: allow
- ipv6: null # disable IPv6 for this VRF
- info:
- bgp_route:
- file: /etc/hyperglass/help/customer_bgp_route.md
- params:
- customer_name: Customer Name
- proxy:
- name: jump_server
- address: 10.0.1.100
- port: 22
- credential:
- username: user
- password: pass
- nos: linux_ssh
+ credential:
+ username: user
+ password: pass
+ nos: linux_ssh
```
diff --git a/docs/docs/getting-started.mdx b/docs/docs/getting-started.mdx
index 64a1e35..afe5a31 100755
--- a/docs/docs/getting-started.mdx
+++ b/docs/docs/getting-started.mdx
@@ -13,9 +13,9 @@ import TabItem from "@theme/TabItem";
If your system runs on:
-- Ubuntu Linux
-- ~~CentOS/Red Had Linux~~
-- macOS (requires [homebrew](https://brew.sh))
+- Ubuntu Linux
+- ~~CentOS/Red Had Linux~~
+- macOS (requires [homebrew](https://brew.sh))
You should be able to proceed with the automatic installation:
@@ -81,32 +81,26 @@ The hyperglass UI is written in [ReactJS](https://reactjs.org/). As such, some J
-```bash
-# Add NodeJS Repository
-curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
+```shell-session
+$ curl -sL https://deb.nodesource.com/setup_13.x | sudo -E bash -
-# Add Yarn Package Manager Repository
-curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
-echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
+$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
+$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
-# Install
-sudo apt update
-sudo apt install -y nodejs yarn redis-server
+$ sudo apt update
+$ sudo apt install -y nodejs yarn redis-server
```
-```bash
-# Add NodeJS Repository
-curl -sL https://rpm.nodesource.com/setup_13.x | sudo bash -
+```shell-session
+$ curl -sL https://rpm.nodesource.com/setup_13.x | sudo bash -
-# Add Yarn Package Manager Repository
-curl -sL https://dl.yarnpkg.com/rpm/yarn.repo -o /etc/yum.repos.d/yarn.repo
+$ curl -sL https://dl.yarnpkg.com/rpm/yarn.repo -o /etc/yum.repos.d/yarn.repo
-# Install
-sudo yum -y install gcc-c++ make nodejs yarn redis
+$ sudo yum -y install gcc-c++ make nodejs yarn redis
```
@@ -119,6 +113,6 @@ I've attempted to abstract away most of the Javascript-related configuration and
### Application
-```bash
-pip3 install hyperglass
+```shell-session
+$ pip3 install hyperglass
```
diff --git a/docs/docs/introduction.mdx b/docs/docs/introduction.mdx
index 7982627..890f14a 100644
--- a/docs/docs/introduction.mdx
+++ b/docs/docs/introduction.mdx
@@ -4,6 +4,7 @@ title: Introduction
sidebar_label: Introduction
description: Welcome to hyperglass
---
+
import Link from "@docusaurus/Link";
import useBaseUrl from "@docusaurus/useBaseUrl";
import classnames from "classnames";
@@ -21,14 +22,14 @@ hyperglass was created with the lofty goal of benefiting the internet community
- Full IPv6 support
- Customizable everything: features, theme, UI/API text, error messages, commands
- Built in support for:
- - Cisco IOS/IOS-XE
- - Cisco IOS-XR
- - Juniper JunOS
- - Arista EOS
- - Huawei
- - FRRouting
- - BIRD
-- Configurable support for any other [supported platform](/docs/platforms)
+ - Cisco IOS/IOS-XE
+ - Cisco IOS-XR
+ - Juniper JunOS
+ - Arista EOS
+ - Huawei
+ - FRRouting
+ - BIRD
+- Configurable support for any other [supported platform](platforms.mdx)
- Optionally access devices via an SSH proxy/jump server
- VRF support
- Access List/prefix-list style query control to whitelist or blacklist query targets on a per-VRF basis
@@ -37,9 +38,12 @@ hyperglass was created with the lofty goal of benefiting the internet community
- Query multiple devices simultaneously
- Browser-based DNS-over-HTTPS resolution of FQDN queries
-
-
- Get Started
+
+ Get Started
diff --git a/docs/docs/logging.mdx b/docs/docs/logging.mdx
index 6776dde..57cfeb8 100644
--- a/docs/docs/logging.mdx
+++ b/docs/docs/logging.mdx
@@ -8,6 +8,8 @@ description: hyperglass Logging
hyperglass supports multiple types of logging, for both application troubleshooting and general reporting.
+
+
## File Logging
By default, hyperglass writes all log messages to a log file located at `/tmp/hyperglass.log`. This behavior and other file logging parameters may be overridden if needed:
@@ -80,24 +82,24 @@ If the `provider` field is set to `'generic'`, the webhook will POST JSON data i
```json
{
- "query_location": "router01",
- "query_type": "bgp_route",
- "query_vrf": "default",
- "query_target": "1.1.1.0/24",
- "headers": {
- "content-length": "103",
- "accept": "application/json, text/plain, */*",
- "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36",
- "content-type": "application/json;charset=UTF-8",
- "referer": "http://lg.example.com/",
- "accept-encoding": "gzip, deflate, br",
- "accept-language": "en-US,en;q=0.9,fr;q=0.8,lb;q=0.7,la;q=0.6"
- },
- "source": "192.0.2.1",
- "network": {
- "prefix": "192.0.2.0/24",
- "asns": ["64496"]
- }
+ "query_location": "router01",
+ "query_type": "bgp_route",
+ "query_vrf": "default",
+ "query_target": "1.1.1.0/24",
+ "headers": {
+ "content-length": "103",
+ "accept": "application/json, text/plain, */*",
+ "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36",
+ "content-type": "application/json;charset=UTF-8",
+ "referer": "http://lg.example.com/",
+ "accept-encoding": "gzip, deflate, br",
+ "accept-language": "en-US,en;q=0.9,fr;q=0.8,lb;q=0.7,la;q=0.6"
+ },
+ "source": "192.0.2.1",
+ "network": {
+ "prefix": "192.0.2.0/24",
+ "asns": ["64496"]
+ }
}
```
@@ -105,20 +107,20 @@ If the `provider` field is set to `'generic'`, the webhook will POST JSON data i
```yaml
logging:
- directory: /var/log
- format: json
- max_size: 10 MB
- syslog:
- host: syslog.example.com
- http:
- host: "https://example.com/logs"
- authentication:
- mode: basic
- username: your username
- password: your password
- headers:
- X-Special-Header: your header value
- params:
- app: hyperglass # URL would be https://example.com/logs?app=hyperglass
- verify_ssl: false
+ directory: /var/log
+ format: json
+ max_size: 10 MB
+ syslog:
+ host: syslog.example.com
+ http:
+ host: "https://example.com/logs"
+ authentication:
+ mode: basic
+ username: your username
+ password: your password
+ headers:
+ X-Special-Header: your header value
+ params:
+ app: hyperglass # URL would be https://example.com/logs?app=hyperglass
+ verify_ssl: false
```
diff --git a/docs/docs/messages.mdx b/docs/docs/messages.mdx
index c1b515f..f7dff73 100644
--- a/docs/docs/messages.mdx
+++ b/docs/docs/messages.mdx
@@ -11,6 +11,8 @@ import Code from "../src/components/JSXCode";
All user-facing status messages can be customized if needed.
+
+
| Parameter | Type | Default | Description |
| :--------------------- | :----: | :-------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `acl_denied` | String | `'"{target} is a member of {denied_network}, which is not allowed."'` | Displayed when a query target is explicitly denied by a matched VRF's ACL entry. `{target}` and `{denied_network}` will be replaced with the denied query target and the ACL entry that caused it to be denied. |
@@ -32,18 +34,18 @@ All user-facing status messages can be customized if needed.
```yaml
messages:
- acl_denied: "{target} is a member of {denied_network}, which is not allowed."
- acl_not_allowed: "{target} is not allowed."
- authentication_error: Authentication error occurred.
- connection_error: "Error connecting to {device_name}: {error}"
- feature_not_enabled: "{feature} is not enabled for {device_name}."
- general: Something went wrong.
- 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_response: No response.
- 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.
+ acl_denied: "{target} is a member of {denied_network}, which is not allowed."
+ acl_not_allowed: "{target} is not allowed."
+ authentication_error: Authentication error occurred.
+ connection_error: "Error connecting to {device_name}: {error}"
+ feature_not_enabled: "{feature} is not enabled for {device_name}."
+ general: Something went wrong.
+ 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_response: No response.
+ 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/docs/platforms.mdx b/docs/docs/platforms.mdx
index 70045ab..16c3dc4 100644
--- a/docs/docs/platforms.mdx
+++ b/docs/docs/platforms.mdx
@@ -5,11 +5,11 @@ sidebar_label: Supported Platforms
description: Platforms supported by hyperglass
---
-import Link from "@docusaurus/Link";
-
## HTTP
-The following platforms use hyperglass-agent for connection handling. When configuring the `nos` property of a device, use the value in the **Key** column.
+
+
+The following platforms use [hyperglass-agent](agent/installation.mdx) for connection handling. When configuring the `nos` property of a device, use the value in the **Key** column.
| Name | Key |
| --------- | ------ |
diff --git a/docs/docs/setup.mdx b/docs/docs/setup.mdx
index c590f1e..dbd4962 100644
--- a/docs/docs/setup.mdx
+++ b/docs/docs/setup.mdx
@@ -8,7 +8,7 @@ description: hyperglass Setup
import Link from "@docusaurus/Link";
-After hyperglass is installed, you can run the `hyperglass --help` command to see the available options:
+After hyperglass is [installed](getting-started.mdx), you can run the `hyperglass --help` command to see the available options:
```shell-session
$ hyperglass --help
@@ -63,7 +63,7 @@ $ sudo systemctl enable hyperglass
## UI Build
-hyperglass is build with [NextJS](https://nextjs.org/), a [React](https://reactjs.org/)-based UI framework that supports server-side rendering and static exporting, which contribute to hyperglass's speed and SEO-friendliness. At startup, hyperglass creates a new "UI build", which is a static export of the site and includes some elements of the configuration.
+hyperglass is build with [NextJS](https://nextjs.org/), a [React](https://reactjs.org/)-based UI framework that supports server-side rendering and static exporting, which contribute to hyperglass's speed and SEO-friendliness. At startup, hyperglass creates a new "UI build", which is a static export of the site and includes some elements of the [configuration](configuration.mdx).
It is recommended to run an initial UI build after running the setup wizard, so that you can verify that the installation is working prior to diving into configuration.
diff --git a/docs/docs/ui.mdx b/docs/docs/ui.mdx
index 2906057..c904b92 100644
--- a/docs/docs/ui.mdx
+++ b/docs/docs/ui.mdx
@@ -14,6 +14,8 @@ import Color from "../src/components/Color";
import Font from "../src/components/Font";
import PageLink from "../src/components/PageLink";
+
+
The `web` subsection contains multiple subsections of its own, should you wish to customize various aspects of the UI:
| Section | Description | All Options |
@@ -92,19 +94,19 @@ By default, no Opengraph image is set. If you define one with `image`, hyperglas
## `text`
-| Parameter | Type | Default | Description |
-| :--------------- | :----: | :------------------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `cache_prefix` | String | `'Results cached for '` | Text displayed with the cache timeout countdown. |
-| `cache_icon` | String | `'Cached Response'` | Text displayed when a user hovers over the lightning bolt icon, which is displayed when a response from the server was a cached response. |
-| `completed_time` | String | `'Completed in {seconds}'` | Text displayed when a user hovers over the success icon for a query result. `{seconds}` will be replaced with 'n seconds' where n is the time a query took to complete. |
-| `fqdn_tooltip` | String | `'Use {protocol}'` | Text displayed when a user hovers over the IPv4 or IPv6 button on an FQDN target resolved by DNS. `{protocol}` is replaced with the relevant IP protocol. |
-| `query_location` | String | `'Location'` | Query Location (router) form label. |
-| `query_target` | String | `'Target'` | Query Target (IP/hostname/community/AS Path) form label. |
-| `query_type` | String | `'Query Type'` | Query Type (BGP Route, Ping, Traceroute, etc.) form label. |
-| `query_vrf` | String | `'Routing Table'` | Query VRF form label. |
-| `subtitle` | String | `'Network Looking Glass'` | Subtitle text. value. |
-| `title` | String | `'hyperglass'` | Title text. |
-| `title_mode` | String | `'text_only'` | Set the title mode. Must be text_only, logo_only, logo_subtitle, or all |
+| Parameter | Type | Default | Description |
+| :--------------- | :----: | :------------------------------ | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `cache_prefix` | String | `'Results cached for '` | Text displayed with the cache timeout countdown. |
+| `cache_icon` | String | `'Cached Response from {time}'` | Text displayed when a user hovers over the lightning bolt icon, which is displayed when a response from the server was a cached response. `{time}` is replaced with the _original_ query's timestamp. |
+| `completed_time` | String | `'Completed in {seconds}'` | Text displayed when a user hovers over the success icon for a query result. `{seconds}` will be replaced with 'n seconds' where n is the time a query took to complete. |
+| `fqdn_tooltip` | String | `'Use {protocol}'` | Text displayed when a user hovers over the IPv4 or IPv6 button on an FQDN target resolved by DNS. `{protocol}` is replaced with the relevant IP protocol. |
+| `query_location` | String | `'Location'` | Query Location (router) form label. |
+| `query_target` | String | `'Target'` | Query Target (IP/hostname/community/AS Path) form label. |
+| `query_type` | String | `'Query Type'` | Query Type (BGP Route, Ping, Traceroute, etc.) form label. |
+| `query_vrf` | String | `'Routing Table'` | Query VRF form label. |
+| `subtitle` | String | `'Network Looking Glass'` | Subtitle text. value. |
+| `title` | String | `'hyperglass'` | Title text. |
+| `title_mode` | String | `'text_only'` | Set the title mode. Must be text_only, logo_only, logo_subtitle, or all |
:::note Title Mode
The `title_mode` parameter behaves in the following manner:
@@ -169,65 +171,65 @@ Currently, only [Google Fonts](https://fonts.google.com/) are supported.
```yaml
web:
- credit:
- enable: true
- dns_provider:
- name: google
- url: https://dns.google/resolve
- external_link:
- enable: true
- title: PeeringDB
- url: https://www.peeringdb.com/asn/{primary_asn}
- help_menu:
- enable: true
- file: null
- title: Help
- logo:
- dark: /images/hyperglass-light.png
- favicons: ui/images/favicons/
- height: null
- light: /images/hyperglass-dark.png
- width: 384
- opengraph:
- height: 1132
- image: /images/hyperglass-opengraph.png
- width: 7355
- terms:
- enable: true
- file: null
- title: Terms
- text:
- cache: Results will be cached for 2 minutes.
- fqdn_tooltip: "Use {protocol}"
- query_location: Location
- query_target: Target
- query_type: Query Type
- query_vrf: Routing Table
- subtitle: AS65001
- title: hyperglass
- title_mode: text_only
- theme:
- default_color_mode: light
- colors:
- black: "#262626"
- blue: "#314cb6"
- cyan: "#118ab2"
- danger: "#d84b4b"
- error: "#ff6b35"
- gray: "#c1c7cc"
- green: "#35b246"
- orange: "#ff6b35"
- pink: "#f2607d"
- primary: "#118ab2"
- purple: "#8d30b5"
- red: "#d84b4b"
- secondary: "#314cb6"
- success: "#35b246"
- teal: "#35b299"
- warning: "#edae49"
- white: "#f7f7f7"
- yellow: "#edae49"
- fonts:
- body: Nunito
- mono: Fira Code
+ credit:
+ enable: true
+ dns_provider:
+ name: google
+ url: https://dns.google/resolve
+ external_link:
+ enable: true
+ title: PeeringDB
+ url: https://www.peeringdb.com/asn/{primary_asn}
+ help_menu:
+ enable: true
+ file: null
+ title: Help
+ logo:
+ dark: /images/hyperglass-light.png
+ favicons: ui/images/favicons/
+ height: null
+ light: /images/hyperglass-dark.png
+ width: 384
+ opengraph:
+ height: 1132
+ image: /images/hyperglass-opengraph.png
+ width: 7355
+ terms:
+ enable: true
+ file: null
+ title: Terms
+ text:
+ cache: Results will be cached for 2 minutes.
+ fqdn_tooltip: "Use {protocol}"
+ query_location: Location
+ query_target: Target
+ query_type: Query Type
+ query_vrf: Routing Table
+ subtitle: AS65001
+ title: hyperglass
+ title_mode: text_only
+ theme:
+ default_color_mode: light
+ colors:
+ black: "#262626"
+ blue: "#314cb6"
+ cyan: "#118ab2"
+ danger: "#d84b4b"
+ error: "#ff6b35"
+ gray: "#c1c7cc"
+ green: "#35b246"
+ orange: "#ff6b35"
+ pink: "#f2607d"
+ primary: "#118ab2"
+ purple: "#8d30b5"
+ red: "#d84b4b"
+ secondary: "#314cb6"
+ success: "#35b246"
+ teal: "#35b299"
+ warning: "#edae49"
+ white: "#f7f7f7"
+ yellow: "#edae49"
+ fonts:
+ body: Nunito
+ mono: Fira Code
```
diff --git a/docs/docs/upgrading.mdx b/docs/docs/upgrading.mdx
index a536007..1cf0dde 100644
--- a/docs/docs/upgrading.mdx
+++ b/docs/docs/upgrading.mdx
@@ -10,16 +10,16 @@ description: How to upgrade hyperglass
To upgrade hyperglass, stop the currently-running service and upgrade via PyPI:
-```bash {2}
-sudo systemctl stop hyperglass
-sudo pip3 install -U hyperglass
+```shell-session
+$ sudo systemctl stop hyperglass
+$ sudo pip3 install -U hyperglass
```
## Check Current version
To check the current version of hyperglass, run the following command:
-```bash {1}
-sudo hyperglass --version
-# hyperglass version: 1.0.0-beta.19
+```shell-session
+$ sudo hyperglass --version
+hyperglass version: 1.0.0-beta.19
```
diff --git a/docs/package.json b/docs/package.json
index 7f388c2..2766523 100755
--- a/docs/package.json
+++ b/docs/package.json
@@ -31,5 +31,13 @@
"last 1 firefox version",
"last 1 safari version"
]
+ },
+ "devDependencies": {
+ "prettier": "^2.0.4"
+ },
+ "prettier": {
+ "[yaml]": {
+ "singleQuote": true
+ }
}
}
diff --git a/docs/src/css/custom.css b/docs/src/css/custom.css
index 05cedd6..4f17567 100755
--- a/docs/src/css/custom.css
+++ b/docs/src/css/custom.css
@@ -9,110 +9,111 @@
@import url("https://fonts.googleapis.com/css?family=Fira+Code&display=swap");
:root {
- --ifm-font-size-sm: 12px;
- /* --ifm-color-secondary: #314cb6;
+ --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;
- --ifm-color-secondary-darkest: #447581;
- --ifm-color-secondary-light: #7badba;
- --ifm-color-secondary-lighter: #85b3bf;
- --ifm-color-secondary-lightest: #a0c4cd;
- --ifm-color-primary: #ff5e5b;
- --ifm-color-primary-dark: #ff3c38;
- --ifm-color-primary-darker: #ff2b27;
- --ifm-color-primary-darkest: #f20400;
- --ifm-color-primary-light: #ff807e;
- --ifm-color-primary-lighter: #ff918f;
- --ifm-color-primary-lightest: #ffc4c3;
- --ifm-code-font-size: 95%;
- --ifm-font-family-base: "Nunito", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell,
- Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
- "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
- --ifm-font-family-monospace: "Fira Code", SFMono-Regular, Menlo, Monaco, Consolas,
- "Liberation Mono", "Courier New", monospace;
+ --ifm-color-secondary: #69a2b0;
+ --ifm-color-secondary-dark: #5796a6;
+ --ifm-color-secondary-darker: #528e9c;
+ --ifm-color-secondary-darkest: #447581;
+ --ifm-color-secondary-light: #7badba;
+ --ifm-color-secondary-lighter: #85b3bf;
+ --ifm-color-secondary-lightest: #a0c4cd;
+ --ifm-color-primary: #ff5e5b;
+ --ifm-color-primary-dark: #ff3c38;
+ --ifm-color-primary-darker: #ff2b27;
+ --ifm-color-primary-darkest: #f20400;
+ --ifm-color-primary-light: #ff807e;
+ --ifm-color-primary-lighter: #ff918f;
+ --ifm-color-primary-lightest: #ffc4c3;
+ --ifm-code-font-size: 95%;
+ --ifm-font-family-base: "Nunito", system-ui, -apple-system, Segoe UI, Roboto,
+ Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, "Segoe UI",
+ Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+ "Segoe UI Symbol";
+ --ifm-font-family-monospace: "Fira Code", SFMono-Regular, Menlo, Monaco,
+ Consolas, "Liberation Mono", "Courier New", monospace;
}
:root {
- --ifm-code-background: rgba(0, 0, 0, 0.04);
- --ifm-code-color: var(--ifm-color-secondary-darker);
- --ifm-footer-color: var(--ifm-secondary-lightest);
- --ifm-footer-link-color: var(--ifm-secondary-lightest);
- --ifm-footer-title-color: var(--ifm-color-emphasis-800);
- --ifm-footer-background-color: var(--ifm-color-emphasis-100);
+ --ifm-code-background: rgba(0, 0, 0, 0.04);
+ --ifm-code-color: var(--ifm-color-secondary-darker);
+ --ifm-footer-color: var(--ifm-secondary-lightest);
+ --ifm-footer-link-color: var(--ifm-secondary-lightest);
+ --ifm-footer-title-color: var(--ifm-color-emphasis-800);
+ --ifm-footer-background-color: var(--ifm-color-emphasis-100);
}
:root {
- --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);
+ --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);
}
html[data-theme="dark"]:root {
- --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);
+ --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);
}
html[data-theme="dark"] .footer.footer--dark {
- --ifm-footer-color: var(--ifm-color-emphasis-300);
- --ifm-navbar-background-color: var(--ifm-background-color);
+ --ifm-footer-color: var(--ifm-color-emphasis-300);
+ --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);
- --ifm-footer-title-color: var(--ifm-color-emphasis-800);
- --ifm-footer-background-color: var(--ifm-color-emphasis-100);
+ --ifm-footer-color: var(--ifm-color-emphasis-600);
+ --ifm-footer-link-color: var(--ifm-footer-color);
+ --ifm-footer-title-color: var(--ifm-color-emphasis-800);
+ --ifm-footer-background-color: var(--ifm-color-emphasis-100);
}
.footer.footer--dark .footer__items {
- font-size: 0.8rem;
+ 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);
- /* #ace8cd
+ --ifm-code-background: rgba(255, 255, 255, 0.08);
+ --ifm-code-color: var(--ifm-color-secondary-lightest);
+ /* #ace8cd
#b6a7e2
#dc7381
*/
}
.admonition {
- --ifm-code-background: rgba(255, 255, 255, 0.5);
- --ifm-code-color: var(--ifm-color-secondary-darker);
- --ifm-link-color: rgba(0, 0, 0, 0.5);
+ --ifm-code-background: rgba(255, 255, 255, 0.5);
+ --ifm-code-color: var(--ifm-color-secondary-darker);
+ --ifm-link-color: rgba(0, 0, 0, 0.5);
}
.admonition a:hover {
- color: rgba(0, 0, 0, 0.5);
+ color: rgba(0, 0, 0, 0.5);
}
.docusaurus-highlight-code-line {
- background-color: rgb(72, 77, 91);
- display: block;
- margin: 0 calc(-1 * var(--ifm-pre-padding));
- padding: 0 var(--ifm-pre-padding);
+ background-color: rgb(72, 77, 91);
+ display: block;
+ margin: 0 calc(-1 * var(--ifm-pre-padding));
+ padding: 0 var(--ifm-pre-padding);
}
table {
- margin-top: var(--ifm-spacing-vertical);
+ margin-top: var(--ifm-spacing-vertical);
}
table td:nth-child(1) {
- white-space: nowrap;
+ white-space: nowrap;
}
h1 code,
@@ -121,29 +122,36 @@ h3 code,
h4 code,
h5 code,
h6 code {
- color: var(--ifm-color-primary);
+ color: var(--ifm-color-primary);
}
@media screen and (max-width: 997px) {
- .col.footer__col[class][class] {
- text-align: left;
- }
- .navbar .navbar__search {
- padding-left: unset;
- }
- .navbar .navbar__search .navbar__search-input {
- width: 100%;
- display: block;
- }
+ .col.footer__col[class][class] {
+ text-align: left;
+ }
+ .navbar .navbar__search {
+ padding-left: unset;
+ }
+ .navbar .navbar__search .navbar__search-input {
+ width: 100%;
+ display: block;
+ }
}
.navbar .navbar__search .navbar__search-input {
- border-radius: var(--ifm-button-border-radius);
- border-width: var(--ifm-button-border-width);
- border-color: var(--ifm-navbar-search-input-background-color);
- border-style: solid;
+ border-radius: var(--ifm-button-border-radius);
+ border-width: var(--ifm-button-border-width);
+ border-color: var(--ifm-navbar-search-input-background-color);
+ border-style: solid;
}
.admonition-content table tr:nth-child(2n) {
- background-color: unset;
+ background-color: unset;
+}
+
+div.table--full-width ~ table {
+ display: table;
+ width: 100%;
+ margin-top: 2rem;
+ margin-bottom: 2rem;
}
diff --git a/docs/src/theme/CodeBlock/dracula.js b/docs/src/theme/CodeBlock/dracula.js
new file mode 100644
index 0000000..9f414e9
--- /dev/null
+++ b/docs/src/theme/CodeBlock/dracula.js
@@ -0,0 +1,92 @@
+// @flow
+
+export default {
+ plain: {
+ color: "rgb(241, 250, 140)",
+ backgroundColor: "#282A36",
+ },
+ styles: [
+ {
+ types: ["boolean", "number"],
+ style: {
+ color: "rgb(189, 147, 249)",
+ },
+ },
+ {
+ types: [
+ "inserted",
+ "selector",
+ "attr-name",
+ "char",
+ "builtin",
+ "inserted",
+ "function",
+ ],
+ style: {
+ color: "rgb(80, 250, 123)",
+ },
+ },
+ {
+ types: ["deleted"],
+ style: {
+ color: "rgb(255, 85, 85)",
+ },
+ },
+ {
+ types: ["regex"],
+ style: {
+ color: "rgb(255, 184, 108)",
+ },
+ },
+ {
+ types: ["operator", "entity", "url", "variable"],
+ style: {
+ color: "rgb(248, 248, 242)",
+ },
+ },
+ {
+ types: [
+ "constant",
+ "tag",
+ "selector",
+ "shell-symbol",
+ "symbol",
+ "deleted",
+ "punctuation",
+ ],
+ style: {
+ color: "rgb(255, 121, 198)",
+ },
+ },
+ {
+ types: ["atrule", "property", "language-bash"],
+ style: { color: "rgb(139, 233, 253)" },
+ },
+ {
+ types: ["keyword"],
+ style: {
+ color: "rgb(139, 233, 253)",
+ fontStyle: "italic",
+ },
+ },
+ { types: ["entity"], style: { cursor: "help" } },
+ {
+ types: ["bold"],
+ style: {
+ fontStyle: "bold",
+ },
+ },
+ {
+ types: ["comment", "output"],
+ style: {
+ color: "rgb(98, 114, 164)",
+ },
+ },
+ {
+ types: ["attr-value", "class-name", "string"],
+ style: {
+ color: "rgb(241, 250, 140)",
+ },
+ },
+ ],
+};
diff --git a/docs/src/theme/CodeBlock/index.js b/docs/src/theme/CodeBlock/index.js
index 8782be8..8a11e5c 100755
--- a/docs/src/theme/CodeBlock/index.js
+++ b/docs/src/theme/CodeBlock/index.js
@@ -9,7 +9,7 @@ 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 "prism-react-renderer/themes/dracula";
+import defaultTheme from "./dracula";
import Clipboard from "clipboard";
import rangeParser from "parse-numeric-range";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
@@ -18,83 +18,86 @@ import styles from "./styles.module.css";
const highlightLinesRangeRegex = /{([\d,-]+)}/;
export default ({ children, className: languageClassName, metastring }) => {
- (typeof global !== "undefined" ? global : window).Prism = Prism;
- require("prismjs/components/prism-shell-session");
- const {
- siteConfig: {
- themeConfig: { prism = {} },
- },
- } = useDocusaurusContext();
- // const [showCopied, setShowCopied] = useState(false);
- const target = useRef(null);
- const button = useRef(null);
- let highlightLines = [];
+ (typeof global !== "undefined" ? global : window).Prism = Prism;
+ require("prismjs/components/prism-shell-session");
+ const {
+ siteConfig: {
+ themeConfig: { prism = {} },
+ },
+ } = useDocusaurusContext();
+ // const [showCopied, setShowCopied] = useState(false);
+ const target = useRef(null);
+ const button = useRef(null);
+ let highlightLines = [];
- if (metastring && highlightLinesRangeRegex.test(metastring)) {
- const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
- highlightLines = rangeParser.parse(highlightLinesRange).filter((n) => n > 0);
+ if (metastring && highlightLinesRangeRegex.test(metastring)) {
+ const highlightLinesRange = metastring.match(highlightLinesRangeRegex)[1];
+ highlightLines = rangeParser
+ .parse(highlightLinesRange)
+ .filter((n) => n > 0);
+ }
+
+ useEffect(() => {
+ let clipboard;
+
+ if (button.current) {
+ clipboard = new Clipboard(button.current, {
+ target: () => target.current,
+ });
}
- useEffect(() => {
- let clipboard;
+ return () => {
+ if (clipboard) {
+ clipboard.destroy();
+ }
+ };
+ }, [button.current, target.current]);
- if (button.current) {
- clipboard = new Clipboard(button.current, {
- target: () => target.current,
- });
- }
+ let language =
+ languageClassName && languageClassName.replace(/language-/, "");
- return () => {
- if (clipboard) {
- clipboard.destroy();
- }
- };
- }, [button.current, target.current]);
+ if (!language && prism.defaultLanguage) {
+ language = prism.defaultLanguage;
+ }
- let language = languageClassName && languageClassName.replace(/language-/, "");
+ // const handleCopyCode = () => {
+ // window.getSelection().empty();
+ // setShowCopied(true);
- if (!language && prism.defaultLanguage) {
- language = prism.defaultLanguage;
- }
+ // setTimeout(() => setShowCopied(false), 2000);
+ // };
- // const handleCopyCode = () => {
- // window.getSelection().empty();
- // setShowCopied(true);
+ return (
+
+ {({ className, style, tokens, getLineProps, getTokenProps }) => (
+