Skip to content

Set Up Jekyll Code

Tiffany Forkner edited this page Apr 2, 2025 · 15 revisions

Important

All of these instructions should be completed in the gh-pages branch.

Install the jekyll-report-dashboard Theme

Open the file Gemfile and add the jekyll-report-dashboard gem. This gem is a custom gem created specifically for use in this project. Using the gem removes the necessity to have a lot of copying and pasting in the instructions. If you do not want to use the theme, the files are all available in the gem repository.

``````Gemfile 
# additional Gemfile code

gem "jekyll-report-dashboard"

# additional Gemfile code

Run the install command to download the gem locally.

bundle install

Copy the Files from jekyll-report-dashboard Theme

Because this theme is relying on tailwind css the normal theme mechanics won’t work, so it is necessary to copy the files from where the gem gets installed locally. Run this command to copy the files from the theme directory to your current directory.

rsync -aivP $(bundle info --path jekyll-report-dashboard)/ .

Configure the jekyll-report-dashboard Theme

Open the file _config.yml and add the following configurations.

theme

Comment out theme: minima and add theme: jekyll-report-dashboard or replace minima with jekyll-report-dashboard.

coverage

Add configurations for coverage limits. You can copy the settings below or use your own values. The fields under pass should match your test coverage requirements. The fields under fail should be the coverage level below which is completely unacceptable. These values are used by the coverage summary snippet to color code the reported coverage values. Values that are greater than or equal to pass will be green, values equal to or less than fail will be red, and values between the two will be yellow.

nav_pages

Add the pages you want to see in the top nave to the nav_pages list. They will appear in the order listed below. The list below will add navigation buttons for "Coverage Report", “Playwright Reports”, and “Release Notes”.

defaults

Jekyll uses the defaults configuration to define default values for the application. The settings configuration below will use the layout release-note for all of the posts added to the _posts/releases/ directory.

# additional configuration code 

#theme: minima
theme: jekyll-report-dashboard

coverage:
  pass:
    lines: 90
    functions: 85
    statements: 90
    branches: 80
  fail:
    lines: 70
    functions: 65
    statements: 70
    branches: 60
    
nav_pages:
  - coverage.markdown
  - playwright-reports.markdown
  - releases.markdown

defaults:
  - scope:
      path: "_posts/releases/*"
      type: "posts"
    values:
      layout: "release-note"

Customize Code

Make any changes that you would like to your project, the default theme will produce a site that looks like this (once some data and posts are added).

CleanShot 2025-03-28 at 14 17 42

Updating the jekyll-report-dashboard Theme

Periodically, there are updates to the jekyll-report-dashboard theme. Run the following command to update all of the installed gems.

bundle update

If changes are reported to the jekyll-report-dashboard gem, then you can use the command from above to copy the changes into your current directory.

Warning

This command will OVERWRITE any of these files that have been changed locally in your project, if you are trying to keep local changes review the changes using git and copy over the local changes you want to keep before merging the updates.

rsync -aivP $(bundle info --path jekyll-report-dashboard)/ .
Clone this wiki locally