Website File and Directory Organization

All directory paths given relative to the root directory of the project repository.

Static Assets

All of the typical static assets such as images, as well as the final-built JavaScript and CSS files, are located under the assets directory.

Markup (HTML)

There are only a couple of layout templates in use. Most of the content will either be in the _page or _include files. If there is content on a page that is being included, the Liquid include statement (e.g. {% include some_content.html %}) should tell you which file (under the _include directory) contains that content.

• Page templates are located under _layouts.
• Page includes are located under _includes.
• Pages are located under _pages.

Styling (CSS)

• All of the site styles are located under _app/sass.
• Compiled CSS files are located under assets/css.

Scripts (JavaScript)

• All of the general scripts are located under _app/scripts.
• Vue single file components are located under _app/vue.
• Compiled JavaScript files are located under assets/js.

Graphics and Icons

Almost all of the icons used in the website were built into a custom icon font using the Icomoon app.

• Images in _app/images will be processed using the compress-images.js script (in the root directory) and the compressed images will be placed into the assets/img. The images are compressed to prevent users from downloading data unnecessarily.
• Graphical assets ready for deployment are located under the assets/img directory. If images do not need to be preprocessed, put them directly into this directory.

Featured images for resources

These are hosted in the configured Amazon S3 bucket.

Data Files

Currently, data files are used to populate topic lists and the country selection dropdown lists in the site.

• Data files should be located under _data.

Configurations

• Jekyll configuration YAML files reside under the root directory and begin with _config.
• JavaScript configurations reside under _app/config.
• The npm scripts and packages used to prepare the site assets should be specified in package.json under the root directory.
• The webpack configurations for preparing scripts are under the root directory in webpack.config.js.
• The webpack configurations for preparing styles are under the root directory in webpack.sass.js.
• The Autoprefixer configurations are under the root directory in the PostCSS configuration file postcss.config.js.