OS Group Website
This is the main repo for our group 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
- 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. - Add a profile picture to
assets/images/people/
. Use the key as the filename, PNG format. Inpeople.yml
specify the file name (without path or extension) in theimg
parameter. - Add the person to any relevant projects, by editing the project markdown and
adding them to the
people
list.
Adding / Modifying a Project
- 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 usesimbricks.md
as a template to see the full front-matter meta data. At least the title and list of people must be specified. - 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. - 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.