6. Branding
Site Parameters¶
From hyperglass/hyperglass/configuration/configuration.toml
[branding]
table.
[branding]
Key Name | Type | Default Value | Function |
---|---|---|---|
site_name |
String | "hyperglass" |
HTML <title> element that is shown in a browser's title bar. |
Footer¶
[branding.footer]
Key Name | Type | Default Value | Function |
---|---|---|---|
enable |
Boolean | true |
Enables or disables entire footer element. |
The footer text itself can be customized by adding a Markdown document to hyperglass/hyperglass/render/templates/info/details/footer.md
. The example file, footer.md.example
, can be copied to footer.md
and modified. All Markdown files in this directory are excluded from change control and will not be overwritten when hyperglass is updated.
TOML Front Matter Required
The TOML Front Matter in the default example files is required, even if no attributes are used. If it is not present, the rendering backend will fail to render the main page.
Credit¶
[branding.credit]
Key Name | Type | Default Value | Function |
---|---|---|---|
enable |
Boolean | true |
Enables or disables text below the footer element, which links to the hyperglass repo. |
PeeringDB¶
[branding.peering_db]
Key Name | Type | Default Value | Function |
---|---|---|---|
enable |
Boolean | true |
Enables or disables the PeeringDB link in the upper right corner. If true , the primary_asn will be automatically used to create the URL to your ASN's PeeringDB entry. |
Site Text¶
[branding.text]
Key Name | Type | Default Value | Function |
---|---|---|---|
title_mode |
String | "logo_only" |
Controls the title section on the main page. |
title |
String | "hyperglass" |
|
subtitle |
String | "AS" + primary_asn |
title_mode
Options:
"all"
Displays Title, and Subtitle text, and logo defined inlogo_path
."logo_only"
Hides Title and Subtitle text, displays logo defined inlogo_path
."text_only"
Hides logo, displays Title and Subtitle text."logo_title"
Displays Title, and logo defined inlogo_path
.
Key Name | Type | Default Value | Function |
---|---|---|---|
query_type |
String | "Query Type" |
Placeholder text that appears in the Query Type dropdown. |
results |
String | "Results" |
Title text used for the results message box which contains the results of the query. |
location |
String | "Select Location..." |
Placeholder text that appears in the Location dropdown. |
query_placeholder |
String | "IP, Prefix, Community, or AS Path" |
Placeholder text that appears in the main search box. |
bgp_route |
String | "BGP Route" |
Dropdown text used for the BGP Route query type. |
bgp_community |
String | "BGP Community" |
Dropdown text used for the BGP Community query type. |
bgp_aspath |
String | "BGP AS Path" |
Dropdown text used for the BGP AS Path query type. |
ping |
String | "Ping" |
Dropdown text used for the Ping query type. |
traceroute |
String | "Traceroute" |
Dropdown text used for the Traceroute query type. |
404 Error Page Text
[branding.text.404]
The 404 error page will be displayed if a user attempts to visit any non-existent URI, e.g. http://lg.domain.tld/this_isnt_real
Key Name | Type | Default Value |
---|---|---|
title |
String | "Error" |
subtitle |
String | "Page Not Found" |
500 Error Page Text
[branding.text.500]
The 500 error page will be displayed if there is a backend problem or if an exception is raised. If you get this page, you should probably enable debug mode to find out why.
Key Name | Type | Default Value |
---|---|---|
title |
String | "Error" |
subtitle |
String | "Something Went Wrong" |
Logo & Favicon¶
[branding.logo]
Key Name | Type | Default Value | Function |
---|---|---|---|
path |
String | "static/images/hyperglass-dark.png" |
Sets the path to the logo file. This file can be any browser-compatible format, such as JPEG, PNG, or SVG. |
width |
String | "384" |
Sets the width of the logo defined in the logo_path parameter. This is helpful if your logo is a dimension that doesn't quite work with the default width. |
favicons |
String | "static/images/favicon/" |
Sets the path to the favicons directory (must have a trailing / ). For full browser and platform comatability, it is recommended to use RealFaviconGenerator and place all the generated files in static/custom/images/favicon/ (and update the favicons parameter). |
Colors¶
[branding.color]
Key Name | Type | Default Value | Function |
---|---|---|---|
background |
String | Sets the background color of the main page. | |
button_submit |
String | Sets color of the submit button. | |
danger |
String | Sets color of the Bulma "danger" class, which is used for user-facing errors. | |
progress_bar |
String | Sets color of the progress bar while hyperglass processes the query. |
Tag Colors
[branding.color.tag]
Tags are used to show attributes for the active query being run.
Key Name | Type | Default Value | Function |
---|---|---|---|
type_title |
String | Sets title color of the query type tag. | |
type |
String | Sets value color of the query type tag. | |
location_title |
String | Sets title color of the location tag. | |
location |
String | Sets value color of the location tag. |
Fonts¶
[branding.font]
hyperglass makes use of two font families - a primary family and a monospace family. The primary family is used for all paragraph, title/subtitle, and non-code/preformatted text, and the monospace font is used for any code/preformatted blocks as well as the query results.
The values are passed as a Jinja2 variable to generate hyperglass/hyperglass/static/sass/hyperglass.scss
, which will be compiled from Sass to CSS.
Primary Font
[branding.font.primary]
Key Name | Type | Default Value | Function |
---|---|---|---|
name |
String | "Nunito" |
Sets the web font name for the primary font. |
url |
String | "https://fonts.googleapis.com/css?family=Nunito:400,600,700" |
Sets the web font URL for the primary font. |
Monospace Font
[branding.font.mono]
Key Name | Type | Default Value | Function |
---|---|---|---|
name |
String | "Fira Mono" |
Sets the web font name for the monospace/code/preformatted text font. |
url |
String | "https://fonts.googleapis.com/css?family=Fira+Mono" |
Sets the web font URL for the monospace/code/preformatted text font. |
size |
String | "0.95em" |
Sets the CSS-valid size for the monospace/code/preformatted text font. |
Help Dropdown¶
The text displayed in the help dropdown can be easily customized. For each query type, there is a corresponding Markdown example file located at hyperglass/hyperglass/render/templates/info
:
hyperglass/hyperglass/render/templates/info/
├── bgp_aspath.md.example
├── bgp_community.md.example
├── bgp_route.md.example
├── ping.md.example
└── traceroute.md.example
Each example file can be renamed to exclude the .example
file extension, and modified accordingly.
TOML Front Matter Required
The TOML Front Matter in the default example files is required, even if no attributes are used. If it is not present, the rendering backend will fail to render the main page.
Detailed Help¶
Currently, the BGP Community and BGP AS Path query types support an additional detailed help modal. Similar to the above Help Dropdown structure, the detailed help text can be customized by modifying the below files:
hyperglass/render/templates/info/details/
├── bgp_aspath.md.example
├── bgp_community.md.example
└── footer.md.example
The BGP Community detailed help is intended to display your organizations community structure so your hyperglass users know what communities to query. By default, this is populated with example information and should be changed to include your organization's BGP Community info, or disabled by adding a hyperglass/hyperglass/render/templates/info/bgp_community.md
file and removing the {{ info["bgp_community"]["link"] }}
line.
The BGP AS Path detailed help is intended to display your supported AS Path patterns. By default, this is populated with the default AS Path regex pattern, as defined in the BGP AS Path feature configuration. If you modify the default pattern to include additional allowed query patterns, you should also modify the BGP AS Path detailed help file to reflect your changes.