GFW Assets

This repo provides the navigation bar shared by all Global Forest Watch websites, such as GFW, GFW Fires, Commodities, etc.

Installation

Requirements:

• NodeJs 5.2+ How to install
• Ruby 2+ How to install

Install project dependencies:

npm install
bundle install // This install SASS in your computer, check Gemfile

Usage (development)

To see in development mode run and follow terminal instructions:

npm start

We are using webpack to build the assets, to run it:

npm build

To sync CDN with compiled version please run:

npm publish

How to use (in sites)

Add this piece of HTML in your site to add GFW's header:

<div id="headerGfw"></div>

And this to add GFW's footer:

<div id="footerGfw"></div>

To finish, add this script in your site:

<script id="loader-gfw" data-current=".shape-fires" src="https://[cdn-url]/gfw-assets.latest.js"></script>

Remember to add the id="loader-gfw" to the script tag and, if you want to highlight any of the links of the header you will have to add a data-current param. These are the data-current params that work:

• .shape-home
• .shape-apps
• .shape-map
• .shape-countries
• .shape-fires
• .shape-commodities
• .shape-climate
• .shape-odp
• .shape-develop
• .shape-all-apps
• .shape-blog
• .shape-howto
• .shape-mygfw

If you use the latest.js, any change we make on the script will be inmediately populated on your page. Don't worry, we have tests and we will check it in your page before deploy. We would recommend to use the latest script always, but just in case the script is breaking your page you can specify a version:

<script id="loader-gfw" data-current=".shape-fires" src="https://[cdn-url]/gfw-assets.v0.1.0.js"></script>

Here you can find the allowed versions: Releases

The cdn-url in development will be the webpack dev server, which is mounted on http://localhost:9090

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b feature/my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin feature/my-new-feature
5. Submit a pull request :D