Contribution Guide

Contribution Guide

Thank you for considering contributing to the web-page of HIFIS.net!

Source Code

If you are only interested in contributing a blog post, please check out this page.

Contribution Workflow

1. Open an issue, share and discuss the topic

You will need to log in to the Helmholtz Codebase via Helmholtz ID in order to open an issue.

2. Contribute your developments

As soon as you would like to get to work, contact our support team to request developer rights.

Then create your own branch named according to the pattern <issue-number>-<branch-name>.

To preview your changes, we recommend building and checking the site locally using bundle exec jekyll serve --future. If you plan to use jekyll frequently, consider creating an alias, e.g. bejs. To install jekyll for hifis.net, please refer to the repository’s README.

3. The review process to improve your developments

To enter the review process, open a GitLab Merge Request and assign it to your primary reviewer.

You can preview the latest deployment of your branch by clicking the View app button in the user interface of your merge request.

If you are connecting from outside a Helmholtz center, you will need to authenticate to access these pages. The credentials are as follows: Username: hifis, Password: HIFISReview!.

4. Integrate your developments

Once all discussion threads have been resolved and the GitLab CI Pipeline has finished successfully, the primary reviewer can merge your branch into the master branch.

We very much appreciate your contribution.

Specific Best Practices

CSS

Avoid Magic Values

Values that show up in CSS may carry a semantic meaning, e.g. colors of the color palette or device sizes. Use the provided SASS variables or named CSS values instead of hard-coding magic values. Expand the set of variables, if required. Example:

1
2
3
4
5

@import "colors"
p {
    background-color: $color-helmholtz-blue;
    color: white;
}

instead of

1
2
3
4

p {
    background-color: #005AA0;
    color: #fff;
}

See the _sass folder for definitions, grouped by context.

HTML

Write Comments in Liquid tags

Please use Liquid comments in your HTML files to avoid them showing up in the rendered version. Example:

1
2
3

<html>
    
</html>

instead of

<html>
    <!-- This is an HTML comment. It will be preserved and show up in the
    rendered page, cluttering and bloating the delivered code. -->
</html>

Consistency in the Use of Tags and Categories for Blog Posts

When contributing a blog post, we encourage you to review the existing tags and categories to ensure consistency. In the posts index page, there is a feature allowing to filter posts by tags and categories, which is basic and doesn’t recognise near-duplicates or variants (e.g. different capitalisation or abbreviation).

We maintain the list of all previously used tags and categories here:

Please refer to these lists to find the most suitable tags and categories for your post. If you find that none of the existing tags or categories fit your post well, you may propose new ones. In this case please mention it in your merge request.

AI Assistance: Light