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.
$ git clone [email protected]:gardr/sample-project.git
$ cd sample-project/
$ npm install
$ npm start
- Open browser http://localhost:9966/
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.gardrHostThe 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).
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