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:
| 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. |
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.
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
-
install dependencies:
yarn -
development build:
yarn buildoryarn 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 by running
yarn buildoryarn watch - Open
cite-this/dist/demo/index.htmlin a browser
- Build
yarn package - Commit changes
git commit -am"V X.Y.Z" - Push to gh-pages branch
yarn deploy:demo - Update version number in
package.jsonand push to master
- Build
yarn package - Update version number in
package.json - Commit changes
git commit -am"V X.Y.Z" - Deploy to npm
npm publish - Update version number in
package.jsonand 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 pickerAdd easily overridable default stylingCustomisable button label- Check accessibility
- Tweak flyout animation
Implementation:
- (Higher Priority) Add support for all required types and fields - IN PROGRESS
Support multiple elements per pageBuild for Vue component useBuild 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