A plugin widget to generate citation files (.ris, .bib, .enw).

Demo https://jesschampion.github.io/citethis/

CiteThis can be installed from NPM yarn add cite-this

To use the citation plugin in your vue apps, import the plugin and install it with Vue.use

import CiteThisVueComponent from '../src/CiteThisVueComponent';
...
Vue.use(CiteThisVueComponent);

include 'cite-this.js' in your html document <script type=text/javascript src=../cite-this.js></script> or import into your package javascript import 'cite-this';

Add citation widgets to your html by creating elements with the class cite-this e.g:

<div class="cite-this"
    label="CITE THIS"
    author="Example Author"
    title="Example Document"
    type="MISC"
    year="2017"/>

MULTIPLE ELEMENT SUPPORT Multiple widgets can be added to the same page, by creating multiple html fragments as above. However in this case, the anchor element must each have a unique ID in addition to the cite-this class.

The type of resource being referenced must be specified in the type attribute. The

e.g.

<div class="cite-this"
    ...
    type="BOOK"/>

The currently supported types are:

Fields can be added to a citation by adding attribute/value pairs to the markup. e.g.

<div class="cite-this"
    type="MISC"
    ...
    author="Example Author"
    title="Example Document
    year="2017"/>

The following attribute types are currently supported:

Note: Some resource types specify required fields for particular file types. Validating that required fields are specified is currently not supported by the plugin. See 'Reference documentation' for details.

Custom button text can be added by including

label="CITE THIS"

as an attribute on the static widget or binding

:label="'CITE THIS'"

on the Vue component

• BibTeX .BIB format
• EndNote .ENW format
• Research Information Systems, .RIS format

• install dependencies: yarn

• development build: yarn build or yarn watch

• run linters: yarn lint

• build for production with minification and view bundle analyzer report: yarn package

• push dist/demo sub folder to github pages branch: yarn deploy:demo

1. Build by running yarn build oryarn watch
2. Open cite-this/dist/demo/index.html in a browser

1. Build yarn package
2. Commit changes git commit -am"V X.Y.Z"
3. Push to gh-pages branch yarn deploy:demo
4. Update version number in package.json and push to master

1. Build yarn package
2. Update version number in package.json
3. Commit changes git commit -am"V X.Y.Z"
4. Deploy to npm npm publish
5. Update version number in package.json and push to master

There are linters set up to enforce code style, run with yarn lint.

JavaScript unit tests are implemented with Jest and vue-test-utils The specs are located in test/unit/specs and can be run with yarn test Test coverage can be reported by running yarn test:coverage

VUE best practice

• Refactor CiteThis to separate ui into a presentational component
• Use private properties https://vuejs.org/v2/style-guide/#Private-property-names-essential
• Update eslint vue plugin when 4.1 available. Set script indent to remove lint errors.

UI:

• Flyout style picker
• Add easily overridable default styling
• Customisable button label
• Check accessibility
• Tweak flyout animation

Implementation:

• (Higher Priority) Add support for all required types and fields - IN PROGRESS
• Support multiple elements per page
• Build for Vue component use
• Build and deploy
• Validate required fields for type.

Tidy up:

• Test coverage
• Hidden link for downloads (is there a nicer way to do this that won't require timeout)
• Compile styles with sass or postcss then tidy up, add stylelint
• Standardise error messages console.error vs throwing error