EC-O-DE / tumblr-tag-cloud

Collect all tags used in Tumblr blog. Make a tag cloud for your blog

Tumblr Tag Cloud

Generates a JSON file (and optionally .js file for JSONP) with all tags used in the tumblr blog. Caches the result so script can be executed many times to update existing tag cloud with new tags.

Tag cloud structure

[
  {
    tag: "travel",
    count: 4
  },
  {
    tag: "vacation",
    count: 3
  },
  ...
]

Usage and deployment

You have to publish generated files somewhere. I suggest to use gh-pages so you can fetch JSON with tags or include .js file into your Tumblr theme to use it as JSONP like this:

<script>
  function buildTumblrTagCloud(tags) {
    document.querySelector('.tags').innerHTML = tags.map(data => {
      return `<a href="/tagged/${data.tag}">${data.tag} (${data.count})</a>`
    }).join(', ')
  }
</script>
<script src="https://romanyanke.github.io/tumblr-tag-cloud/cloud.js"></script>

NPM Commands

• npm start generates files in dist/ folder and caches the result in ./cache.json file. Run it again and it updates your cloud with new tags.
• npm run deploy uses gh-pages to publish the files in the dist/ directory.
• npm run update runs both command.

File structure

tumblr-tag-cloud/
├── dist/
│   ├── cloud.json
│   └── cloud.js
├── cache.json
└── tumblr-cloud.config.js

Prerequisites

• A Tumblr application for API requests.

Configuration

You can define the environment variables and/or create in the root tumblr-cloud.config.js with the same parameters. The config file parameters will override the environment parameters. All variables are required except callback function name and skip-json-file flag.

Variable	Description
TUMBLR_CONSUMER_KEY	Tumblr application consumer key
TUMBLR_CONSUMER_SECRET	Tumblr application consumer secret
TUMBLR_TOKEN	Tumblr application token
TUMBLR_TOKEN_SECRET	Tumblr application token secret
TUMBLR_BLOG	The part of the blog address before .tumblr.com
TUMBLR_CALLBACK	Optional will generate dist/jsonp.js file for JSONP with provided name of the function
TUMBLR_SKIP_JSON	Optional will NOT generate default json file

tumblr-cloud.config.js example

module.exports = {
  TUMBLR_BLOG: 'me-yanke',
  TUMBLR_SKIP_JSON: true,
  TUMBLR_CALLBACK: 'buildTumblrTagCloud'
}