Giter VIP home page Giter VIP logo

molgenis.org's Introduction

alpha version of the new website

This is source code for the website of MOLGENIS, including docs etc.

  • All files that you can edit are inside the 'public' folder
  • the main menu structure is defined in public/_data.json
  • for the sub-menu's you make a folder; each folder can also have a _data.json

to generate the website

git clone https://github.com/molgenis/molgenis.org.git
cd molgenis.org
harp compile

you will find the generated website in folder www

harp reference

The site is generated using harp.

basics

install npm and harp (once)

#on mac you can use brew http://brew.sh/
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)

#install node
brew install node

#install harp
sudo npm install -g harp

clone this repo (once)

git clone

during development, run harp server for live rendering

cd molgenis.org
$ harp server

will enable live view on http://localhost:9000

for deploy, compile the website and upload to server

$ harp compile

will generate the static pages in ~/www

#html layout using jade The layout is implemented using .jade templates (http://jade-lang.com/). Below quick commands including access to harp data.

jade basics

h1 my list
ul
  li first
  li second

just renders a h1 and a ul with nested li

p: #[b some bold] some normal and #[i some italic] text

allows nested elements to be defined on one line

render a javascript variable

#{myvalue}

or

p= myvalue

will render the value

harp automatically provides _data.json

for value, key in public._data
  li
    a(href="#{key}") #{value.title}

will iterate over the hashmap in _data.json (local _data file overrides a global one)

for value, key in public.articles._data
  li
    a(href="#{key}") #{value.title}

will iterate over the hashmap in folder + file articles/_data.json

style attributes

a(style={color: 'red', background: 'green'})

will render with style="color:red; background: green"

a.button

will render as a class="button"

a#main

will render as a id="main"

commments

//blaat

will render a html comment

//-blaat

will not render a html comment

#css using less

css stylesheets are implemented in .less files (http://lesscss.org/) See /res/css

License

Copyright (c) 2002-, Morris Swertz, MOLGENIS Team, Contributors Documentation released under Creative Commons. Documentation source code released under the MIT License.

molgenis.org's People

Contributors

dennishendriksen avatar fdlk avatar freerkvandijk avatar jantimmermans avatar jjettenn avatar mark-de-haan avatar mswertz avatar

Watchers

 avatar

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.