Vis Design Lab Website

The website is hosted at https://visdesignlab.net

The Vis Design Lab website is built with Jekyll.

The Liquid Language Reference: https://shopify.github.io/liquid/basics/types/

Setup Jekyll

To set up Jekyll, make sure you have ruby and bundler. Then run:

bundle install

Further details on installing Jekyll and its requirements: https://jekyllrb.com/docs/installation/

Run Jekyll

bundle exec jekyll serve -i

Running Jekyll in incremental (-i) mode is significantly faster. The bundle exec makes sure that it's run in the environment available on github. You can find more details on emulating the current GitHub Pages server environment with the following installation instructions: https://docs.github.com/en/pages/setting-up-a-github-pages-site-with-jekyll/testing-your-github-pages-site-locally-with-jekyll

To install the GitHub Pages gem, you may need to install the Ruby DevKit for your operating system.

View the Generated Site

open http://127.0.0.1:4000/

Contributions

All VDL members are responsible for updating their content regularly. Small changes that you have tested thoroughly using Jekyll may be pushed to main, but we recommend using separate branches to submit pull requests for additional review and to catch mistakes. See the resources below for details on the following:

• Adding team members
• Adding publications
• Adding images

You can create a branch and add/edit files from the GitHub site. Alternatively, you can write your changes from the command line (below), and go to GitHub to create a pull request from that branch.

git checkout -b new-branch-name
git commit -am "make your changes and commit them"
git push origin new-branch-name

Modifying the Code

Jekyll generates websites for you based on data stored in _config.yaml. One important aspect is a "collection", such as publications, which get rendered using specific layout templates to designated pages. For example, a single publication gets its own webpage (/publications/id/), and it gets added to the list of all publications as well (/publications/). Content for Jekyll can be written in Markdown for automatic parsing, and variables stored in YAML at the top of both Markdown and HTML pages. Check the Jekyll and Liquid template syntax documentation for further details.

The CSS is built using SASS along with several SASS tools: Bourbon, Neat, and Bitters. SASS provides imports, variables, mixins (functions), and nested CSS so you can write better stylesheets. The additional tools provide grid layouts, vendor prefixing, and preset styles, and they are preloaded into the repository.

You can modify the CSS or SASS directly, since Jekyll builds it for you. The main site SASS file is in css/site.scss, which imports all other files, including the SASS tools in the _sass directory.

Unfortunately, changes to the code have been made throughout the SASS tools, so the SASS tools should not be upgraded. In the future, I would recommend rewriting the stylesheets (from scratch or through the Jekyll-compiled output CSS) so that you just use SASS and more modern CSS3 features like media queries and variables.

Modules

This page uses the following modules:

• JekyllRedirectFrom
  • gem 'jekyll-redirect-from'
  • https://github.com/jekyll/jekyll-redirect-from
• addressable
• public_suffix