version.js

version.js allows you to display the latest version number of your GitHub repo, shiny! ✨

Demo

• Installation
• Badges
  • Version
  • Name
  • More
• ReleasePage Integration
  • Grouped versions
• Other version stuff
• AMD

Installation

Include the library from our CDN, providing the GitHub repository that you want to use.

<script src="//cdn.releasepage.co/js/version.js" data-repo="releasepage/version.js"></script>

Badges

Version

Any elements with the attribute data-version-badge will be populated with the latest version number on page load.

<p>The latest version is <span data-version-badge></span></p>

Repo Name

Any elements with the attribute data-repo-name will display the friendly name of the repository.

<p>The latest version of <span data-repo-name></span> is <span data-version-badge></span></p>

Etcetera

<p>
  The latest version of <span data-repo-name></span> is <span data-version-badge></span>, authored by <span data-version-author></span> on <span data-version-published></span>
</p>

ReleasePage Integration

version.js can also be used as a ReleasePage integration allowing you to take advantage of extra cool features:

• Private repos
• Group releases from different repos into one combined version
• A more generous rate limit

• Basic Demo
• Grouped Demo

Installation

Include the library from our CDN, providing your API key and the ReleasePage ID.

<script src="//cdn.releasepage.co/js/version.js" data-api-key="<API_KEY>" data-page-id="<PAGE_ID>" ></script>

Enable API access

If you don't have an account yet, you can create one on our homepage. After creating your first beautiful Release Page, you need to grab your API key.

Learn more about ReleasePage API keys here.

ReleasePage Badges

All of the above badges are also available using the ReleasePage API. However, with grouped releases some of them will behave slightly differently.

Grouped versions

If your ReleasePage is cool enough to use grouped releases then you can display the repo versions individually, or grouped.

<p>
  The latest version of <span data-repo-name></span> is <span data-version-badge></span>, authored by <span data-version-author></span> on <span data-version-published></span>
</p>

Specify the repo name to include that repo individually.

<p data-version-for="squarecat/release-notes">
  The latest version of <span data-repo-name></span> is <span data-version-badge></span>, authored by <span data-version-author></span> on <span data-version-published></span>
</p>

Note; if you don't provide a data-version-for container, badges will always display the grouped version if it's available.

Other version stuff

Badges are awesome, but you can actually do a lot more with the version information we send you. version.js will expose a Version object on the window for you to play havoc with the version info 🤘

// the tag number of the release
Version.tag()
// "v1.0.1"

// who published the release
Version.author()
// "Jivings"

// when the release was published
Version.publishedAt()
// "2017-03-26T15:28:42Z"

With grouped versions from the ReleasePage API this information will be a little more interesting.

// the latest grouped version
Version.tag()
// "v0.4.0"

// all the authors that contributed to this group of releases
Version.author()
// [ "Jivings", "dinkydani" ]

// ok so this is the same (when the latest release was published)
Version.publishedAt()
// "2017-03-26T15:28:42Z"

If there is more than one repo in your ReleasePage, then the above functions will return the details for the repo with the most recent release. If you pass the name of the repo then you can override this;

Version.tag({ repo: 'releasepage/version.js' })
// v1.0.2

AMD

We also provide an AMD moduile for use with npm and webpack et al.

npm install release-page-version --save-dev

const version = require('release-page-version');

// set up `version.js` using the GitHub API
version.options({
  github: {
    repo: REPO_NAME
  }
});

// ...or set up `version.js` using the ReleasePage API
version.options({
  pageId: RP_PAGE_ID,
  apiKey: RP_API_KEY
});

// when first set up `version.js` will automatically request
// the version information. The `load` event will be fired
// when it is returned
version.on('load', () => {
  console.log(`New version: ${version.tag()}`);
});

// ...subsequently you can call `load` manually
// to retrieve the latest information
version.load();

Stay in touch

Follow us on Twitter: @ReleasePage

Email us: [email protected]