vj-paper

Dropbox Paper to Schema Tool

Build and adjust layout in Dropbox Paper using ArchieML then generate schema in Developer Scaffold Project.

Requirements

1. Dropbox Full API Token, get it by creating an App in Dropbox Developer Console. When prompted for app type, choose "Full Dropbox".

How to use

In project folder, run:

> npx vj-paper -t <Dropbox API Token> <Dropbox Paper URL>

If everything is alright, this will generate a CSV file source/app/vocabs/spreadsheets.csv. Copy the content to your vocabs spreadsheet then run npm run vocabs to update config.json (and get other translations).

..or just edit config.json with correct language as the command also generates a vocabs JSON file based on Paper's content.

The command also generates app.sample.[hbs|js|scss] files to show how to use the generated content.

Call npx vj-paper without any argument to see other options.

Sample Papers

Might be easier to clone and edit those instead of starting from scratch:

• Timeline Demo
  • Components: timeline, text, figure, smp, youtube
• How the Sri Lanka attacks unfolded
  • Components: timeline, text, figure, twitter
• The row that led to the march of the million in Hong Kong
  • Components: timeline, text, figure
• Article Demo
  • Components: text, figure, "article" component is not included.

Available Components

This tool has some Handlebars components built-in:

• figure - Image
• smp - BBC SMP Player
• text - <p>
• timeline - A timeline container, must be on root component
• twitter - Twitter embed
• youtube - YouTube embed
• paper - Auto-generated schema

Built-in components will be copied to your project, so you can hack them later. They are also ready to use out of the box by importing components/paper/paper.[hbs|js|scss] to your app files.

Just like Simple Framework, all Handlebars components in your project are available to be used in Paper but you have to import them to your app files by yourself.

Useful info

• Put Dropbox token in env.json to avoid repeating -t option, keys: dropbox.token: "<token>".
• Figure can download images from Dropbox to project's assets folder. On the Dropbox image, use "Create link" then use that generated link as figure's src.

To Do

• Support for generic div & article container so can use the tool for other than timeline out of the box
• All Sass should be imported in paper.scss, not just built-in component
• Enable custom plugins