@codesyntax/volto-countup-block
v1.2.0
Published
volto-countup-block: Volto add-on
Downloads
55
Readme
@codesyntax/volto-countup-block
Introduction
A simple block to show a rolling number.
Internally it supports the basic options of react-countup
It allows setting the start and end values, the duration of the counting, the start delay, decimal and thousands separator, ...
It also allows adding a title and selecting its heading and position.
Install
Add @codesyntax/volto-countup-block
to you project's or addon's dependencies and you are done. The block will be available.
Customization
You can restrict the list of allowed tags to render the title of the counter. Just modify the titleTags
property of the block in your config:
const applyConfig = (config) => {
// Own blocks
config.blocks.blocksConfig['countUpBlock']['titleTags'] = [
['h3', 'h3'],
['h4', 'h4'],
];
return config;
};
Development
You can develop an add-on in isolation using the boilerplate already provided by the add-on generator. The project is configured to have the current add-on installed and ready to work with. This is useful to bootstrap an isolated environment that can be used to quickly develop the add-on or for demo purposes. It's also useful when testing an add-on in a CI environment.
It's quite similar when you develop a Plone backend add-on in the Python side, and embed a ready to use Plone build (using buildout or pip) in order to develop and test the package.
The dockerized approach performs all these actions in a custom built docker environment:
- Generates a vanilla project using the official Volto Yo Generator (@plone/generator-volto)
- Configures it to use the add-on with the name stated in the
package.json
- Links the root of the add-on inside the created project
After that you can use the inner dockerized project, and run any standard Volto command for linting, acceptance test or unit tests using Makefile commands provided for your convenience.
Setup the environment
Run once
make dev
which will build and launch the backend and frontend containers. There's no need to build them again after doing it the first time unless something has changed from the container setup.
In order to make the local IDE play well with this setup, is it required to run once yarn
to install locally the required packages (ESlint, Prettier, Stylelint).
Run
yarn
Build the containers manually
Run
make build-backend
make build-addon
Run the containers
Run
make start-dev
This will start both the frontend and backend containers.
Stop Backend (Docker)
After developing, in order to stop the running backend, don't forget to run:
Run
make stop-backend
Linting
Run
make lint
Formatting
Run
make format
i18n
Run
make i18n
Unit tests
Run
make test
Acceptance tests
Run once
make install-acceptance
For starting the servers
Run
make start-test-acceptance-server
The frontend is run in dev mode, so development while writing tests is possible.
Run
make test-acceptance
To run Cypress tests afterwards.
When finished, don't forget to shutdown the backend server.
make stop-test-acceptance-server
Release
Run
make release
For releasing a RC version
Run
make release-rc