Template Hubverse Dashboard Repository

Quickstart

Use this template to create a dashboard repository for your hub and then do the following:

1. Add markdown content to pages/
2. Update site-config.yml i. hub is the github slug for your active hub. This example defaults to the CDC FluSight hub ii. title is the title of your dashboard iii. pages is a list of pages you want included in the top bar after the home page (index.html) and forecasts (forecast.html).
3. Update predtimechart-config.yml according to the instructions at hub_predtimechart.
4. Add The hubDashboard App to your dashboard repository.

Once these steps are performed, the App will automatically generate the website on the gh-pages branch on your behalf. Once this branch is created, you can activate your website to deploy from this branch.

Note

At the moment, the first time you enable this app, you will need to manually switch on your github pages by going to <repo>/settings/pages and selecting gh-pages as the branch to deploy from:

Configuration

PredTimeChart Forecasts Visualization

Edit the predtimechart-config.yml file to match your hub schema. TODO: update this with useful information.

Dashboard Website

Configuration

The site-config.yml Is a simplified form of A Quarto Website. This simplified form is intended to allow you to set up a dashboard website in a manner of minutes while allowing for flexibility of theme.

A simple configuration is presented in the template site-config.yml file with three keys:

• hub: the GitHub slug to your active hub that contains quantile forecast data
• title: the title of your hub dashboard website
• pages: a YAML array that lists files relative to the pages directory that should be included in the dashboard site. The name of each page is encoded in the title: element of the file header (but this can be overridden with site customization).

Other than the hub field all remaining fields have the following mapping equivalents in the Quarto configuration file:

site-config.yml	_quarto.yml
.title	.website.title
.pages	.website.navbar.left
.html (optional)	.format.html

Customization

When the page is built with the hub dashboard site builder, this configuration file is merged with the default quarto config file. This allows for customization of the page. Below are examples of customization.

Icons added to pages

You can add icons to the page title bars with a YAML map. If you wanted to add an icon of people for the "about" page, you would use .pages.icon: "people-fill"

pages:
  - icon: "people-fill"
    href: "about.md"
  - icon: "mortarboard-fill"
    href: "citation.md"

Theme

The default site is built on top of the Bootstrip yeti theme with custom CSS.

If you wanted to use a different theme, you can change it by setting .html.theme. You can reset the css by setting .html.css: null

html:
  theme: "litera"
  css: null

Contents

If you wanted to add custom HTML to appear at the bottom or top of every page, you can use .html.include-after-body or .html.include-before-body. Remeber that all resources are relative to the pages/ directory, so if you wanted to include an HTML snippet at the end of every page you would:

1. add a file called resources/after-body.html into pages/
2. add this to your yaml:

   html:
     include-after-body: "resources/after-body.html"