nf-co.re
This repository contains code for the nf-core website: http://nf-co.re/
Packages used
Here's how the website is built:
- Language: Javascript
- Frameworks:
- Astro (static site generator),
- Svelte (interactive components),
- Bootstrap 5.3 (CSS framework)
- Tools:
- npm (package manager)
Development
Getting the code
To make edits to the website, fork the repository to your own user on GitHub and then clone to your local system.
gh repo fork nf-core/website nf-core_website
cd nf-core_website/
Installing dependencies
The website is built using Astro, a static site generator. To install the dependencies, run:
npm install
Running a local server
Ok, you're ready! To run the website locally, just start astro dev mode:
npm run dev
You should then be able to access the website in your browser at http://localhost:4321/.
File structure
We follow Astro's file structure for the website. The main files are:
src/pages/
- Astro pagessrc/content/
- Astro content collections (markdown files for events, docs)src/components/
- Astro/Svelte componentssrc/layouts/
- HTML layoutssrc/styles/
- (S)CSS stylesheetspublic/
- Static files (images, json files etc)
Updating the JSON files and cached markdown
Much of the site is powered by the JSON files in /public
and the cached markdown files (from the pipeline docs) in /.cache
.
They come pre-built with the repository, but if you want to rebuild them then you'll need to run the following commands. Note that you need to add a GITHUB_TOKEN inside a .env
file to avoid hitting API limits (too early). See instructions on how to get a GitHub OAuth token (the token only needs the public_repo
permission).
npm run build-pipeline-json
npm run build-component-json
npm run build-cache-force
Tools API docs
Tools docs are built using GitHub Actions on the nf-core/tools repo using Sphinx. These actions sync the built HTML files via FTP.
Contribution guidelines
If you are looking forward to contribute to the website or add your institution to the official list of contributors, please have a look at the CONTRIBUTING.md.
Community
If you have any questions or issues please send us a message on Slack.
Credits
Phil Ewels (@ewels) built the initial website, but there have been many contributors to the content and documentation. Matthias Hörtenhuber (@mashehu) worked on the concept and code for the new website rewrite.
See the repo contributors for more details.
Kudos to the excellent npm website, which provided inspiration for the design of the pipeline pages.