Giter VIP home page Giter VIP logo

explain-maker's Introduction

This repo is no longer in use and has been deleted in AWS. Since legacy explainers can now be edited inside Atom Workshop, there is no need for a separate tool.

Explainer Atom Editor

Architecture

Dynamo - Explainerserver - Explainerclient
                |
                | kinesis
                |
              CAPI

Tech stack:

  • Scala: 2.11.6, Scala.js: 0.6.5, Play: 2.4.0, Slick: 3.0.0
  • DynamoDB

Code Organization:

The sbt build file contains 3 modules

  • ExplainMakerServer Play application (server side)
  • ExplainMakerClient Scala.js application (client side)
  • ExplainMakerShared Scala code that you want to share between the server and the client.

Links:

Running Locally

Setup Nginx

To run explain maker locally you will need ngnix.

  1. Install nginx:
  • Linux: sudo apt-get install nginx
  • Mac OSX: brew install nginx
  1. Make sure you have a sites-enabled folder under your nginx home. This should be
  • Linux: /etc/nginx/sites-enabled
  • Mac OSX: /usr/local/etc/nginx/
  1. Make sure your nginx.conf (found in your nginx home) contains the following line in the http{} block: include sites-enabled/*;
  • you may also want to disable the default server on 8080
  1. Get the dev-nginx repo checked out on your machine

  2. Set up certs if you've not already done so (see dev-nginx readme)

  3. Configure the explain maker route in nginx

sudo /path/to/dev-nginx/setup-app.rb /path/to/explain-maker/nginx/nginx-mapping.yml

Setup Explainer

You'll need to create ~/.gu/explainer.local.conf, with the following fields:

DEV {
  pandomain {
    domain = "local.dev-gutools.co.uk"
  }
  kinesis {
    streamName {
      preview = "<preview kinesis name - only needed if kinesis publishing enabled>"
      live = "<live kinesis name- only needed if kinesis publishing enabled>",
      reindex-preview = "<reindex preview kinesis name, usually the same as the preview stream name - only needed if kinesis publishing enabled>"
      reindex-live = "<reindex live kinesis name, usually the same as the live stream name - only needed if kinesis publishing enabled>",
      elk  = "<elk kinesis stream - only needed if elk publishing enabled"
    }
  }
  capi.key = "CAPI-API-KEY"
  presence.endpoint = "PRESENCE-ENDPOINT-URL"
}
enable.kinesis.publishing=false
enable.elk.logging=false

include "application.conf"

Ensure that you have the required node version available. If you're using nvm (recommended), then run:

nvm install 6

Install dependencies and build CSS:

./setup.sh

Run the application

./run-explainer.sh

You can also watch the .scss files so they compile on change:

cd explainer-server
npm run watch

Access the User Interface

Explain Maker should now be found at https://explainers.local.dev-gutools.co.uk/.

In order to get the Panda authentication cookie needed to access Explain Maker, you might want to, for instance, first visit your local instance of Composer or Workflow. Alternatively (better option) you can run login.gutools for a seamless experience (you'll need Workflow AWS credentials from janus for this).

Note that, when running on local, the presence endpoint is the CODE Presence. This implies that to get Presence display correctly when running on local, you need to have a CODE Panda cookie (to get one just visit the CODE instance of Composer or Workflow).

Troubleshooting

NPM issues

These are usually to do with old dependencies being overwritten. Delete your npm_modules folder and clear the npm cache with:

cd explainer-server
rm -rf node_modules
npm cache clear

then reinstall them with:

cd ../
./setup.sh

This will pick up the correct Node version and reinstall all client side dependencies.

explain-maker's People

Contributors

ajwl avatar mchv avatar philmcmahon avatar reettaphant avatar rtyley avatar shaundillon avatar shtukas avatar sihil avatar

Stargazers

 avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Forkers

ajwl

explain-maker's Issues

More stuff

Wish list:

  • Delete if taken down
  • Preview an atom without publishing it.
  • Tag search

Optimist use of Content API to retrieve atom usage

The current code to retrieve atom usage, relies on 3 assumptions:

 def findExplainerUsages(explainerId: String): Future[Seq[String]] = {
    val searchQuery = SearchQuery().q(explainerId)
    client.getResponse(searchQuery).map(_.results.map(_.webUrl))
  }

This is unreliable and should move to the usage endpoint, which will work fine after explainer workaound is merged, and content reindexed.

UI Improvements

  • Split title, body blocks
  • Add labels to input areas
  • Show timestamp of when last saved
  • Add word count (probably just client side for now) - probably 2 warnings - too long for non-collapsible then just too long generally
  • Relevant links in toolbar
  • Add tagmanager/composer-commissioning styles
  • Make the default body blank (we should now be able to get away with inserting a character)

tracing atoms

Tracing atoms once they have been embedded - a quick search/record. To be able to search for stories that have certain atoms embedded in them. At the moment, search function will work to find atoms, but not show you which story they are in.

Get Presence to work

Presence was working-ish when Editorial Tools took over the code from Membership but it could not display the correct initials. This, because the wrapper code did not have access to the panda auth user. So I updated that code to make it work and the result is available at the branch

https://github.com/guardian/explain-maker/tree/ph-20160716-presence

Unfortunately it works on local but not on code. So the work item here is to make it to work so that we have presence enabled to the users.

Stuff left to do

Important:

  • Make it more obvious that the interactive link only works after people have clicked 'publish'
  • Switch to UK datetimes on the list of explainers
  • Add the ability to put bullets in explainers

Essential at some point:

  • Support reindexing from content api (using media atom lib - talk to Paul)
  • Put something in the default HTML block (Paul might be able to advise on this - should we include CSS?)
  • Discuss with frontend getting the explainers rendered by them rather than by the interactive
  • Get the explainer list to support paging
  • Numbered list

Phil will do when he gets back:

  • Wire up the thumbs up/down buttons into Ophan

Would be nice:

  • Grey out published button when the revision number of the version in capi is the same as the revision number of our version
  • Change word count to just say 'XXX words'.
  • When over 100 words and not expandable suggest that people should make it expandable.
  • Unbold by default
  • Use icons instead of text for editor styling functionalities
  • Display presence indicators on the dashboard

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.