This repository contains code for the nf-core website: http://nf-co.re/
Here's how the website is built:
- Language: Javascript
- Frameworks:
- Tools:
- npm (package manager)
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/The website is built using Astro, a static site generator. To install the dependencies, run:
npm installOk, you're ready! To run the website locally, just start astro dev mode:
npm run devYou should then be able to access the website in your browser at http://localhost:4321/.
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, blog)src/components/- Astro/Svelte componentssrc/layouts/- HTML layoutssrc/styles/- (S)CSS stylesheetspublic/- Static files (images, json files etc)
To add an event, create a new markdown (or .mdx) file in src/content/events/ with the following frontmatter:
title: "Event Title"
subtitle: "A brief overview of the event"
type: "talk" # Can be "talk", "hackathon", "training", "bytesize"
startDate: "YYYY-MM-DD"
endDate: "YYYY-MM-DD"
startTime: "HH:MM"
endTime: "HH:MM"
announcement:
text: "Text on the announcement banner" # (optional)
start: "YYYY-MM-DDTHH:MM:SS+HH:MM" # (required if announcement.text is used)
end: "YYYY-MM-DDTHH:MM:SS+HH:MM" # (required if announcement.text is used)
locationName: "Name of the location" # (optional)
locationURL: "URL to the location or to the section in the text with location description (e.g. `#gather-town`)" # (optional)
locationLatLng: [48.2082, 16.3738] # Latitude and longitude of the location as an array " (optional)
address: "Address of the location" (optional)
duration: "Duration of the event in days" (optional)
embedAt: "in case this should be shown in the sidebar of a pipeline page (e.g. for a bytesize talk about the pipeline)" (optional)
importTypeform: true # If true, the event will be imported from a Typeform (see below)To add a blog post, create a new markdown (or mdx) file in src/content/blog/ with the following frontmatter:
title: "Your Blog Post Title"
subtitle: "A brief overview of your post's content"
headerImage: "Direct URL to an optional header image" (optional)
headerImageAlt: "Descriptive alt text for the header image (mandatory if a header image is used)"
pubDate: "Scheduled publication date and time (the post will go live post-website rebuild if the current date surpasses this timestamp). Format: YYYY-MM-DDTHH:MM:SS+HH:MM" (without quotes!)
authors: ["Author's Name"] // Use a list format even if there is only one author.
label: ["Category1", "Category2"] // This is optional and can include multiple categories.
announcement:
text: "Text on the announcement banner" # (optional)
start: "YYYY-MM-DDTHH:MM:SS+HH:MM" # (required if announcement.text is used)
end: "YYYY-MM-DDTHH:MM:SS+HH:MM" # (required if announcement.text is used)You can show a short announcement banner on the website by adding additional information to the frontmatter of either a file inside src/content/blog or src/content/events. The following fields are available:
announcement:
text: 'Your announcement text'
start: YYYY-MM-DDTHH:MM:SS+HH:MM # Start date and time of the announcement (without quotes!)
end: YYYY-MM-DDTHH:MM:SS+HH:MM # End date and time of the announcement. (without quotes!) This is an optional field for events, where the start date of the event is the end date of the announcement by default.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-forceTools docs are built using GitHub Actions on the nf-core/tools repo using Sphinx. These actions sync the built HTML files via FTP.
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.
To publish a new blog post on the website, you'll need to create a Markdown file within the src/content/blog/ directory. In this file, include the following frontmatter at the beginning:
---
title: "Your Blog Post Title"
subtitle: "A brief overview of your post's content"
headerImage: "Direct URL to an optional header image"
headerImageAlt: "Descriptive alt text for the header image (mandatory if a header image is used)"
pubDate: "Scheduled publication date and time (the post will go live post-website rebuild if the current date surpasses this timestamp). Format: YYYY-MM-DDTHH:MM:SS.000+HH:MM"
authors: ["Author's Name"] // Use a list format even if there is only one author.
label: ["Category1", "Category2"] // This is optional and can include multiple categories.
---Note
The blog post will be visible on the website only if a rebuild of the site occurs after the date and time specified in the pubDate field.
By default the first paragraph of the blog post will be used as the preview text on the blog page. If you want to use a different paragraph, add the following comment after the paragraph you want to use:
<!-- end of excerpt -->or for MDX
/* end of excerpt */If you have any questions or issues please send us a message on Slack.
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.