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:

Section	Description	All Options
credit	Developer credit & GitHub Link	➡️
dns_provider	DNS over HTTPS Provider	➡️
external_link	Link to external site	➡️
greeting	Greeting Modal	➡️
logo	Logo & Favicons	➡️
opengraph	OpenGraph	➡️
links	Footer Links	➡️
menus	Footer Menus	➡️
text	Text, title, & names	➡️
theme	Colors & Fonts	➡️

credit

Parameter	Type	Default	Description
enable	Boolean	true	Enable 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

Parameter	Type	Default	Description
name	String	'cloudflare'	DNS over HTTPS provider for in-browser DNS resolution. Cloudflare & Google supported. Must be cloudflare or google

links

Specify an array/list of links to show in the footer. By default, a link to your ASN's PeeringDB page is used.

Parameter	Type	Default	Description
title	String	'PeeringDB'	Link title/label
url	String	'https://www.peeringdb.com/asn/{primary_asn}'	Target URL. {primary_asn} will be replaced with the primary_asn value from Global Settings
show_icon	Boolean	true	Show an icon on the right side of the link indicating that the link will take the user away from the hyperglass page.
side	String	'left'	Show the link on the 'left' or 'right' side of the footer.
order	Integer	0	Specify the order of the links (left to right). During rendering, links and menus are merged, so the order is used to sort both.

Example

hyperglass.yaml

web:

links:

- title: Website

url: https://www.example.com

side: right

order: 5

- title: PeeringDB

url: https://www.peeringdb.com/asn/{primary_asn}

side: left

order: 2

menus

Specify an array/list of menus to show in the footer. A menu's content can be plain text or markdown. By default, generic help and terms & conditions menus are shown.

Parameter	Type	Default	Description
title	String		Menu title/label
content	String		Menu content. Can be any string content, or a path to a plain text or markdown file.
side	String	'left'	Show the menu on the 'left' or 'right' side of the footer.
order	Integer	0	Specify the order of the links (left to right). During rendering, links and menus are merged, so the order is used to sort both.

Example

hyperglass.yaml

web:

menus:

- title: Help

content: "Please contact [[email protected]](mailto:[email protected]) to get support."

- title: Terms & Conditions

content: /etc/hyperglass/terms-and-conditions.md

side: right

greeting

Parameter	Type	Default	Description
enable	Boolean	false	Enable or disable the greeting modal.
file	String		Path to a markdown file containing the modal body content.
title	String	'Welcome'	Modal title.
button	String	'Continue'	Button text.
required	Boolean	false	If 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.

Parameter	Type	Description
image	String	Path to opengraph image