Skip to content

eagerterrier/ouija

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Ouija Banner

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

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

Quick Install

  1. 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"/>

  2. 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.

  1. Clone this repo into the content/apps folder of your blog.

  2. 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.

  3. Execute $ npm install

  4. Execute $ gulp develop

  5. 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"}}" />

  6. 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
  1. If you haven't already, sign up for GoInstant. From the GoInstant dashboard, create a new app for Ouija.

  2. Navigate to your new app's Authentication page.

  3. Add your blog's URL as an Authorized origin. If you're working locally, you might want to add localhost, too.

  4. 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.

  5. 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>

License

© 2014 GoInstant Inc., a salesforce.com company. Licensed under the BSD 3-clause license.

GoInstant

About

Communicating with ghosts

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • CSS 52.6%
  • JavaScript 47.4%