Git Product home page Git Product logo

ember-disqus's Introduction

Ember Disqus Build Status

ember-disqus provides an easy way to integrate Disqus comments and comment counts with your Ember CLI app.

This Ember addon also lazy-loads only the required parts of the Disqus API to improve performance of your app.

Installation

ember install ember-disqus

Then add your Disqus forum's shortname to your config/environment.js file:

module.exports = function(environment) {
  var ENV = {

  /* ... */

    disqus: {
      shortname: 'your-shortname-here'
    }
  }
}

Usage

Displaying Comments

Disqus' main functionality is to display comments relating to a particular page - that being a 'thread' of comments. Disqus highly reccomends each thread be identified using a unique identifer instead of other means like the URL incase your URLs should change or you want to show the same thread on multiple routes.

Thus, this addon maintains those standards and requires a unique thread identifier to be passed to the comment component.

To render the comment thread for any topic:

{{disqus-comments identifier=post.title}}

It's as simple as that!


For advanced functionality, you can pass an optional title argument, which makes working with threads on Disqus.com a bit easier. By default Disqus will use the identifier or the page URL for the thread title. However, you can override this functionality using the title argument. For example:

{{disqus-comments identifier=post.id title=post.title}}

The {{disqus-comments}} component also accepts a categoryId property. This is used by Disqus to assign specific threads to categories. This is also optional. Please note, Disqus only supports the use of categories once you have manually added them in your Disqus options.

{{disqus-comments identifier=postId categoryId=category.id}}

For more information on the individual configuration variables please see the Disqus docs.

Displaying comment counts

Like the other Disqus implementations in this plugin, the {{disqus-comment-count}} requires an identifier argument. For example:

{{disqus-comment-count identifier=post.title}}

This identifier must be the same identifier used to display the comment thread you are referencing

By default, this component will render the comment count for the specified comment thread in a lowly <span>. Simple!

Disqus automatically renders the result with an associated noun. For example 8 Comments or 1 Comment. However, you can turn off this functionality and just show the digits by setting the removeNoun property to true:

{{disqus-comment-count identifier=post.title removeNoun=true}}

For advanced customization of the text see your Disqus Admin --> Settings page.

Lazy Loading

This addon tries to improve page performance by waiting to request Diqsus' assets until they are needed and the current document has finished loading.

In addition, this addon only loads the parts of the Disqus API that you need. If you don't use the comment count features then you won't load the comment count API!

You can disable the lazy loading functionality by passing an additional option in your config/environment.js file:

module.exports = function(environment) {
  var ENV = {

  /* ... */

    disqus: {
      shortname: 'your-shortname-here',
      lazyLoad: false
    }
  }
}

Development

  • git clone https://github.com/sir-dunxalot/ember-disqus.git
  • ember s
  • ember test or /tests route

ember-disqus's People

Contributors

ughitsaaron avatar he9qi avatar ember-tomster avatar

Watchers

 avatar Lin He avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.