Skip to content

Home

Jump to bottom
Erik Buunk edited this page Aug 7, 2020 · 6 revisions

Welcome to the iqss-metrics-dashboard wiki!

Setup

The front end of the metrics dashboard is a static site, generated by Jekyll and hosted on Github Pages. The site uses HTLM, CSS, and Javascript.

Jekyll

Jekyll is static site generator written in Ruby. It integrates nicely with GitHub Pages. If new files are uploaded, Github takes care of generating the pages.

There are a couple of reasons to use Jekyll for this site:

  1. Static pages do not need a server (with thing such as PHP or node.js) to run to generate pages. The pages are generated in advance. This is also faster.
  2. Jekyll generates static pages, but facilitates the uses of templates. This way you don't have to copy code all the time. For example the menus on a page, or reusable blocks in the site.
  3. No need for a database. Database like information is stored in YAML or CSV files.

If you want to run generate pages on a local machine you need to install Ruby and jekyll.

Liquid

This is the templating system used with Jekyll. The code is used in the HTML pages with curly braces {{}} or {% %}

More info https://jekyllrb.com/docs/liquid/ https://shopify.github.io/liquid/

Frontmatter

HTML pages have extra information on the top of the page in YAML format between two ---.

For example:

---
layout: default
title: Dataverse
toplinks: 
    - id: dv
      name: Dataverse Worldwide
    - id: hdv
      name: Harvard Dataverse
    - id: dmc
      name: Data Management & Curation

---

This header has the layout that is used, the title, and data about the buttons on the top of the page.

Libraries

Libraries that are used:

Plots

Directory structure

  • _data: contains yaml data files. navigation.yml. A data record looks like this:
- name: IQSS Metrics
  link: ./
  icon: home
  description:  We work hard to make social science research better, faster, and more collaborative. To keep our efforts on track, we collect metrics—which you can explore in the categories below.
  image: https://projects.iq.harvard.edu/files/styles/os_files_xxlarge/public/harvard-iqss/files/about-banner.jpg?m=1556901058&itok=5_oZylxb

It contains the name of the menu item, the location, (icon not used), Description text. This is used on the home page card and on the page itself and the image on the home page card.

  • _includes: html templates for navigation (the html that is reused in every page for the navagation. It used the navigation.yml data file. card templates buttons on the top op pages to sections in the page (toplinks).

Most of the times these templates contain Liquid for reading data, looping, using variables. For example:

{% if page.toplinks %}
<div class="mb-5">
    {% for link in page.toplinks %}
    <a href="#{{link.id}}">
        <button type="button" class="btn btn-primary">Go to {{link.name}}</button>
    </a>
    {% endfor %}
</div>
{% endif %}
  • _layouts Contains layouts of pages. Right now only one layout is used default.html

_sass Style Sheets

_site Contains the static generated file

  • assets

    • css: style sheets
    • data: All the CSV, TSV with the data for the metrics
    • images: Additional images

  • js: All the javascript to generate the plots

  • plugins: Contains all the libraries that are used

_config.yml: Configuration file for Jekyll. You need two different files for a local machine and Github:

Local:

url: 127.0.0.1:4000
baseurl: "/"

Github:

url: iqss.github.io
baseurl: "/iqss-metrics-dashboard/"
``

Pages for the different departments such as business-operations.html, data-science-services.html or scientific-programs.html
Clone this wiki locally