From 96fced9e3328a46d76dc0c2526d1a81baa7e26ce Mon Sep 17 00:00:00 2001 From: checktheroads Date: Mon, 10 Feb 2020 09:06:20 -0700 Subject: [PATCH] docs updates --- docs/docs/configuration.mdx | 227 +----------------------- docs/docs/devices.mdx | 228 +++++++++++++++++++++++++ docs/docs/getting-started.mdx | 4 +- docs/docs/introduction.mdx | 1 + docs/docs/ui.mdx | 127 ++++++++++++++ docs/sidebars.js | 2 +- docs/src/components/Color.js | 9 + docs/src/components/Font.js | 12 ++ docs/src/components/JSXCode.js | 17 +- docs/src/components/MiniNote.js | 4 +- docs/src/components/fonts.module.css | 21 +++ docs/src/components/styles.module.css | 25 +++ hyperglass/configuration/models/web.py | 3 +- 13 files changed, 438 insertions(+), 242 deletions(-) create mode 100644 docs/docs/devices.mdx create mode 100644 docs/docs/ui.mdx create mode 100644 docs/src/components/Color.js create mode 100644 docs/src/components/Font.js create mode 100644 docs/src/components/fonts.module.css create mode 100644 docs/src/components/styles.module.css diff --git a/docs/docs/configuration.mdx b/docs/docs/configuration.mdx index 03dbd87..66493e8 100644 --- a/docs/docs/configuration.mdx +++ b/docs/docs/configuration.mdx @@ -8,9 +8,7 @@ description: Configuring hyperglass import Link from "@docusaurus/Link"; import Admonition from "react-admonitions"; -import R from "../src/components/Required"; import MiniNote from "../src/components/MiniNote"; -import Code from "../src/components/JSXCode"; hyperglass is meant to be _extremely_ customizable, but with reasonable defaults that most operators won't need to override. Even though there are a _lot_ of configuration options, all of them can be left untouched and hyperglass will work (although, it's recommended to at least set the organization name). @@ -26,13 +24,15 @@ hyperglass configuration consists of three separate [YAML](https://yaml.org/) co - `hyperglass.yaml` - Defines configuration parameters for the application and UI - - _This file is not required for hyperglass to run_ + 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** + + 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_ + This file is not required for hyperglass to run Configuration files may be located in one of the following directories: @@ -63,7 +63,7 @@ routers: source_address: 2001:db8::1 ``` -There are a lot more options, but this is enough to get started. +There are a lot more options, but this is enough to get started. For all device configuration options, see here. If you have a lot of devices with shared configuration parameters, you may want to look into{" "} @@ -74,218 +74,3 @@ There are a lot more options, but this is enough to get started. . - -## All Device Parameters - -| Parameter | Type | Description | -| ------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------- | -| `name` | String | Device hostname. This is not user-facing. | -| `address` | String | Device management hostname or IP address. | -| `network` | String | Primary network this device is a member of. Used for device grouping. Usually something like 'AS65000'. | -| `display_name` | String | Device's user-facing name. | -| `port` | Integer | TCP port used to connect to the device. | -| `nos` | String | Network Operating System. Must be a supported platform. | -| `credential` | | Device Credential Configuration | -| `vrfs` | | Device VRF Configuration | -| `proxy` | | SSH Proxy Configuration | -| `ssl` | | SSL Configuration for devices using [hyperglass-agent](https://github.com/checktheroads/hyperglass-agent). | - -### `proxy` - -Any device that uses SSH (see platforms for breakdown) can be accessed through an intermediary SSH "proxy". The process is nearly identical to using local SSH tunneling, e.g. `ssh -L local_port:remote_device:remote_port username@proxy_server -p proxy_port`. - -| Parameter | Type | Default | Description | -| ----------------- | ------- | ------------- | ---------------------------------------------------------------------------------------------------------------------- | -| `name` | String | | Proxy hostname. | -| `address` | String | | Proxy management hostname or IP address. | -| `credential` | | | Proxy Credential Configuration | -| `nos` | String | `'linux_ssh'` | Proxy's network operating system. Must be a supported platform. | -| `port` | Integer | `22` | TCP port user to connect to the proxy. | - - - Currently only linux_ssh has been tested and validated for use as an SSH proxy. -; - -### `credential` - -While all devices require a credential mapping, the credential values themselves may be used in different ways depending on the device NOS. For SSH devices, the credential is used as a typical SSH username and password. - -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 | - -### `ssl` - -HTTP devices may optionally use SSL for the connection between hyperglass and the device. This is **disabled** by default, which means devices will use unencrypted HTTP by default. - -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 | -| ----------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `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. | - -### `vrfs` - -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 | -| -------------- | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| `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 | -| `ipv4` | | VRF's IPv4 Configuration | -| `ipv6` | | VRF's IPv6 Configuration | - -#### `ipv4` - -May be set to `null` to disable IPv4 for this VRF, on the parent device. - -| Parameter | Type | Description | -| --------------------- | ------ | --------------------------------------------------------------------- | -| `source_address` | String | Device's source IPv4 address for directed queries (ping, traceroute). | -| `access_list` | | IPv4 Access List Configuration | - -#### `ipv6` - -May be set to `null` to disable IPv6 for this VRF, on the parent device. - -| Parameter | Type | Description | -| --------------------- | ------ | --------------------------------------------------------------------- | -| `source_address` | String | Device's source IPv6 address for directed queries (ping, traceroute). | -| `access_list` | | IPv6 Access List Configuration | - -#### `access_list` - -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 | -| -------------- | ------- | ------------- | --------------------------------------------------------------------------- | -| `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` | -| `le` | Integer | `32` \| `128` | To match this rule, the target prefix must be less than or equal to `le` | - -#### `info` - -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 | -| --------- | ------- | ------- | --------------------------------------------------------------------------------------------------------------------------- | -| `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}`) | - -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" -``` - -### Full Example - -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 - - # 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 - credential: - username: user - password: pass - nos: linux_ssh -``` diff --git a/docs/docs/devices.mdx b/docs/docs/devices.mdx new file mode 100644 index 0000000..fb6ecce --- /dev/null +++ b/docs/docs/devices.mdx @@ -0,0 +1,228 @@ +--- +id: devices +title: Adding Devices +sidebar_label: Device Configuration +keywords: [hyperglass, authentication, ssl, proxy, access list, prefix list, acl, help] +description: Adding devices to hyperglass +--- + +import Link from "@docusaurus/Link"; +import Admonition from "react-admonitions"; +import R from "../src/components/Required"; +import MiniNote from "../src/components/MiniNote"; +import Code from "../src/components/JSXCode"; + +## All Device Parameters + +| Parameter | Type | Description | +| :------------------ | :-----: | :-------------------------------------------------------------------------------------------------------------------------------- | +| `name` | String | Device hostname. This is not user-facing. | +| `address` | String | Device management hostname or IP address. | +| `network` | String | Primary network this device is a member of. Used for device grouping. Usually something like 'AS65000'. | +| `display_name` | String | Device's user-facing name. | +| `port` | Integer | TCP port used to connect to the device. | +| `nos` | String | Network Operating System. Must be a supported platform. | +| `credential` | | Device Credential Configuration | +| `vrfs` | | Device VRF Configuration | +| `proxy` | | SSH Proxy Configuration | +| `ssl` | | SSL Configuration for devices using [hyperglass-agent](https://github.com/checktheroads/hyperglass-agent). | + +### `proxy` + +Any device that uses SSH (see platforms for breakdown) can be accessed through an intermediary SSH "proxy". The process is nearly identical to using local SSH tunneling, e.g. `ssh -L local_port:remote_device:remote_port username@proxy_server -p proxy_port`. + +| Parameter | Type | Default | Description | +| :---------------- | :-----: | :------------ | :--------------------------------------------------------------------------------------------------------------------- | +| `name` | String | | Proxy hostname. | +| `address` | String | | Proxy management hostname or IP address. | +| `credential` | | | Proxy Credential Configuration | +| `nos` | String | `'linux_ssh'` | Proxy's network operating system. Must be a supported platform. | +| `port` | Integer | `22` | TCP port user to connect to the proxy. | + + + Currently only linux_ssh has been tested and validated for use as an SSH proxy. + + +### `credential` + +While all devices require a credential mapping, the credential values themselves may be used in different ways depending on the device NOS. For SSH devices, the credential is used as a typical SSH username and password. + +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 | + +### `ssl` + +HTTP devices may optionally use SSL for the connection between hyperglass and the device. This is **disabled** by default, which means devices will use unencrypted HTTP by default. + +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 | +| :---------- | :-----: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `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. | + +### `vrfs` + +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 | +| :------------- | :----: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `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 | +| `ipv4` | | VRF's IPv4 Configuration | +| `ipv6` | | VRF's IPv6 Configuration | + +#### `ipv4` + +May be set to `null` to disable IPv4 for this VRF, on the parent device. + +| Parameter | Type | Description | +| :-------------------- | :----: | :-------------------------------------------------------------------- | +| `source_address` | String | Device's source IPv4 address for directed queries (ping, traceroute). | +| `access_list` | | IPv4 Access List Configuration | + +#### `ipv6` + +May be set to `null` to disable IPv6 for this VRF, on the parent device. + +| Parameter | Type | Description | +| :-------------------- | :----: | :-------------------------------------------------------------------- | +| `source_address` | String | Device's source IPv6 address for directed queries (ping, traceroute). | +| `access_list` | | IPv6 Access List Configuration | + +#### `access_list` + +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 | +| :------------- | :-----: | :-----------: | :-------------------------------------------------------------------------- | +| `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` | +| `le` | Integer | `32` \| `128` | To match this rule, the target prefix must be less than or equal to `le` | + +#### `info` + +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 | +| :-------- | :-----: | :-----: | :-------------------------------------------------------------------------------------------------------------------------- | +| `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}`) | + +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" +``` + +### Full Example + +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 + + # 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 + credential: + username: user + password: pass + nos: linux_ssh +``` diff --git a/docs/docs/getting-started.mdx b/docs/docs/getting-started.mdx index 2d1f692..0442965 100755 --- a/docs/docs/getting-started.mdx +++ b/docs/docs/getting-started.mdx @@ -72,7 +72,7 @@ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/source # Install sudo apt update -sudo apt install -y nodejs yarn +sudo apt install -y nodejs yarn redis-server ``` @@ -85,7 +85,7 @@ curl -sL https://rpm.nodesource.com/setup_13.x | sudo bash - # Add Yarn Package Manager curl -sL https://dl.yarnpkg.com/rpm/yarn.repo -o /etc/yum.repos.d/yarn.repo -sudo yum -y install gcc-c++ make nodejs yarn +sudo yum -y install gcc-c++ make nodejs yarn redis ``` diff --git a/docs/docs/introduction.mdx b/docs/docs/introduction.mdx index 2c11de8..4d807e9 100644 --- a/docs/docs/introduction.mdx +++ b/docs/docs/introduction.mdx @@ -35,6 +35,7 @@ hyperglass was created with the lofty goal of benefiting the internet community - REST API with automatic, configurable OpenAPI documentation - Modern, responsive UI built on [ReactJS](https://reactjs.org/), with [NextJS](https://nextjs.org/) & [Chakra UI](https://chakra-ui.com/) - Query multiple devices simultaneously +- Browser-based DNS-over-HTTPS resolution of FQDN queries ( + + {children} + +); + +| Section | Description | All Options | +| :-------------- | :----------------------------- | :-----------------------------------------: | +| `credit` | Developer credit & GitHub Link | ➡️ | +| `dns_provider` | DNS over HTTPS Provider | ➡️ | +| `external_link` | Link to external site | ➡️ | +| `logo` | Logo & Favicons | ➡️ | +| `opengraph` | [OpenGraph](https://ogp.me/) | ➡️ | +| `terms` | Terms & Conditions | ➡️ | +| `theme` | Colors & Fonts | ➡️ | + +## `credit` + +| Parameter | Type | Default | Description | +| :-------- | :-----: | :-----: | :--------------------------------------------------------------------------------------- | +| `enable` | Boolean | `true` | Enable or disable the display of developer credit & link to hyperglass GitHub repository | + + + If your organization's policy allows, and you don't mind, I request that you keep{" "} + credit enabled. Remember: my goal for this project is get more networks to use + looking glasses to make all of our lives easier.
+
Because it's primarily other network operators that will use this tool to begin with, I'd + love for any operators that use your looking glass to know where they can get their own. + + +## `dns_provider` + +| Parameter | Type | Default | Description | +| :-------- | :----: | :------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `name` | String | `'cloudflare'` | DNS over HTTPS provider for in-browser DNS resolution. Cloudflare & Google supported. Must be cloudflare or google | + +## `external_link` + +| Parameter | Type | Default | Description | +| :-------- | :-----: | :-------------------------------------------- | :------------------------------------------------ | +| `enable` | Boolean | `true` | Enable or disable the display of an external link | +| `title` | String | `'PeeringDB'` | Link title/label | +| `url` | String | `'https://www.peeringdb.com/AS{primary_asn}'` | Target URL | + +## `logo` + +| Parameter | Type | Default | Description | +| :-------- | :-----: | :----------------------------------------------------------- | :------------------------------------------- | +| `light` | String | `'hyperglass/hyperglass/static/images/hyperglass-dark.png'` | Path to logo that will be used in light mode | +| `dark` | String | `'hyperglass/hyperglass/static/images/hyperglass-light.png'` | Path to logo that will be used in dark mode | +| `width` | Integer | `384` | Maximum logo width in pixels | +| `height` | Integer | | Maximum logo height in pixels | + +## `opengraph` + +If you're not familiar with [OpenGraph](https://ogp.me/), it's the thing that generates the pretty pictures, titles, and descriptions for links when you post them to sites/tools such as Facebook, Twitter, Slack, etc. + +By default, no Opengraph image is set. If you define one with `image`, hyperglass will try to determine the image's dimensions automatically. Or, you can override those dimensions with the `width` and `height` parameters. + +| Parameter | Type | Description | +| :-------- | :-----: | :---------------------- | +| `image` | String | Path to opengraph image | +| `width` | Integer | Opengraph image width | +| `height` | Integer | Opengraph image height | + +## `terms` + +| Parameter | Type | Default | Description | +| :-------- | :-----: | :-------- | :-------------------------------------------------------------------------------------------- | +| `enable` | Boolean | `true` | Enable or display the display of terms & conditions | +| `file` | String | | Path to a plain text or markdown file with content to override the default terms & conditions | +| `title` | String | `'Terms'` | Terms & conditions title | + +## `theme` + +| Section | Description | All Options | +| :------- | :----------- | :----------------------------------: | +| `colors` | Theme colors | ➡️ | +| `fonts` | Theme fonts | ➡️ | + +### `colors` + +| Parameter | Type | Default | Description | +| :---------- | :----: | :--------------------- | :------------------------------------- | +| `primary` | String | | Primary accent color | +| `secondary` | String | | Secondary accent color | +| `success` | String | | Success message/status color | +| `warning` | String | | Warning message/status color | +| `error` | String | | Error message/status color | +| `danger` | String | | Danger message/status color | +| `black` | String | | Used as background color in dark mode | +| `white` | String | | Used as background color in light mode | +| `red` | String | | Used as `danger` color if undefined | +| `orange` | String | | Used as `error` color if undefined | +| `yellow` | String | | Used as `warning` color if undefined | +| `green` | String | | Used as `success` color if undefined | +| `cyan` | String | | Used as `primary` color if undefined | +| `blue` | String | | Used as `secondary` color if undefined | +| `teal` | String | | | +| `pink` | String | | | +| `purple` | String | | | +| `gray` | String | | | + +### `fonts` + +Currently, only [Google Fonts](https://fonts.google.com/) are supported. + +| Parameter | Type | Default | Description | +| :-------- | :----: | :----------------------- | :-------------------------------------- | +| `body` | String | | Main body font | +| `mono` | String | | Monospace font, used for command output | diff --git a/docs/sidebars.js b/docs/sidebars.js index 7d51234..e9ba0fd 100755 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -3,7 +3,7 @@ module.exports = { { type: "category", label: "Installation", - items: ["introduction", "getting-started", "configuration"] + items: ["introduction", "getting-started", "configuration", "devices", "ui"] }, { type: "category", label: "Features", items: ["mdx"] }, { type: "doc", id: "platforms" } diff --git a/docs/src/components/Color.js b/docs/src/components/Color.js new file mode 100644 index 0000000..bda3420 --- /dev/null +++ b/docs/src/components/Color.js @@ -0,0 +1,9 @@ +import React from "react"; +import styles from "./styles.module.css"; + +export default ({ hex }) => ( +
+ + {hex} +
+); diff --git a/docs/src/components/Font.js b/docs/src/components/Font.js new file mode 100644 index 0000000..b163993 --- /dev/null +++ b/docs/src/components/Font.js @@ -0,0 +1,12 @@ +import React from "React"; +import classnames from "classnames"; +import styles from "./fonts.module.css"; + +export default ({ name }) => { + const fontClass = { Nunito: "fontBody", "Fira Code": "fontMono" }; + return ( + + {name} + + ); +}; diff --git a/docs/src/components/JSXCode.js b/docs/src/components/JSXCode.js index 2162b30..6712289 100644 --- a/docs/src/components/JSXCode.js +++ b/docs/src/components/JSXCode.js @@ -1,17 +1,4 @@ import React from "react"; +import styles from "./styles.module.css"; -export default ({ children }) => ( - - {children} - -); +export default ({ children }) => {children}; diff --git a/docs/src/components/MiniNote.js b/docs/src/components/MiniNote.js index d4f0d7b..c59d885 100644 --- a/docs/src/components/MiniNote.js +++ b/docs/src/components/MiniNote.js @@ -1,8 +1,8 @@ import React from "react"; -export default ({ children }) => ( +export default ({ children, newLine = true }) => ( <> -
+ {newLine &&
}