Pugin Components
Pugin Components is a front-end dust component library for beta.parliament.uk. It is built on Shunter.
Contents
- Requirements
- Quick start
- Running the application
- Using the Library
- Running tests on single files or directories
- i18next Note
- Contributing
- License
Requirements
Pugin Components requires the following:
- NodeJS - click here for the exact version
- NPM
Quick start
git clone https://github.com/ukparliament/pugin-components.git
cd pugin-components
npm install
npm cache clean --force && npm test
Running the application
To run the application locally, run:
make develop
This runs foreman that starts the app and shunter erve
The application should now be available at http://localhost:5500.
Using the Library
To use the package, you need to add it and save it into the list of dependencies in your package.json file:
npm install --save pugin-components
Then go to your shunter application's config (for example app.js or index.js). Add modules to the file, like the example below:
const app = shunter({
path: {
themes: __dirname
},
routes: config.routes,
jsonViewParameter: 'json',
modules: ['pugin-components']
});
You should now be able to call on the components as if they were in a view folder in your root directory.
Updating versions of Pugin assets (CSS/JS)
The make build
task compiles the css and javascript assets from Pugin. This task is used when you would like to specify a different tag release of Pugin as to what was originally installed.
For example, in the package.json amend parliamentuk-pugin
to another tag release:
"parliamentuk-pugin": "git+https://github.com/ukparliament/parliament.uk-pugin.git#1.11.3",
then run:
"make build"
After which you then run npm update
in your local application.
Running tests on single files or directories
The npm run testfocus
command will let you specify a directory or file of tests to be run.
For example, to run one test:
npm run testfocus test/unit/components/card/generic.spec.js
Or to run a directory of tests:
npm run testfocus test/unit/components/card/
i18next Note
Passing in data to the translation with double moustaches sanitises input. If you wish to pass in a URL or other data that you do not wish to be sanitised, for it be rendered correctly you must prefix the variable name with a hyphen. For example:
Double moustaches
The following translation:
"cookie-policy": "<a href='{{link}}'>Cookie Policy</a>"
Will be rendered incorrectly as:
<a href='*&meta*&cookie'>Cookie Policy</a>
Prefixing the variable name with a hyphen
The following translation:
"cookie-policy": "<a href='{{-link}}'>Cookie Policy</a>"
Will be rendered correctly as:
<a href='/meta/cookie'>Cookie Policy</a>
Contributing
If you wish to submit a bug fix or feature, you can create a pull request and it will be merged pending a code review.
- Fork the repository
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Ensure your changes are tested using Mocha
- Create a new Pull Request
License
Pugin Components is licensed under the MIT.