This repository contains code for the nf-core website: http://nf-co.re/
Here's how the website is built:
- Language: PHP
- HTML / CSS / JS framework: Bootstrap v4
- JavaScript libraries:
- jQuery
- Popper.js (used for bootstrap tooltips)
- highlightjs (syntax highlighting)
- Leaflet (contributor map)
- Moment.js (time and date parsing)
- Chart.js (statistics plots)
- hammer.js (mobile touch interaction handling)
- chartjs-plugin-zoom (Zoom and pan plugin for Chart.js)
- Canvas2Svg.js (SVG exports of Chart.JS plots)
- Fil 8169 eSaver.js (Trigger browser downloads from in-page data, used to save plot SVGs to files)
- jQuery table sorter (sorting tables)
- PHP Markdown parsing: Parsedown and Parsedown Extra
- SVG icons: http://www.flaticon.com, https://worldvectorlogo.com/
To make edits to the website, fork the repository to your own user on GitHub and then clone to your local system.
IMPORTANT: The repo has git submodules, so remember to use the --recursive flag:
git clone --recursive git@github.com:[USERNAME]/nf-co.re.gitIf you forget the recursive flag (I always do), the markdown conversion won't work. You can pull the submodules when you realise this with the following command:
git submodule update --init --recursiveNext, you'll need to build the pipelines.json file that powers much of the site. The webserver does this automatically when GitHub events trigger an update, but you'll need to run the script manually. Assuming you have PHP available on the command line, you can do this as follows:
cd nf-co.re/
php update_pipeline_details.phpThis will create public_html/pipelines.json, which is used by the website.
Note that this is ignored in the .gitignore file and will not be tracked in git history.
Optionally, once you've done that, you can grab the pipeline traffic and issue statistics:
php update_stats.php
php update_issue_stats.phpThis creates nfcore_stats.json and nfcore_issue_stats.json, also ignored in .gitignore.
Note that you'll need the github_username and github_access_token set in the config.ini file for this to work.
Ok, you're ready! To run the website locally, you need a standard AMP stack: Apache, MySQL and PHP (MySQL not needed at time of writing). For this, I recommend using the free version of MAMP.
Set the base directory to /path/to/nf-co.re/public_html in Preferences > Web-Server > Document Root and then hit Start Servers.
I've built the site so that most of the hand-written text is in /markdown, to make it easier to write. The PHP files in /public_html then parse this into HTML dynamically, if supplied with a filename.
Note that the .htaccess file is set up to remove the .php file extensions in URLs.
The web server needs the following cronjob running to scrape pipeline statistics once a week:
0 0 * * * /usr/local/bin/php /home/nfcore/nf-co.re/update_stats.php >> /home/nfcore/update.log 2>&1
0 2 * * * /usr/local/bin/php /home/nfcore/nf-co.re/update_issue_stats.php >> /home/nfcore/update.log 2>&1
The update_issue_stats.php script can use a lot of GitHub API calls, so should run at least one hour after the update_stats.php script last finished.
The repo has a softlink for /tools-docs which is intended for use on the server and corresponds to the path used in public_html/deploy.php. This script pulls the built API docs from the tools repo onto the server so that it can be served at that URL.
Phil Ewels (@ewels) built the website, but there have been many contributors to the content and documentation. See the repo contributors for more.
Kudos to the excellent npm website, which provided inspiration for the design of the pipeline pages.
If you have any questions or issues please send us a message on Slack.