CiteThis

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

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

Installation & Usage

Installation

CiteThis can be installed from NPM yarn add cite-this

Usage

Vue Component Plugin

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);

Static Citation Widget

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.

Options

Resource types

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:

| Type | Description | | ------- | ----------- | | ARTICLE | An article from a journal or magazine. | BOOK | A book with an explicit publisher. | MISC | For use when nothing else fits. | REPORT | A report published by a school or other institution, usually numbered within a series.

Field types

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:

| Type | Description | | ------------- | ----------- | | address | Publisher's address | author | The name(s) of the author(s) | editor | The name(s) of the editor(s) | institution | The institution that was involved in the publishing, but not necessarily the publisher | journal | The journal or magazine the work was published in | month | The month of publication (or, if unpublished, the month of creation) | number | The "(issue) number" of a journal, magazine, or report, if applicable. | pages | Page numbers | publisher | The publisher's name | series | The series of books the book was published in | title | The title of the work | url | The URL of the resource | volume | The volume of a journal or multi-volume book | year | The year of publication (or, if unpublished, the year of creation)

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.

Customising button text

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

Development

Reference documentation

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

Scripts

• 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

Build

Running locally

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

Demo build

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

Production build

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

Code Style

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

Tests

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

Enhancement Backlog

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