Ouija

An inline commenting app for Ghost: http://ouija.io

Ouija brings inline commenting to your Ghost blog. See below for install instructions.

Quick Install

Paste the Ouija CSS into the <head> section of your theme's default.hbs file. <link rel="stylesheet" href="http://cdn.goinstant.net/external/ouija/latest/ouija.min.css"/>
Paste the following snippet before the closing </body> tag. Replace YOURACCOUNT/YOURAPP with your GoInstant details. Need a GoInstant connect URL? Sign up here.

{{#with post}}
  <script>
    window.ouija_connect_url = 'https://goinstant.net/YOURACCOUNT/YOURAPP';
    window.ouija_identifier = {{id}};
  </script>
  <script src="https://cdn.goinstant.net/v1/platform.min.js"></script>
  <script src="http://cdn.goinstant.net/external/ouija/latest/ouija.min.js"></script>
{{/with}}

Developer Setup

These instructions assume you already have a Ghost blog set up. If not, follow the Getting Started Guide for Developers from Ghost to set one up.

Clone this repo into the content/apps folder of your blog.
Copy the config/ouija.json.example to config/ouija.json and insert the name of your custom theme folder. If you're using the default theme Casper, you don't need to change anything.
Execute $ npm install
Execute $ gulp develop
Add the CSS to the <head> section of your blog's default.hbs file: <link rel="stylesheet" type="text/css" href="{{asset "css/ouija.css"}}" />
Paste the following snippet before the closing </body> tag. Replace YOURACCOUNT/YOURAPP with your GoInstant connect URL. Need a GoInstant connect URL? Sign up here.

{{#with post}}
  <script>
    window.ouija_connect_url = 'https://goinstant.net/YOURACCOUNT/YOURAPP';
    window.ouija_identifier = {{id}};
  </script>
  <script src="https://cdn.goinstant.net/v1/platform.min.js"></script>
  <script src="{{asset "js/ouija.js"}}"></script>
{{/with}}

How to create a GoInstant app

GoInstant is used to sync comments in real-time. You'll need to create a new app in GoInstant in order to use Ouija.

Created by GoInstant

If you haven't already, sign up for GoInstant. From the GoInstant dashboard, create a new app for Ouija.
Navigate to your new app's Authentication page.
Add your blog's URL as an Authorized origin. If you're working locally, you might want to add localhost, too.
Ouija commenters login through Twitter (for now). Turn on Twitter in the list of providers. Don't worry about the settings inside the Twitter box.
Copy the contents of config/acl.json to your app's ACL. This gives Ouija the correct permissions to run on your blog. You can change your app's ACL under Security.

How to configure Ouija

You can configure Ouija by putting vars on the window before the Ouija script loads.

List of available options

Option	Type	Default	Description
`window.ouija_identifier`	String	N/A	Ghost Post UID. A unique, static ID for the blog post.
`window.ouija_connect_url`	String	N/A	Your GoInstant connect URL. Used for connecting to the GoInstant platform.
`window.ouija_article_content`	String	`'.post-content'`	Selector for the section elements' parent.
`window.ouija_section_elements`	String	`'p, ol, :has(img)'`	Selector for which sections in the post should have a comment block.

Example

  <script>
    window.ouija_connect_url = 'https://goinstant.net/YOURACCOUNT/YOURAPP';
    window.ouija_identifier = {{id}};
    window.ouija_article_content = '.my-post-content' // Optional
    window.ouija_section_elements = 'p, ol' // Optional
  </script>
  <script src="https://cdn.goinstant.net/v1/platform.min.js"></script>
  <script src="http://cdn.goinstant.net/external/ouija/latest/ouija.min.js"></script>

ouija-io/ouija