simbricks/simbricks.github.io

The SimBricks website repo (both sources and live instance for GH pages).

SimBricks Website

This is the main repo for the SimBricks webpage. It's built using the Jekyll static website generator. Gitlab CI on this repository is set up so that the newest version is automatically deployed.

Editing and testing locally requires working jekyll setup. To make this as simple as possible, the repo contains a devcontainer configuration. If you have vscode set up with the docker plugin, then all you need to do is open the cloned repo, and then click the "re-open in container" button, and vscode will do the rest.

To test, run jekyll serve --lsi which will start a webserver on http://localhost:4000 and automatically recompile as you make changes.

Directory Structure

• _data/: YAML source files for structured data

• navigation.yml: Links in the navigation menu at the top of the page.
• news.yml: News items for front page.
• people.yml: People info for people page and elsewhere.
• publications.yml: Publications for pubs page and elsewhere.

• _projects/: Markdown files for individual projects, front-matter contains necessary meta data.
• _pages/: Markdown files for individual pages, front-matter contains necessary meta data.
• _sass/ SASS source files for our CSS. There is a number of common files and then some that are specfic for individual layouts.

• base.scss is the main file that imports everything else.
• normalize.scss is a helper to provide common defaults across different browsers.
• fonts.scss imports the necessary font files (generated by google fonts).
• base-layout.scss: Layout for the site skeletton used across all pages.
• base-design.scss: Desing pieces for the site skeletton.
• slick.scss: CSS components for the Slick slider we use for news.
• The remaining .scss files are specfic for individual layouts.

• _layouts/: HTML layouts (templates for different pages).

• base.html: The overall page skeleton, all other layouts extend this.
• default.html: basic default page layout if nothing else is specified.
• The rest are used for individual pages as specified by the layout: parameter in the page front matter.

• assets/: Static files that are directly included in the generated page.

• images/: Images
  • flags/: Flag icons
  • people/: Profile pictures
  • projects/: Project logos

• _config.yml: Main Jekyll config file.

Common Changes

Adding / Modifying a Person

1. Start by editing _data/people.yml. If adding a new person you can copy from another one as a starting point. Make sure to choose a unique key, as this will be used elsewhere for referencing the person. Keep entries sorted by category and then alphabetically.
2. Add a profile picture to assets/images/people/. Use the key as the filename, PNG format. In people.yml specify the file name (without path or extension) in the img parameter.
3. Add the person to any relevant projects, by editing the project markdown and adding them to the people list.

Adding / Modifying a Project

1. Create a new Markdown file in the _projects. Use lowercase as the page name. This will also be the key in case the project gets referenced elsewhere. You can use simbricks.md as a template to see the full front-matter meta data. At least the title and list of people must be specified.
2. Add the project logo (SVG unless there is absolutely no alternative) to assets/images/projects/. Then specify the relative logo path in the images folder (e.g. projects/simbricks.svg) using the logo` key in the markdown file.
3. If applicable add publications.

Caution: Be careful when renaming projects. Ideally only change the project title, and leave the short name (file name) as it is. If you do change the file name, please make sure to update all links, including from publications and news!

Adding / Modifying Publications

Edit _data/publications.yml. Keep entries sorted with newest ones on top, but keep in-progress entres on top. Use a unique key for each entry. When specfying authors, be sure to use internal with the person key for authors in the group. Additionally add everone to the people list.

External Resources Used

• The fonts in assets/fonts were retrieved based on links from Google Fonts on August 14, 2023.
• For the news we use the Slick slider
• We use flag icons version 6.7.0 on the people page.
• We use fontawesome version 6.4.2 for other icons.

simbricks.github.io's Issues

Add github action for build

Currently we push both the source and the build output so github can just deploy. The clean way of doing this (from what I understand) is to create a separate deploy branch that we configure github to serve the pages from. Then have an action on the main branch that builds it and pushes the build artifacts (only) into the deploy branch for github to serve.

Embed fonts in SVG

The example picrture (and maybe the logo) only display correctly if the font is installed on the system. They don't seem to pick up the website font. So we may be able to embed the font or alternatively convert text to paths.