ff-stream-web

commit 1edf5043a01e9a0a65c42aa2e772510c7d07892c
parent 31f96fea6d1a6a18e42dfa42ab7720697dfa0881
Author: Konstantin Tarkus <koistya@gmail.com>
Date:   Tue, 12 May 2015 12:03:23 +0300

Merge pull request #109 from koistya/docs-disqus

Add How to Integrate Disqus manual
Diffstat:
M
README.md
 | 
2
++
A
docs/recipes/how-to-integrate-disqus.md
 | 
77
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

2 files changed, 79 insertions(+), 0 deletions(-)
diff --git a/README.md b/README.md
@@ -16,6 +16,8 @@
 ### Documentation
 
 - [React Style Guide](./docs/react-style-guide.md)
+- Recipes
+  - [How to Integrate Disqus](./docs/recipes/how-to-integrate-disqus.md)
 
 ### Directory Layout
 
diff --git a/docs/recipes/how-to-integrate-disqus.md b/docs/recipes/how-to-integrate-disqus.md
@@ -0,0 +1,77 @@
+## How to Integrate [Disqus](https://disqus.com)
+
+https://disqus.com/admin/create/
+
+#### `DisqusThread.js`
+
+```js
+import React, { PropTypes } from 'react';
+
+const SHORTNAME = 'example';
+const WEBSITE_URL = 'http://www.example.com';
+
+class DisqusThread {
+
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    path: PropTypes.string.isRequired
+  };
+
+  shouldComponentUpdate(nextProps) {
+    return this.props.id !== nextProps.id ||
+      this.props.title !== nextProps.title ||
+      this.props.path !== nextProps.path;
+  }
+
+  componentDidMount() {
+    if (window.DISQUS === undefined) {
+      var script = document.createElement('script');
+      script.async = true;
+      script.src = 'https://' + SHORTNAME + '.disqus.com/embed.js';
+      document.getElementsByTagName('head')[0].appendChild(script);
+    } else {
+      window.DISQUS.reset({reload: true});
+    }
+  }
+
+  render() {
+    let { id, title, path, ...other} = this.props;
+
+    /* eslint-disable camelcase */
+    window.disqus_shortname = SHORTNAME;
+    window.disqus_identifier = id;
+    window.disqus_title = title;
+    window.disqus_url = WEBSITE_URL + path;
+    /* eslint-enable camelcase */
+
+    return <div {...other} id="disqus_thread" />;
+  }
+
+}
+
+export default DisqusThread;
+```
+
+#### `MyComponent.js`
+
+```js
+import React from 'react';
+import DisqusThread from './DisqusThread.js';
+
+class MyComponent {
+
+  render() {
+    return (
+      <div>
+        <DisqusThread id="e94d73ff-fd92-467d-b643-c86889f4b8be"
+                      title="How to integrate Disqus into ReactJS App"
+                      path="/blog/123-disquss-integration" />
+      </div>
+    );
+  }
+
+}
+
+export default MyComponent;
+```