GithubHelp home page GithubHelp logo

covidclinical / website Goto Github PK

View Code? Open in Web Editor NEW
2.0 5.0 3.0 6.82 MB

Repository for covidclinical.net website.

Home Page: https://covidclinical.net

License: MIT License

HTML 73.07% Ruby 1.91% SCSS 24.35% Shell 0.67%
4ce covid-19 gehlenborglab visualization altair jekyll vega-lite

website's Introduction

4CE Website

Website for 4CE Consortium

Development

Set up (macOS)

brew install ruby
gem install jekyll bundler

Start development server

bundle exec jekyll serve

Updating content

  • Home page: edit pages/index.html
  • Members list: edit _data/members.yml
  • News: edit/add _posts/{year}-{month}-{day}-your-post-title-here.md
  • styles: edit assets/main.scss
  • external urls: edit _data/constants.yml
  • site title, subtitle, description, and short disclaimer: edit config.yml

Adding a publication and associated plots

Adding a new publication

  • Add a new markdown file _publications/{paper_slug}.md with the proper frontmatter (see existing publication markdown files).
  • Add an abstract or description as the contents of the markdown file.

Adding plot pages

  • Plots must be associated with a particular "data release". Be sure to add one under releases: in the publication frontmatter.

  • Add plot files to the release directory

    • Add Vega-Lite files: _plots/{paper_slug}/{release_slug}/vega/{my_plot_file}.json
    • Add LineUp files: _plots/{paper_slug}/{release_slug}/lineup/{my_plot_file}.json
    • Add image files:
      • as PNG: _plots/{paper_slug}/{release_slug}/png/{my_plot_file}.png
      • as SVG: _plots/{paper_slug}/{release_slug}/svg/{my_plot_file}.svg
  • Add a markdown file for each plot page: _plots/{paper_slug}/{release_slug}/{my_plot_page}.md

    • Add frontmatter to the top of the markdown file, and be sure to set type: plot (see existing plot markdown files).
    • A plot page can contain multiple plots, either vertically stacked or in a tabbed layout (based on whether the plots: field is a hash vs. an array).

Adding dataset downloads

  • Like plots, dataset downlaods must be associated with a particular release.
  • Add a markdown file for each dataset: _plots/{paper_slug}/{release_slug}/{my_dataset}_data.md
    • Add frontmatter to the top of the markdown file, and be sure to set type: dataset (see existing dataset markdown files).

Adding a new page

Add a HTML or MD file to pages/

and add the following "frontmatter" to the top of the file:

---
layout: page
title: Your Page Title Here
permalink: /your-page-title-here/index.html
order: 1
---

Troubleshooting

Ruby and gems may need to be added to your PATH variable. For me, this meant adding the following to my ~/.zshrc file:

export PATH="/usr/local/opt/ruby/bin:$PATH"
export PATH="/usr/local/lib/ruby/gems/2.7.0/bin:$PATH"

Deployment

Set the S3_BUCKET_4CE_DEV and S3_BUCKET_4CE_PROD environment variables.

Set the S3_DEV_BASE environment variable to a random string.

Build and deploy to one of the buckets:

bash ./build-and-deploy.sh
# or
bash ./build-and-deploy.sh --prod

website's People

Contributors

keller-mark avatar ngehlenborg avatar sehilyi avatar z-shakeri avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

website's Issues

Link to versioned notebooks

Use commit hashes in the notebook links, to ensure that they point to the version of the notebook used to compute the plots, to ensure the code reflects the visualization even after the notebook may have been updated

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.