Social Blocks for Volto (@kitconcept/volto-social-blocks)

Addon implementing social network blocks for Plone projects with Volto.

Features

• Tweet block
• Instagram block
• Facebook block

Install

Create a new Volto project (you can skip this step if you already have one):

npm install -g yo @plone/generator-volto
yo @plone/volto my-volto-project --addon @kitconcept/volto-social-blocks
cd my-volto-project

Add @kitconcept/volto-social-blocks to your package.json:

"addons": [
    "@kitconcept/volto-social-blocks"
],

"dependencies": {
    "@kitconcept/volto-social-blocks": "*"
}

Download and install the new add-on by running:

yarn install

Start volto with:

yarn start

Test it

Go to http://localhost:3000/, login, create a new page. The social blocks will show up in the Volto blocks chooser.

Custom Privacy Consent Notice

You can register a custom React component to check for privacy consent and show the user a prompt to confirm accessing the external services. This is useful to meet European GDPR requirements, for example.

config.registerComponent({
  name: 'CheckPrivacyConsent',
  component: IfConfirm,  # use your own component here
});

The @kitconcept/volto-dsgvo-banner addon provides one possible implementation of the CheckPrivacyConsent component.

Development

The development of this add-on is done in isolation using a new approach using pnpm workspaces and latest mrs-developer and other Volto core improvements. For this reason, it only works with pnpm and Volto 18 (currently in alpha)

Requisites

• Volto 18 (2024-03-21: currently in alpha)
• pnpm as package manager

Make convenience commands

Run make help to list the available commands.

help                                 Show this help
install                              Installs the dev environment using mrs-developer
i18n                                 Sync i18n
format                               Format codebase
lint                                 Lint Codebase
test                                 Run unit tests
test-ci                              Run unit tests in CI
start-backend-docker                 Starts a Docker-based backend for developing
start-test-acceptance-frontend-dev   Start acceptance frontend in dev mode
start-test-acceptance-frontend       Start acceptance frontend in prod mode
start-test-acceptance-server         Start acceptance server
test-acceptance                      Start Cypress in interactive mode
test-acceptance-headless             Run cypress tests in headless mode for CI

Development Environment Setup

Install package requirements

pnpm i
make install
pnpm i

Start developing

Run (in separate terminal sessions)

Start backend server

make start-backend-docker

Start frontend

pnpm start

Linting

Run ESlint, Prettier and Stylelint

make lint

Formatting

Run ESlint, Prettier and Stylelint in fix mode

make format

i18n

Extract the i18n messages to locales

make i18n

Unit tests

Run unit tests

make test

Run Cypress tests

Run (in separate terminal sessions)

Start the frontend in dev mode

make start-test-acceptance-frontend-dev

Start the backend acceptance server

make start-test-acceptance-server

Start the Cypress interactive test runner

make test-acceptance

Credits

The development of this add-on was sponsored by kitconcept GmbH.

License

The project is licensed under the MIT license.