Publisher Demo

This is a very simple demo of how to integrate PSI into a partner site.

Running the demo

To start the demo, run yarn dev. The demo server will then run on http://localhost:3000.

This will show a menu that allows you to choose between a simple demo that renders a teaser based entirely on information embedded in your content, and a more complex demo that fetches metadata from an API from the PSI system.

Assumptions and Limitations

This demo makes the following assumptions: * You are rendering the site using server-side React components * You want to render the teaser yourself rather than dropping in an iframe with a PSI-rendered teaser * The teaser is for a question (rather than a topic) * The link between content and question is made by storing the question key in the CMS, or as a tag within the content

How it works

Broadly speaking, this implementation works as follows: * The questionKey for the linked question is embedded in the article in some way. In this case, we just make it a field in the data structure. * We call api/questions/getMetadata to get metadata about the question, including it's title, and featured comment. * The same code that renders the article page also renders the teaser. * We include a link to https://psi.newpublic.org/js/psi-sidebar.js in the page. This code manages opening and closing the sidebar.

Possible extensions

There are various things this demo doesn't do that a more complete system might want to do: * Add teaser overlays on top of video content, associated with particular time stamps * Show teasers for topics as well as questions * If a user is already logged in on the host site, pass a JWT to the sidebar, so that it can log in automatically, rather than the user having to click a login button