architecture

Project Architecture and Organization

This template uses a standard layout of Jekyll websites, with a few modifications to make it easier to get your code, data, and figures out there for public consumption. The general layout of the project is given below with a brief description of each folder and root file. Detailed descriptions follow as other pages.

Root Files

config.yml

This is the base configuration file for the website. Here, you will enter key information that will make your website work. Please see the configuration page for detailed information about the entries.

Gemfile

This file has defines the Ruby gems needed for the website to be build on GitHub's end. This file does not need to be edited. The Gemfile.lock file contains detailed version information for the various plugins and shouldn't be modified unless versions need to be updated to patch security holes.

glupfile.js

A javascript file necessary for building the website.

pageXX

These markdown files are the tofu and potatoes of the website. These can be edited and extended to fit your needs, but don't need to be modified for this website to be built. See the customization page for more information about modifying and adding new pages.

README.md

General information README file for the repository. This file should be modified to accurately represent your particular project.

Project Subfolders

_data

This folder contains an array of data files in yaml format, which is a human and computer readable data structure. These files are ...

• about.yaml | Contains information about your project that will appear on the website homepage, including title, authors, abstract, summary, and acknowledgment sections.
• code.yaml | Contains information about the code used in your work.
• datasets.yaml | Contains information about the datasets in your work.
• figures.yaml | Contains information about each figure in your work with descriptions of a) what is shown b) a link to the code used to generate it and c) links to necessary data sets to reproduce the work locally.
• people.yaml | More detailed information about the authors, including position, headshots, links, and institutes.

_includes/

This folder contains HTML files that form the guts of the website.

⚠️ These files don't need to be edited for a basic usage of this website. They are easy to break, so don't touch unless you know what you are doing.

_layouts/

Contains HTML files that define the layout and content formatting of website pages.

⚠️ These files don't need to be edited for a basic usage of this website. They are easy to break, so don't touch unless you know what you are doing.

_site/

The actual generated website. These folders should never be modified. If you modify them, they will be overwritten upon the next build of the website, erasing the hours of your life you spent on getting something centered in the middle of a div.

assets/

This folder contains all styling information for the website and non-text data files such the logo, images or people, and PDFs. Within this folder are a few others whose contents are as follows:

• css/ | Cascading Style Sheets (CSS) which define the actual styling of the website. This folder includes Sass representations for modularity. There is only one file within css that needs to be edited for basic usage of this website, variables.css. This file contains the color styling which is discussed in the configuration page.

• fonts/ | Font icons used for styling. This does not need to be edited under any real circumstance.

• img/ | All images used to style the website, not image data. This has a subfolder people/ where all of the images of the authors live. All other images (such as banners and the logo image) are stored in the root img/ folder.

interactives/

This folder contains all HTML interactive figure files. See the section on embedding interactive figures for more information.