w3c/apiary

Name: apiary

Owner: World Wide Web Consortium

Description: Simple JS library to use the W3C API in a declarative way

Created: 2015-07-24 15:47:01.0

Updated: 2017-12-22 21:24:51.0

Pushed: 2017-06-16 14:26:15.0

Homepage:

Size: 430

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

Apiary

Apiary is a simple JavaScript library to leverage the W3C API. This library is intended to be used from W3C pages: group pages, personal pages, etc. With Apiary, you can inject data that is retrieved using the W3C API, in a declarative way using placeholders. Examples are also provided.

Refer to the W3C API and its documentation for details [overview; reference].

Live examples

• Group page
• User page

Getting started

Include the library

Include Apiary in your page:

ipt src="//w3c.github.io/apiary/apiary.js"></script>

Add your API key

Specify your W3C API key, adding a data-apiary-key attribute to the HTML element, eg:

l data-apiary-key="abc123def456">

(You can get an API key very easily; refer to the documentation. The examples provided here work with a public API key that is registered to test Apiary only; don't try to use it elsewhere.)

Specify an entity ID

Specify the ID of the entity you want, adding a data-apiary-* attribute to a container element, eg:

n data-apiary-group="68239">

Add placeholders

Finally, add placeholders wherever you want real data about that entity, eg:

chairs of this group are: <span data-apiary="chairs"></span>.

Reference

The container element should have one of these data-apiary-* attributes, and its value should be a valid ID:

• data-apiary-group
• data-apiary-user (use the user hash)

A placeholder is any element with a data-apiary attribute. Bear in mind that a new chunk of DOM will be inserted there; whatever that placeholder contains will be lost. We recommend that you have something in there giving users a hint that data is being loaded dynamically. For example:

 data-apiary="chairs">[Loading?]</div>

For consistency (and to adhere to the POLA), the suffix part of these placeholders is equal to the object keys returned by the API.

The additional class apiary in the example files is ignored by Apiary itself but you may wish to include it anyway to all placeholders in your documents for easier CSS styling.

Hacking Apiary

Find the developer documentation under doc/.

To regenerate the documentation:

do npm install -g jsdoc
doc ./apiary.js --destination ./doc/ --access all --encoding utf8 --verbose

Credits

Copyright © 2015–2017 World Wide Web Consortium

This project is licensed under the terms of the MIT license.