From d3931db2851a2075e7cbdeb1f4466d85d80af726 Mon Sep 17 00:00:00 2001 From: Vinh Date: Wed, 2 Oct 2019 02:27:00 +0700 Subject: [PATCH] =?UTF-8?q?[CORL-181]=C2=A0Add=20docs=20for=20comment=20co?= =?UTF-8?q?unt=20integration=20(#2598)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: add docs for comment count integration * docs: update count docs * chore: improve integration docs --- docs/_config.yml | 2 ++ docs/source/version-5-counts.md | 38 ++++++++++++++++++++++++++++ docs/source/version-5-integrating.md | 32 ++++++++++++----------- 3 files changed, 57 insertions(+), 15 deletions(-) create mode 100644 docs/source/version-5-counts.md diff --git a/docs/_config.yml b/docs/_config.yml index ace01188c..e564f618a 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -94,6 +94,8 @@ sidebar: url: /v5/integrating/cms/ - title: Single Sign On url: /v5/integrating/sso/ + - title: Comment Count + url: /v5/integrating/counts/ - title: API children: - title: GraphQL Overview diff --git a/docs/source/version-5-counts.md b/docs/source/version-5-counts.md new file mode 100644 index 000000000..ec566a53d --- /dev/null +++ b/docs/source/version-5-counts.md @@ -0,0 +1,38 @@ +--- +title: Comment Count Integration +permalink: /v5/integrating/counts/ +--- + +Add the `count.js` script to your `html` tree. On a page that includes the _Stream Embed_ this is done for you automatically, however for best performance we recommend to include it into the `` tag. + +```html + +``` + +> **NOTE:** Replace the value of `{% raw %}{{ CORAL_DOMAIN_NAME }}{% endraw %}` with the location of your running instance of Coral. + +Insert an html element with the class `coral-count` and configure it using `data-coral-*` attributes. + +```html + +``` + +After successful injection it will become: + +```html + + 5 + Comments + +``` + +### Available `data-coral-*` attributes + +Set the class of your html element to `coral-count` in order to get story counts. The following `data-coral-*` attributes will configure the output: + +- `data-coral-id` – The id of the story of which counts should be injected. +- `data-coral-url` – The url of the story of which counts should be injected. +- `data-coral-notext` – If set to `"true"`, only the count number will be injected + +Either `data-coral-id` or `data-coral-url` should be set. If none are provided the story url +will be retrieved from the [canonical url reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Choosing_between_www_and_non-www_URLs#Using_%3Clink_relcanonical%3E) `` or inferred using the current page url. diff --git a/docs/source/version-5-integrating.md b/docs/source/version-5-integrating.md index f4755eef8..fd4c0c420 100644 --- a/docs/source/version-5-integrating.md +++ b/docs/source/version-5-integrating.md @@ -3,25 +3,27 @@ title: Integrating on your site permalink: /v5/integrating/cms/ --- -With Coral setup and running locally you can test embeding the comment stream with this sample embed script: +With Coral setup and running you can embed the comment stream with this sample embed script: ```
+ (function() { + var d = document, s = d.createElement('script'); + var url = '{{ CORAL_DOMAIN_NAME }}'; + s.src = '//' + url + '/assets/js/embed.js'; + s.async = false; + s.defer = true; + s.onload = function() { + Coral.createStreamEmbed({ + id: "coral_thread", + autoRender: true, + rootURL: '//' + url, + }); + }; + (d.head || d.body).appendChild(s); + })(); +`; ``` > **NOTE:** Replace the value of `{% raw %}{{ CORAL_DOMAIN_NAME }}{% endraw %}` with the location of your running instance of Coral.