Garðr is a library for embedding content from external sources such as advertisements or similar third party content.
JavaScript
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
src
test
.editorconfig
.gitignore
.jshintignore
.jshintrc
.tern-project
.travis.yml
LICENSE
README.md
app.js
gardr.sublime-project
karma.conf.js
make.js
package.json

README.md

Garðr sample project

Build Status Dependency Status devDependency Status

This is a sample project to show how you can use Garðr on your site. Garðr is a library for embedding content from external scripts such as advertisements or similar third party content.

This repo (gardr/gardr) is just a sample project on how to use the Garðr client libraries; gardr-host and gardr-ext. You can have them as dependencies from npm, and just require them into your project. That makes it possible to make custom bundles with only the plugins you need. If you don't use CommonJS it's easy to convert to AMD or a global instead.

Pre-requisits

Running the samples

$ git clone git@github.com:gardr/sample-project.git
$ cd sample-project/
$ npm install
$ npm start

How things fit together

Have a look in the src/ folder. There you will find the example bundles (packages) that you will have to make for your site. hostBundle.js is the script you will put on your page. extBundle.js is what goes into the iframe.

The files the src/ folder are in CommonJS style. Which is typically used server-side, but can also be used for client- side code. Use require to import dependencies (gardr-host, gardr-ext and plugins). We use browserify to convert these files to browser-friendly JavaScript. Try running npm run browserify, and you will find the generated scripts in the gardr/ folder. See the browserify script in package.json for the command we use to run browserify.

Since we use the -s (standalone) option to browserify, it will wrap the output as UMD (Universal Module Definition). It allows you to use the generated files with CommonJS, AMD or just vanilla JavaScript.

    // CommonJS
    var gardrHost = require('gardr/host.js');

    // AMD
    define(['gardr/host.js'], function (gardrHost) {
        ...
    });

    // Vanilla JS
    window.gardrHost

The sample page is just a static html-file (public/index.html). It has a simple script to load the sample banners which use the Vanilla JS style (window.gardrHost).

Testing

We have many tests inside the gardr-host and gardr-ext projects. This is just a simple test to verify that they work together.

$ npm test