UI Configuration

Build

hyperglass is build with NextJS, a React-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.

This UI build process can be run manually via the hyperglass CLI:

$ hyperglass build-ui
✅ Completed UI build in production mode

Or with the --build CLI flag on startup:

$ hyperglass start --build

The UI build will run automatically any time the hyperglass configuration or version changes.

Sections

The web subsection contains multiple subsections of its own, should you wish to customize various aspects of the UI:

SectionDescriptionAll Options
creditDeveloper credit & GitHub Link➡️
dns_providerDNS over HTTPS Provider➡️
external_linkLink to external site➡️
greetingGreeting Modal➡️
logoLogo & Favicons➡️
opengraphOpenGraph➡️
help_menuHelp Menu➡️
termsTerms & Conditions➡️
textText, title, & names➡️
themeColors & Fonts➡️

credit

ParameterTypeDefaultDescription
enableBooleantrueEnable or disable the display of developer credit & link to hyperglass GitHub repository
From the developer

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 who 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

ParameterTypeDefaultDescription
nameString'cloudflare'DNS over HTTPS provider for in-browser DNS resolution. Cloudflare & Google supported.
Must be cloudflare or google

external_link

ParameterTypeDefaultDescription
enableBooleantrueEnable or disable the display of an external link
titleString'PeeringDB'Link title/label
urlString'https://www.peeringdb.com/asn/{primary_asn}'Target URL. {primary_asn} will be replaced with the primary_asn value from Global Settings

greeting

ParameterTypeDefaultDescription
enableBooleanfalseEnable or disable the greeting modal.
fileStringPath to a markdown file containing the modal body content.
titleString'Welcome'Modal title.
buttonString'Continue'Button text.
requiredBooleanfalseIf true the user must click the button in order to submit a query.

opengraph

If you're not familiar with OpenGraph, 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, this Opengraph image is set. If you define one with image, hyperglass will automatically generate an Opengraph image using the following methodology:

  • If the image is already 1200x630, it will be used
  • If the image is or is not 1200x630, but contains transparency (like in a .png formatted image), it will be converted to a JPEG file with the black used as the background color.
ParameterTypeDescription
imageStringPath to opengraph image

help_menu

ParameterTypeDefaultDescription
enableBooleantrueEnable or display the display of the help menu
fileStringPath to a plain text or markdown file with content to override the default help menu content
titleString'Help'Help menu title

terms

ParameterTypeDefaultDescription
enableBooleantrueEnable or display the display of terms & conditions
fileStringPath to a plain text or markdown file with content to override the default terms & conditions
titleString'Terms'Terms & conditions title