Natron's Website

Development

We're open to any contributions! To contribute, make sure you have a decent grasp of these things:

• The command line
• Web design
• HTML/CSS and SCSS
• Some prior experience with Jekyll

Note that if you're a beginner programmer and this is your first time working on an open-source project, we advise you to read the detailed development guide. The guide is also helpful if you encounter issues in the setup process. The process described below assumes a pre-existing knowledge of version control systems and Jekyll in general. If that's ok with you, follow these steps to quickly get started:

Getting Dependencies

Make sure you have git already installed. This website also requires Jekyll, a static site generator we use to generate markup from templates. Installing Jekyll is generally a variation of these steps:

• Step 1: Install rbenv via brew install rbenv on macOS with Homebrew installed, sudo apt install rbenv on Debian Linux distros, yay -S rbenv on Arch-based distros, or compiling manually from its sources at https://github.com/rbenv/rbenv. For Windows, follow the instructions for rbenv for Windows, just making sure to substitute $env:RBENV_ROOT = "$HOME\Ruby-on-Windows" wherever it is mentioned.
• Step 2: Run rbenv init and open a new terminal (not necessary on Windows)
• Step 3: Run the command rbenv install 3.3.3 && rbenv global 3.3.3 (or any recent version) (not necessary on Windows, it auto-installs)
• Step 4: Now, open a new terminal again, and run gem install bundler - this gives you access to the bundle command which (confusingly) is what installs Jekyll!

Building With Jekyll

Navigate to your directory of choice with cd /path/of/choice, then run this command to download the repo:

git clone https://github.com/Shrinks99/NatronGitHub.github.io && cd NatronGitHub.github.io

Build with Jekyll in three steps:

• bundle install to install all the dependencies
• bundle exec jekyll build to build the site
• bundle exec jekyll serve --incremental to start Jekyll at http://localhost:4000

Navigate to http://localhost:4000 in the browser and get going!

Development Guidelines

Classes

Name classes that are page specific with the following format:

pageprefex-previousclass-classname

Example:

index-featurecards-cardbody

Globally styled containers don't need to be mentioned in these names.

Indenting & Code Styling

Keep indenting clean and follow the existing standards of the files.

Relative Links

Jekyll is a static site generator and relative file URLs don't really work unless you hardcode them which requires thinking and doesn't work for stuff like navigation. To fix this there is a file called baseurl.html that tells Jekyll how to link things nicely and relatively! Place {% base %} directly before any link that links to a resource inside the website and refer to this resource as a path straight from the home directly. Think of it as automatically handling the ../'s for you... because that's exactly what it's doing! For more information see this website.

SVGs & Colors In General

All color variables are referenced as both P3 and an sRGB fallback. Variables can be found and set in _sass/_global.scss.

SVGs can only have their colors set with variables if they exist in the DOM. This matters most for SVGs set to our brand colors & 100% white. If the SVG is not using these colors it doesn't have to be embedded! Otherwise, it should be.

Authoring an Update Post

After building and setting up the release through GitHub Releases...

1. Create a standard release graphic: Natron project file and instructions on how to do this are available in the releasegraphic folder in /templates. Place the generated image in /img/news/releases.
2. Author an update post: Markdown template also available in /templates, be sure to change the relevant info in both the file name and the front matter section, most of the body text can be copied from the GitHub CHANGELOG.md, please include any extra information about the release before the "Major Changes" section.
3. Change the download links by setting the variables in _config.yml.
4. Publish to main! Bonus points for testing the site locally first ;)

Licensing

Websites are tricky, licensing is mixed.

• Our website code is licensed under the GPL V2
• Our website content is licensed under a CC BY 4.0 license
• Inter (our primary font) is licensed under the SIL Open Font License.
• BoxIcons is licensed under CC-BY 4.0.
• Sass MQ is licensed under the MIT License.