Web UI

hyperglass provides extensive customization options for the look and feel of the web UI.

DNS over HTTPS

DNS over HTTPS (opens in a new tab) is used to look up an FQDN query target from the perspective of the user's browser.

Logo

Example

web:
    logo:
        light: /path/to/light-logo.svg
        dark: /path/to/dark-logo.svg
        favicon: /path/to/favicon.svg
        width: 100%
        height: null

Greeting

The greeting is an optional modal/popup window that will present itself to users in the Web UI. It can be used for anything you want; for example:

• A data privacy acknowledgement that must be acknowledged prior to proceeding
• Information about your company
• Instructions on how to use hyperglass

Example

web:
    greeting:
        enable: true
        file: /path/to/your/file.md
        title: Welcome
        button: Continue
        required: false

OpenGraph

OpenGraph (opens in a new tab) is 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, this Opengraph image is used, but you can provide your own image. You don't need to worry about sizing or formatting it properly, hyperglass will handle this for you.

Highlighting

hyperglass can highlight special values in your router output and provide users with additional information about the content. For example, your organization's BGP communities or IP address space can be visually highlighted, and a tooltip can be shown when a user hovers over the highlighted value.

Each value you wish to be highlighted is defined with the following schema:

Example

web:
    highlight:
        - pattern: "65000:1234"
          label: Special snowflake community that does a thing
          color: primary
        - pattern: '^192\.0\.2\.[0-9]+$'
          label: Magical IP Address
          color: blue

Menus

hyperglass can show completely-customizable menus in the footer. Each menu can be configured with the following schema:

Example

web:
  menus:
    - title: Terms & Conditions
      content:
        | **Don't** break stuff!
          _please_
      side: right
      order: 1
    - title: Help
      content: /path/to/help/file.md
      side: left
      order: 0

Links

hyperglass can show customizable links to anything you think your users might find helpful. Each link can be configured with the following schema:

Example

web:
    links:
        - title: PeeringDB
          url: https://www.peeringdb.com/65000
          show_icon: true
          side: right
          order: 1
        - title: Our Website
          url: https://example.com
          show_icon: false
          side: left
          order: 0

Credit

Text

Most of the text in the hyperglass UI can be overridden to suit your needs.

Title Mode

Available title modes are:

Example

web:
    text:
        title: Our Looking Glass
        subtitle: Company Name, Inc.
        title_mode: text_only

Theme

hyperglass allows you to customize the colors and fonts used in the Web UI.

Colors

Intrinsic Colors

Functional Colors

Example

To override hyperglass's primary color, it's recommended to override its mapped intrinsic color. For example, to override the default primary color to cyan:

web:
    theme:
        colors:
            cyan: "#00ffff"

Fonts

hyperglass's fonts are loaded from Google Fonts (opens in a new tab). Any Google font name may be specified to override the default fonts.

Example

web:
    theme:
        fonts:
            body: Inter